前端 HTML基础

前端三大利器概述

学习前端，不得不学习前端中的三大利器：html + css + javascript。那么这三个组件分别起到什么作用呢？以人体为例，单单具有html属性的人，只是一个裸体的人偶(理解成充气娃娃加工的第一步也行...好邪恶)。这个时候无疑很丑陋，因此需要给这个人偶穿上华丽的外衣，也就是CSS。通过CSS来对这个人的外貌特征、服装色彩进行装饰。装饰之后，OK，基本上可以看了，但是还是缺少了一点人类的基本特征：灵动性。那么js就出马了。js赋予这个人偶能动的机制。比如，当你吻人偶时，它会拥抱你。当你给人偶挠痒痒时，它会呵呵直笑。当你XXXX时，它会亚麻跌...好吧，又邪恶了......其实就是这么个意思：html是裸露的人体结构，css是人华丽的外衣，js是人交互的灵魂。学会这三大利器，你的前端页面，就能实现各种狂拽炫酷吊炸天的特效和交互效果，完成各种需求了。

HTML概述

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

　　HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

　　HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

1.HTML基本结构

HTML代码块基本分为三大部分，外加声明部分。其中声明部分不是必须的。

<!DOCTYPE html> <!-- 声明部分 -->

<html lang="en"> <!-- 主要部分1：html根标签 -->

<head> <!-- 主要部分2：html头部标签 -->

    <meta charset="UTF-8">

    <title>{{ title }}</title>

</head>

<body>  <!-- 主要部分3：html内容主体标签 -->

    <!--  内容主体 -->

</body>

</html>

2.HTML标签

从上面的html基本三大部分来看，会发现好多<>的标签，这些标签就是HTML中最重要的元素：标签。

　　标签从写法上，可以分为：自闭合标签和闭合标签。

2.1.自闭和标签和闭合标签

自闭合标签和闭合标签的区别就是，自闭合标签不是成对出现的，本身会进行闭合。比如：<input />以"/"进行自我闭合。而闭合标签则比如:<div></div>成对出现来闭合。

　　　　常见的自闭合标签：<img /><br /><input /><li><p /><link />

2.2.块级标签和内联标签

HTML标签从内容上，可以分为：块级标签和内联标签(也叫行内标签)

　　他们的区别：

块级元素一般用来搭建网站架构、布局、承载内容
内联元素一般用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。
它们可以互相转换。display:inline|block
块级元素的特点：每一个块级元素都识从一个新行开始显示，其后的元素需要另起一行。
内敛标签的特点:位置多少就占用多少,不会另起一行.

　　Ps:写HTML时要额外注意：不能把块元素放在行内(inline)元素中。

块元素(block element)

　　* address - 地址

　　* blockquote - 块引用

　　* center - 举中对齐块

　　* dir - 目录列表

　　* div - 常用块级容易，也是css layout的主要标签

　　* dl - 定义列表

　　* fieldset - form控制组

　　* form - 交互表单

　　* h1 - 大标题

　　* h2 - 副标题

　　* h3 - 3级标题

　　* h4 - 4级标题

　　* h5 - 5级标题

　　* h6 - 6级标题

　　* hr - 水平分隔线

　　* isindex - input prompt

　　* menu - 菜单列表

　　* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

　　* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

　　* ol - 排序表单

　　* p - 段落

　　* pre - 格式化文本

　　* table - 表格

　　* ul - 非排序列表   

内联元素(inline element)

　　* a - 锚点

　　* abbr - 缩写

　　* acronym - 首字

　　* b - 粗体(不推荐)

　　* bdo - bidi override

　　* big - 大字体

　　* br - 换行

　　* cite - 引用

　　* code - 计算机代码(在引用源码的时候需要)

　　* dfn - 定义字段

　　* em - 强调

　　* font - 字体设定(不推荐)

　　* i - 斜体

　　* img - 图片

　　* input - 输入框

　　* kbd - 定义键盘文本

　　* label - 表格标签

　　* q - 短引用

　　* s - 中划线(不推荐)

　　* samp - 定义范例计算机代码

　　* select - 项目选择

　　* small - 小字体文本

　　* span - 常用内联容器，定义文本内区块

　　* strike - 中划线

　　* strong - 粗体强调

　　* sub - 下标

　　* sup - 上标

　　* textarea - 多行文本输入框

　　* tt - 电传文本

　　* u - 下划线

　　* var - 定义变量   

可变元素

　　<strong>可变元素为根据上下文语境决定该元素为块元素或者内联元素。</strong>

　　* applet - java applet

　　* button - 按钮

　　* del - 删除文本

