前端之HTML

徘徊边缘 提交于 2019-12-01 19:52:56
HTML是HyperText Markup Language的缩写,中文翻译为超文本标识语言。使用HTML元素编写的文档称为HTML文档,目前最新版本是5.0
HTML5的开发是由三个重要组织负责的,具体如下

  WHATWG:由Apple,Mozilla,Google,Opera等浏览器厂商组成,成立于2004年。WHATWG开发HTML和Web应用的API,同时为各浏览器厂商以及其他有意向的组织提供开放式合作。

  W3C:W3C管辖的HTML工作组,目前负责发布HTML5规范。

  IETF(因特网工程任务组):该任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API(WebSocket API)依赖于新的WebSocket协议,IETF工作组负责开发该协议。

HTMl的优势

(1)跨浏览器的兼容性

(2)增强交互功能

(3)更好的存储技术;HTML5中提供了本地存储功能。其中将比较老的技术cookie和客户端数据库融合。但是它比cookie更好用,因为支持多个存储,HTML5存储技术拥有更好的安全和性能,即使浏览器关闭也可以保存并且所有主流浏览器都支持。

(4)用户优先;

(5)更简单的代码;

  • 以浏览器原生能力替代复杂的JavaScript代码;
  • 新的简化的DOCTYPE;
  • 新的简化的字符集声明;
  • 简单而强大的HTML5API;

(6)通用访问

语义化标记

HTML5中新的结构元素
元素名描述
header 标记头部区域的内容(用于整个页面或者页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或者页面中的一块区域)
section Web页面中的一块区域
article 独立的文章内容
aside 相关内容或引文
nav 导航类辅助内容
hgroup 对整个页面或页面中一个区域内容区块的标题进行组合
figure 表示一段独立的流内容,一般表示文档主题内容中的一个独立单元

灵活的选择符

新的QuerySelector方法
函数描述示例结果
querySelector() 根据指定的选择规则,返回在页面中找到的第一个匹配元素 querySelector("input.error") 返回第一个CSS类名为"error"的文本输入框
querySelectorAll() 根据指定规则返回页面中所有相匹配的元素 querySelectorAll("#results td") 返回id值为results的元素下所有的单元格

新增的其他元素

HTML5中新增元素
元素名描述代码示例
video 定义视频,比如电影片段或者其他视频流
<video src='movie.ogg' controls='controls'>Video 元素</video>
audio 定义音频,比如音乐或者其他音频流
<audio src="audio.wav">Audio 元素</audio>
embed 用来插入各种多媒体,格式可以是Midi,Wav,AIFF,AU,MP3等
<embed src="horse.wav" type="">
mark 主要用来在视觉上向用户呈现需要突出显示或高亮显示的文字
<mark></mark>
progress 表示进度条
<progress></progress>
time 表示日期或者时间
<time></time>
ruby 表示注释(中文注音或字符)
<ruby>中国 <rt><rp>zhongguo</rp></rt></ruby>
wbr 表示软换行
<p>It is very interesting<wbr>to learn HTML5!</p>
canvas 表示图形,本身没有行为,仅提供一块画布
<canvas id="myCanvas" width="200" height="200"></canvas>
command 表示命令按钮,比如单选按钮,复选框或按钮
<command onclick=cut() label="cut"></command>
details 表示用户要求得到并且可以得到的细节信息,summary元素提供标题或图例
<details><summary>HTML5</summary>It is very interesting to Learn HTNL5!</details>
datagrid 表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表
<datagrid></datagrid>
keygen 表示生成密钥
<keygen>

HTML5中的格式元素

HTML5中格式元素
元素名称描述
<acronym> 定义只取首字母的缩写
<abbr> 定义缩写
<address> 定义文档作者或拥有者的联系信息
<b> 定义粗体文本
<bdi> 定义文本的文本方向,使其脱离周围文本的方向设置
<bdo> 定义文字方向
<big> 定义大号文本
<blockquote> 表示长的引用
<center> 定义居中文本
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<del> 定义删除文本
<dfn> 定义项目
<em> 定义强调文本
<font> 定义文本的字体,尺寸和颜色
<i> 定义斜体字
<ins> 定义被插入文本
<kbd> 定义键盘文本
<mark> 定义有记号的文本
<meter> 定义预定义范围内的度量
<pre> 定义预格式文本
<progress> 定义任何类型的任务的进度
<q> 定义短的引用
<rp> 定义若浏览器不支持ruby元素显示的内容
<rt> 定义ruby注释的解释
<ruby> 定义ruby注释
<samp> 定义计算机代码样本
<small> 定义小号文本
<strong> 定义强调文本
<sup> 定义上标文本
<sub> 定义下标文本

HTML5中的表单元素

HTML5中表单元素
元素名称描述
<form> 定义供用户输入的HTML表单
<input> 定义输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<label> 表示input元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义fieldset元素的标题
<isindex> 定义与文档相关的可搜索索引
<datalist> 定义下拉列表
<keygen> 定义生成密钥
<output> 定义输出的一些类型

HTML5中的框架元素

HTML5中框架元素
元素名称描述
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<noframes> 定义针对不支持框架的用户的替代内容
<iframe> 定义内联框架

HTML5中的图像元素

HTML5中图像元素
元素名称描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 定义图形
<figcaption> 定义figure元素的标题
<figure> 定义媒体内容的分组,以及它们的标题

HTML5中的列表元素

HTML5中列表元素
元素名称描述
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表的项目
<dir> 定义目录列表
<dl> 定义定义列表
<dt> 定义定义列表中的项目
<dd> 定义定义列表中的项目的描述
<meau> 定义命令的菜单/列表
<meauitem> 定义用户可以从弹出菜单调用的命令/菜单项目
<command> 定义命令按钮

HTML5中的表格元素

HTML5中表格元素
元素名称描述
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元格
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!