HTML概述

超文本标记语言，用于搭建网页的结构。

网页的组成：
HTML、CSS、JavaScript;其他多媒体内容：图片、视频、音频、超级链接等;所有的网页文件都是真实的、物理存在的文件.

互联网原理

互联网运行过程

程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求 到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端， 最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果

客户端

客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用的就是 浏览器、app等，而web开发最主要的客户端形式还是浏览器。
浏览器(Browser)，是一种用户上网搜索、查看信息资源的应用程序。
功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页。

主流浏览器及其内核

IE/Edge——Trident——IE内核
FireFox ——Gecko—— Firefox内核
Safari ——Webkit
Chrome ——Webk it→Blink ——统称为Chromium内核或Chrome内核
Opera ——Presto→Webk it→Blink
推荐：使用Chrome浏览器。(渲染效果好、市场占有率高、自带开发者调试工具)

浏览器功能

1. 发送HTTP请求，发送的方式是在浏览器地址栏输入对应网址，或者点击超级链接。
2. 接收服务器发回的HTTP响应，服务器会发回一个HTML给浏览器。
3. 将接收到的HTML进行解析并显示。

HTTP请求与HTTP响应

HTTP请求

• request，浏览器根据网址向对应的服务 器发送请求。
• 发起请求的方法：在浏览器地址栏中输 入网址，或者点击网址链接。
• HTML页面解析过程中，会发出多个http 请求，包含网页的图片、视频、音 频等文件请求。

HTTP响应

• 响应：response，服务器根据请求响应 一个HTML文件，将HTML传输给客户端， 在浏览器中进行HTML网页的渲染。

HTML概念

纯文本文件的特点

1. 文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输。
2. 所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式。
3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。

语义化网页的优势

1. 方便代码的阅读和后期维护；
2. 便于浏览器或是网络爬虫更好地解析网站内容；
3. 使用语义化标签有利于SEO搜索引擎优化，提高网站 的搜索排名。

HTML规范版本

• HTML1.0 ——1993.06 ——互联网工程小组(IETF)发布的工作草案
• HTML2.0 ——1995.01—— 2000年6月发布之后被宣布已经过时
• HTML3.2—— 1997.01.14 ——W3C推荐标准
• HTML4.0 ——1997.12.18 ——W3C推荐标准，引入了样式表css，实现了结构和样式分离
• HTML4.01 ——1999.12.24 ——W3C推荐标准，修复了HTML4.0中的漏洞
• XHTML1.0—— 2000.01.20 ——在HTML4.01基础上进行的升级扩展和严格化
• HTML5 ——2008.1.22 ——HTML5 在 2012 年已形成了稳定的版

vscode常用快捷键

• !/html:5+tab——自动生成基本骨架
• alt+shift+上/下箭头——向上/下复制一行
• alt+上/下箭头——将光标所在行上/下移一行
• ctrl+shift+k/ctrl+x——删除光标所在行、所选内容
• 按住鼠标滚轮拖动——同时选中多个光标、同时操作
• ctrl+滚轮——调整字号大小
• ctrl+z——无限后退一步
• ctrl+shift+z——无限还原一步
• ctrl+enter——在任意位置直接换行

HTML基本结构

DTD

• 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition， 简称DTD。也称作文档声明类型，DocType Declaration。
• 作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应 版本的HTML语法进行解析页面。

常见字符集编码

1. 国际通用字库
   UTF-8：以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字 为3个字节大小。
2. 中文国标字库
   gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语 西里尔字母在内的682个。
   gbk：是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包 括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小。
3. 注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出 现两个字库不匹配，浏览器加载时出现乱码。

标题标签h1-h6

h1-h6 ：标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责样式，样式由CSS负责。

<h1>
    一级标题
</h1>

段落标签p

p : 双标签，内部只能放文本、图片、表单元素，作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式，换行效果是由CSS决定的。

<P>
    段落
</P>

换行标签br

br : 单标签，没有建立新的段落的语义，只是简单的进行强制换行。

<br /> <!--强制换行-->

文本格式化

均为双标签，内部只能书写文字。

• b——定义粗体文本，blod
• big——定义大号字
• em——定义着重文字，emphasis,自带斜体效果
• i——定义斜体字，italic
• small——定义小号字
• strong——定义着重语气，自带加粗效果
• sub——定义下标字,subscript
• sup——定义上标字,superscript
• ins——定义插入字，自带下划线效果，insert
• del——定义删除字
• u——定义下划线，不赞成使用，使用CSS中样式代替，underline

图像标签img

img : 单标签，本身相当于一个特殊的文本，作用是在指定位置插入一张图片，常用的插入图片类型：jpg、png、gif。

img标签属性

