译为：超文本标记语言
用于网页开发的语言，通过HTML标签对网页中文本图片等内容进行描述。
HTML元素的分类：
- 块元素：可以设置宽度和高度，独立成行。h1-6,p,div,ul,li
- 行内元素（内联元素，行级元素）：不可以设置宽度高度，不独立成行。a,span
- 行内块元素：可以设置宽度和高度，不独立成行img,input,button
文档结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页主体内容
</body>
</html>
注释
<!- -注释- - >
标签的构成
结构
属性注意点：
-
标签的属性写在开始标签内部
-
标签上可以同时存在多个属性
-
属性之间以空格隔开
-
标签名与属性之间必须以空格隔开
-
属性之间没有顺序之分
分类：
- 双标签：开始标签+内容+结束标签
- 单标签
标签与标签的关系
父子关系：嵌套
兄弟关系：并列
常见标记
- 结构标记：html, head, body
- 头部标记：title, meta, link, style
- 文本标记：b,i, u , strong,
- 段落标记：p, hn, pre, marquee, br, hr
- 列表标记：ul, ol, li, dl, dt, dd
- 超链接标记：a, map, area
- 图像及媒体元素标记：img, embed, object
- 表格标记：table, tr, td, th, tbody
- 表单标记：form, input, textarea,
select, option, label - 容器标记：div, span
排版标记
标题标签
特点：独占一行；文字有加粗，变大
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题样式
h1{
color:red;颜色
text-align:center;文本居中
}
<h1 align="center">一级标题</h1>;文本居中
段落标签
段落之间有空隙
<p>一个段落<\p>
换行标签
换行无明显间隙
<br>
水平线标签
<hr>
| 属性 | 值 | 说明 |
|---|---|---|
| width | 像素px或百分比 | 设置水平线宽度 |
| size | 整数，单位px | 设置水平线高度 |
| color | rgb函数、十六进制数、颜色英文名称 | 设置水平线颜色 |
| align | left,center,right | 设置水平线对齐方式 |
文本格式化标签
加粗
strong有强调含义，b没有
<b>加粗1</b>
<strong>加粗2</strong>
倾斜
<i>倾斜1</i>
<em>倾斜2</em>
下划线
<u>下划线1</u>
<ins>下划线2</ins>
删除线
<s>删除线1</s>
<del>删除线2</del>
媒体标签
图片标签
<img src="" alt="">
特点：单标签
| 属性 | 说明 |
|---|---|
| src | 指定需要展示图片的路径 |
| alt | 替换文本，当图片加载失败时，才会显示alt文本 |
| title | 提示文本，当鼠标悬停时，才显示的文本 |
| width | 图片的宽度 |
| height | 图片的高度 |
相对路径
同级目录：./name.png或者name.png
下级目录：./img/name.png
上级目录：../name.png
音频标签
<audio src="" controls></audio>
| 属性 | 说明 |
|---|---|
| src | 指定播放音频的路径 |
| controls | 显示播放音频的控件（可省略） |
| autoplay | 音频加载完毕自动播放（部分浏览器不支持） |
| loop | 音频结束时重新开始播放 |
音频标签支持格式：mp3,Wav,Ogg
视频标签
<video src="" controls autoplay muted></video>
muted:静音
其余属性同上
视频标签支持格式：mp4,WebM,Ogg
链接标签
<a href="">超链接</a>
href属性
内部链接：打开自己的页面，./目标页面.html
外部链接：http://www.xxxx.com
显示特点：
- 未点击过显示为蓝色，点击过变为紫色（清楚浏览器历史记录可恢复为蓝色）
- 默认文字有下划线
target属性
属性值：
target = "_self"：默认，在当前窗口跳转
target = "_blank" ：点击链接在新窗口中打开页面
空链接
<a href="#">空链接</a>
列表标签
无序列表
<ul>
<li></li>
<!--嵌套-->
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
列表每一项前有小圆点
标签组成：
| 标签 | 说明 |
|---|---|
| ul | 表示无序列表的整体 |
| li | 表示无序列表的每一项 |
特殊效果：
li{
display: inline;显示方式行内显示（横版排列)
weight: 120px;
height: 30px;
}
ul{
text-align: center;删除无序列表项目符号
list-style: none;
}
有序列表
<ol>
<li></li>
<!--嵌套-->
<li>
<ol>
<li></li>
</ol>
</li>
</ol>
列表每一项前显示序号标识
标签组成：
| 标签 | 说明 |
|---|---|
| ol | 表示有序列表的整体 |
| li | 表示有序列表的每一项 |
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
标签组成：
| 标签 | 说明 |
|---|---|
| dl | 表示自定义列表的整体 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
dd前默认显示缩进效果
表格标签
表格的基本标签
主要作用：显示格式化数据
表格元素的容器使用table标签
其他表格元素的标签：thead表头,tbody表体,th单元格,tr行,td列
基本标签：
| 标签 | 说明 |
|---|---|
| table | 表格整体，包裹tr |
| caption | 表格标题（书写在table内部） |
| th | 表头单元格（书写在tr内部） |
| tr | 表示每行，包裹td |
| td | 表示每列，包裹内容 |
表格相关属性
| table的属性 | 含义 |
|---|---|
| border | 表格边框的宽度 |
| border-color | 边框的颜色，若不设置，将显示立体边框效果 |
| bordercolordark bordercolorlight | 设置边框暗部分和明亮部分效果， IE才支持这两个属性 |
| bgcolor | 表格的背景色 |
| background | 表格的背景图像 |
| cellspacing | 表格的间距 |
| cellpadding | 表格的填充 |
| width，height | 表格的宽和高，可以使用象素或百分比做单位 |
| align | 水平对齐属性 |
| td的属性 | 含义 |
|---|---|
| border-color | 单元格边框的颜色，该属性仅IE支持 |
| bgcolor | 单元格的背景色 |
| background | 单元格的背景图像 |
| align/valign | 单元格里的内容的水平或垂直对齐方式 |
| colspan/rowspan | 合并同一列相邻的几个单元格/合并同一行的几个单元格 |
| width，height | 单元格的宽和高，可以使用象素或百分比做单位 |
表格结构标签
| 标签 | 说明 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
合并单元格
合并步骤：
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁，删除谁
-
- 上下合并：只保留最上的，删除其他
- 左右合并：只保留最左的，删除其他
- 给保留的单元格设置：跨行合并（rowspan）或跨列合并（colspan）
只有一个结构标签内的才可以合并
| 属性 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 将多行单元格垂直合并 |
| colspan | 合并单元格的个数 | 将多列单元格垂直合并 |
代码
<!--表格元素的容器-->
<table border="1">
<!--表头thead-->
<thead>
<th></th>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</thead>
<!--表体tbody-->
<tbody>
<tr>
<td colspan="4">合并行单元格</td>
</tr>
<tr>
<td rowspan="3">合并列单元格</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
表格css
table{
border-collapse:collapse;
}
表单标签
input系列标签
input标签通过type的不同展示不同的效果
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框，用于输入密码 |
| radio | 单选框，用于多选一 |
| checkbox | 多选框，用于多选多 |
| file | 文件选择，用于之后上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮，默认无功能，可配合js添加功能 |
type属性如果拼错或者有空格，相当于默认属性
文本框text
常用属性：
placeholder：占位符，提示用户输入内容的文本
密码框password
常用属性：（同上)
placeholder：占位符，提示用户输入内容的文本
单选框radio
常用属性：
- name：分组。有相同name属性的单选框为一组，一组中同时只能有一个被选中
- checked：默认选中
复选框checkbox
常用属性：
checked：默认选中
文件选择file
常用属性：
multiple：多文件选择
按钮
常用属性：
value：按钮名
需要使用form标签才能实现按钮功能
button按钮标签
为双标签，易于包裹其他内容
| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后提交数据给后端服务器 |
| reset | 重置按钮，点击后恢复表单默认值 |
| button | 普通按钮，默认无功能，可配合js添加功能 |
谷歌浏览器中button默认为提交按钮
select下拉菜单标签
标签组成：
- select：下拉菜单整体
- option：下拉菜单的每一项
常见属性：
selected：下拉菜单默认选中
<select id="selectID" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
效果图：
textarea文本域标签
<textarea cols="30" rows="10"></textarea>
常用属性：
-
cols：规定文本域内可见宽度
-
rows：规定文本域内可见行数
-
maxlength：文本域内最大输入字符个数
右下角可以拖拽改变大小
label标签
绑定内容与表单标签
方法1：
-
使用label标签把内容（如:文本)包裹起来
-
在表单标签上添加id属性
-
在label标签的for属性中设置对应的id属性值
方法2：
- 直接使用label标签把内容（如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
代码
<!--方法1：for和id搭配-->
<input type="radio" id="nv">
<label for="nv">女</label>
<!--方法2：包裹-->
<label>
<input type="radio">
男
</label>
语义化标签
没有语义的布局标签
div标签：一行显示一个
span标签：一行可以显示多个
<div></div>
<span></span>
有语义的布局标签
| 标签名 | 说明 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| artcle | 网页文章 |
字符实体
在网页中展示特殊符号效果时，使用字符实体替代
格式：&英文;
浮动框架
浏览器窗口含有孤立的子窗口称为浮动框架
使用iframe标记，只能插入body标记中
<iframe 属性名称="value" name="iframe_name"></iframe>
<a href="链接地址" target="iframe_name">链接标题</a>
| 属性 | 说明 |
|---|---|
| src | 设置源文件属性 |
| name | 设置框架名称 |
| width | 设置浮动框架窗口宽度 |
| height | 设置浮动框架窗口高度 |
| frameborder | 设置框架边框 |
| scrolling | 设置框架滚动条 |
| marginwidth | 设置框架左右边距 |
| marginhright | 设置框架上下边距 |
HTML5新特性
- 语义标签
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的表单控件，比如 calendar、date、time、email、url、search
