摘要:作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。
标签分类作者:陈大鱼头
github: KRISACHAN
链接:github.com/YvetteLau/S…
背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。
在一个 html 文档中,标签大致可以分为以下两个大类:
:声明文档类型;
:限定文档区域;
内又有以下几类:
1. head标签用于定义文档的头部,它是所有头部元素的容器。描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。 head内可存放标签有:
:主要用于style文件引入
:样式表区域
:提供了有关当前HTML元素的元信息 (meta-information)
标签内存放文档的内容。 内标签分类有以下11类:
内容分区
文本内容
内联文本语义
图片和多媒体
内嵌内容
脚本
编辑标识
表格内容
表单
交互元素
Web组件
语义化到底重不重要?
我们知道,在HTML中,每个标题是通过标题标签来定义的,标题标签一共有6个,分别是:h1~6。例子如下:
<h1>我是一级标题h1>
<h2>我是二级标题h2>
<h3>我是三级标题h3>
<h4>我是四级标题h4>
<h5>我是五级标题h5>
<h6>我是六级标题h6>
如果是连续的标题,则可以用 来连接:
<hgroup>
<h1>我是一级标题h1>
<h2>我是二级标题h2>
<h3>我是三级标题h3>
<h4>我是四级标题h4>
<h5>我是五级标题h5>
<h6>我是六级标题h6>
hgroup>
如果是段落内容,则用 :
<p>我是段落内容p>
如果我们要列一个列表则可以用 或 。如果只是要标记项目,我们可以用 ,例子如下:
<ul>
<li>苹果li>
<li>香蕉li>
<li>奥特曼li>
<li>橙子li>
ul>
若是标记顺序,则用 ,例子如下:
<ol>
<li>向前走300米li>
<li>右转li>
<li>向前走300米li>
<li>右转li>
<li>向前走300米li>
ol>
当然我们也可以按需嵌套。
<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀,调成“腌料”,鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀,腌渍半小时。li>
<li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀,调成“综合调味料”。li>
<li>鸡丁腌好以后,色拉油下锅烧热,先将鸡丁倒入锅内,用大火快炸半分钟,炸到变色之后,捞出来沥干油汁备用。li>
<li>在锅里留下约两大匙油,烧热后将切好的干辣椒下锅,用小火炒香后,再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅,用大火快炒片刻后,再倒入“综合调味料”继续快炒。li>
<ul>
<li>如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。li>
<li>如果你在北方,可加入黄瓜丁、胡萝卜丁和花生米,翻炒后起锅。li>
ul>
ol>
在我们平常说话的时候,为了突出重点,我们往往会强调某些词,就如如下的例子:
<p>我<em>非常em>喜欢加班p>
如果是重音强调,则:
<p>鱼头,明天<strong>别迟到strong>了p>
如果你在项目的一开始就使用HTML语义化,不仅不会花更多的时间,而且又有以下的可访问性优点:
更便于开发 — 如上所述,你可以使HTML更易于理解,并且可以毫不费力的获得一些功能。
更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便,并且更易于响应式开发。
更便于SEO优化 — 比起使用非语义化的
标签,搜索引擎更加重视在“标题、链接等”里面的关键字,使用语义化可使网页更容易被用户搜索到。(虽然在9012年的今天,SEO并没太大软用)
在Web开发无障碍性意味着使尽可能多的人能够使用Web站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。
“无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。"
WAI-ARIAWAI-ARIA 是一项技术,它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化,这样一来能帮助我们解决问题,也让用户可以了解发生了什么。
WAI-ARIA 是W3C编写的规范,定义了一组可用于其他元素的HTML 特性,用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性:
角色(role):这定义了元素是干什么的;
属性: 通过定义一些属性给元素,让他们具备更多的语义;
状态:用于表达元素当前的条件的特殊属性。
HTML语义化非常地重要,虽然在组件化开发的今天,利益没那么明显,但是对于后期维护,用户访问以及用户友好度来说都是非常重要的,在某些国家,语义化跟无障碍标准化甚至是衡量一个线上产品能否上线的标准。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/7082.html
摘要:作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。 作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上...
摘要:还有天,年便过去了,回头看看,这段时间自己有出去面试过,也遇到了很多面试题,以下是我的一些总结,这篇关于面试的文章,我也会不定时的更新。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。 还有7天,2018年便过去了,回头看看,这段时间自己有出去面试过,也遇到了很多面试题,以下是我的一些总结,这篇关于面试的文章,我也会不定时的更新。 HTML 1.说一下你对HTML语义...
阅读 654·2023-04-25 19:43
阅读 3834·2021-11-30 14:52
阅读 3711·2021-11-30 14:52
阅读 3775·2021-11-29 11:00
阅读 3732·2021-11-29 11:00
阅读 3789·2021-11-29 11:00
阅读 3516·2021-11-29 11:00
阅读 5933·2021-11-29 11:00