一、什么是HTML?
HTML:超文本标签语言
HTML:网页的源码
浏览器：“解释和执行”HTML源码的工具
二、HTML文档的结构
HTML文档主要包括三大部分：文档声明部分、<head>头部部分、<body>主体部分。
1、<!DOCTYPE html> 这是HTML文档的声明部分，在html5中，已经被简化成了此样式。
2、.<!---->
注释:写给程序员看的，网页中不会显示
HTML中注释的快捷键：Ctrl+/
需要注意的是：文档声明必须有！而且必须在文档页面的第一行！
HTML基本标签
三、<head>头部部分
1.<head>
head头部作用：用于描述网页的一些关键信息，比如网页的配置，设置，关键字等等...
这些信息，大多在浏览器看不到，但是对网页的解析至关重要！
2.<meta charset="utf-8" />
meta标签，用于描述网页的各种信息，
其中<meta charset="utf-8" />设置网页的编码格式为UTF-8格式
常见的中文编码格式：
GB2312：国标码，简体中文；
GBK：扩展的国标码，简体中文；
UFT-8：万国码，兼容各种语言编码，常用！！！！！！
①<meta name="keywords"content="html,网页开发">
设置网页关键字，有助于搜素引擎的搜索。
name="keywords"表示这个meta标签设置的是网页的关键字，
content=""表示关键字的详细信息，多个关键字，用英文逗号分隔；
②<meta name="description"content="这是的第一个网页！">
设置网页的描述信息，搜索引擎搜索时，标题下面的一段文字！非常重要！！！
name="description"表示这个meta标签设置的是网页的描述信息；
content=""表示描述信息的详细内容！！！
3.<title>这是我的第一个网页！</title>
title：网页的标题，显示在浏览器选项卡上面的文字
4.<link rel="icon"href="img/icon.jpg"/>
链接网页的小图标：网页选项卡上的小图片
rel="icon"表示当前link的作用，是链接网页图标；
href="img/icon.jpg"表示图标的地址在何处
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"content="网页开发">
<meta name="description"content="这是我开发的第一个网页！">
<title>这是我的第一个网页！</title>
<link rel="icon"href="img/icon.jpg"/>
</head>
<body>
</body>
</html>
四、body主体部分
（一）HTML标签分类
HTML标签的分类：
块级标签：显示为块状，独占一行，自动换行。
行级标签：在一行中，从左往右依次排列，不会自动换行。
【块级标签与行级标签的区别】
1、块级标签：默认宽度100%（占满一行）；
块级标签自动换行（独占一行，右边不能有任何东西）；
可以使用css设置宽度高度
2、行级标签：默认宽度由内容撑开（内容多宽，宽度就占多宽）；
行级标签不会自动换行（一行当中，从左往右依次排列）；
宽度高度不能设置
从写法上，HTML标签分为“成对标签”和“自闭和标签（空标签）”
①成对标签：成对出现，有开始标签，必须有结束标签，内容包含在两个标签之间。
例如<h1></h1>
②自闭和标签（空标签）：只有一个标签，用/表示标签的自闭和（/可以省略）
例如<link/><meta/><hr/>
①成对标签：成对出现，有开始标签，必须有结束标签，内容包含在两个标签之间。
例如<h1></h1>
②自闭和标签（空标签）：只有一个标签，用/表示标签的自闭和（/可以省略）
例如<link/><meta/><hr/>
（二）基本块级标签
1.标题标签
h标签：标题标签，显示为黑体加粗
标题标签，共分为6种：h1-h6，h1最大，h6最小
2.分割线标签
hr标签：表示一条水平线
3.段落标签
p标签：表示段落标签，相当于我们文章中的一段文字
4.换行标签
<br/>：换行符
注意：在代码中，直接回车换行，浏览器并不认识，必须使用<br/>告诉浏览器这里要断行
5.预格式
pre标签：预格式标签。会保留代码中的空格，回车等符号，直接在浏览器显示
pre标签常用于在网页中显示代码，保留代码格式！！
6.块引用标签<blockquote cite="http://www.baidu.com"></blockquote>
blockquote：块引用标签。表明一段话是从其他网站引用的
有一个重要属性：cite=""表示这段话的引用来源，常放一个网站地址，但是浏览器显示并没有任何区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<hr/>
<p>这是一段文字这是一段文字这是一段文字<br/>这是一段文字这是一段文字这是一段文字</p>
<p>这是一段文字这是一段文字这是一段文字<br/>这是一段文字这是一段文字这是一段文字</p>
<pre>
这是一段文字
这是一段文字
这是一段文字
这是一段文字
</pre>
<!--
pre标签：预格式标签。会保留代码中的空格，回车等符号，直接在浏览器显示
pre标签常用于在网页中显示代码，保留代码格式！！
-->
<blockquote cite="http://www.baidu.com">
光明正大的抄你的！
</blockquote>
</body>
</html>
（三）、基于布局的块级标签
1、无序列表
有多个列表项组成，每个列表项前面带小黑点，称为无序列表。
无序列表用<ul>表示，列表中的每一项用<li>表示
2.有序列表
有序列表用<ol>表示，标签中的每个列表项用<li>表示
3、定义列表（定义描述列表）
定义列表<dl>，里面有一个标题<dt>，有多个描述项<dd>，
标题默认顶格显示，描述项相对标题向后缩进显示。
4、图片组合标签
组合标签<figure>里面有两部分：
①图片<img/>后续讲解
②图片的标题<figcaption></figcaption>
5、分区标签div（最常用标签）
div标签没有任何的特殊作用，仅仅起到一个包裹内容的作用。常用于网页中划分区块
div标签中可以包裹任何内容，需配合css一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>这是无序列表第一项</li>
<li>这是无序列表第二项</li>
<li>这是无序列表第三项</li>
<li>这是无序列表第四项</li>
</ul>
<ol>
<li>这是有序列表第一项</li>
<li>这是有序列表第二项</li>
<li>这是有序列表第三项</li>
<li>这是有序列表第四项</li>
<dl>
<dt>这是dl列表的标题</dt>
<dd>这是dl列表的描述项1</dd>
<dd>这是dl列表的描述项2</dd>
<dd>这是dl列表的描述项3</dd>
</dl>
<figure>
<img src="img/icon.jpg"/>
<figcaption>图片的描述标题</figcaption>
</figure>
<div style="500px;height:100px;background-color:yellow ;">
这是div里面的文字
<p>11111</p>
</div>
</body>
</html>
（四）、基本行级标签
1、span标签：①只是包裹作用，没有其他任何含义；
②span作用与div类似，需配合CSS使用。只不过div是块级标签，span是行级标签
2、【em/strong i/b区别】
①em和i都能倾斜，strong和b都能加粗。但是，i和b仅仅是单纯的倾斜加粗，而em和 strong多了强调的语义。
②em和strong都表示强调，但是strong强调的级别更高
注意：
①强调的目的：让搜索引擎知道网页重点强调的内容！便于搜索引擎显示！
②strong和em都可以多层嵌套，表示强调程度的递增！
3、q标签
q标签：表示短引用
cite属性：用于声明引用的来源
【常用引用标签】
<blockquote>用于引用一段内容</blockquote>
<q>用于引用一句话</q>
<cite>常用于引用作品名、书画名等</cite>
相同点：三个引用标签，都用city属性表示引用来源
不同点：①引用内容不同
blockquote->一段话，q->一句话，city->作品名
②显示的默认效果不同
blockquote->默认整段向右缩进；
q->默认加引号；
city->默认倾斜
4、small和big
small标签：将字体缩小一号；
big标签：将字体放大一号
注意：
①small和big可以多层嵌套，直到字体达到最小或最大为止
②这俩标签已经被淘汰，并不建议使用
5、img图片标签：
5.1 src属性：表示图片的路径
【图片路径的合法方式】
a、网络连接：由于图片在其它网站，如果其他网站删除图片，我们也不能访问，所以不建议使用这种方式
<img src="https://www.baidu.com/img/bd_logo1.png"/>
b、绝对路径：使用绝对路径的图片，只有在本机使用file协议才能访问！所以严禁使用这种方式
<img src="file:///E:/icon.jpg"/>
c、相对路径：
① 图片与当前文件在同一层文件夹：直接写图片名
<img src="icon.jpg"/>
② 图片在当前文档的下一层文件夹：文件夹名/图片名
<img src="img/icon.jpg"/>
③ 图片在当前文档的上一层文件夹：../图片名（../表示后退一层）
<img src="../icon.jpg"/>
但是，一定要注意：图片必须包含在项目里面，不能 访问项目外的图片。
5.2 height:图片的高度 图片的宽度
5.3 title：图片的标题，鼠标指上后看到的提示文字
<img src="img/icon.jpg"title="鼠标指上后看到的提示文字"/>
5.4 alt:图片无法加载时显示的文字
<img src="img/icon.jpg"alt="图片无法加载时看到的文字"/>
5.5 align:图片周围的文字相对于图片如何对齐
可选值：top->图片顶部center->图片中部bottom->图片底部
<img src="img/icon.jpg"align="bottom"/>12345
6.超链接标签a
① href属性：表示超链接需要跳转的页面
a.可以写网络地址：
<a href="http://www.baidu.com">这是一个超链接</a>
b.可以打开本地html文件：
采用相对路径确定文件地址，与img标签确定方式相同
<a href="02-HTML-基本块级标签.html">这是一个超链接</a>
② title属性：鼠标指上后显示的提示文字
<a href="http://www.baidu.com"title="hhh">这是一个超链接</a>
③ target属性：设置新页面打开的窗口位置
可选值：_self自身页面打开（默认）_blank新窗口打开
<a href="http://www.baidu.com"target="_blank">这是一个超链接</a>
④ rel属性：声明即将跳转的文件与当前文件的关系
rel="prev":即将打开的页面是当前页面的前一篇；
rel="next":即将打开的页面是当前页面的后一篇
<a href="next.html"rel="next">下一篇文章</a>
这个属性设置以后对用户没有任何作用，但多搜索引擎是友好的，搜索引擎在抓取网页时， 可以很清楚的知道网页中的上下文结构关系
【超链接的特殊应用】
1.功能性连接（了解）：
mailto://点击链接给指定邮箱发送邮件
<a href="mailto://jianghao@jrel.com">点击链接发封邮件</a>
tencent://message/?uin=251241143点击与指定QQ聊天
还有：tell://手机端点击打电话
message://手机端点击发送短信
ftp://使用ftp协议进行文件的上传下载
2.锚链接：
>>>本页面锚链接
①在页面的指定位置设置一个锚点，用name属性表示锚点的名字
<a name="top"></a>
②将超链接的href属性，设置为#加锚点名字
<a href="#top">点击链接，跳转到top锚点位置</a>
>>>页面间锚链接
①在新页面的指定位置设置一个锚点，用name属性表示锚点的名字
<a name="top"></a>
②将超链接的href属性，设置为新页面地址#加锚点名字
<a href="text.html#top">点击链接，跳转到text.html的top锚点位置</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
江汉真<span style="color: red;font-size:48px ;">帅</span><br />
<em>这是em标签</em><br />
<strong>这是strong标签</strong><br />
<i>这是i标签</i><br />
<b>这是b标签</b><br />
<u>这是u标签</u><br />
<q cite="http://www.666666.com">我是q标签引用</q>
<blockquote>我是blockquote的引用</blockquote>
<cite>我是city标签的引用</cite><br />
<small>我比正常小一号</small><br />
<big>我比正常大一号</big><br />
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<img src="img/icon.jpg"height=""width=""title="鼠标指上后看到的提示文字"alt="图片无法加载时看到的文字"align="bottom"/>12345
<img src="../icon.jpg" /><br />
<div style="height: 800px;background-color: red;"></div>
<a href="http://www.baidu.com"title="hhh"target="_blank">这是一个超链接</a>
<a href="mailto://jianghao@jrel.com"title="hhh"target="_blank">点击链接发封邮件</a>
<a href="#top">点击跳转到顶部！</a>
<a href="img/text.html#one">点击跳到新页面第一部分</a>
<a href="img/text.html#two">点击跳到新页面第二部分</a>
<a href="img/text.html#three">点击跳到新页面第三部分</a>
<a href="img/text.html#four">点击跳到新页面第四部分</a>
</body>
</html>
w3c规范：
1.w3c:万维网联盟，负责制定和维护web行业开发标准；
2.w3c要求的规范：
①w3c规范中倡导的两个分离:
内容与表现分离：（HTML与css分离）
内容与行为分离：（HTML与JavaScript分离）
②HTML语言要遵循语义化
③关于代码书写的规范：
HTML中的标签与属性必须要小写；
HTML中的标签必须要闭合；
属性值必须用引号引起来；
HTML标签必须正确嵌套
（五）、表格
![]()
![]()
![]()
![]()
表格用table表示，表格中的每一行用tr表示，一行中的每一列用td表示
th:表示表头，表头中的文字默认为加粗居中，th要放在tr中，用于替换td
table的常用属性
1.border：给表格加边框。默认给所有td加边框，并且给整个table加外边框，当增大 border的值时，td上的边框不变化，只有最外层大边框变宽
2.cellspacing：单元格与单元格之间的距离。
【注意】表格边框线合并的css写法:
style="border-collapse：collapse;"
这条css与cellspacing="0"有什么区别？
cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线
border-collapse：collapse；试讲表格相邻的两条边框进行合并处理，只有一条线存在
（一旦边框合并，collapse属性将会失效）
3.cellpadding:单元格中的文字与单元格边框的距离
4.height:表格的高度
width:表格的宽度
使用表格宽高属性设置大小：
<table height="400"width="500"></table>
使用css样式设置大小：
<table style="height: 400px;width=500px"></table>
5.align:设置表格在浏览器中的位置，不建议使用了。
可选值：left/center/right
6.bgcolor:背景色
bordercolor：边框颜色
background：背景图
背景图和背景色同时存在时，背景图会覆盖背景色
tr与td常用属性
1.width：单元格宽度
height：单元格高度
2.bgcolor：单元格颜色
3.align：设置单元格中的文字，水平对齐方式
left/center/right
Valign：设置单元格中的文字，垂直对齐方式
4.nowrap="nowrap"当单元格文字过多时，设置单元格文字不断行显示。但是，
会把表格的宽度撑大
表格的跨行与跨列
1.跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，
则单元格右边的n-1个单元格需去掉
2.跨行：在td上使用属性rowspan="n"进行跨列。如果一个单元格跨n行，
则单元格下边的n-1个单元格需去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1"cellspacing="0"style="border-collapse: collapse;"
cellpadding="15"bgcolor=""bordercolor=""background="">
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr>
<td align="right"valign="bottom">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<table border="1">
<tr>
<th>标题一</th>
<th colspan="2">标题二</th>
</tr>
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
</html>
（六）表单
1、form表单的两个重要属性
①action：表示表单提交的服务器地址
②method：表单提交数据的方式，可选值get和post
【get和post的区别】
get通过URL传递数据，所有内容在URL可以看到，而post无法看见
get传递数据不安全，而post传递数据安全。
get能够传递的数据量有限，且只能够传递文本信息。post可以传递大量数据，并且 可以传递图片、文件等其他内容
get的传输速度要比post快。
【get使用URL传递数据的格式】
http://URL地址.html?name1=value1&name2=value2
用?表示参数传递的开始，多个参数之间用&符号链接，同一个参数用name来标识value
所以使用表单时，input输入框的name属性一定不能省略。
如果省略input属性，则这个input的数据，不会往后台传递
2、input的常用属性：
①type：声明input输入框是什么类型
②name：给input输入框起名字。传输数据时，使用name=value的形式传递
③value：input输入框的默认值。
④placeholder：输入的提示文本，当输入框为空时，显示；当输入框有value时消失
⑤checked="checked" 设置单选框或者复选框的默认选中
⑥disabled="disabled" 设置input禁用。一旦使用disabled禁用的输入框，在传
递数据时，将不再往后台传递
⑦hidden="hidden" 隐藏输入框，隐藏的内容依然可以向后台传递相当于
<input type="hidden"name="hidden"value="111" />
3、input的type类型
①text：表示input为文本输入框，输入内容正常显示
②password：表示input为密码输入框，输入内容会显示小黑点
③radio：表示input为单选输入框
>>>radio标签的value属性不能省略，往后台传递值时，传递的是value中的值
>>>radio标签凭借name属性来判断是否是同一组标签。name相同为同一组，同
一组当中只能选择一个
>>>使用checked="checked"可以设置默认选中项。这种属性名=属性值的写法，
可以省略属性值
例如：<input type="radio"name="sex"value="男" checked/>男
④checkbox：表示复选框。其他要求与radio相同
⑤file：表示文件上传框。点击可以选择文件上传
accept属性，可以限制只能上传何种类型的文件。
*表示可以接受所有文件
image/*表示只能接受图片文件
multiple=“multiple”设置可以上传多个文件
⑥submit：表示input会显示为提交按钮，点击可以提交整张表单
⑦reset：表示重置按钮，点击将表单恢复到初始状态
⑧image：图形提交按钮。使用src属性导入一张图片，与submit按钮都具有提交
表单的功能
⑨button：只是按钮形状，没有任何作用
⑩hidden：隐藏的输入框。与普通输入框+hidden=“hidden”作用相同
4、select下拉选择区块
① <select></select>标签中有多个选项，用<option></option>表示
② 一个<select></select>组合只能有一个name，所以使用时需给select标签起name， 而不是给option标签起name
③ option标签如果有value属性，则传递数据时将传递value的属性值；如果没有value属性 则传递时将传递<option></option>标签中间的文字
④ option标签的title属性：表示鼠标指上后显示的文字
⑤ 给option标签加上selected="selected"表示默认选中项
⑥ 给select标签加multiple="multiple"表示这个下拉框可以多选，但是这个属性几乎不用
⑦ <optgroup lable=“组名”></optgroup>用于将所有的option标签进行分组，使用lable 属性表示组名
所以，完整的select下拉的结构如下：
<select name="city"> <optgroup label="group1"> <option>1</option> <option>2</option> </optgroup> <optgroup label="group2"> <option>3</option> <option>4</option> <option>5</option> </optgroup> </select>
5、textarea 文本域
①文本域可以使用cols和rows设定宽高，但我们几乎不用
我们使用style="height: 50px; 150px;"来设定大小
②使用css样式style="resize: none;"设定文本域的大小不允许拖动缩放
③使用属性readonly="readonly"设置文本域为只读，不允许修改
④css样式overflow用于设置超出区域的文字如何显示
可选值有三个：
hidden：超出区域的文字直接隐藏，无法看到；
scroll：无论文字多少，都会显示水平和垂直方向的滚动条；
auto：（默认效果）文字少的时候没有滚动条，文字多的时候自动显示垂直滚动条
也可以使用overflow-x和overflow-y单独设置水平和垂直方向滚动条是否显示
6、HTML5智能表单
6.1 H5为我们提供了input和form关联的新方式。并不要求input必须包含在form面。 如果input在form外面，只要给form标签一个id，让input标签for属 性关联这id， 即可实现input与form的关联
<form id="form1">
<input form="form1" />
6.2 H5给我们提供了一系列新的input的type类型
6.3 H5给提供的input新属性：
placeholder：输入框的默认提示内容
form：让表单外面的input关联表单id，实现input与form表单的关联
required=“required”设置input必填
autofocus="autofocus"：设置input自动获得焦点
autocomplete="off"关闭自动提示完成功能。此功能浏览器会默认打开。设置off为关闭，设置为on可以打开
可以给form标签添加autocomplete属性，设置整张表单的自动完成功能是否开 启。如有个别不同的input，可以单独再设置