HTML学习笔记（一）

HTML5语法

文档类型
DOCTYPE声明文档类型，必须位于第一行。
DOCTYPE不区分大小写以及单双引号。
DOCTYPE会触发浏览器以标准模式显示页面。
```
<!DOCTYPE HTML>
```
字符编码
HTML5中简化了字符编码的写法，直接用 meta 即可
```
<meta charset = "UTF-8">
```

布尔值
具有bool值的属性，当只写属性不指定属性值的时候，默认为true；若想要设置为false，可以不使用checked属性：

<!-- 只写属性，不写属性值，代表属性为true -->
<input type = "checkbox" checked>
<!-- 不写属性，代表属性为false -->
<input type = "checkbox">
<!-- 属性值 = 属性名，代表属性为true>
<input type = "checkbox" checked = "checked">
<!-- 属性值 = 空字符串，代表属性为true>
<input type = "checkbox" checked = "">

属性值
当属性值不包括空字符串、<、>、=、单双引号时，属性值两边的引号可以忽略。
```
<input type = "text">
<input type = 'text'>
<input type = text>
```

HTML5的元素

根据标记类型的不同，将HTML5的元素分为6类：

标记内容类型	说明
内嵌	文档中嵌入其他内容，如audio, video等
流	文档和body中使用的元素，如form, h1, small等
标题	段落标题，如h1, h2, hgroup等
交互	与用户交互的内容，如 button， textarea等
元数据	一般在页面的head标签里面，设置页面的表现和行为，如style,script等
短语	文本及文本标记元素，如mark， sub等

结构元素
HTML5新增的结构元素：

元素	说明
header	一个内容块或者整体页面的标题
footer	一个内容块或者整体页面的脚注
section	表示页面中一个区块，如章节、页眉等
article	表示页面中一块与上下文都不相关的内容
aside	article内容之外，与article内容相关的辅助信息
nav	表示页面中导航的链接
main	网页中的主要内容
figure	表示一段独立的流内容

功能元素
根据页面内容的功能需要，HTML5新增许多功能元素：
1. hgroup元素：对整个页面或者一个内容块进行整合
```
<hgroup> ... </hgroup>
```
2. video元素：定义视频等
```
<video src = "movie.ogg" controls = "controls">video 元素</video>
```
3. audio元素：定义音频
```
<audio src = "someaudio.wav">audio 元素</audio>
```
4. mark元素：显示高亮的文字
```
<mark> ... </mark>
```
5. dialog元素：定义对话框或窗口
```
<dialog open>这是打开的对话窗口</dialog>
```
6. bdi元素：定义文本方向
```
<ul><li>Username:<bdi>Bill</bdi>80 points </li>
</ul>
```
7. figcaption元素：定义figure标题
```
<figure><figcaption> ... </figcaption><img ... />
</figure>
```
8. canvas元素：表示图形、图表和其他图像。相当于提供一块画布
```
<canvas id = "myCanvas" width="200" height="200"></canvas>
```
9. summary元素：为details元素定义可见的标题
10. details元素：用户可以得到的具体信息
```
<details><summary>HTML5</summary>explanation
</details>
```
效果：
1. datalist元素：表示可选数据的列表，与input配合，可以作出输入值的下拉列表
```
<datalist> ... </datalist>
```
  与此类似的还有datagrid，它以树状列表的形式来展示。
2. meter元素：度量给定范围的数据
```
<meter value = "3" min = "0" max = "10">十分之三</meter>
```
  效果：
  
  用图形来表示的。

表单元素
通过type属性，HTML5为input元素新增了许多类型：

名称	格式	说明
tel	`<input type = "tel">`	表示输入电话号码的文本框
search	`<input type = "search">`	表示搜索文本框
url	`<input type = "url">`	表示输入url地址的文本框
email	`<input type = "email">`	表示输入电子邮件地址的文本框
datetime	`<input type = "datetime">`	表示输入日期和时间的文本框
date	`<input type = "date">`	表示输入日期的文本框
month	`<input type = "month">`	表示输入月份的文本框
week	`<input type = "weekt">`	表示输入周几的文本框
time	`<input type = "time">`	表示输入时间的文本框
datetime-local	`<input type = "datetime-local">`	表示本地日期和时间的文本框
number	`<input type = "number">`	表示必须输入数字的文本框
range	`<input type = "range">`	表示范围文本框
color	`<input type = "color">`	表示颜色文本框

HTML5全局元素

contenteditable属性
主要功能为允许用户在线编辑元素中的内容。它是一个bool型属性，当值为true时，允许编辑；为false时，不允许编辑。未指定true还是false时，依靠元素的父元素来决定是否可编辑。

<ul contenteditable="true"><li>列表元素1</li><li>列表元素2</li><li>列表元素3</li>

效果：
在这里插入图片描述

用户自定义数据
data-*属性赋予HTML嵌入自定义data属性的能力
data-*主要包括两部分：
1. 属性名：不包括任何大写字母
2. 属性值：可以是任意字符串

<ul><li data-animal-type="bird">猫头鹰</li><li data-animal-type="fish">鱼</li><li data-animal-type="spider">蜘蛛</li>
</ul>

data-animal-type就是用户自定义的属性。

draggable属性
该属性可以定义元素是否可以被拖动。属性取值及说明为：
1. true：可以被拖动
2. false：不可被拖动
3. auto：定义使用浏览器的默认行为
spellcheck属性
该属性定义是否对元素进行拼写和语法检查
1. true：进行拼写和语法检查
2. false：不进行检查
translate属性
该属性定义是否应该翻译元素内容：
1. yes：应该翻译此段内容
2. no：不应该翻译此段内容0

初学HTML，做个笔记。。。
请添加图片描述