1、什么是HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
2、标签
2.1 基础概念
- HTML标签是HTML语言中最基本的单位，标签不区分大小写，由尖括号包裹关键字构成，例如<html>test</html> 叫做html标签，<div>test</div>叫做div标签，以此类推。
- 类似<meta>这种就叫做自闭合标签，类似<a></a>就叫做主动闭合标签。
- 标签可以嵌套，例如<div><div></div></div>。
- 标签存在的意义：定位操作、CSS操作、让JS操作更简单。
- 所有的标签分为块级标签和行内标签(又叫做内联标签)
- 块级标签：占满一行，如常见的H系列标签，P标签，div标签。
- 行内标签(内联标签)：只占元素长度大小，如span标签。
2.2 常用的标签
<!DOCTYPE> 定义遵循的文档类型，如<!DOCTYPE html> 则代表遵循html文档规范。
2.2.1 head中的常见标签：
1 <head> 2 <meta charset="UTF-8"> <!-- meta为自闭合标签， charset属性定义字符编码 --> 3 <meta http-equiv="Refresh" content="3"> <!-- 3秒自动刷新 --> 4 <meta http_equiv="Refresh" content="3;Url=http://edu.51cto.com"> <!-- 3秒自动跳转百度 --> 5 <meta name="keywords" content="吃鸡,关键字2,关键字3"> <!-- 给搜索引擎用的关键字 --> 6 <meta name="description" content="网站描述信息"> <!-- 描述当前网站是干嘛的 --> 7 <meta http_equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=IE7"> <!-- 主动兼容IE8和IE7 --> 8 <title>标签</title> <!-- head内部的标签只有title可见 --> 9 <link rel="shortcut icon" href="image/favicon.ico"> <!-- 小图标显示 --> 10 </head>
2.2.2 body中的常见标签：
2.2.2.1 <h>-</h>标签：h标签用来定义标题
<body> <h1>Druid</h1> <!-- h标签用来定义标题，字体从上至下依次缩小 --> <h2>Druid</h2> <h3>Druid</h3> <h4>Druid</h4> <h5>Druid</h5> <h6>Druid</h6> </body>
2.2.2.2 <p>-</p>标签：p标签用来定义段落
1 <body> 2 <p>第一段落</p> <!-- p标签用来控制段落,段落间有间距 --> 3 <p>第二段落</p> 4 <p>第三段落</p> 5 </body>
2.2.2.3 <span>-</span>标签：span标签为白板标签(行内标签)
1 <body> 2 <span>第一行</span> <!-- 行内标签（内联标签） --> 3 <span>这里紧跟第一行，不会换行</span> 4 </body>
2.2.2.4 <div>-</div>标签：div标签为白板标签(块级标签)
1 <body> 2 <div>第一行</div> <!-- 块级标签 --> 3 <div>这里就要换行了</div> 4 </body>
2.2.2.5 <a>-</a>标签：a标签用来定义链接和锚
用来定义链接：单击文字即可跳转至链接
<body> <a href="http://www.baidu.com" target="_blank">百度</a> <!-- target="_blank"在新的标签页打开百度，若不加则在原页打开 --> </body>
用来定义锚：作为锚点，单击文字即可跳转至对应的ID处。什么是锚？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，
它指向页面特定的部分。
要使用锚点定位，需要两个部分组成：1、锚点； 2、指向锚点的链接
方法一：使用id属性作为锚点，a标签作为指向锚记的链接，俗称“id”定位，代码如下所示：
1 <body> 2 <a href="#1">第一章</a> <!-- #为关键字符，创建指向锚点的链接，id后面的字符要和跳转地方id属性值保持一致 --> 3 <a href="#2">第二章</a> 4 <a href="#c">第三章</a> 5 <div style="height: 600px;" id="1"> <!-- 创建的锚点 --> 6 第一章的内容 7 </div> 8 <div style="height: 600px;" id="2"> <!-- 创建的锚点 --> 9 第二章的内容 10 </div> 11 <div style="height: 600px;" id="c"> <!-- 创建的锚点 --> 12 第三章的内容 13 </div> 14 </body>
方法二：既使用a标签的name属性作为锚点，又使用a标签作为指向锚点的链接，俗称“name”定位，代码如下所示：
1 <body> 2 <a href="#1">第一章</a> <!-- #为关键字符，创建指向锚的链接，#后面的字符要和跳转地方name属性值保持一致 --> 3 <a href="#2">第二章</a> 4 <a href="#c">第三章</a> 5 <p></p> 6 <a style="display:inline-block; height: 600px; 100%" name="1"> <!-- 创建锚点;inline-block为行内块，因此需要设置宽度 --> 7 <p>第一章的内容</p> 8 </a> 9 <a style="display:block; height: 600px;" name="2"> <!-- 创建锚点;block为块元素，因此不需要设置宽度 --> 10 第二章的内容 11 </a> 12 <a style="display:inline-block; height: 600px; 100%" name="c"> <!-- 创建锚点 --> 13 第三章的内容 14 </a> 15 </body>
2.2.2.6 <img />标签：img标签用来定义图片
1 <body> 2 <img src="1.png" /> 3 </body>
1 <body> 2 <a href="http://www.baidu.com"> 3 <img src="1.png" title="图片" style="height: 300px; 300px" alt="图片"/> 4 </a> <!-- 单击图片直接跳转至指定url；title属性用于鼠标悬浮显示信息；alt属性在图片不能显示的时候显示对应的文字信息 --> 5 6 </body>
2.2.2.7 <br />标签：<br /> 元素是一个空的 HTML 元素，用来换行
1 <body> 2 <div>换行<br />测试</div> 3 </body>
2.2.2.8 <form> </form>标签：HTML表单用于收集用户输入，form标签用来定义HTML表单。HTML表单又包含表单元素：input、select和textarea。
<input />标签(元素):
1 <body> 2 <form action="" method=""> <!-- form为表单标签,用来向后台提交数据;action属性用来指定服务器url;method用来指定get或者post --> 3 <input type="text" /> <!-- 单行文本输入框 --> 4 <br /> 5 <input type="password" /> <!-- 会隐藏真实字符 --> 6 <input type="button" value="没用" /> <!-- button默认情况下无用 --> 7 <input type="submit" value="登录" /> <!-- submit才能提交表单 --> 8 </form> 9 </body>
1 <body> 2 <form action="http://localhost:8888/index" method="post"> <!-- get会将输入内容拼接成url提交给后台，post会将内容放到数据中提交给后台 --> 3 <input type="text" name="user" /> <!-- name属性用来定义字典的key --> 4 <br /> 5 <input type="password" name="pwd" /> 6 <!-- 打包成字典{"user": "用户输入的用户名", "pwd": "用户输入的密码"}发给后台 --> 7 <input type="button" value="没用" /> 8 <input type="submit" value="登录" /> 9 </form> 10 </body>
<body> <form enctype="multipart/form-data"> <!-- enctype="multipart/form-data"该属性用来上传文件 --> <div> 用户名:<input type="text" name="user" /> <p>请选择性别:</p> 男:<input type="radio" name="sex" value="1" checked="checked" /> <!-- radio为单选框，如果没有name或者name不相同，那么就可以多选 --> 女:<input type="radio" name="sex" value="2" /> <!-- 这里的value用于给后台传数据;checked用来设置默认值 --> <p>爱好:</p> 篮球:<input type="checkbox" name="favor" value="1" /> <!-- checkbox为复选框 --> 足球:<input type="checkbox" name="favor" value="2" /> <!-- 这里的name用于后台批量获取数据 --> 羽毛球:<input type="checkbox" name="favor" value="3" /> 台球:<input type="checkbox" name="favor" value="4" /> 网球:<input type="checkbox" name="favor" value="5" /> <p>技能:</p> 写代码:<input type="checkbox" name="skill" value="1" checked="checked" /> 修车:<input type="checkbox" name="skill" value="2" /> <p>上传文件:</p> <input type="file" name="filename" /> <!-- type="file"用来上传文件，真实的传文件依赖form表单属性enctype --> </div> <input type="reset" value="重置" /> <!-- 重置除默认值以外的值 --> <input type="submit" value="提交" /> </form> </body>
<select> </select>标签(元素)：select标签定义下拉列表，option标签定义待选项，列表通常会把首个选项显示为被选选项，能够通过添加 selected 属性来定义预定义选项。
value属性规定在表单被提交时被发送到服务器的值。<option> 与 </option> 之间的值是浏览器显示在下拉列表中的内容，而value属性中的值是表单被提交时被发送到服务器的值。
如果没有指定value属性，<option> 与 </option> 之间的值则会在表单被提交时发送到服务器。
1 <body> 2 <form> 3 <div> 4 <select name="city"> 5 <option value="1">北京</option> 6 <option value="2">上海</option> 7 <option value="3">广东</option> 8 <option value="4">深圳</option> 9 <option value="5" selected="selected">成都</option> 10 </select> <!-- selected="selected"为默认值 --> 11 <input type="submit" value="提交" /> 12 </div> 13 <div> 14 <select name="city" size="10"> 15 <option value="1">北京</option> 16 <option value="2">上海</option> 17 <option value="3">广东</option> 18 <option value="4">深圳</option> 19 <option value="5" selected="selected">成都</option> 20 </select> <!-- size用来设置显示的行数 --> 21 <input type="submit" value="提交" /> 22 </div> 23 <div> 24 <select name="city" size="10" multiple="multiple"> 25 <option value="1">北京</option> 26 <option value="2">上海</option> 27 <option value="3">广东</option> 28 <option value="4">深圳</option> 29 <option value="5" selected="selected">成都</option> 30 </select> <!-- multiple属性用于多选 --> 31 <input type="submit" value="提交" /> 32 </div> 33 <div> 34 <select name="city"> 35 <optgroup label="北京市"> 36 <option value="1" selected="selected">北京</option> 37 </optgroup> 38 <optgroup label="四川省" /> 39 <option value="2" selected="selected">成都</option> 40 <option value="3">绵阳</option> 41 </optgroup> 42 <optgroup label="河北省" /> 43 <option value="4" selected="selected">石家庄</option> 44 <option value="5">保定</option> 45 </optgroup> 46 </select> <!-- optgroup属性用于组合相关选项 --> 47 <input type="submit" value="提交" /> 48 </div> 49 </form> 50 </body>
<label></label>标签： 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
1 <html> 2 <body> 3 4 <p>请点击文本标记之一，就可以触发相关控件：</p> 5 6 <form> 7 <label for="male">Male</label> 8 <input type="radio" name="sex" id="male" /> 9 <br /> 10 <label for="female">Female</label> 11 <input type="radio" name="sex" id="female" /> 12 </form> 13 14 </body> 15 </html>
<textarea> </textarea>标签(元素)：textarea标签用来定义多行输入
1 <body> 2 <div> 3 <textarea name="key"> 4 这里的文本作为默认值 5 </textarea> <!-- textarea标签用来定义多行输入，name还是作为Key --> 6 </div> 7 </body>
2.2.2.9 HTML列表：HTML支持有序、无序列表和定义列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1 <body> 2 <ul> 3 <li>第一行</li> 4 <li>第二行</li> 5 <li>第三行</li> 6 </ul> <!-- ul样式为圆点 --> 7 </body>
1 <body> 2 <h1>一个嵌套列表：</h1> 3 <ul> 4 <li>咖啡</li> 5 <li>茶 6 <ul> 7 <li>红茶</li> 8 <li>绿茶</li> 9 </ul> 10 </li> 11 <li>牛奶</li> 12 </ul> 13 </body>
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1 <body> 2 <ol> 3 <li>第一行</li> 4 <li>第二行</li> 5 <li>第三行</li> 6 </ol> <!-- ol样式为数字 --> 7 </body>
1 <body> 2 <h1>数字列表：</h1> 3 <ol> 4 <li>苹果</li> 5 <li>香蕉</li> 6 <li>柠檬</li> 7 <li>桔子</li> 8 </ol> 9 10 <h1>字母列表：</h1> 11 <ol type="A"> 12 <li>苹果</li> 13 <li>香蕉</li> 14 <li>柠檬</li> 15 <li>桔子</li> 16 </ol> 17 18 <h1>小写字母列表：</h1> 19 <ol type="a"> 20 <li>苹果</li> 21 <li>香蕉</li> 22 <li>柠檬</li> 23 <li>桔子</li> 24 </ol> 25 26 <h1>罗马字母列表：</h1> 27 <ol type="I"> 28 <li>苹果</li> 29 <li>香蕉</li> 30 <li>柠檬</li> 31 <li>桔子</li> 32 </ol> 33 34 <h1>小写罗马字母列表：</h1> 35 <ol type="i"> 36 <li>苹果</li> 37 <li>香蕉</li> 38 <li>柠檬</li> 39 <li>桔子</li> 40 </ol> 41 </body>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1 <body> 2 <dl> 3 <dt>标题行</dt> 4 <dd>缩进行1</dd> 5 <dd>缩进行2</dd> 6 <dt>标题行</dt> 7 <dd>缩进行1</dd> 8 <dd>缩进行2</dd> 9 </dl> 10 </body>
让列表元素横向排列
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 li{ 6 width:100px; 7 height:20px; 8 float:left; 9 list-style: none; <!-- 不显式任何列表符号 --> 10 } 11 </style> 12 </head> 13 <body> 14 <ul > 15 <li>列表内容</li> 16 <li>列表内容</li> 17 <li>列表内容</li> 18 </ul> 19 </body>
2.2.2.10：table表格标签，用来定义HTML表格
1 <body> 2 <table> 3 <tr> 4 <td>第一行，第一列</td> 5 <td>第一行，第二列</td> 6 <td>第一行，第三列</td> 7 </tr> <!-- tr表示一行 td表示一列--> 8 <tr> 9 <td>第二行，第一列</td> 10 <td>第二行，第二列</td> 11 <td>第二行，第三列</td> 12 </tr> 13 </table> 14 <table border="1"> 15 <tr> 16 <td>第一行，第一列</td> 17 <td>第一行，第二列</td> 18 <td>第一行，第三列</td> 19 </tr> 20 <tr> 21 <td>第二行，第一列</td> 22 <td>第二行，第二列</td> 23 <td>第二行，第三列</td> 24 </tr> 25 </table> 26 </body>
1 <body> 2 <table border="1"> 3 <tr> 4 <td>主机名</td> 5 <td>IP地址</td> 6 <td>端口号</td> 7 <td>操作</td> 8 </tr> 9 <tr> 10 <td>host1</td> 11 <td>1.1.1.1</td> 12 <td>80</td> 13 <td> 14 <a href="http://www.baidu.com">查看详细</a> 15 <a href="#">修改</a> 16 </td> 17 </tr> 18 <tr> 19 <td>host2</td> 20 <td>2.2.2.2</td> 21 <td>80</td> 22 <td> 23 <a href="http://www.baidu.com">查看详细</a> 24 <a href="#">修改</a> 25 </td> 26 </tr> 27 <tr> 28 <td>host3</td> 29 <td>3.3.3.3</td> 30 <td>80</td> 31 <td> 32 <a href="http://www.baidu.com">查看详细</a> 33 <a href="#">修改</a> 34 </td> 35 </tr> 36 </table> 37 </body>
下面的写法才是最标准的：
1 <body> 2 <table border="1"> 3 <thead> 4 <tr> 5 <th>主机名</th> 6 <th>IP地址</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>host1</td> 12 <td>1.1.1.1</td> 13 </tr> 14 <tr> 15 <td>host2</td> 16 <td>2.2.2.2</td> 17 </tr> 18 <tr> 19 <td colspan="2">第三行占两列</td> 20 </tr> 21 <tr> 22 <td rowspan="2">host3占两行</td> 23 <td>3.3.3.3</td> 24 </tr> 25 <tr> 26 <td>3.3.3.3</td> 27 </tr> 28 </tbody> 29 </table> <!-- thead为标准的表头,tbody为标准的表内容;colspan合并列,rowspan合并行 --> 30 </body>
2.2.2.11：fieldset标签用来对表单元素进行分组
1 <body> 2 <form> 3 <fieldset> 4 <legend>登录</legend> <!-- 该标签用来设置框上的文字 --> 5 <label for="username">用户名:</label> 6 <input type="text" name="user" id="username" /> 7 <label for="password">密码:</label> 8 <input type="password" name="pwd" id="password" /> 9 </fieldset> 10 <fieldset> 11 <legend>性别</legend> <!-- 该标签用来设置框上的文字 --> 12 男:<input type="radio" name="sex" value="1" checked="checked" /> 13 女:<input type="radio" name="sex" value="2" /> 14 </fieldset> 15 </form> 16 </body>
3、注释
HTML语言注释用<!-- 注释 -->，CSS中用/*注释*/