• src——表示图片的路径
• width——表示图片的宽度
• height——表示图片的高度
• border——边框属性；它的值可以设置边框的厚度
• title——设置提示文本
• alt——设置图像没有找到时候的替换文本

<!--width与height设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。-->
<img src="smile01.jpg" width="200" height="100">
<img src="images/tupian/smile03.jpg" border="20">
<img src="../images/smile01.jpg" title="点击查看原网页" alt="这是一张微笑的表情" >

相对路径

同级查找

指目标文件与HTML文件位于同一级,直接书写文件名+后缀名;

<img src="smile01.jpg">

子级查找

指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭 符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。

<img src="images/smile02.png">
<img src="images/tupian/smile03.jpg">

上级查找

指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件。

<img src="../../smile04.jpg" />
<img src="../images/smile01.jpg" />

绝对路径

盘符出发

例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。

<img src="C:/Users/teacher/Documents/images/smile02.png" />

网址形式

要查找的文件是来自网络资源，路径写法以http://开头。

<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />

• 盘符出发的路径不可移植，不可移动。
• 盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
• 建议多使用相对路径，可以适当使用网址形式的绝对路径。
• 使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变

音频标签audio

• audio : 双标签，需要使用src属性设置音频查找的路径,音频文件支持格式包括.mp3 .ogg .wav
• 音频控制条属性：音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，controls=“controls”

<audio src="audio.mp3" controls="controls"></audio>

视频标签video

• video: 双标签，属性src查找路径，支持格式包括.mp4、.ogg、.webm
• 音频控制条属性：controls=“controls”

<video src="video.mp4" controls="controls" ></video>

超级链接a

a : 双标签，在指定位置添加超级链接，提供用户进行点击和跳转，可以实现两种跳转——跨页面跳转、页面内跳转。

href属性

全称hypertext reference，超文本引用，用于规定链接的目标地址；属性值为链接目标的路径地址, 可以使用相对路径或网址形式的绝对路径。

target属性

_self：——默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口；
_blank——空白的，表示跳转的页面在新窗口打开。

<!--在当前窗口跳转-->
<a href="目标地址" target="_self">链接内容</a>
<!--在新开窗口跳转-->
<a href="目标地址" target="_blank">链接内容</a>

title属性

提示文字,该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。

<a href="目标地址">链接内容</a>
<a href="http://www.lagou.com" target="_blank">拉勾</a>
<a href="smile.html" title="点击查看源网页"><img src="images/smile02.png" /></a>

页面内锚点跳转

1. 设置锚点:也就是设置跳转目标位置，有两种设置方式。

   1. 在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。

       <h2 id="mubiao1">目标位置</h2>
      

   2. 在目标位置添加一个空的标签，只设置一个name属性，name属性值设置 方式与id相同，也必须是唯一的。

      <a name="mubiao2"></a>
      

2. 添加链接：链接到锚点，在需要点击的位置设置标签，给a的href属性设置属性值为#id属性值或者 #加a的name属性值。

   <a href="#mubiao1">点击文本</a>
   <a href="#mubiao2">点击文本</a>
   

跨页面锚点跳转

1. 设置锚点: 在目标网页的指定位置设置使用id或name 属性。
2. 链接到锚点: 添加超级链接时href属性需要更改，属性值写为页面的路径#id 。

<a href="new.html#mubiao">点击文本</a>

无序列表ul>li

ul：unordered list，表示定义一个无序列表的大结构。
li：list item，列表项，定义的是无序列表内的某一项。

<h3>中国四大名著</h3>	
<ul>
	<li>
		<h4>红楼梦</h4>
        <ul>
			<li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
        </ul>
    </li>
    <li>
    	<h4>西游记</h4>
        <ul>
        	<li>孙悟空</li>
            <li>沙和尚</li>
            <li>猪八戒</li>
        </ul>
    </li>
</ul>

中国四大名著

• 红楼梦

  • 林黛玉
  • 薛宝钗
  • 王熙凤

• 西游记

  • 孙悟空
  • 沙和尚
  • 猪八戒

注意事项：

1. ul内部只能嵌套li,li标签不能脱离ul单独书写;
2. li标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表 结构;
3. 无序列表的列表项li之间，没有顺序的先后之分，它们的重要程度是相同的；
4. 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。

有序列表ol>li

ol：ordered list，表示定义一个有序的列表的大结构。
li：list item，定义的是有序列表的每一项。

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	<li>列表项4</li>
</ol>

定义列表dl>dt+dd

dl：definition list，表示定义一个自定义列表的大结构。
dt：definition term，表示定义自定义列表中的一个主题或者术语。
dd：definition description，定义解释项，表示描述或解释前面的定义主题。

<dl>
	<dt>张三</dt>
	<dd>
        <p>城市：北京</p>
        <p>年龄：18</p>
    </dd>
