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

目录
相关文章
|
5月前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
111 2
|
5月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
9天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
25 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
3月前
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为'eager',并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
|
5天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
14天前
|
存储 编解码 前端开发
HTML颜色的性能优化方法
在网页开发中,虽然颜色选择并非主要性能瓶颈,但合理的颜色优化仍可提升渲染效率与用户体验。本文介绍十种实用技巧,如使用CSS渐变代替图片、运用CSS变量存储颜色、合理选择颜色格式、减少页面颜色种类、按需加载样式表等,帮助改善网页性能。尽管单独来看颜色优化的影响有限,但综合应用这些技巧能够有效提升网页加载速度及整体体验。
|
19天前
|
XML 数据格式 Python
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
24 12
|
15天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2月前
|
移动开发 HTML5
HTML5文档头部相关标记
【8月更文挑战第28天】HTML5文档头部相关标记。
23 1
|
2月前
HTML标记 和标记的属性
【8月更文挑战第28天】HTML标记 和标记的属性。
28 1
下一篇
无影云桌面