问题
知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化?
说说你了解的HTML5语义化标签,HTML5新增了那些新特性?
Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。
题外话:新网站( https://www.lzpan.com )懒盘,百度云、蓝奏云资源搜索,欢迎访问。
题外话
其实,不知道大家有没有想过一件事:现在都在说H5,C3,那么他们正式发布的时间是多久?
反正都是在写这篇文章时想到的。
HTML5经过查阅文章,确切发布时间应该是:2014年10月 (查看此篇文章:http://www.chinaw3c.org/archives/677/ )
面试我觉得应该不会问吧,但了解下我觉得还是可以的。
正题
语义化标签
hgroup
代表网页或者section的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章主标题和副标题的组合。
只有一个h1-h6时就不要用此标签,多个时h1-h6包裹在hgroup,然后可以把hgroup放在header标签里面。
header
网页或者section的页眉,hgroup可以放在header里面,该标签没有个数限制,可以一个网页放置多个。
nav
nav:navigation,导航,用于定义页面的主要导航部分。用在整个页面的主导航部分,不适合不要用nav元素
section
代表文档中的节或段,段可以是指一篇文章里按照字体的分段,节可以指一个页面的分组。
细节:
section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。
article、nav、aside可以理解为特殊的section,
所以如果可以用article、nav、aside就不要用section,没实际意义的就用div
以上代码摘抄自网上
article
article代表一个在文档,页面或者网站中自成一体的内容
细节:
独立文章:article
单独模块:section
没有语义:div
aside
aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等.
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。
footer
网页 或 section 的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。
比如迷思雨博客网,这里就是包括在一个footer里面:
细节:
可以是 网页 或任意 section 的底部部分;
没有个数限制,除了包裹的内容不一样,其他跟header类似【本来header和footer就可以理解成对应的】。
detailes
用于描述文档或文档某个部分的细节
summary
标签包含 details 元素的标题
dialog
定义对话框,比如提示框
什么是语义化
自己的定义
如上面所示的那些标签,都有自己的语义及使用情况,这就叫语义化。
语义化的好处
语义化就是让计算机能够快读的读懂内容,高效的处理信息,可以对搜索引擎更友好。
便于与他人的协作,他人通过读代码就可以理解你网页标签的意义。
页面能呈现清晰的结构。
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义方式来渲染网页。
便于团队开发和维护,语义化更具有可读性,是下一步把网页的重要动向,遵循W3C标准的团队都要遵循这个标准,减少差异化
增强型标签类型
类型
描述color
主要用于选取颜色
date
从一个日期选择器选择一个日期
datetime
选择一个日期(UTC 时间)
datetime-local
选择一个日期和时间 (无时区)
包含 e-mail 地址的输入域
month
选择一个月份
number
数值的输入域
range
一定范围内数字值的输入域
search
用于搜索域
tel
定义输入电话号码字段
time
选择一个时间
url
URL 地址的输入域
week
选择周和年就是input(当然不止input) 的type属性的值新增了以上
比如我定义了一个颜色选择器:
在Chrome浏览器下:
感觉还可以吗?
在Win10 Edge下:
看出来了吗,显示方式完全是浏览器自己定义的,而不是开发者决定的。
哈米,这你都可以接受?那么告诉你,在很多低版本浏览器下,根本不支持,如果你要去兼容IEx,那么还是不能使用这个。只能说,等待以后大多数都兼容再说。
HTML5新增表单属性
placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
required 属性,是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性,描述了一个正则表达式用于验证 元素的值。
min 和 max 属性,设置元素最小值与最大值。
step 属性,为输入域规定合法的数字间隔。
height 和 width 属性,用于 image 类型的 标签的图像高度和宽度。
autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
multiple 属性 ,是一个 boolean 属性。规定元素中可选择多个值。
HTML5新特性
新的DOCTYPE声明
完全支持css3 【所以从这里我们可以看出CSS3先于HTML5发布,那么CSS正式发布就在14年前】
新增video和audio 标签
语义化标签
canvas 【这也算是一个较重要的部分吧,个人认为】
新事件如 ondrag onresize
地理位置获取
以上有些参考: