HTML5中的新特性包括了嵌入音频、视频和图形的功能,客户端数据存储以及交互式文档
HTML5还包含了新的元素,比如 nav header footer figure 等等
参考:https://www.w3school.com.cn/
HTML标签总结:
标签 | 描述 |
---|---|
<!-- --> | 定义注释 |
<!DOCTYPE> | 定义文档类型 html5声明: <!DOCTYPE html> |
<a> | 定义超链接 <a href=""></a> |
<abbr> | 定义缩写 <abbr title="People's Republic of China">PRC</abbr> |
<address> | 定义文档或文档的作者/拥有者的联系信息 |
<area> | 定义图像映射(带有可点击区域的图像)中的区域 |
<article> | 规定独立的自包含内容 |
<aside> | 定义其所处内容之外的内容 可以用作文章的侧栏 |
<audio> | 定义声音,比如音乐或其他音频流 是HTML5的新标签 |
<b> | 粗体文本 在没有其他合适的标签时,才把它作为最后的选项 HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。 |
<base> | 为页面上的所有连接规定默认地址或默认目标 无结束标签 base标签必须位于head元素内部 url:规定页面中相对链接的基准UPL target:在何处打开页面的所有链接。_blank:新窗口打开链接文档 _self:默认,在相同的框架中打开被链接文档 _parent:在父框架中打开被链接的文档_top_:在整个窗口中打开被链接的文档 framename:在指定的框架打开链接文档 |
<basefont> | 规定页面上的默认字体颜色和字号 只有IE浏览器支持 一般不使用 |
<bdi> | 把用户名从周围的文本方向设置找那个隔离出来 目前只有谷歌和火狐支持 |
<bdo> | 覆盖默认的文本方向 属性dir:值:ltr从左向右 rtl从右向左 |
<big> | 呈现大号字体效果 |
<blockquote> | 标记唱的引用 浏览器在 blockquote 元素前后添加了换行,并增加了外边距。 |
<body> | 定义文档的主体 包含文档的所有内容(比如文本、超链接、图像、表格、列表等) |
<br> | 单标签 插入一个简单的换行符 |
<button> | 按钮 |
<canvas> | 图形容器 通过脚本来绘制图形 HTML5新标签 |
<caption> | 表格标题 caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 |
<center> | 对其所包含的文本进行水平居中 一般不用一般用CSS来居中文本 |
<cite> | 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。按照惯例,引用的文本将以斜体显示。 |
<code> | 定义计算机代码文本 |
<col> | 单标签 为表格中一个或多个列定义属性值 |
<data> | 用于添加给定内容的机器可供翻译 比如: <li><data value="21053">圣女果</data></li> |
<datalist> | 定义选项列表 |
<dd> | 定义列表中定义条目的定义部分 |
<del> | 定义文本中已被删除的文本 |
<details> | 用于描述文档或文档某个部分的细节 HTML5新增 |
<dfn> | 用于定义一个项目 |
<dialog> | 定义对话框或窗口 HTML5新增 |
<dir> | 定义目录列表 不赞成使用 |
<div> | 定义文档中的分区或者节 |
<dl> | 定义定义列表 结合dt dd使用 |
<dt> | 定义定义列表中的项目(即术语部分) |
<em> | 把文本定义为强调的内容 不推荐使用 |
<embed> | 定义嵌入的内容,比如插件 HTML5新增 |
<fieldest> | 可将表单内的相关元素分组 |
<figcaption> | 标签定义 figure 元素的标题(caption)。 |
<figure> | 标签规定独立的流内容(图像、图表、照片、代码等等)。 |
<font> | 规定文本的字体、字体尺寸、字体颜色。 |
<footer> | 定义文档或节的页脚。 |
<form> | 为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 |
<frame> | 标签定义 frameset 中的一个特定的窗口(框架) |
<frameset> | 可定义一个框架集。它被用来组织多个窗口(框架)。 |
<h1>-<h6> | 标题 1最大 |
<head> | 标签用于定义文档的头部 下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题,它是 head 部分中唯一必需的元素。 |
<header> | 定义文档的页眉(介绍信息) |
<hr> | 在 HTML 页面中创建一条水平线 |
<html> | 可告知浏览器其自身是一个 HTML 文档。 |
<i> | 显示斜体文本效果。 |
<iframe> | 会创建包含另外一个文档的内联框架(即行内框架)。 |
<img> | 向网页中嵌入一幅图像。并不会在网页中插入图像,而是从网页上链接图像。创建的是被引用图像的占位空间。标签有两个必需的属性:src 属性 和 alt 属性。 |
<input> | 用于搜集用户信息 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 |
<ins> | 新插入的部分的文本 |
<kbd> | 定义键盘文本 它表示文本是从键盘上输入的 |
<keygen> | 规定用于表单的密钥对生成器字段。 服务器接收到的字段是加密的 |
<label> | 为 input 元素定义标注(标记)。 |
<legend> | legend 元素为 fieldset 元素定义标题(caption)。 |
<li> | 定义列表项目 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 |
<link> | 定义文档与外部资源的关系 |
<main> | 规定文档的主要内容。 |
<map> | 定义一个客户端图像映射 |
<mark> | 突出显示部分文本 |
<menu> | 定义命令的列表或菜单。 所有主流浏览器均不支持 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 |
<menuitem> | 定义用户可以从弹出菜单调用的命令/菜单项目。只支持火狐浏览器 |
<meta> | 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 单标签 |
<meter> | 来度量给定范围(gauge)内的数据 |
<nav> | 定义导航链接的部分 |
<noframes> | noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。 |
<noscript> | 定义在脚本未被执行时的替代内容(文本)。 |
<object> | 定义一个嵌入的对象 用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash |
<ol> | 有序列表 |
<optgroup> | 定义选项组。 |
<option> | option 元素定义下拉列表中的一个选项(一个条目)。 |
<output> | 标签定义不同类型的输出,比如脚本的输出。 |
<p> | 段落 |
<param> | param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 或者 标签提供参数。 |
<picture> | 图像 元素包含两个标签:一个或多个 <source> 标签和一个 <img> 标签。 |
<pre> | 元素可定义预格式化的文本 |
<progress> | 标示任务的进度(进程)。 HTML5新 |
<q> | 定义短的引用。 浏览器给定义的内容加上了引号 <q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。 |
<rp> | 注释 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。 |
<rt> | 注释 ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。 |
<ruby> | 定义注释 就像是拼音一样 |
<s> | strike的缩写版本 |
<samp> | 定义样本文本 |
<script> | 插入js代码 |
<section> | 定义文档中的节(section 区段)比如章节、页眉、页脚等 |
<select> | 创建单选或者多选菜单 |
<small> | 小号字体效果 |
<source> | 标签为媒介元素video/audio定义媒介资源。 |
<span> | 被用来组合文档中的行内元素。 span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。 |
<strike> | 可定义加删除线文本定义。一般用del代替 |
<strong> | 把文本定义为语气更强的强调的内容。不推荐使用 |
<style> | 用于为 HTML 文档定义样式信息。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css style 元素位于 head 部分中。 |
<sub> | 下标文本 这段文本包含 下标 |
<summary> | 包含details元素标题 ,“details” 元素用于描述有关文档或文档片段的详细信息。 |
<sup> | 定义上标文本 包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。 |
<svg> | 定义SVG图形的容器 |
<table> | 表格 |
<tbody> | 表格主体 |
<td> | 定义标准单元格 |
<template> | 保留页面加载时隐藏的内容,使用js来显示 |
<textarea> | 定义多行的文本输入控件 |
<tfoot> | 定义表格的页脚 |
<th> | 单元格表头 |
<thead> | 定义表格的表头 与tbody和tfoot结合使用 |
<time> | 定义公历时间(24小时制)或日期,时间和时期偏移是可选的 |
<title> | 定义文档标题 |
<tr> | 表格-行 包含一个或者多个th或者td |
<track> | 字幕 为viedo等媒介规定外部文字轨道 |
<tt> | 呈现类似打字机或者等宽的文本效果 |
<u> | 为文本添加下划线 尽量避免下划线 容易与超链接混淆 |
<ul> | 无序列表 |
<var> | 定义变量 不推荐使用 |
<video> | 定义视频,比如电影片段或者其他视频流 |
<wbr> | 规定在文本的何处合适添加换行符 就是英文单词避免换行单词中断 单标签 |
补充:
colgroup、col 标签用来定义表格列的分组。
<col>标签是给表格中一个或多个列定义属性值,而<colgroup>标签是对表格中的列进行组合,从而实现对表格的格式化。 <col>标签一般会放在<colgroup>标签中使用,对<colgroup>标签组合的列分别设置样式。
如果一个表格前三列要垂直居上,后两列垂直居下,我们就可以用分组来进行设置。
<table border="1">
<colgroup span="3" valign="top"></colgroup>
<colgroup span="2" valign="bottom"></colgroup>
<tr>
<td>1垂直居上</td>
<td>2垂直居上</td>
<td>3垂直居上</td>
<td>4垂直居下</td>
<td>5垂直居下</td>
</tr>
</table>
span 用以表示该组包含多少列。
col 的作用是细化 colgroup,因为即使在一个组中,列与列之间也可能会出现一些差别,这时就得用到 col 了。
<colgroup span="3" valign="top">
<col width="50"></col>
<col align="center"></col>
<col valign="middle"></col>
</colgroup>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
运行结果:
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
optgroup 选项分组
option 选项
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>