HTML5

最新推荐文章于 2021-06-09 13:32:15 发布

One-Direction

最新推荐文章于 2021-06-09 13:32:15 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/BUCTOJ/article/details/96706347

HTML 专栏收录该内容

2 篇文章

订阅专栏

沿用了HTML的语法，更简洁，更人性化

语法规则
- DOCTYPE及语言,字符编码
```
<!Doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
```
- 大小写都可以(XHTML严格区分大小写)
- 布尔值((如：checkbox的checked属性写出来代表True，不写代表False)
- 省略引号(可以使用双引号，单引号或者不使用引号)
- 可以进行省略的标签
  - 不允许写的结束语的标签:
    area,basebr,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
  - 可以省略结束语的标签：
    li,dt,dd,p,rt,optgroup,option,colgroup,thread,tbody,tr,td,th
  - 可以完全省略的标签
    html,head,body,colgroup,tbody

新增的标签

新增的结构标签
- section标签
  表示页面的一个内容区块：比如章节，页眉，页脚，或页面的其他部分。可以和h1,h2…等标签结合起来使用，表示文档结构。
  例：HTML5中<seciton>......</seciton> ，HTML4中<div>......</div>
- article标签
  表示页面中一块于上下文不想关的独立内容，比如一篇文章
- aside标签
  表示article标签内容之外的，与article标签内容相关的辅助信息
- header标签
  表示页面中一个内容区块或者整个页面的标题
- hgroup标签
  表示对整个页面或页面中的一个内容块的标题进行组合
- footer标签
  表示整个页面或者页面中一个内容区块的注脚。一般来说，它会包含创作者的姓名，创作日期以及创作者的联系信息
- nav标签
  表示页面中导航链接的部分
- figure标签
  表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption标签为figure标签组添加标题，例如：
```
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
```
  HTML4中经常写作
```
<dl>
<h2>prc</h2>
<p>The People's Republic of China was born in 1949</p>
</dl>
```
新增的媒体标签
- video标签
  定义视频。像电影片段或其它视频流。
  例：<video src="movie.ogg" controls="controls">video标签</video>
  HTML4中写法：
```
<object type="video/ogg" data="move.ogv">
	<param name="src" value="movie.ogv">
</object>
```
- audio标签
  定义音频。如音乐或者其它音频流。
  例：<audio src="someaudio.wav">audio标签</audio>
  HTML4中写法：
```
<object type="application/ogg" data="someaudio.wav">
	<param name="src" value="someaudio.wav">
</object>
```
- embed标签
  用来嵌入内容(包括各种媒体)。格式可以是Midi,Wav,AIFF,AU,MP3,flash等。
  例：embed src="flash.swf"/>
  HTML4中写法：<object data="flash.swf" type="application/x-shockwave-flash"></object>
新增的表单控件标签
- email
  必须输入email
- url
  必须输入url地址
- number
  必须输入数值
- range
  必须输入一定范围内的数值
- Data Pickers
  拥有多个可供选择日期和事件的新输入类型：
  data — 选取日、月、年
  month — 选取月、年
  week — 选取周、年
  time — 选取时间(小时和分钟)
  datatime — 选取时间、日、月、年(UTC时间)
  datatime-local — 选取时间、日、月、年(本地时间)
- search
  用于搜索域，域显示为常规的文本域
- color

新增的其他标签

mark
突出显示部分文本

<p>
	Don't forget to buy
	<mark>
		something
	</mark>
</p>

progress
标示任务的进度
<progress value="22" max="100"></progress>
time
time标签定义公历的时间或日期，时间和时区偏移是可选的
该元素能够以机器可读的方式对日期和时间进行编码，这样，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果
有两个属性：

属性描述
datetime 规定日期/时间。否则由元素内容指定日期/时间
pubtime 指定time元素中的日期/时间是文档(或article元素)的发布日期
```
<p>
	我们在每天早上<time>9:00</time>开始营业。
</p>
<p>
	我在<time datetime="2020-02-14">情人节</time>有个约会。
</p>
```
ruby
<ruby>标签定义ruby注释。
与<rt>以及<rp>标签一同使用：
ruby元素由一个或多个字符和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当浏览器不支持“ruby”元素时显示的内容
```
<ruby>
汗<rt><rp>(</rp>han<rp>)</rp></rt>
</ruby>
```
wbr(Word Break Opportunity)
规定在文本中的何处适合添加换行符。当窗口足够大的时候不换行，窗口小的时候在您规定的地方换行。当窗口缩小到规定换行字符前一个字符的时候便不能再继续缩小
```
<p>
	如果想学习AJAX，那么您必须熟悉XML<wbr>HTTP</wbr>Request对象。
</p>
```

属性	描述
datetime	规定日期/时间。否则由元素内容指定日期/时间
pubtime	指定time元素中的日期/时间是文档(或article元素)的发布日期

canvas
定义图形，比如图表和其他图像
只是图形容器，必须使用脚本来绘制图形

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = '#FFF000';
	ctx.fillRect(0,0,80,100);
</script>

属性	值	描述
height	pixel	设置canvas的高度
width	pixel	设置canvas的宽度

command
command 元素表示用户能够调用的命令。

<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

<menu>
<command onclick="alert('Hello World')">
	Click Me!
</command>
</menu>

属性	值	描述
checked	checked	定义是否被选中。仅用于 radio 或 checkbox 类型。
disabled	disabled	定义 command 是否可用。
icon	url	定义作为 command 来显示的图像的 url。
label	text	为 command 定义可见的 label。
radiogroup	groupname	定义 command 所属的组名。仅在类型为 radio 时使用。
type	checkbox command radio	定义该 command 的类型。默认是 "command"。

details
<details> 标签用于描述文档或文档某个部分的细节。
与<summary>标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
```
<details>
	<summary>
		Copyright 2011.
	</summary>
	<p>
		All pages and graphics on this web site are the property of W3School.
	</p>
</details>
```
datalist
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。
```
<input id="myCar" list="cars" />
<datalist id="cars">
	<option value="BMW"></option>
	<option value="Ford"></option>
	<option value ="Volvo"></option>
</datalist>
```

keygen
<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output
<output> 标签定义不同类型的输出，比如脚本的输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
	<input type="range" id="a" value="50" />100
	+<input type="number" id="b" value="50"/>
	=<output name="x" for="a b"></output>
</form>

属性	值	描述
for	element_id	定义输出域相关的一个或多个元素。
form	form_id	定义输入字段所属的一个或多个表单。
name	name	定义对象的唯一名称。（表单提交时使用）

menu
所有的主流浏览器都不支持该标签…
在 HTML 4.01 中已弃用 <menu> 元素。在 HTML5 中重新定义了 <menu> 元素。

<menu> 标签定义命令的列表或菜单。
<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
请使用 CSS 来设置菜单列表的样式

属性	值	描述
label	text	规定菜单的可见标签。
type	popup toolbar	规定要显示哪种菜单类型。

<menu type="toolbar">
<li>
	<menu label="File">
		<button type="button" onclick="file_new()">New...</button>
		<button type="button" onclick="file_open()">Open...</button>
		<button type="button" onclick="file_save()">Save...</button>
	</menu>
</li>
<li>
	<menu label="Edit">
		<button type="button" onclick="edit_cut()">Cut...</button>
		<button type="button" onclick="edit_copy()">Copy...</button>
		<button type="button" onclick="edit_paste()">Paste...</button>
	</menu>
</li>
</menu>

bdi
但是我发现浏览器现在都不支持该标签了。
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

属性值描述
dir ltr rtl auto 可选。规定元素内的文本的文本方向。默认值：auto。
```
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
```

属性	值	描述
dir	ltr rtl auto	可选。规定元素内的文本的文本方向。默认值：auto。

dialog
<dialog> 标签定义对话框或窗口

属性	值	描述
open	open	规定 dialog 元素是活动的，用户可与之交互。

<table border="1">
	<tr>
		<th>一月 <dialog open>这是打开的对话窗口</dialog></th>
		<th>二月</th>
		<th>三月</th>
	</tr>
	<tr>
	    <td>31</td>
		<td>28</td>
		<td>31</td>
	</tr>
</table>

meter
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
```
<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 
```
source
<source> 标签为媒介元素（比如<video> 和<audio>）定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
```
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 
```