01-HTML深入
1.1 浏览器的工作原理
把一些标签解析成用户可视化的页面
1.2 HTML中的标签与元素
在HTML中以<xx>开始，以</xx>结束，比如<html></html>等。
标签和其内容统称为元素，比如：<xx>h5</xx>
元素可以有属性，比如 <xx src=’xxx’>h5</xx>
1.3编码
数据以什么编码存入电脑，就必须以什么编码取出（解码）。
ASCLL码
计算机编码有UTF8、GB2312
1.4 HTML文档结构
<!--文档结构是HTML5.0这个版本--> <!DOCTYPE HTML> <html> <!--head 页面的头部，一般用于设置一些参数给浏览器使用--> <head></head> <body></body> </html>
1.4.1 Head
head一般用于设置一些信息给浏览器解析时使用。一般在head中通过meta标签来设置这些参数
<head> <!--1.设置页面的解码--> <meta charset="utf-8"/> <!--2.让页面适应于PC、移动端--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--3.seo搜索引擎优化--> <mata name="keywords" content="博客园"></mata> <mata name="description" content="米商城直营小米公司旗下所有产品，囊括小米手机系列小米Note 3、小米8、小米MIX 2S，红米手机系列红米5 Plus、红米6 Pro，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。"></mata> <!--description，和上面的keywords一样，是用户不查看源代码看不到的，而且也是对于一个网页的简要内容概况。
不同的是，keywords是由几个词语的组成的，而description则是完整的一句话。description一般不超过150个字符，描述内容要和页面内容相关。
用法：<meta name=”Description” Content=”你网页的简述”>--> <title>小米商城</title> </head>
注：快速构建HTML结构的快捷键：!+Tab
1.5 标签的分类
1.5.1 快标签（block tag）
【1】独占一行
【2】能设置宽高
无语义标签：没有特定的用途 => 什么都可以显示 => 用于包含别的标签 => 一般用于容器容纳别的标签。
有语义标签：有特定的用途
1.5.1.1 DIV
div 是无语义标签，一般用于页面架构性布局（DIV+CSS）
<div id="top"> aaaaa </div>
1.5.1.2 H1-H6
有语义标签，专门用于显示标题的。
<!--2 标题--> <h1>我是h1标题</h1> <h2>我是h2标题</h2> <h3>我是h3标题</h3> <h4>我是h4标题</h4> <h5>我是h5标题</h5> <h6>我是h6标题</h6>
1.5.1.3 列表相关
ol/li 表示有序列表（ordered list），有语义标签。li一定是作为ol的子节点。
ul/li 表示无序列表（unordered list）有语义标签，li一定是作为ol的子节点。
<!--使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。li是英文list item的缩写-->
<body> <ul> <li>完美生活</li> <li>蓝莲花</li> <li>一起摇摆</li> </ul> </body> <!--ul>li(然后按下Tab键) 含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签--> <ul> <li></li> </ul>
<!--ul>li*3(然后按下Tab键) 含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签标签-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始--> <body> <ol> <li>完美生活</li> <li>蓝莲花</li> <li>一起摇摆</li> </ol> </body>
dl/dt+dd 表示定义列表，有语义标签，一般dd可以有多个
<!--定义列表--> <!--<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。--> <dl> <dt>列表标题</dt> <dd>列表内容</dd> <dd>列表内容</dd> ... </dl> <!--defined list--> <dl> <!--defined title--> <dt>程序员鼓励师</dt> <!--defined description--> <dd>1、长相清新，声线甜美，微笑常在，人见人爱；</dd> <dd>2、善于倾听，善不善沟通不重要，能忍受IT工程师死宅无法交流的性格；</dd> <dd>3、耍不耍脾气不重要，要善于发现每一个程序暖男的天性，成功驯服；</dd> <dd>4、了解互联网，懂科技，不然聊起来云里雾里，工程师会更受打击。</dd> </dl>
1.5.1.4 Table
table是由行（row）构成、行是由单元格（table-cell）构成。
<tr>…</tr>：表格的一行，所以有几对tr表格就有几行。<td>…</td>：表格的一个单元格，一行中包含几对<td>…</td>，说明一行中就有几列。<th>…</th>：表格的头部的一个单元格，表格表头。- 表格中列的个数，取决于一行中数据单元格的个数。
table表格在没有添加css样式之前，在浏览器中显示是没有表格线的- 表头，也就是
th标签中的文本默认为粗体并且居中显示<!--快捷方法：table>tr*3>td*3--> <!--4. table--> <table border="1" <!--添加边框-->> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> </table>
1.5.1.4.1 单元格跨列
colspan一个单元格向右占多个列。
<table border="1"> <tr> <td>11</td> <td colspan="2">22</td> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> <td>cc</td> </tr> </table>
1.5.1.4.1 单元格跨行
rowspan单元格可以向下跨越多个行，被占的单元格向右挤。
<table border="1"> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> <tr> <td rowspan="2">aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>bb</td> <td>cc</td> </tr> </table>
1.5.1.5 P
标签表示段落
<!--p 表示段落--> <p>十年后的今天，世界经济复苏的势头远不如人们期许的那样强劲，信心的极端重要性并未减弱。然而，正如国际货币基金组织总裁拉加德所言，“笼罩世界经济的乌云正变得越来越重，最大和最重的乌云是信心的恶化”。恶化人们对世界经济发展前景信心的源头来自何方？只要随手翻一翻各国的报章，读一读那些有关美国同贸易伙伴大打贸易战忧心忡忡的报道，答案再清楚不过地摆在人们面前。</p> <p>国际贸易是世界经济增长的重要一环，美国公开违反世贸规则，大范围挑起贸易争端，势必破坏全球贸易秩序，危害世界经济增长。世界银行上月初发布报告指出，全球关税广泛上升将会给全球贸易带来重大负面影响，对新兴市场和发展中经济体的影响尤为明显，特别是那些与美国贸易或金融市场关联度较高的经济体。权威人士预测，如果关税回到GATT/WTO（关贸总协定和世贸组织）之前的水平，世界经济将立即收缩2.5%，全球贸易量将削减60%以上，负面影响超过2008年国际金融危机。</p> <!--错误的用法：不能再p标签中再放块标签--> <p> <div>test</div> </p>
1.5.1.6 br
br表示换行，<br /> 我们把这种中间没有内容的标签称为开闭同体标签。
1.5.2 行内标签
【1】 在一行内显示
【2】 不能设置宽高，内容撑开宽高
1.5.2.1 span
span 是无语义行内标签，一般作为容器使用。
<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.</span>TEST
1.5.2.2 a
a 表示链接
1.5.2.2.1 路径相关
<!--链接到站外--> <a href="http://www.baidu.com/">百度</a> <!--站内链接--> <!--绝对路径：从盘符开始的路径叫做绝对路径--> <a href="C:\Users\Administrator\Desktop\index-gbk.html">index-gbk</a> <!--相对路径--> <!--当前目录：. --> <a href="./index.html">index</a> <a href="index.html">index</a>
相对路径 . 表示当前目录， .. 返回上一级目录。链接找资源时，一定先从当前目录开始找，所以当前目录可以省略。
1.5.2.2.3 锚点
通俗地说，锚点就是指在页面内做调整
<div id="top"></div> <div> <a href="#early-exp">早年经历</a><!--点击跳转到p标签的早年经历--> <a href="#professional-exp">演艺经历</a> <a href="#personal-life">个人生活</a> <a href="#musics">音乐作品</a> </div> <p id="early-exp">早年经历Lorem</p> <p id="professional-exp">演艺经历Lo</p> <p id="personal-life">个人生活Lorem ipsum dolor </p> <p id="musics">音乐作品Lorem </p> <div> <a href="#top">TOP</a><!--点击回到顶部--> </div>
1.5.2.3 Img
专门用于显示图片。
1.5.2.3.1常用属性
alt：当图片加载失败时的提示文本
title：当鼠标悬停时的提示文本
<img alt="阿黛尔" title="阿黛尔" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />
1.5.2.4 var/strong/em
var、strong、em 本意表示强调作用，有语义标签，强调的表现形式不一样，var/em 斜体强调，strong加粗强调。
<var>我是var</var> <!--强调字体下斜--> <strong>我是strong</strong> <!--强调字体加粗--> <em>我是em</em> <!--强调字体倾斜-->
在实际开发过程中，一般来说都不用他们的本意，而是把他们降级成一般的无语义行内标签使用
