HTML 5中的标记方法

简介: 内容类型 (ContentType)首先, HTML 5的文件扩展符与内容类型保持不变。也就是说,扩展符仍然为" .html" 或 ".htm" ,内容类型 (ContentType)仍然为 "text刷html"DOCTYPE声明DOCTYPE声明是HTML文件中必不可少的,它位于文件第一行。

内容类型 (ContentType)

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

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:为媒介元素(比如

menu:表示菜单列表,当希望列出表单控件时使用核标签

新增的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应用程序中是十分有用的

目录
相关文章
|
18天前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
8 0
|
1月前
|
数据可视化 前端开发
HTML基础结构和常用标记的例子
HTML基础结构和常用标记的例子
15 0
|
1月前
|
数据安全/隐私保护
7.常用的HTML标记
7.常用的HTML标记
13 0
HTML输出特殊字符详细方法
以下是部分特殊字符代码表,它们的完整应用代码格式为:`&#××××;`用下面的四位数字替换×,将得到对应的符号。(注意:应用这些代码,编辑器应该切换到HTML模式)
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
65 1
|
2月前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
N..
|
25天前
HTML常用标记
HTML常用标记
N..
13 1
|
1月前
|
移动开发 HTML5
HTML5文档头部相关标记
【2月更文挑战第9天】HTML5文档头部相关标记。
13 1
|
2月前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
84 0
|
6月前
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
123 0