任务4

  1. HTML、XML、XHTML 有什么区别:
  • HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
  • XML,可扩展标记语言,主要用于存储数据和结构参考;
  • XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考。
  1. 怎样理解 HTML 语义化
    根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  2. 怎样理解内容与样式分离的原则

1、 前言

在学习html基础的时候,往往需要建立原则性的认识。其中就不乏常被提起或面试常见题目:html语义化的理解以及何为内容与样式分离的原则。在查阅资料的过程中,我发现对这两个问题的理解,对于培养良好的编码习惯和编码思维是非常重要的。于是记录于博客,以作记忆。
2、 问题
1)、怎样理解 HTML 语义化
2)、怎样理解内容与样式分离的原则
3、怎样理解 HTML 语义化
1) 何为语义化
  语义化的含义就是用正确的标签做正确的事情,HTML语义化是指根据内容的结构选择合适的标签,也就是根据网页内容将代码语义化。
  HTML标签语义化是Web网页标准化的重要一环,也是标准制定时重要的设计原则。HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)就是基于这样的设计原则。
2)检验标准
  浏览器会对语义化的标签设计默认的样式,所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。
3)优点
有利于搜索引擎以及爬虫工具等更容易读懂页面代码。因为机器不会关注页面实际渲染的外观,爬虫是依赖于标签来确定上下文和各个关键字的权重,只会关注页面内容本身,页面渲染的漂亮与否对机器识别毫无帮助。
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构。HTML标签是页面内容的载体,语义化的标签相对于是对所包含内容的一个整体声明,也使得页面整体结构清晰。
便于团队开发和维护
便于开发者阅读和写出更优雅的代码。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
4)如何做到html语义化
A、代码中使用的标签<div>和<span>是在所有的HTML标签中最没有语义的。所以要做到标签语义化,首先要尽量少用<div>和<span>这两个标签,在使用这两个标签时尽量能找到更有语义的标签代替。
  网页的开发者应该熟悉所有规范的HTML标签的使用场景,在合适的地方使用合适的标签。
  例如,标签Hx系列则表示标题,在网页中展示各层级的标题时使用;ul和ol标签表示列表,在展现各种数据列表或者菜单时使用;其它使用率较高的语义标签有:p、em、strong、table、site、blockquote等,以及HTML5新加入的标签:<header><footer><article><section><nav><aside>等。
B、熟悉各标签规范的属性,给HTML标签设置必要的属性。
  和标签语义化的重要性一样,某些属性的设置也是HTML语义化重要的环节。在很多规范中规定需要设置的两个属性是alt属性和title属性,这两个属性设置的也是为了提高HTML的语义。
  在img标签中,alt是必须要设置的属性,因为img是自闭合标签,并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替;title属性是可选属性,当标签包含的内容不足以说明语义时,可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。
  还有一个重要的属性是<label>标签中的for属性。<label>标签是<input>元素定义的标注。<label>标签的for属性值指代一个表单元素,属性值为此表单元素的id值。for属性的作用不仅把<lable>标签上的触发事件指向了for属性指代的表单元素,也从语义上绑定了<lable>和此表单元素。

<form>
<label for="user_name">User Name:</label>
<input type="text" name="user_name" id="user_name" />
</form>

4、怎样理解内容与样式分离的原则
1)网页分离

一个网页分为三个部分:Html——结构,css——表现,javascrip——行为。内容也就是html,样式也就是css。所以内容和样式的分离,就是指在网页编码的过程中,要将html和css两大部分分开。
2)如何实现

内容与样式分离的原则的实现,一个是要依靠意识,另一个是依靠经验。
  举例而言,面对一个分块明显的网页设计图时:

初级的开发人员思路及制作方法:div 层层嵌套;
中级的开发人员思路及制造方法:去掉多余的 div ,进行简化;
高级的开发人员思路及制造方法:最大化的简化 html 的结构,然后用 css 进行设置,减少 html 与 css 的契合度。

正确做法是写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置,减少 HTML 与 CSS 契合度(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
3)分离原则的优点

浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。

参考:https://segmentfault.com/a/1190000005626375#articleHeader4http://www.cnblogs.com/lovefan/p/3855513.htmlhttp://www.imooc.com/video/242
本文章著作权归饥人谷_huangyh_max和饥人谷所有,转载须说明来源!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容

  • 一、HTML、XML、XHTML 有什么区别 (一)定义: html即是超文本标记语言,是最早写网页的语言,但是由...
    Zuo_鸣阅读 507评论 0 1
  • HTML,XML和XHTML的区别和联系 XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面...
    azure_1122阅读 198评论 0 0
  • 1、HTML、XML、XHTML 有什么区别? 1)HTML,超文本标记语言,是语法较为松散的、不严格的Web语言...
    大胡子歌歌阅读 346评论 0 1
  • HTML、XML、XHTML 的区别 HTML(hype text markup language):超文本标记语...
    我七阅读 330评论 0 0
  • 1 HTML、XML、XHTML 有什么区别 html是超文本标记语言,是最早写网页的语言,但是由于时间早,...
    yangjie727阅读 308评论 0 0