html语义化

HTML是超文本标记(Hyper Text Markup Language)的缩写,在网页设计中又把它称为网页的结构层。它的学习很简单,只要多利用业余时间去记忆、练习,一到两天时间就能掌握,并写出一个简单页面。

这里推荐一个快速入门的网址:http://www.w3school.com.cn/ 

一、对于html的学习

        1、首先是对html的整体结构的认识,即<!DOCTYPE html>的声明、html标签、head标签、body标签;

        2、其次是对head里面的标签的认识和使用,如meta、link、title、script、style等,在网页的优化上特别重要;

        3、最后是对body里面的标签的认识和使用,这也是网页上面呈现的内容,学html大部分时间都要花在这上面。要对常用标签的含义、用法、性质以及自带的属性都要熟练掌握,不常用标签能知道含义以及用法。

要掌握的精髓就在于在什么样的情况下运用哪个标签才能达到最好的效果。

二、标签语义化

其重要作用在于:

     1、网页结构合理 ;

     2、利于开发调试和后期维护(让自己和别人能够比较容易看懂代码);

     3、利于搜索引擎SEO优化。搜索引擎不能识别内容,只能识别标签语义从而知道这部分是什么内容(让搜索引擎能看懂)。有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取;

      4、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)。

但是,必须认识到,并不是说我们只能使用有语义的标签,而应当是在需要有语义,需要被SEO识别的情况下才必须使用有语义标签(如自己网页的主题以及重要内容等)。在不需要的情况下,也根据情况使用无语义标签。如div加CSS的页面布局、span添加一些只为实现效果的块或者描述,不需要有语义,不然也容易造成语义混乱。这是因为由标签传达的含义比浏览器显示文本的方式更为重要

文字

        1、在有一段文字显示的情况下,必须使p标签来包含。里面可含有无语义标签div/span以及其他有语义的标签。      如:

       blockquote块引用,长引用(要添加cite属性引用地址)、

       q短的行内引用cite定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题著作的标题、

       address文档作者或拥有者的联系信息、

       code代码abbr缩写(要添加title标签说明原文)、

       time时间、mark标注、ruby注释、

       strong强调 (特别注意,这个标签权重很高,用于特别强调的文本。搜索引擎对其有很高的识别。)、

       details可展开样式(details里面使用添加标题,后面接展开内容)

       等等......

        2、标题使用h1,h2,h3,h4标签,其中h5,h6权重太小一般不使用。其中的样式,即字体大小、颜色等都可以用CSS定义重新定义;

        3、标签中应该使用的是有含义的。基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。是浏览器和搜索引擎所能识别的。不应该使用纯粹为了设定样式而存在的标签。设定样式应当由样式表(CSS)完成。

图片

        1、如果图片作为HTML的一部分,需要被搜索引擎识别,则用img,不需要,则可以使用背景来显示图片;

        2、img标签中的alt和title属性。其中,alt属性用于图片描述,是给搜索引擎看的,图片无法显示时,显示alt中的文字。title属性也用于图片描述,是给用户看的,鼠标移动到图片时显示title中的文字。对于img标签,两个属性都尽量添加。(对于title值,在很多元素中都可以使用,比如在布局中无法完全显示的一条新闻或者消息等,在鼠标移动到上面时显示完全的内容是很好的一种用户体验);

        3、figure元素和figcaption元素。figure元素用于包含图片和图注,figurecaption元素用于表示图注文字。在有图片和图注的情况下,使用这两个元素会使页面语义更好。

表格

       表格中有table、tr、td、th、caption、thead、tbody、tfoot。语义上,th为表头单元格,caption为表格标题,thead、tbody、tfoot把表格分为三部分。这三样在效果上并不需要用到,但在良好的语义上,尽量使用

表单

        1、lable绑定控件。lable使用于关联控件,解释控件的意义以及有一定点击效果;

        2、placeholder占位符值和value值。表单中文本框的默认值,类似提示文本。在需要用户输入文字的控件中尽量使用;

        3、fieldset表单控件分组。(只在有需要的时候使用,多数表单不分组),legend标签为 fieldset 元素定义标题。

新增标签

在HTML5中添加了很多结构标签,增强了页面布局结构的语义,下面举例:

        1、header头部、标题 

        2、nav导航 

        3、section块区

        4、article 文章

        5、 main主内容区

        6、aside辅助信息

        7、hgroup标题组合 

        8、footer页脚 

        9、figure独立的流内容

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

推荐阅读更多精彩内容