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处
<body> <a href="#1">第一章</a> <!-- #为关键字符，后面的编号要和想跳转的地方保持一致 --> <a href="#2">第二章</a> <a href="#3">第三章</a> <div style="height: 600px;" id="1"> 第一章的内容 </div> <div style="height: 600px;" id="2"> 第二章的内容 </div> <div style="height: 600px;" id="3"> 第三章的内容 </div> </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;width: 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> </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 属性来定义预定义选项。
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>
<textarea> </textarea>标签(元素)：textarea标签用来定义多行输入
1 <body> 2 <div> 3 <textarea name="key"> 4 这里的文本作为默认值 5 </textarea> <!-- textarea标签用来定义多行输入，name还是作为Key --> 6 </div> 7 </body>
3、注释
HTML语言注释用<!-- 注释 -->，CSS中用/*注释*/