　　* iframe - inline frame

　　* ins - 插入的文本

　　* map - 图片区块(map)

　　* object - object对象

　　* script - 客户端脚本  

常见的块级和内联标签

这里需要注意一点：当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让他也有每次都从新行开始的属性。

3.HTML语法

想了解更多HTML语法，可以参照：HTML语法英文版、HTML编码规范

3.1.HTML的代码注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

<!-- HTML中注释 -->

/* css中注释 */

// js中注释

3.2.HTML的标签组成

一个HTML的标签，通常由标签名，属性，内容三要素组成。

　　属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序。

　　更多更全的属性信息，请查看：属性大全

4.HTML中常用标签之声明

使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

<!DOCTYPE html>

5.HTML中常用标签之Head头部标签

在<head></head>标签中，常用的标签主要包括：<meta /> | <title></title> | <link /> |

meta标签

meta标签定义关于 HTML 文档的元信息，主要功能包括：设置页面编码、刷新和跳转、关键词(方便被收录)、描述等功能呢

- meta 标签

    - 页面编码

    ```html

        <meta charset="UTF-8" />

        <meta http-equiv=“content-type” content="text/html;charset=utf-8"/>

    ```

    - 刷新和跳转

    ```html

         例：2秒刷新一次 :<meta http-equiv="Refresh" Content="2"/>

         例：进入网站2秒后跳转页面：<meta http-equiv="Refresh" Content="2"; Url="http://www.baidu.com" />

    ```

    - 关键词

        - name="keywords"  方便被爬虫收录

    ```html

         例：<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" />

    ```

    - 描述

        - name="description" 描述信息

    ```html

         例：<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />

title标签

title标签用来定义文档的标题。

<title>学而思教育</title>

link标签

link标签用来定义文档与外部资源的关系。比如：引入css文件、设置网站图标

- 引入css

 < link rel="stylesheet" type="text/css" href="css/common.css"/>

- 设置网站图标

 <link rel="shortcut icon" href="images/favicon.ico">

style标签

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{    /*设置class为c1的元素样式*/

            color:red;

            background-color: #3af5ff;

            font-size: 32px;

            height: 150px;

            width:  500px;

        }

    </style>

</head>

HTML中常用标签之Body主题标签

p标签

P标签用来标记一个段落，段落的上下会有一定的间距

<p>This is some text in a very short paragraph</p>

br标签

换行标签

我是一个<br />大头兵

实际效果：

我是一个

大头兵

a标签

该标签定义超链接，用于从一张页面链接到另一张页面，或者从页面的某个位置跳转到当前页面的指定位置

- 直接跳转

 <a  href="http://www.baidu.com"></a>

- 新建tab跳转

 <a  href="http://www.baidu.com" target="_blank"></a>

- 锚:实现页面内跳转到指定位置

 <a href="#i1">第一章</a> <!--寻找页面中id=i1的标签，将其标签内容放置在页面顶部 -->

  <div id="i1">跳转到这里O</div>

h标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>这是标题 1</h1>

<h2>这是标题 2</h2>

<h3>这是标题 3</h3>

<h4>这是标题 4</h4>

<h5>这是标题 5</h5>

<h6>这是标题 6</h6>

input标签与form标签

<input> 标签用于搜集用户信息，主要用于同用户进行交互，经常与<form>标签一起使用。
input标签根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

- input

       - type="text"    文本类型

                 <p>用户名：<input type="text" /></p>

       - type="password" 密码类型

                 <p>密码：<input type="password" /></p>

       - type="email"   邮箱类型,提供自动检测地址合法性功能

                 <p>邮箱：<input type="email" /></p>

       - type="checkbox" 复选框，相同类型的复选框，需要加name来区分，且name必须相同

                 男1<input type="checkbox" name="gender"/>

                 男2<input type="checkbox" name="gender"/>

                 男3<input type="checkbox" name="gender"/>

                 男4<input type="checkbox" name="gender"/>

                 男5<input type="checkbox" name="gender"/>

       - type="radio" 单选按钮,如果要进行提交，除了需要name来进行区分外，还需要有value属性

                 男<input type="radio" name="sex" value="1"/>

                 女<input type="radio" name="sex" value="1"/>

       - type="file" 如果上传文件，需要在form属性中加enctype="multipart/form-data"

       文件1：<input type="file" />

       文件2：<input type="file" name="up" enctype="multipart/form-data"/>

       - type="button"  按钮

             普通按钮<input type="button" value="按钮" />

       - type="submit"  提交当前表单

             提交按钮<input type="submit" />

       - type="reset" 重置表单,清空表单中内容

             重置按钮<input type="reset" />

select标签

select标签用来创建单选或多选菜单。注意在需要提交至相应接口时，需要给select标签一个name属性值，方便后端程序接收。

- option 定义列表中的可用选项

    <select name="city">  <!-- 单选框-->

        <option value='1'>上海</option>

        <option value='2'>北京</option>

        <option value='3'>山西</option>

        <option value='4'>重庆</option>

    </select>

- multiple 规定可选择多个选项，规定下拉列表中可见选项的数目。多选提交时，后台收到的value是一个list对象，包含多个value

    <select multiple size="10"> <!-- 开启多选，并默认展示10个-->

            <option>上海</option>

            <option>北京</option>

            <option>山西</option>

            <option>重庆</option>

    </select>

- optgroup  分组选择     <!--分组单选 -->

     <select size="10"><!--默认显示10个 -->

        <optgroup label="上海">

            <option>浦东</option>

            <option>虹桥</option>

        </optgroup>>

        <optgroup label="其他地区" size="10">

        <option>北京</option>

        <option>山西</option>

        <option>重庆</option>

         </optgroup>

      </select>

textarea标签

textarea标签用于定义多行的文本输入控件。可以用cols和rows属性来设计输入框

<textarea cols="7" rows="4" name="extra">多行文本输入框</textarea>

form标签

form标签用于为用户输入创建 HTML表单，与input标签来协同使用。

　　form标签有三个重要的属性，action、method以及enctype。

　　action规定当提交表单时向何处发送表单数据。

　　method规定用于发送 form-data 的 HTTP 方法。

　　enctype规定在发送表单数据之前如何对其进行编码，仅在需要上传文件数据时使用，也是一个非常重要且容易遗忘的属性。

<form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">

    用户名：<input type="text" name="query"/>

    密码：<input type="password" name="pwd"/>

    男<input type="radio" name="gender" value="1"/>

    女<input type="radio" name="gender" value="0"/>

    <p>爱好：

        篮球<input type="checkbox" name="favor" value="0">

        足球<input type="checkbox" name="favor" value="1">

        乒乓球<input type="checkbox" name="favor" value="2">

    </p>

    <select name="province" multiple size="10">

        <option value="0">上海</option>

        <option value="1">北京</option>

        <option value="2">山西</option>

        <option value="3">重庆</option>

    </select><br/>

    上传文件：<input type="file" name="up" enctype="multipart/form-data"/><br/>

    <input type="submit" value="提交"/>

</form>

label标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性的属性值应当与相关元素的 id 属性相同。

<html>

<body>

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>

<label for="male">Male</label>

<input type="radio" name="sex" id="male" />

<br />

<label for="female">Female</label>

<input type="radio" name="sex" id="female" />

</form>

</body>

</html>

ul ui标签

定义无序 HTML 列表

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

ol li 标签

定义有序HTML列表，可以用type属性来规定在列表中使用的标记类型【1，A，a，I，i】，start规定有序列表的起始值。

<ol start="3" type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

dl dt dh标签

<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<html>

<body>

<h2>一个定义列表：</h2>

<dl>

   <dt>计算机</dt>

   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>

   <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

</body>

</html>

最终效果：可以看到dd与dt相比，有了缩进。

table标签

table标签用来定义HTML表格。

- <thead></thead> 用来定义标题

- tr 表示一行

- td 表示一列

- th 用来取代td，实现自动加粗功能

- <tbody></tbody> 表格主体内容写在tbody中

- <tfoot></tfoot> 表格底部，也可以不写内容

一个完整的table格式应该如下：

<table border="1">

    <thead>

        <th>标题1</th>

        <th>标题2</th>

    </thead>

    <tbody>

        <tr>

            <td>3</td>

            <td>4</td>

        </tr>

        <tr>

            <td>3</td>

            <td>4</td>

        </tr>

    </tbody>

    <tfoot><!--可有可无-->

        <th>结尾1</th><!--可有可无-->

        <th>结尾2</th><!--可有可无-->

    </tfoot>

</table>

　table中的td/th标签常用rolspan和rowspan属性来合并单元格。

fieldset标签

该标签主要用来装饰form表单。<legend> 标签为 fieldset 元素定义标题

<!DOCTYPE HTML>

<html>

<body>

<form>

  <fieldset>

    <legend>健康信息</legend>

    身高：<input type="text" />

    体重：<input type="text" />

  </fieldset>

</form>

</body>

</html>

最终效果图：

iframe标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。就是在当前页面嵌套其他页面的内容。<iframe></iframe>标签内部，用来填充一些说明或者描述信息，并不会显示在页面。