HTML是什么？
- 超文本标记语言（Hypertext Markup Language，HTML），通过标签语言来标记要显示在网页中的各个部分。一套浏览器认识的规则。
- 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，不同浏览器，对同一个标签可能会有不完全相同的解释（浏览器的兼容性）
- 静态网页文件扩展名： .html 或者 .htm
HTML不是什么？
- HTML不是编程语言，而是一种标记语言（Markup Language）
- HTML使用标记标签来描述网页
HTML结构：
HTML标签格式：
标签语法：
- <标签名 属性1="属性值1" 属性2="属性值2" ......>标签体</标签名>
- <标签名 属性1="属性值1" 属性2="属性值2" ......>
常用标签：
<!DOCTYPE>标签
<!DOCTYPE>声明位于文档中的最前面位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或者XHTML规范。
作用：声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
解析类型(document.compatMode)：
- 怪异模式(BackCompat)：浏览器使用自己的怪异模式解析渲染页面
- 标准模式(CSS1Compat)：浏览器使用W3C的标准解析渲染页面
这个属性会被浏览器识别并使用，如果页面没有DOCTYPE的声明，那么浏览器会默认使用怪异模式进行渲染
<head>内常用标签：
<meta>标签
- <meta>标签的介绍：
- <meta>元素可提供有关网页的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
- <meta>标签位于文档的头部，不包含任何内容
- <meta>提供的信息是用户不可见的
- <meta>标签的组成：
- <meta>标签有name属性和http-equiv属性，不同的属性含有不同的参数值，实现了不同的网页功能
- name属性：主要用于描述网页，对应的属性值为content，content中的内容主要是用于搜索引擎机器人查找信息和分类信息
<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的"> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
http-equiv属性：相当于http的文件头作用，向浏览器传递信息，帮助浏览器正确的显示网页内容，对应的属性值为content，content中的内容为各个参数的变量值
-
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非<meta>标签
<title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
<body>内常用标签
基本标签（块级标签和内联标签）(p标签无法嵌套块级标签)
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 特殊字符： < >；"；©®
<div></div>标签和<span></span>标签
<div>标签是一个块级元素，并无实际意义，主要通过css样式为其赋予不同的表现 <span>标签表示行内元素，并无实际意义，主要通过css样式为其赋予不同的表现 块级元素与行内元素的区别： 块级元素，每一个元素单独占用一行，期间可以嵌套块级元素与行内元素 行内元素则不占用一整行，期间只可以嵌套行内元素
图形标签： <img>
<img src="图片路径" alt="图片加载失败时的提示" title="鼠标悬浮时的提示" height="图片高度" width="图片宽度"> 宽高属性只设置一个，另一个会自动等比缩放
超链接标签（锚标签）： <a></a>
超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片，电子邮箱地址，文件，甚至是一个应用程序
URL是统一资源定位器（Uniform Resource Locator），也被称为网页地址，是因特网上标准的资源的地址
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成：
1 http:// 或者 ftp:// 协议
2 站点地址：可以是域名或者IP地址
3 页面在站点中的目录： stu
4 页面名称： intro.html
各部分之间用 / 符号分隔开
<a href="http://www.jd.com">click</a> <a href="#i1">i1</a> <a href="#i2">i2</a> <div id="i1" style="background-color: bisque;height: 500px">i1</div> <div id="i2" style="background-color: yellow;height: 500px">i2</div>
列表标签：ul ol dl
<!--无需标签，disc实心圆点（默认），circle空心圆点，square空心方块--> <ul type="square"> <li>第一章</li> <li>第二章</li> </ul> <!--有序列表，按照数字排序--> <ol> <li>第一章</li> <li>第二章</li> </ol> <!--定义列表--> <dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> </dl>
表格标签：<table></table>
<table border="1" width="表格宽度" cellpadding="内边距" cellspacing="外边距"> <!--加边框--> <thead> <tr> <!--表头--> <th>id</th> <!--也可以使用<td>,但<th>有加粗效果，更美观--> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <!--内容--> <td>1</td> <td>jack</td> <td>18</td> </tr> <tr> <td rowspan="2">2</td> <!--单元格竖跨2行--> <td colspan="2">tom</td> <!--单元格横跨2列--> <!--<td>28</td>--> </tr> <tr> <!--<td>3</td>--> <td>michael</td> <td>38</td> </tr> </tbody> </table>
<select>标签
<select name="pro"> <!--下拉框（单选）--> <!--将 {name:value} 发送到服务端--> <option selected="selected">北京</option> <!--默认选择北京--> <option value="sh">上海</option> <option>广州</option> </select> <select multiple size="5"> <!--下拉框（多选）；同时显示5个（默认显示5个）--> <option selected="selected">北京</option> <option>上海</option> <option>广州</option> </select> <select multiple size="6"> <optgroup label="河北"> <!--对河北进行分组--> <option>石家庄</option> <option>保定</option> <option>廊坊</option> </optgroup> </select>
<textarea>标签
<textarea cols="宽度" rows="高度" name="名称"> 可以输入多行文本 </textarea>
<fieldset>标签
<fieldset> <legend>登陆</legend> <p>用户名：<input type="text"></p> <p>密码：<input type="password"></p> </fieldset>
<label>标签
<label>标签为<input>标签定义标记 <label>元素不会向用户呈现任何特殊效果 <label>标签的for属性与<input>标签的id属性必须相同 <div> <label for="username">用户名：</label> <input type="text" id="username"> </div>
<input> 标签
<input type="test"> <!--生成一个输入框--> <div>用户名：<input type="text"></div> <div><label for="xxx">用户名：</label><input type="text" id="xxx"></div> <!--当点击用户名时，获取需要输入位置的焦点（id不能重复）--> <div>密码：<input type="password"></div> <!--输入的字符串为密文形式展示--> <div>邮箱：<input type="email"></div> <!--会对输入的字符串进行验证，检查是否为邮箱格式（不支持所有浏览器）--> <div>性别： <!--单选--> <div>男 <input type="radio" name="yyy" /></div> <!--name="yyy"（必须相同）：男女只能选择一个--> <div>女 <input type="radio" name="yyy" /></div> </div> <div>爱好： <!--多选--> 吃<input type="checkbox" /> <!--可以多选--> 喝<input type="checkbox" /> 玩<input type="checkbox" /> </div> <div>上传： <!--选择上传本地文本--> <input type="file"> </div> <input type="button" value="按钮"> <!--固定按钮，无功能--> <input type="submit" value="提交"> <input type="reset" value="重置">
<form>表单标签
<form action="http://www.baidu.com"> <!--包裹数据,进行提交，提交给百度--> <input type="button" value="按钮"> <!--固定按钮，无功能--> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>