#
## 基本元素
通用属性: id class style dir title
事件属性: onload onunload onclick ondblclick onmousedown onmoseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup
### \<!--...--/> 注释
### \<html> 根元素
### \<head> 页面头部分
### \<title> 页面标题
### \<body> 页面主体
可以指定id、class、style、dir、title等通用属性,还可以指定nload onunload onclick ondblclick onmousedown onmoseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup等事件属性
### \<hr> 定义水平线
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性,HTML5中\<hr>还代表了主体结束的语义。
示例:
<hr>
### \<div> 文档中的节
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
### \<span>
与\<div>基本相似,区别是\<span>只是表示一段一般性文本,该元素包含的文本内容默认不会换行,可以指定与\<div>相同的属性
## 文本格式相关的元素
### \<h1> - \<h6> 标题1到标题6
示例:
<h1>标题一</h1>
<h2>标题一</h2>
<h3>标题一</h3>
<h4>标题一</h4>
<h5>标题一</h5>
<h6>标题一</h6>
### \<p> 定义段落
可以指定id、class、style、dir、title等通用属性
### \<br> 插入一个换行
可以指定id、class、style等通用属性
### \<b> 粗体文本
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
```html
<b>粗体文本</b>
```
<b>粗体文本</b>
### \<i> 斜体文本
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
```html
<i>斜体文本</i>
```
<i>斜体文本</i>
### \<em> 强调文本
效果与斜体文本差不多 可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
```html
<em>强调文本</em>
```
<em>强调文本</em>
### \<strong> 粗体文本
与\<b>基本相同
```html
<strong>粗体文本</strong>
```
<strong>粗体文本</strong>
### \<small> 小号字体文本
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
```html
<small>小字号文本</small>
```
<small>小字号文本</small>
### \<sub> 下标文本
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
```html
<sub>下标文本</sub>
```
<sub>下标文本</sub>
### \<sup> 上标文本
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
```html
<sup>上标文本</sup>
```
<sup>上标文本</sup>
### \<bdo> 文本显示方向
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。该元素应该指定dir属性,该属性值只能是ltr 或者 rtl
```html
<bdo dir="ltr">
从左到右
</bdo>
<bdo dir="rtl">
从右到左
</bdo>
```
<bdo dir="ltr">
从左到右
</bdo>
<br>
<bdo dir="rlt">
从右到左
</bdo>
## 语义相关元素
### \<abbr> 缩写
使用该元素时通常建议指定title属性,该属性用于指定该缩写代表的全称。
```html
<abbr title="abbreviation [əˌbriːviˈeɪʃn] 缩写;缩写词">abbr</abbr>
```
<abbr title="abbreviation [əˌbriːviˈeɪʃn] 缩写;缩写词">abbr</abbr>
### \<address> 地址
浏览器通常会用斜体字显示所包含的文本
<address> 一个地址 </address>
### \<blockquote> 长引用文本
长引用文本:
<blockquote>
会使用缩进的方式显示这段被引用的文本,可指定cite属性,该属性用于指定引用文本所引用的网址url或出处
</blockquote>
### \<q> 短引用文本
定义一段短的引用文本
<q>定义一段短的引用文本</q>
### \<cite> 表示作品
用于表示作品的标题,浏览器会用斜体显示所包含的文本
<cite>我和我的祖国</cite>
### \<code> 代码
表示一段计算机代码
<code>
for (i = 0; i < cars.length; i++)
{
text += cars[i] + "<br>";
}
</code>
### \<dfn> 专业术语
通常用粗体或斜体字显示
<dfn>专业术语</dfn>
### \<del> 删除的文本
属性:
- cite: 为一个url,对应的文本解释被删除或插入的原因
- datetime: 日期时间
<del>删除的文本</del>
### \<ins> 插入的文本
属性:
- cite: 为一个rul,对应的文本解释被删除或插入的原因
- datetime:日期时间
<ins>插入的文本</ins>
### \<pre> 预格式化
表示元素办好的文本已经进行了“预格式化”,包含的文本中的空格 回车 tab等都会被保留
<pre>表示元素办好的文本已经进行了“预格式化”,
包含的文本中的空格 回车 tab等都会被保留</pre>
### \<kbd> 键盘文本
定义键盘文本,表示文本是通过键盘输入的,通常在计算机使用文档,说明中会经常使用
<kbd>键盘文本</kbd>
### \<var> 变量
表示一个变量,通常会用斜体字显示所包含的文本
<var>变量<var>
## \<a> 超链接和锚点
可以指定id、class、style、dir、title等通用属性,还可以指定onclick等各种事件属性。
### 6个重要属性
- href: 指定超链接所链接的另一个资源 ,可以是绝对路径(URL)也可以是相对路径
- hreflang:指定超链接所链接的文档所使用的语言
- target: 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是 _self、_blank、_top、_parent四个值,分别代表自身,新窗口,顶层框架,父框架来装载新资源。
- download:用于让用户下载目标链接所指向的资源,而不是直接打开目标链接。该属性的属性值指定用户保存下载资源时的默认文件名。
- type:指定被链接文档的MIME类型。
- media: 指定目标URL所引用的媒体类型。默认值all,只有当指定了href属性时该属性才有效。
```html
<a href="https://www.baidu.com">百度</a>
<a href= "mailto:jdt26@163.com">邮件链接</a>
<a href= "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download= "111.png">下载图片</a>
```
<a href="https://www.baidu.com">百度</a>
<a href= "mailto:jdt26@163.com">邮件链接</a>
<a href= "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download= "111.png">下载图片保存为111.png</a>
### 锚点
```html
<a name="test">生成锚点</a>
<a href="...html#test">定位到锚点test</a>
```
## 列表相关元素
### \<ul> 无序列表
可以指定id,style,class等属性,还可以指定onclick等事件属性。该元素只能包含\<li>子元素。
### \<ol> 有序列表
可以指定id,style,class等属性,还可以指定onclick等事件属性。该元素只能包含\<li>子元素。可以指定三个属性:
- start:指定列表项的起始数字,默认是第一个,如1,A等
- type:指定使用哪种类型的编号,如1代表数字,a或A代表使用小或大写字母,I或i代表使用大写或小写罗马数字,HTML5不推荐使用。
- reversed:该属性指定是否将排序反转
### \<li> 列表项
可以指定id,style,class等属性,还可以指定onclick等事件属性。该元素里可以包含与div完全相似的内容,因此可以包含很多类型的子元素。
### \<dl> 术语列表
只能包含dt和dd两种子元素。可以指定id,style,class等属性,还可以指定onclick等事件属性。
### \<dt> 标题列表项
可以指定id,style,class等属性,还可以指定onclick等事件属性。该元素只能包含文本,图像,超链接,文本格式化元素和表单控件元素等
### \<dd> 普通列表项
可以指定id,style,class等属性,还可以指定onclick等事件属性。该元素里可以包含与div完全相似的内容,因此可以包含很多类型的子元素。
```html
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ol start=3 type="A">
<li>修改序号开始位置1</li>
<li>修改序号开始位置2</li>
<li>修改序号开始位置3</li>
</ol>
<ol type="I">
<li>修改序号类型1</li>
<li>修改序号类型2</li>
<li>修改序号类型3</li>
</ol>
<ol reversed=true >
<li>序号反转1</li>
<li>序号反转2</li>
<li>序号反转3</li>
</ol>
<dl>
<dt>html</dt>
<dd>TML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体</dd>
<dt>CSS</dt>
<dd>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</dd>
</dl>
```
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ol start=3 type="A">
<li>修改序号开始位置1</li>
<li>修改序号开始位置2</li>
<li>修改序号开始位置3</li>
</ol>
<ol type="I">
<li>修改序号类型1</li>
<li>修改序号类型2</li>
<li>修改序号类型3</li>
</ol>
<ol reversed=true >
<li>序号反转1</li>
<li>序号反转2</li>
<li>序号反转3</li>
</ol>
<dl>
<dt>html</dt>
<dd>TML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体</dd>
<dt>CSS</dt>
<dd>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</dd>
</dl>