HTML5新增元素属性及语义化标签

html标签语义化

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。

语义化网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。语义化标签对SEO以及前端技术规范有着深远的意义。在SEO方面更利于搜索引擎的识别,表达意义更明确,语义清晰易懂。

前端HTML5
语义标签:语义化标签使得页面的内容结构化,表达意思更明确,语义清晰易懂,见名知义。以下是常见的语义化标签。

<hrader></header>   定义了文档的头部区域
<footer></footer>   定义了文档的尾部区域
<nav></nav>    定义文档的导航
<section></section>   定义文档中的节(section、区段)
<article></article>    定义页面独立的内容区域
<aside></aside>    定义页面的侧边栏内容
<detailes></detailes>    用于描述文档或文档某个部分的细节
<summary></summary>   标签包含 details 元素的标题
<dialog></dialog>   定义对话框,比如提示框

增强型表单:HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

color  主要用于选取颜色    date  从一个日期选择器选择一个日期
datetime  选择一个日期(UTC 时间)
datetime-local  选择一个日期和时间 (无时区)
email  包含 e-mail 地址的输入域
month  选择一个月份
number  数值的输入域
range  一定范围内数字值的输入域
search  用于搜索域
tel  定义输入电话号码字段
time  选择一个时间
url  URL地址的输入域
week 选择周和年

HTML5 也新增以下表单元素
<datalist> 元素规定输入域的选项列表,使用 <input> 元素的 list 属性与 <datalist> 元素的 id 绑定。
<keygen>提供一种验证用户的可靠方法,标签规定用于表单的密钥对生成器字段。
<output>用于不同类型的输出,比如计算或脚本输出。
HTML5新增的表单属性

placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
required 属性,是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性,描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性,设置元素最小值与最大值。
step 属性,为输入域规定合法的数字间隔。
height 和 width 属性,用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
multiple 属性 ,是一个 boolean 属性。规定<input> 元素中可选择多个值。

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注!昵称可为公司名称哦!SEO优化、网站诊断分析方案请联系微信/QQ:2690502116。