</dl>
<dl>
	<dt>张三</dt>
	<dd>
		<p>城市：北京</p>
        <p>年龄：18</p>
    </dd>
</dl>

注意事项：

1. dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt。
2. 每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。
3. dt和dd标签也是容器级标签，内部可以放置任意内容。
4. 定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
5. 配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期管理。

布局标签div与span

div标签

分割、区域、跨度的意思，俗称大盒子;双标签，是最经典的容器级标签，内部可以放置任意内容。
作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用div包裹起来，整体设 置大的布局效果

span标签

小区域、小跨度的意思,俗称小盒子;也是双标签，容器级标签。
作用：在不改变整体效果的情况下，可以辅助进行局部调整。

表格table

table：表格，定义的是整个的表格大结构。
tr：table rows，表格的行，定义的是表格由多少行组成。
td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。

表格的单元格之间有默认的空隙，会导致双线边框。

• 解决方法：设置标签样式属性style。
• 属性值：border-collapse : collapse; 表示边框塌陷。

制作技巧

1. 先列出所有行tr，以最小单元格为标准。
2. 再添加每一行的td或th单元格。
3. 划分单元格所在行时，顶边对齐的属于同一行。
4. 将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。

<!--在css中设置td {width:100px;}-->
<table border="1" style="border-collapse: collapse;">
	<tr>
    	<td colspan="2">1</td>
        <td rowspan="2">2</td>
        <td colspan="2">3</td>
    </tr>
    <tr>
        <td>4</td>
        <td rowspan="2">5</td>
        <td>6</td>
        <td rowspan="2">7</td>
    </tr>
    <tr>
        <td rowspan="2">8</td><!--跨行合并2行-->
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>11</td>
        <td colspan="2">12</td><!--跨列合并2列-->
        <td>13</td>
    </tr>
</table>

1		2	3
4	5		6	7
8		9	10
	11	12		13

分区标签

• table内部最直接的子级包含四个分区标签，他们都是双标签。
• caption：表格的标题，内部书写标题文字。
• thead：table head，表格的头部。内部嵌套tr>th。
• tbody：table body，表格的主体。内部嵌套tr>td。
• tfoot：table foot，表格的页脚。内部嵌套tr>td。
• 四个分区可以选择性的进行组合。
• 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、 tbody、tfoot执行的。

<table border="1" style="border-collapse: collapse;">
        <caption>各地区固定资产投资情况</caption>
        <thead>
            <tr>
                <th rowspan="2">地区</th>
                <th colspan="2">按总量分</th>
                <th colspan="2">按比重分</th>
            </tr>
            <tr>
                <th>自年初累计（亿元）</th>
                <th>比去年同期增长</th>
                <th>自年初累计</th>
                <th>去年同期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>全国</td>
                <td>1245</td>
                <td>9.6</td>
                <td>9.6</td>
                <td>11</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>1245</td>
                <td>9.6</td>
                <td>9.6</td>
                <td>11</td>
            </tr>
    </tbody>
</table>

各地区固定资产投资情况

地区	按总量分		按比重分
	自年初累计（亿元）	比去年同期增长	自年初累计	去年同期
全国	1245	9.6	9.6	11
全国	1245	9.6	9.6	11

表单

表单是用来收集用户输入信息的。
在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个 部分构成。

表单的功能

• 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处 理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域， 表单中的数据就无法传送到后台服务器。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提 交按钮、重置按钮等。

表单域form标签

form : 双标签，容器级标签，是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个form标签之内。

表单域form标签属性

• action——属性值:url——指定接收并处理表单数据的服务器程序的url地址
• method——属性值:get/post——用于设置表单数据的提交方式
• name——属性值:自定义名称——规定表单的名称

表单元素

input标签及属性

单标签，本身相当于一个特殊的文本。需要通过标签属性实现各种功能。

• type=“text”——单行文本输入框,定义提供用户输入的单行文本的输入框，不能输入多行文字。 常用value属性定义默认的输入文字。

  <input type="text" value="默认输入文本" >
  

• type=“password”——密码输入框,定义提供用户输入的密码框。 password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

  <input type="password">
  

• type=“radio”——单选框，定义提供用户点击选择的单选框。
  单选框一般都是成组出现，多个单选框组成一组选择的情况。
  同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现。

  <input type="radio" name="sex" checked="checked"/> 男
  <input type="radio" name="sex" /> 女
  

• type=“checkbox”——复选框,定义提供用户点击选择的多选框。 复选框允许用户在有限数量的选项中选择零个或多个选项。 同一组复选框最好也设置相同的name属性。

  <input type="checkbox" name="hobby" checked="checked"/> 唱歌
  <input type="checkbox" name="hobby" /> 代码
  <input type="checkbox" name="hobby" /> 运动
  

• checked=“checked”——定义选框控件的默认被选中项

• type=“button”——普通按钮，没有任何特殊功能。

