HTML 5中的标记方法

简介:

内容类型 (ContentType)

首先, HTML 5的文件扩展符与内容类型保持不变。也就是说,扩展符仍然为" .html" 或 ".htm"

DOCTYPE声明

DOCTYPE声明是HTML文件中必不可少的,它位于文件第一行。在HTML5中,刻意不使用版本声明,一份文档将会适用于所有版本的HTML. HTML 5中DOCTYPE声明方式是不区分大小写,引号不区分是单引 号还是双引号

指定字符编码

HTML4中:;HTML 5中,可以使用对元素直接追加charset属性的方式来指定字符编码,如: 两种方法都有效,不能同时使用。从HTML5开始,对于文件的字符编码推荐使用UTF-8

新增的元素和废除的元素

新增的结构元素

section:表示页面中的一个内容区块
article:表示页面中的一块与上下文不相关的强立内容
aside:表示article元素的内容之外的
header:表示页面中一个内容区块或整个页面的标题
bgroup:用于对整个页面或页面中一个内容区块的标题进行组合
footer:表示整个页面或页面中一个内容区块的脚注;一般会包含创作者的姓名、创作日期以及创作者联系信息
nav:表示页面中导航链接的部分
figure:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题

新增的真他元素

video:定义视频
audio:定义音频
embed:用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等
mark:主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字
progress:表示运行中的进程,可以用progress元素显示JS中耗费时间的函数的进程
time:表示日期或时间,也可以同时表示两者
ruby:表示ruby注释(中文注音或字符)
rt:表示字符(中文注音或字符)的解释或发音
rp:在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容
wbr:表示转换行。 wbr元素与br元素的区别是. br元素表示此处必须换行,而wbr的意思是浏览器窗口或父级元素的宽度足够宽时(没必要换行时),不进行换行,而当宽度不够时主动在此处进行换行。 wbr对字符型的作用挺大,但对中文貌似没多大用处
canvas:表示图形,比如图表和其他图像。这个元素本身没有行为,仅提供一块面 布,但它把一个绘图API展现给客户端JavaScript
command:表示命令按钮, 比如单选按钮、复选框或按钮
details:表示用户要求得到且可以得到的细节信息,它可以与summary元素配合使用。summary元素应该是details元素的第一个子元素。
datalist:表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表
datagrid:表示可选数据的列表,它以树形列表的形式来显示
keygen:表示生成密钥
output:表示不同类型的输出.比如脚本的输出
source:为媒介元素(比如

新增的input元素的类型

email:表示必须输入E-maíl地址的文本输入框
url:表示必须输入URL地址的文本输入框
number:表示必须输入数值的文本输入框
range:表示必须输入一定范围内数字值的文本输入框
HTML5拥有多个可供选取日期和时间的新型输入文本框:
date一一选取日、月、年
month一一选取月、年
week一一选取周和年
time一一选取时间(小时和分钟)
datetime-一一选取时间、日、月、年 (UTC时间)
datetime-local一一选取时间、日、月、年(本地时间)

新增的属性

表单相关的属性

autofocus:以指定属性的方式让元素在画面打开时自动获得焦点
placeholder:提示用户可以输入的内容
form:声明属于哪个表单,然后将其放置在页面上任何位置而不是表单之内
required:表示在用户提交的时候进行检查,检查该元素内一定要有输入内容为input元素增加了几个新的属性:autocomplete、min、max、multiple、pattern、step。multiple属性允许在上传文件时一次上传多个文件
formaction、formenctype、formmethod、formnovalidate与formtarget:可以重载form元素的action、enctype、method、novalidate与target属性
novalidate:可以取消提交时进行的有关检查,表单可以被无条件地提交

链接相关属性

media:规定目标URL是什么类型的媒介/设备进行优化的,只能在href属性存在时使用
hreflang与rel:保持与a元素、link元素的一致
sizes:可以与icon元素结合使用(通过rel属性),该属性指定关联图标(icon元素)的大小

其他属性

reversed:指定列表倒序显示
charset:为文挡的字符编码的指定提供了一种比较良好的方式
type与label:label属性为菜单定义一个可见的标注,type属性让菜单以上下文菜单、工具条与列表菜单的三种形式出现
scoped:规定样式的作用范围,譬如只对页面上某个树起作用
async:定义脚本是否异步执行
manifest:开发离线Web应用程序时它与API结合使用定义一个URL,在这个URL上描述文挡的缓存信息
sandbox、seamless与srcdoc:用来提高页面安全性,防止 不信任的Web页面执行某些操作

全局属性

contentEditable属性

contentEditable属性:允许用户编辑元素中的内容,是一个布尔值属性,可以被指定为true或false
该属性还有个隐藏的inherit(继承)状态,属性为true时元素被指定为允许编辑,属性为false时元素被指定为不允许编辑;未指定true或false则由inherit状态根据父元素来决定。
元素还具有一个isContentEditable属性,当元素可编辑时该属性为true,当元素不可编辑时该属性为false

designMode属性

designMode属性:性用来指定整个页面是否可编辑。designMode属性只能在JS脚本里被编辑修改;该属性有两个值"on"与"off"。属性被指定为 "on" 时页面可编辑,被指定为 "off" 时页面不可编辑

hidden属性

H5中所有的元素都允许使用hidden属性,该属性功能是通知浏览器不渲染该元素,使该元素处于不可见状态。但是页面装载后允许使用JS脚本将该属性取消,取消后 该元素变为可见状态,同时元素中的内容也即时显示出来。Hidden属性是一个布尔值的属性,当设为true时元素不可见,当设为false肘元素可见

spellcheck属性

spellcheck属性是为对用户输入的文本内容进行拼写和语法检查,具有true或false两种值;但是它在书写时必须明确声明属性值为true或false。需要注意的是:如果元素的readOn]y或disabled设为true,则不执行拼写检查。

tabindex属性

对窗口或页面中所有控件进行遍历时,每一个控件的tabindex表示该控件是第几个被访问到的。tabindex还有另外一个作用,把元素的tabindex值设为负数. (通常为-1)后,仍可以通过编程方式让元素获得焦点,但按下Tab键时该元素就不能获得焦点了,这在复杂的页面中或复杂的Web应用程序中是十分有用的

目录
相关文章
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
1月前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
|
1月前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
9 0
|
2月前
|
数据可视化 前端开发
HTML基础结构和常用标记的例子
HTML基础结构和常用标记的例子
15 0
|
2月前
|
数据安全/隐私保护
7.常用的HTML标记
7.常用的HTML标记
14 0
HTML输出特殊字符详细方法
以下是部分特殊字符代码表,它们的完整应用代码格式为:`&#××××;`用下面的四位数字替换×,将得到对应的符号。(注意:应用这些代码,编辑器应该切换到HTML模式)
|
3月前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
20天前
|
移动开发 开发者 HTML5
html声明方法
【4月更文挑战第18天】html声明方法
28 1
|
24天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
12 1
|
1月前
|
小程序 安全 Android开发
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
25 1