HTML(Hyper Text Markup Language)，译为“超文本标签语言”，主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。
1. HTML骨架格式
<html><!--根标签-->
<head><!--头标签，用于存放：title(必须要有)，meta,base,style,link,strong-->
<title></title><!--标题标签-->
</head>
<body><!--主体标签，用于存放：p,h,a,b,u,i,s,em,del,ins,strong,img-->
</body>
</html>2.HTML标签分类
（1）双标签（大部分）
“/”为关闭符号
例如：<body> 内容 </body>
（2）单标签（个别）
例如：<br />
3.HTML标签的关系
标签的相互关系一般就两种：
(1) 嵌套（父子关系）
例如：在骨架格式中，<html>与<head>
(2) 并列（兄弟关系）
例如：在骨架格式中，<head>与<body>
4.使用sublime
sublime快速生成骨架的方式：
输入“html”，按tab
*字符集：
UTF-8 --->包括全世界所有国家需要的字符
gb2312 --->简单中文
BIG5 --->繁体中文
GBK --->包含所有中文字符
5.HTML标签语义化
标签语义化，即标签的含义。
优点：方便阅读与后期维护。
遵循原则：先确定语义的HTML，再选合适的CSS。
6.HTML标签
（1）排版标签
1.标题标签（双标签）head
例如：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，六个等级，逐步递减。
2.段落标签（双标签）paragraph
例如：<p>...</p>
3.水平线标签 （单标签）horizontal
例如：<hr />
4.换行标签 （单标签）break
例如：<br /> ---->强制换行
5.div 与 span（双标签）division
两个皆无语义，是布局网页的标签，用来装内容的。
div --->分割，分区
span --->跨度，范围
其语法格式为：
<div> ... </div>
<span> ... </span>特点：
1.<div>标签用来布局，但一行只能放一个<div>，类比成一个大盒子。
2.<span>标签用来布局，一行可以放多个<span>，类比成一个小盒子。
例如：
（2）文本格式化标签
*以下均为双标签：
（1）粗体：<b>、<strong>
（2）斜体：<i>、<em>
（3）加删除线：<s>、<del>
（4）加下划线：<u>、<ins>
更推荐使用<strong>、<em>、<del>、<ins>，语义更加强烈，其它标签只是使用，并没有强调。
（3）标签属性
属性，即特性，特点。
让HTML标签提供更多信息 ------> 用HTML标签的属性来设置。
<标签名 属性1="属性值1" 属性2=......> 。。。</标签名>
例如：
（4）图像标签（img）
<img src="图像URL" />
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
例如：<img src = "图片.jpg" alt = "图片" title = "我的图片" />
*注：上图像与该html文件在同一目录中
（5）链接标签
anchor，锚，铁锚。
<a href="跳转目标" target="目标窗口的弹出方式"> 文本，图像或音频等等 </a>
href（Hypertext Reference，超文本引用）：用于指定链接目标的url地址
target：用于指定链接页面的打开方式，有self（覆盖自身）和blank（新开网页）两种，self为默认值。
*注：1.外部链接 需要添加 http://
2.内部链接 需要添加链接内部页面名称，例：<a href="index.html">首页</a>
3.若暂时没有确定的链接，则将 href定义一个"#"，意思为链接暂时为一个空链接
例如：
1.锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接有两个步骤：
1.使用<a href="#id名">“链接文本”</a>创建链接文本
2.使用相应的id名标注跳转目标位置
例如：
2.base标签（单标签）
base可以设置整体链接的打开状态。
例如：
base可以设置整体链接的打开状态。
若链接过多，则需要写多个target，过于繁琐。
因此，直接在<head>里写一个base标签即可。
7.路径
当一个页面需要用到图片(文件)，首先就是要找到图片(文件)，找图片(文件)就需要有一定的路径去找。路径一般分为：绝对路径和相对路径。
（1）相对路径
- 图像文件与HTML文件位于同一文件夹：只需输入图像文件的名称即可，例如：<img src="头像.jpg" />
- 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，例如：<img src="img/头像.jpg" />
- 图像文件位于HTML文件的上一级文件夹：在文件名之前加一个"../"，如果是上两级，则需使用"../../"，以此类推，例如：<img src="../头像.jpg" />
（2）绝对路径
1.本地路径，一般不使用
2.完整的网络地址，例如
“https://tupian.qqw21.com/article/UploadPic/2020-8/20208522181570993.jpg”。
8.列表标签
容器里面装载着文字或图表的一种形式，叫列表。
列表的最大特点：整齐、整洁、有序。
（1）无序列表ul
各个列表项之间没有顺序级别之分，是并列的。
基本语法格式为：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
......
</ul>例如：
*注：<ul>标签只能放<li>标签，其他标签都不允许
<li>标签相当于一个容器，<li>标签里可以放其他标签，下面有序列表同理
（2）有序列表ol
各个列表项之间有顺序级别之分，是有序的。
基本语法格式为：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
......
</ol>例如：
（3）自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号。
其基本语法为：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>例如：
9.表格table
表格：常见处理、显示表格式的数据。
（1）创建表格
创建表格的基本语法格式如下：
<table>
<tr><!--行-->
<td>单元格内的文字</td><!--单元格-->
...
</tr>
...
</table><table>、<tr>、<td>都是创建表格的基本标签，缺一不可。
*<table>--->用于定义一个表格
<tr>--->用于定义表格的一行，在<table>中有几对<tr>就有几行表格
<td>--->用于定义表格的单元格，必须嵌套在<tr>中，一对<tr>中有几对<td>，就表示该行有几列
例如： 
*注： 格式固定，只有<td>标签可以放其他标签。表格里没有列，只有单元格。
（2）表格属性
| 属性名 | 含义 | 常用属性值 |
| border | 设置表格的边框（默认无边框） | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白距离 | 像素值( 默认为2 ) |
| cellpadding | 设置单元格内容与单元格边框之间的空白距离 | 像素值( 默认为1) |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
（3）表头标签
表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头仅需用表头标签<th>替换相应的单元格标签<td>即可。
例如：
（4）表格结构
给表格划分一下结构，一部分是表头(用<thead>包起来)，一部分是表体(用<tbody>包起来)。例如：
（5）表格标题标签
表格的标题：caption
caption元素定义表格标题。基本语法为：
<table>
<caption>...表格标题...<caption>
</table>例如：
*注：caption标签必须紧跟table标签，对每个表格只能定义一个标题。通常这个标题会被居中在表格之上。
（6）合并单元格
跨行合并：rowspan，用法为：rowspan="num"（num为合并的单元格数量）例如：
跨列合并：colspan，用法为：colspan="num"（num为合并的单元格数量）例如：
其思想：将多个内容合并的时候，就会有多余的东西，把它删掉。
公式：删除的个数 = 合并的个数 -1
合并的顺序：先上，先左
10.表单标签
在HTML中，一个完整的表单通常由表单控件、提示信息和表单域三个部分构成。
表单，例如说牛客平台的登陆页面。其目的是收集用户信息。
（1）input控件
<input />为单标签，其常用属性如下：
| 属性 | 属性值 | 描述 |
| type | test | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选按钮 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的 最多字符 |
例如：
（2）label标签
label标签为input元素定义标签。
label标签的使用：
1.直接用label包裹input，即
2.如果label里有多个表单，想定位到某个表单可以通过for id的格式来实现，即
（3）textarea控件(文本域)
若需要输入大量的信息，就需要用到 textarea 控件了(主要用于做留言框)。其基本语法格式如下：
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>例如：
（4）下拉菜单
其基本格式为：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
*注：
（5）表单域
表单域用<form>标签进行定义，即创建一个表单，以实现用户信息的收集和传递，<form>中的所有内容都会被提交给服务器。它的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>1. action属性用于指定接收并处理表单数据的服务器程序的url地址
2. method用于设置表单数据的提交方式，其取值为get或post
3. name用于指定表单的名称，以区分同一页面中的多个表单
*注：每个表单都应该有自己的表单域
11.datalist标签
*注：datalist里用id来和input进行连接
12.fieldset标签
fieldset元素可将表单内的相关元素分组、打包，与<legend>搭配，例如：
13.HTML5新增
（1）新增input的type属性值
| 类型 | 含义 |
| 输入邮箱格式 | |
| tel | 输入手机号码格式 |
| url ( 网址 ) | 输入url格式 |
| number | 输入数字格式 |
| search | 搜索框（体现语义化） |
| range | 自动拖动滑块 |
| time | 小时分钟 |
| date | 年月日 |
| datetime | 时间 |
| month | 月年 |
| week | 星期 年 |
| color | 生成一个颜色选择表单 |
例如： 
（2）常用新属性
| 属性 | 用法 | 含义 |
| placeholder | <input type="text" placeholder="请输入用户名"> | 占位符 当用户输入时，文本框里的文字消失 |
| autofocus | <input type="text" autofocus> | 规定当页面加载时，input元素应该自动获得焦点 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete | <input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能，有两个值，一个为on，一个为off，on代表记录已经输入的值 |
| required | <input type="text" required> | 必填项 |
| accesskey | <input type="text" accesskey="s"> | 规定激活（使元素获得焦点）元素的快捷键，用 alt + 字母来的形式 |
*注：关于autocomplete的用法：1.需要提交按钮
2.表单必须要有name属性
14.多媒体标签
- embed：标签定义嵌入内容
先上传到视频平台，再点击分享，获得链接 - audio：播放音频
- video：播放视频
多媒体audio
其基本语法：
<audio src="音频文件路径"></audio>目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg
其属性有：
autoplay --- 自动播放（Google浏览器可能禁用了自动播放）
controls --- 是否显示默认播放控件
loop --- 循环播放（loop="-1"无限循环播放）
为了浏览器兼容，需要做三种声音文件：ogg mp3 wav
<audio controls autoplay>
<source src="音频文件名" />
<source src="音频文件名" />
<source src="音频文件名" />
</audio>考虑兼容性则需要以下代码（由上至下运行）：
当前MP3基本支持主流浏览器，在开发中一般写一个MP3基本是够用的。
多媒体video
其基本语法：
<video src="音频文件路径"></video><video> 元素支持三种视频格式： MP4, WebM, 和 Ogg
其属性有：
autoplay --- 自动播放（Google浏览器禁用了自动播放，在后面加上 muted="muted" 可以解决）
controls --- 是否显示默认播放控件
loop --- 循环播放（loop="-1"无限循环播放）
width --- 设置播放窗口宽度
height --- 设置播放窗口高度
muted --- 静音播放
preload --- auto预先加载，反之是 none
poster --- 其属性值为 imgurl ，加载时等待的画面图片
为了浏览器兼容，需要做三种视频格式：ogg、MPEG 4、WebM
<video controls autoplay>
<source src="音频文件名" />
<source src="音频文件名" />
<source src="音频文件名" />
</video>
考虑兼容性的做法，以下代码（以下代码由上至下运行）：
当前MP4基本支持主流浏览器，在开发中一般写一个MP4基本是够用的。