• type=“reset”——重置按钮，将一个form中填写的表单内容清空，恢复成默认。

• type=“submit” ——提交按钮，将填写数据提交到form中指定的后台服务器，并重置清空form中填写的信息。

• type=“image”——图像形式的按钮，默认与提交按钮的效果相同，使用的图片需要利用src属性查找正确路径。

• type=“file”——定义输入字段和"浏览"按钮，供文件上传

• type=“hidden”——定义隐藏的输入字段

• name=“自定义”——定义控件的名称

• value=“自定义”——定义控件的输入文本

• size=数字——定义控件的宽度

• maxlength=数字——定义允许输入的最多字符数

文本域textarea及属性

• 双标签，本身相当于一个特殊的文字；
  制作可以输入多行文本的区域;
  文本域可以设置默认输入的文字，在双标签之间书写默认文字。

• textarea有两个标签属性，可以设置显示区域大小。

• rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数， 会被隐藏并且出现滚动条。

• cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。

<!--一行最多15个汉字，最多10行-->
<textarea cols="30" rows="10">
    默认输入文字
</textarea>

下拉菜单select

• 下拉菜单需要至少两个标签完成结构；

• select:选择，表示定义下拉菜单整体结构。

• option:选项，表示定义下拉菜单的每一项。

• 两个标签都是双标签，文本级标签。

• 关系：select>option，option可以有任意多项。

• 默认情况下，选中的是第一项。 下拉菜单可以通过给标签设置selected属性，属性值为selected，更改默认选中项。

  <select>
  	<option>广州</option>
  	<option selected="selected">北京</option>
  	<option>重庆</option>
  	<option>上海</option>
  </select>
  

select分组管理

• optgroup ： 双标签，可对选项进行分组

• 关系：select>optgroup>option

• optgroup 可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签optgroup 是不能被点击选择的。

  <select>
  	<optgroup label="国内">
  		<option>广州</option>
  		<option selected="selected">北京</option>
  	</optgroup>
  	<optgroup label="国外">
  		<option>伦敦</option>
  		<option>巴黎</option>
  	</optgroup>
  </select>
  

label标签

• 作用是帮表单元素定义标注（标记）。
• 如果将表单控件与提示内容使用label标签进行绑定后，当用户鼠标点击label标签内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label标签绑定方法1

1. 给表单元素设置id属性。

2. 然后将需要绑定的其他内容用label标签包裹。

3. 给label标签设置for属性，属性值为绑定的表单元素的id属性值。

   <input type="checkbox" name="hobby" id="sport" />
   <label for="sport">运动</label>
   

label标签绑定方法2

如果绑定内容和表单元素写在一起，可以化简绑定写法。 直接使用标签将绑定内容与表单元素一起进行嵌套。

<label><input type="radio" name="sex" />男</label>

表单案例

<form>
	<p>
		用户名：<input type="text" value="请输入您的用户名">
	</p>
	<p>
		密码：<input type="password">
    </p>
    <p>
        性别: <input type="radio" name="sex" id="nan"   checked="checked"> <label for="nan">男</label> 
             <label><input type="radio" name="sex">女       </label>
	</p>
	<p>
		爱好：<label><input type="checkbox" name="hobby" checked="checked">绘画</label>
            <label><input type="checkbox" name="hobby">音乐</label>
            <label><input type="checkbox" name="hobby">代码</label>
	</p>
    <p>
        文件：<input type="file" multiple="multiple">
    </p>
    <p>
        自我介绍：<textarea cols="30" rows="5">请输入300字的自我介绍</textarea>
    </p>
    <p>
        城市：<select>
                    <optgroup label="国内">
                        <option>北京</option>
                        <option>上海</option>
                        <option selected="selected">广州</option>
                    </optgroup>
                    <optgroup label="国外">
                        <option>伦敦</option>
                        <option>东京</option>
                        <option>纽约</option>
                    </optgroup>
            </select>
    </p>
    <p>
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <input type="image" src="images/btn.png">
    </p>
</form>

字符实体

在普通文字书写时，有一些特殊符号不能直接书写（例如 连续的空格），或者符号具有特殊功能也不能直接书写 （例如<>符号）。 可以使用一些HTML提前预留好的替换字符进行书写，这 些替换字符叫做字符实体。

• 通过w3cschool手册查看：HTML参考手册——HTML ISO-8859-1
• 所有的字符实体和实体编号都是以&开头，以；结尾的。
• 实体名称对大小写敏感！

&nbsp; <!--空格-->    &lt; <!--小于-->       &gt; <!--大于-->
&amp; <!--和号-->     &quot;<!--引号-->      &yen;<!--元--> 
&euro;<!--欧元-->     &sect;<!--小节-->     &copy;<!--版权--> 
&reg;<!--注册商标-->