HTML概述
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
HTML骨架格式
日常生活的书信，我们要遵循共同的约定。
同理：HTML 有自己的语言语法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>1.html结构：包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写
html基本标签
1 HTML标签：
作用所有HTML中标签的一个根节点。
2 head标签：
作用：用于存放：
title,meta,base,style,script,link
注意在head标签中我们必须要设置的标签是title
3.title标签：
作用：让页面拥有一个属于自己的标题。
4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
1 HTML标签：
作用所有HTML中标签的一个根节点。2 head标签：
作用：用于存放：
title,meta,base,style,script,link
注意在head标签中我们必须要设置的标签是title3.title标签：
作用：让页面拥有一个属于自己的标题。4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
属性
color:文本的颜色
bgcolor:背景色
background:背景图片颜色的表示方式：
第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
第二种方式：RGB模式
第三种方式：十六进制：
#000000 #ffffff #325687 #377405
文档类型<!DOCTYPE>（重点）
<!DOCTYPE html>这句话就是告诉我们使用哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
HTML标签的语义化（重点）
白话： 所谓标签语义化，就是指标签的含义。
为什么要有语义化标签
1.方便代码的阅读和维护
2.同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3.使用语义化标签会具有更好地搜索引擎优化核心：合适的地方给一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
遵循的原则：先确定语义的HTML ，再选合适的CSS。
总结：（重要知识点）
双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>
排版标签
1.注释标签：<!–注释–>
2.换行标签：<br/>3.段落标签：<p>文本文字
特点：段与段之间有行高
属性：align对齐方式
(left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
容器标签（重点）
<div>:块级标签，独占一行，换行<span>:行级标签，所有内容都在同一行作用：<div>:主要是结合css页面分块布局<span>:进行友好提示信息
标题标签 (熟记)
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>例如：
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
1
2
3
4
5
6列表标签
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序
无序列表 ul （重点）
无序列表标签：
<ul></ul>属性：type :三个值，分别为：
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
注意：
1.
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表 ol
有序列表标签：
<ol>属性：type：
1、A、a、I、i（数字、字母、罗马数字）
列表项：<li></li>
定义列表dl
<dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>
名词1
名词1解释1
名词1解释2
... 名词2
名词2解释1
名词2解释2图片标签
独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
链接标签
文本或图像
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）
文本或图片属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
target:_self(自己) _blank(新页面，之前页面存在) _
__parent top 默认
self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=“#”)，表示该链接暂时为一个空链接。
base 标签
base 可以设置整体链接的打开状态
base 写到<head> </head>之间
### 锚点定位 （难点）
通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：
1.使用a href=”#id名>“链接文本"</a>创建链接文本。
2.使用相应的id名标注跳转目标的位置
表格标签
表格由
<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
字体标签
<font></font>**
属性： size:设置字体大小**
color:设置字体颜色
face:设置字体**
表格**
(table,tr,td)属性：
<table>
<tr>
<td>单元格内的文字</td>
…
</tr>
…
</table>1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table /table标签中，在 table /table中包含几对 tr /tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。注意：
1.中只能嵌套
2.标签，他就像一个容器，可以容纳所有的元素
表头标签(th)
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签替代相应的单元格标签即可。
表格结构（了解）
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table>标签中，一般包含网页的logo和导航等头部信息。<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
总结表格
1.表格提供了HTML 中定义表格式数据的方法。
2.表格中由行中的单元格组成。
3.表格中没有列元素，列的个数取决于行的单元格个数。
4.表格不要纠结于外观，那是CSS 的作用。
文本格式化标签
<b>定义粗体文本。<big>定义大号字。<em>定义着重文字。<i>定义斜体字。<small>定义小号字。<strong>定义加重语气。<sub>定义下标字。<sup>定义上标字。<ins>定义插入字。<del>定义删除字。定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。定义删除字。
## 表单标签(掌握)
目的是为了收集用户信息。
在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input 控件(重点)
在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。
属性 说明
type input元素类型
name input 元素的名称
value input 元素的值
size input 元素的宽度
readonly 是否只读
maxlength 输入字符的最大长度
disabled 是否禁用
文本框：
在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。
代码格式如下：
<input type=“text” name="…" size="…" maxlength="…" value="…"/>属性解释：
type=”text”：定义单行文本输入框；
name属性：定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性：定义文本框的宽度，单位是单个字符宽度；
value属性：定义文本框的初始值。
密码框：
是一种特殊的文本域，用于输入密码。
代码格式如下：
<input type=“password” name="…" size="…" maxlength="…" value="…"/>属性解释：
type=”password”定义密码框；
name属性：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性：定义密码框的宽度，单位是单个字符宽度；
value属性：定义文本框的初始值。
隐藏域：
是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式如下：
<input type=“hidden” name="…" value="…"/>属性解释：
type=”hidden”：定义隐藏域；
name属性：定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性：定义文本框的初始值。
单选按钮：
当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。
代码格式如下：
<input type=“radio” name="…" value="…"/>属性解释：
type=”radio”定义单选框；
name属性：定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须同一个名称；
value属性：定义单选框的值，同一组中，他们的域值必须是不同的。
复选框：
允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。
代码格式如下：
<input type=“checkbox” name="…" value="…"/>属性解释：
type=”checkbox”定义复选框；
name属性：定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性：定义复选框的值。
{
type: 以下为type可能要取的值：
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
表示同一组中只能选中一个( checked =“checked” 表示选中)
1.4 checkbox 表示多选 ，name必须一致，
表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.9 image 图片提交按钮
以上所有input的属性： width 设置宽度，height 设置高度 border 设置边框
1.10 button 普通按钮
1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
name属性：表单元素名字，只有name属性才能提交给服务器。
}文件上传框：
代码格式如下：
<input type=“file’ name=”…"注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
说明：multipart 控件是否上传多文件
属性解释：
type=”file”：定义文件上传框；
name属性：定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
HTML5的表单所有type类型
button | 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） |
checkbox | 定义复选框。 |
color | 定义拾色器。 |
date | 定义日期字段（带有 calendar 控件） |
datetime | 定义日期字段（带有 calendar 和 time 控件） |
datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
month | 定义日期字段的月（带有 calendar 控件） |
week | 定义日期字段的周（带有 calendar 控件） |
time | 定义日期字段的时、分、秒（带有 time 控件） |
email | 定义用于 e-mail 地址的文本字段 |
file | 定义输入字段和 “浏览…” 按钮，供文件上传 |
hidden | 定义隐藏输入字段 |
image | 定义图像作为提交按钮 |
number | 定义带有 spinner 控件的数字字段 |
password | 定义密码字段。字段中的字符会被遮蔽。 |
radio | 定义单选按钮。 |
range | 定义带有 slider 控件的数字字段。 |
reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
search | 定义用于搜索的文本字段。 |
submit | 定义提交按钮。提交按钮向服务器发送数据。 |
tel | 定义用于电话号码的文本字段。 |
text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 |
url | 定义用于 URL 的文本字段。 |
label标签(理解)
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。
<label for=“male”>Male</label>
<input type=“radio” name=“sex” id=“male” value=“male”>form标签（表单域）
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
\<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
\</form>常用属性：
1.Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
（表示动作，值为服务器的地址，把表单的数据提交到该地址上处理）
2.method
用于设置表单数据的提交方式，其取值为get或post。
3.name
用于指定表单的名称，以区分同一个页面中的多个表单。
4.enctype:
表示是表单提交的类型**
注意： 每个表单都应该有自己表单域。get:
1.地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
2.不安全
3.效率高
4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
post：
1.地址栏：请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。
使用情况：一般用于插入修改等操作
textarea控件(文本域)
如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols=“每行中的字符数” rows=“显示的行数”>
文本内容
</textarea>文本内容
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>注意：
中至少应包含一对。
在option 中定义selected =" selected "时，当前项即为默认选中项。
HTML5新标签与特性
常用新标签
header：定义文档的页眉
nav：定义导航链接的部分
footer：定义文档或节的页脚
article：标签规定独立的自包含内容
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容
常用新属性
属性 | 用法 | 含义 |
placeholder |
| 占位符提供可描述输入字段预期值的提示信息 |
autofocus |
| 规定当页面加载时 input 元素应该自动获得焦点 |
multiple |
| 多文件上传 |
autocomplete |
| 规定表单是否应该启用自动完成功能 |
required |
| 必填项 |
accesskey |
| 规定激活（使元素获得焦点）元素的快捷键 |
新增的type属性值：
类型 | 使用示例 | 含义 |
email |
| 输入邮箱格式 |
tel |
| 输入手机号码格式 |
url |
| 输入url格式 |
number |
| 输入数字格式 |
search |
| 搜索框（体现语义化） |
range |
| 自由拖动滑块 |
time |
| |
date |
| |
datetime |
| |
month |
| |
week |
|
综合案例
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>姓名:
手机号码:
邮箱地址:
所属学院:
入学成绩:
基础水平:
入学日期:
毕业日期:
多媒体标签
embed：标签定义嵌入的内容
audio：播放音频
video：播放视频
多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
\<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">\</embed>多媒体 audio
HTML5通过标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
1.autoplay 自动播放
2.controls 是否显不默认播放控件
3.loop 循环播放
多媒体 video
HTML5通过标签来解决音频播放的问题。
通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
HTML常用标签或属性全称
HTML标签或属性 | 英文全称 | 中文释义 |
a | Anchor | 锚 |
abbr | Abbreviation | 缩写词 |
acronym | Acronym | 取首字母的缩写词 |
address | Address | 地址 |
dfn | Defines a Definition Term | 定义定义条目 |
kbd | Keyboard | 键盘（文本） |
samp | Sample | 示例（文本） |
var | Variable | 变量（文本） |
tt | Teletype | 打印机（文本） |
code | Code | 源代码（文本） |
pre | Preformatted | 预定义格式（文本 ） |
blockquote | Block Quotation | 区块引用语 |
cite | Citation | 引用 |
q | Quotation | 引用语 |
strong | Strong | 加重（文本） |
em | Emphasized | 加重（文本） |
b | Bold | 粗体（文本 |
i | Italic | 斜体（文本） |
big | Big | 变大（文本） |
small | Small | 变小（文本） |
sup | Superscripted | 上标（文本） |
sub | Subscripted | 下标（文本） |
bdo | Direction of Text Display | 文本显示方向 |
br | Break | 换行 |
center | Centered | 居中（文本） |
font | Font | 字体 |
u | Underlined | 下划线（文本） |
s/ strike | Strikethrough | 删除线 |
div | Division | 分隔 |
span | Span | 范围 |
ol | Ordered List | 排序列表 |
ul | Unordered List | 不排序列表 |
li | List Item | 列表项目 |
dl | Definition List | 定义列表 |
dt | Definition Term | 定义术语 |
dd | Definition Description | 定义描述 |
del | Deleted | 删除（的文本） |
ins | Inserted | 插入（的文本） |
h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
p | Paragraph | 段落 |
hr | Horizontal Rule | 水平尺 |
href | hypertext reference | 超文本引用 |
alt | alter | 替用(一般是图片显示不出的提示) |
src | Source | 源文件链接 |
cell | cell | 巢 |
cellpadding | cellpadding | 巢补白 |
cellspacing | cellspacing | 巢空间 |
nl | navigation lists | 导航列表 |
tr | table row | 表格中的一行 |
th | table header cell | 表格中的表头 |
td | table data cell | 表格中的一个单元格 |
iframe | Inline frame | 定义内联框架 |
optgroup | Option group | 定义选项组 |
TML标签 | TML | 中文释义 |
