HTML5基础知识汇总
程序员文章站
2022-06-12 13:37:23
...
HTML是Hypertext Markup Language的缩写，中文翻译为：超文本标记语言
-
HTML文档结构和基本语法
``` <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ``` * HTML5: ``` <meta charset="UTF-8"> ``` * 对于HTML5来说，两种方法都有效-
标签省略
- 不允许写结束标记的元素
area,base,br,col,command,embed,hr,img,input,******,link,meta,param,source,track,wbr.- 可以省略结束标记的元素
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th- 可以省略全部标记的元素
html,head,body,colgroup,tbody- 可以省略标记的元素，不建议省略，因为省略不易于阅读。
-
布尔值
- 对于具有布尔值的属性，如disable与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为false，可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值
<!--只写属性，不写属性值，代表属性为true--> <input type="checkbox" checked /> <!--不写属性，代表属性为false--> <input type="checkbox" /> <!--属性值=属性名，代表属性为true--> <input type="checkbox" checked="checked" /> <!<!--属性值=空字符串，代表属性为true--> <input type="checkbox" checked="" /> -
属性值
- 属性值两边既可以使用单引号，也可以用双引号。HTML5在此基础上做了改进，当属性值不包括空字符串，<，>,=,单引号，双引号等字符时，属性值两边的引号可以省略
<input type=text /> <input type="text" /> <input type='text' />
-
-
HTML4元素
* div：在文档中定义一块区域，即包含框，容器 * span：在文本行中定义一块区域，即行内包含框 * ol：根据一定的排序进行列表 * ul：没有排序的列表 * li：每条列表项 * dl：以定义的方法进行列表 * dt：定义列表中的词条 * dd：对定义的词条进行解释 * del：定义删除的文本 * ins：定义插入的文本 * h1~h6：标题1到标题6，定义不同级别的标题 * p：定义了段落结构 * hr：定义水平线* a：定义超链接 * abbr：定义缩写词 * address：定义地址 * acronym：定义取首字母的缩写词 * dfn：定义条目 * kdb：定义键盘键 * samp：定义样本 * var:定义变量 * tt：定义打印机字体 * code：定义计算机源代码 * pre：定义预定义格式文本，保留源代码格式 * blockquote：定义大块内容引用 * q：定义引用短语 * strong：定义重要文本 * em：定义文本为重要* b：定义粗体 * i：定义斜体 * big：定义文本增大 * small：定义文本缩小 * sup：定义文本上标 * sub：定义文本下标 * bdo：定义文本显示方向 * br：定义换行 * 已废除的修饰元素 * center：定义文本居中 * font：定义文字的样式、大小和颜色 * u：定义文本下划线 * s：定义删除线。strike的缩写 * strike：定义删除线 -
HTML4属性
* class：定义类规则或样式规则 * id：定义元素的唯一标识 * style：定义元素的样式声明 * 这些元素不拥有核心属性：html、head、title、base、meta、param、script、style，这些元素一般位于文档头部区域，用来定义网页元信息。* lang：定义元素的语言代码或编码。 * dir：定义文本方向，包括ltr和rtl取值，分别表示从左向右和从右向左。 * 以下这些元素不拥有语言属性：frameset、frame、iframe、br、hr、base、param、script。 * 例如：`<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="en">`* accesskey：定义访问某元素的键盘快捷键 * 使用accesskey属性可以使用快捷键(Alt+字母)访问指定的URL，但是浏览器不能很好的支持，在IE中仅**超链接，需要配合Enter键确定。 * 一般会在导航栏中设置快捷键。例如： `<a href="http://www.baidu.com" accesskey="a">按住Alt键，点击A键可以链接到百度首页</a>` * tabindex：定义元素的Tab键索引编号 * tabindex属性用来定义元素的Tab访问顺序，可以使用Tab键遍历页面中的所有连接和表单元素。遍历时会按照tabindex的大小决定顺序，当遍历到某个链接时，按Enter键即可打开链接页面。 * 例如： ``` <a href="http://www.baidu.com" tabindex="1">百度</a> <a href="http://www.163.com" tabindex="2">网易</a> <a href="http://www.qq.com" tabindex="3">腾讯</a> ```* alt:定义元素的替换文本 * title：定义元素的提示文本 * longdesc：定义元素包含内容的大段描述信息**没有浏览器支持 longdesc 属性。** * cite：定义元素包含内容的引用信息 * datetime：定义元素包含内容的时间和日期 * alt和title是两个常用的属性，分别用于定义元素的替换文本和提示文本 * 例如： ``` <a href="#" title="提示文本">超链接</a> <img src="URL" alt="替换文本" title="提示文本"/> <a href="http://www.baidu.com"><cite>百度</cite></a> <input type="image" src="URL" alt="替换文本"/> ```* rel：定义当前页面与其他页面的关系 * rev：定义其他页面与当前页面之间的链接关系 * rel表示从源文档到目标文档的关系 * rev表示从目标文档到源文件的关系 * 例如： ``` <a href="Demo.html" rel="prev">链接到集合中的前一个文档</a> ``` -
HTML5元素
-
结构元素：
HTML5定义了一组新的语义化的结构标记来描述网页内容。虽然语义化结构标记可以被HTML4标记进行替换，但是他可以简化HTML页面设计，明确的语义化更适合搜索引擎检索和抓取。
* header：表示页面中一个内容区块或整个页面的标题
* footer：表示整个页面或页面中一个内容区块的脚注。
* section：表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分。
* article：表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章
* aside：表示article元素的内容之外的、与article元素内容相关的辅助信息
* nav：表示页面中导航链接部分
* main：表示网页中的主要内容。主要内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容
* figure：表示一段独立的流内容，一般表示文档主流内容中的一个独立单元。可以使用figcaption元素为figure元素组添加标题
-
hgroup元素：用于对整个页面或页面中一个内容区块的标题进行组合。
* `<hgroup>......</hgroup>` * HTML4中： ``` <div>......</div> ```-
video元素：定义视频，比如电影片段或其他视频流
-
<video src="movie.ogg" controls="controls">video元素</video> -
HTML4中：
<object type="video/ogg" data="movie.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等。
-
<embed src="horse.wav" /> -
HTML4中：
<object data="flash.swf" type="application/x-shockwave-flash"></object>
-
-
mark元素：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素一个典型的应用就是在搜索结果中向用户高亮显示搜索关键词（黄色背景色）
-
<mark></mark> -
HTML4中：
<span></span>
-
-
dialog元素：定义对话框或窗口
-
<dialog open>这是打开的对话框窗口</dialog> -
HTML4中：
<div id="dialog">这是打开的对话框窗口</div>
-
-
bdi元素：定义文本的文本方向，使其脱离其周围文本的方向设置
-
HTML5中：
<ul> <li>Username <bdi dir="rtl">Bill</bdi>:80 password</li> <li>Username <bdi dir="ltr">Steve</bdi>:78 aaaaaa</li> </ul>
-
-
figcaption元素：定义figure元素的标题
-
HTML5中：
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> </figure> -
HTML4中：
<div id="figure"> <h2>黄浦江上的的卢浦大桥</h2> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> </div>
-
-
time元素：表示日期或时间，也可以同时表示两者
-
<time><time> -
HTML4中：
<span></span>
-
-
canvas元素：表示图形，如图表和其他图像。
-
这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上
-
<canvas id="myCanvas" width="200" height="200"></canvas> -
HTML4中:
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
-
-
output元素：表示不同类型的输出，比如脚本的输出。
-
<output></output> -
HTML4中：
<span></span>
-
-
source元素：为媒介元素（比如<video>和<audio>）定义媒介资源
-
<source> -
HTML4中：
<param>
-
-
menu元素：表示菜单列表。当希望列出表单控件时使用该标签
-
HTML5中：
<menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />blue</li> </menu> -
HTML4中：menu元素不推荐使用
-
-
ruby元素：表示ruby注释（中文注音或字符）
-
HTML5中：
<ruby> 汉 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>
-
-
rt元素：表示字符（中文注音或字符）的解释或发音
-
rp元素：在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容
-
wbr元素：表示软换行。
- wbr元素与br元素的区别：br元素表示此处必须换行；而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。
-
command元素：表示命令按钮，如单选按钮、复选框或按钮
<command onclick="alert('Hello World')">Click Me!</command>- 只有 Internet Explorer 9 （更早或更晚的版本都不支持）支持 标签。
-
details元素：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用
-
summary元素提供标题或图例。标题是可见的，用户单击标题后，会显示出细节信息。summary元素应该是details元素的第一个子元素。
-
例如：
<details> <summary>标题</summary> 解释解释解释解释解释 </details>
-
-
summary元素：为details元素定义可见的标题
-
datalist元素：datalist元素表示可选数据的列表，与input元素结合使用，可以制作出输入值的下拉列表
-
例如：
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
-
-
datagrid元素：表示可选数据的列表，它以树形列表的形式来显示。
-
例如：
<datagrid> <ol> <li> (datagrid row 0) </li> <li> (datagrid row 1) <ol style="list-style-type:lower-alpha;"> <li> (datagrid row 1,0) </li> <li> (datagrid row 1,1) </li> </ol> </li> <li> (datagrid row 2) </li> </ol> </datagrid>
-
-
******元素：表示生成秘钥
<****** />
-
progress元素：表示运行中的进程，可以使用progress元素来显示JavaScript中耗时时间的函数的进程
-
例如：
<progress value="22" max="100"></progress> <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>
-
-
meter元素：度量给定范围（gauge）内的数据
-
例如：
<meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter>
-
-
track元素：定义用在媒体播放器中的文本轨道
-
例如：
<video width="320" height="240"> <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogv" type="video/ogg"></source> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese" /> <track kind="subtitles" src="suns_eng.str" srclang="en" label="English" /> </video>
-
-
-
tel：表示必须输入电话号码的文本框
``` <input type="tel" /> ```-
search：表示搜索框
<input type="search" /> -
url：表示必须输入URL地址的文本框
<input type="url" /> -
email：表示必须输入电子邮件地址的文本框
<input type="email" /> -
datetime：表示日期和时间文本框
<input type="datetime" /> -
date：表示日期文本框
<input type="date" /> -
month：表示月份文本框
<input type="month" /> -
week：表示周几文本框
<input type="week" /> -
time：表示时间文本框
<input type="time" /> -
datetime-local：表示本地日期和时间文本框
<input type="datetime-local" /> -
number：表示必须输入数字的文本框
<input type="number" /> -
range：表示范围文本框
<input type="range" /> -
color：表示颜色文本框
<input type="color" />
-
- 为input（type=text）、select、textarea与button元素新增加autofocus属性。它以指定属性的方式让元素在画面打开时自动获取焦点
* 为input（type=text）与textarea元素新增加placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容
* 为input、output、select、textarea、button与fieldset新增加form属性。声明它属于哪个表单，然后将其放置在页面上任何位置，而不是在表单内。
* 为input元素（type=text）与textarea元素新增加required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容
* 为input元素增加autocomplete、min、max、multiple、pattern和step属性。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件
* 为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，它们可以重载form元素的action、enctype、method、novalidate与target属性。
为fieldset元素增加了disabled属性，可以把它的子元素设为disabled（无效）状态。
* 为input元素、button元素、form元素增加了novalidata属性，该属性可以取消提交时进行的有关检查，表单可以被无条件提交。
- 为a与area元素增加了media属性，该属性规定目标URL是什么类型的媒介/设备进行优化的，只能在href属性存在时使用。
* 为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素一致
* 为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小
* 为base元素增加了target属性，主要目的是保持与a元素的一致性
- 为ol元素增加属性reversed，它指定列表倒序显示
* 为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式
* 为menu元素增加了两个新的属性-type与label。label属性为菜单定义一个可见的标注，type属性让菜单可以上下文菜单、工具条与列表菜单3种形式出现
* 为style元素增加async属性，它定义脚本是否异步执行
* 为html元素增加属性manifest，开发离线web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息
* 为iframe元素增加3个属性 ，即sandbox、seamless与srcdoc，用来提高页面安全性，防止不信任的Web页面执行某些操作
-
全局属性是指可以用于任何HTML元素的属性
-
contentEditable：主要功能是允许用户可在线编辑元素中的内容。contentEditable是一个布尔值属性，可以被指定为true或false
* 注意，该属性还有一个隐藏的inherit（继承）状态，属性为true，元素被指定为允许编辑；属性为false是，元素被指定为不允许编辑；未指定true或false是，则有inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。 * 例如： ``` <ul contentEditable="true"> <li>列表元素1</li> <li>列表元素2</li> <li>列表元素3</li> </ul> ``` -
contextmenu：定义
<div>元素的上下文菜单。上下文菜单在用户右键单击元素时出现* contextmenu属性的值是要打开的`<menu>`元素的id属性值 * 目前只有Firefox支持contextmenu属性 * 例如： ``` <div contextmenu="mymenu">上下文菜单 <menu type="context" id="mymenu"> <menuitem label="微信分享"></menuitem> <menuitem label="微博分享"></menuitem> </menu> </div> ``` -
data-*：可以自定义用户数据
* data-*属性用于存储页面或Web应用的私有自定义数据 * data-*属性赋予所有HTML元素嵌入自定义data属性的能力 * 存储自定义数据能够被页面的JavaScript脚本利用，以创建更好的用户体验，不进行Ajax调用或服务器端数据库查询 * data-*属性包括两个部分 * 属性名：不应该包括任何大写字母，并且在前缀“data-*”之后必须有至少一个字符 * 属性值：可以是任意字符 * 例如： ``` <ul> <li data-animal-type = "bird">猫头鹰</li> <li data-animal-type = "fish">鲤鱼</li> <li data-animal-type = "spider">蜘蛛</li> </ul> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { console.log(lis[i].dataset.animalType); } </script> ``` -
dropzone：定义在元素上拖动数据时，是否复制、移动或链接被拖动数据
* copy：拖动数据会产生被拖动数据的副本 * move：拖动数据会导致被拖动数据被移动到新位置 * link：拖动数据会产生指向原始数据的链接 * 目前所有主流浏览器都不支持dropzone属性 * 例如： ``` <div dropzone="copy"></div> ``` -
draggable：可以定义元素是否可以被拖动。
* true：定义元素可拖动 * false：定义元素不可拖动 * auto：定义使用浏览器的默认行为 * 例如： ``` <p draggable="true">可以拖动</p> <p draggable="false">不可以拖动</p> <p draggable="auto">默认</p> ``` -
hidden：在所有元素中都包含一个hidden属性。
* 该属性设置元素的可见状态，取值为一个布尔值，当设为true是，元素处于不可见状态；当设置为false是，元素处于可见状态。 * hidden属性可用于防止用户查看元素，直到匹配到某些条件，如选择了某个复选框。然后，在页面加载之后，可以使用JavaScript脚本删除该属性，删除之后该元素变为可见状态，同时元素中的内容也即时显示出来 * 例如： ``` <p hidden>这个段落应该被隐藏</p> ``` -
spellcheck:spellcheck属性定义是否对元素进行拼写和语法检查
* input元素中的文本值（非密码） * `<textarea>`元素中的文本 * 可编辑元素中的文本 * spellcheck属性是一个布尔值的属性，取值包括true和false，为true时表示对元素进行拼写和语法检查，为false时则不检查元素。 * 例一： ``` <!--以下两种书写方法正确-->
```
* 例二：
```
<p contenteditable="true" spellcheck="true">这是一段可编辑的段落</p>
```
-
translate:translate属性定义是否应该翻译元素内容
* yes：定义应该翻译元素内容 * no:定义不应该翻译元素内容 * 例如： ``` <p translate="no">请勿翻译本段。</p> <p>本段可被翻译为任意语言。</p> ```