博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浅谈html语义化
阅读量:5971 次
发布时间:2019-06-19

本文共 2371 字,大约阅读时间需要 7 分钟。

hot3.png

html标签语义:

   HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义

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

优点:

  • 去掉或样式丢失的时候能让页面呈现清晰的结构;
  • 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页;
  • PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).
  • 便于团队开发和维护;
  • 语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

anchor.gifanchor.gif

HTML常用标签语义

1、<Hx>

     <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

由于一些浏览器会默认地把 <h1> 元素显示为很大的字体,因此会有一些 web 开发者使用 <h2> 元素代替 <h1> 元素来显示最上层的标题。这样做不会对读者产生影响,但会使那些试图“理解网页结构

”的搜索引擎和其他软件感到迷惑。

请确保把 <h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。

如:

<h1>文档标题</h1>

<h2>次文档标题</h2>

而不要使用

<div class="title">文档标题</div>,或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。

值得注意的是h标签的语意是标题,搜索引擎对这个标签比较敏感,特别是h1,和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。 

2、<p>

   段落标记,知道了<p>作为段落,你就不会再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就挺完美了。

3、<b>标签与<strong>标签

    <b>:标签语义为“加粗”   

    <strong>:标签语义为“强调

    当我们知道了<b>标签和<strong>标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用<strong>,纯粹加粗用<b>

4、<ul>标签、<ol>标签、<li>标签

     <ul>语义: 定义无序列表  

     <ol>语义:定义有序列表

     <li>语义:定义列表项目

     所以涉及到列表的项目,应该用<ul><li>或<ol><li>来布局,而不是用<table>或<p>甚至<span>,当然也可以用<dl><dt><dd>

应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。

5、<dl>标签、<dt>标签、<dd>标签

      <dl>语义:定义了定义列表   

      <dt>语义:定义了定义列表中的项目(即术语部分)

      <dd>语义:定义列表中定义条目的定义部分

     一些带标题的列表可采用<dl><dt><dd>自定义列表

6、<span>标签

     <span>语义:被用来组合文档中的行内元素

例如:

p span { color:#ff0000; font-weight:bold; }

<p>

<span>提示:</span>:这是提示内容

</p>

    可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

7、<table>、<th>、<td>、<caption>标签

    <table>语义:定义 HTML 表格

    <th>语义:定义表格内的表头单元格

    <caption>语义: 定义表格标题

8、<button>标签、<input>标签、<textarea>标签

    <button> 标签定义一个按钮

     <input> 标签用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

     <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或

多媒体内容。

    <textarea>语义:定义多行的文本输入控件

9、

<em>、 <strong>标签

   <em> 是用作强调的,<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。

10、......

转载于:https://my.oschina.net/longteng2013/blog/135743

你可能感兴趣的文章
bioerl 获取gi号
查看>>
Java内存模型(JMM)
查看>>
Head First设计模式之装饰者模式(Decorator Pattern)
查看>>
分布式事务最终一致性常用方案
查看>>
一颗ARM架构芯片的软硬件构成
查看>>
负载均衡之基于L7负载
查看>>
07-python链接mysql
查看>>
opencv获取IP摄像头(IP-camera)实时视频流
查看>>
第三百一十四节,Django框架,自定义分页
查看>>
Y480&Y580 刷slic2.1全自动教程
查看>>
操作系统学习笔记:文件系统接口
查看>>
Spring监管下的Hibernate配置文件
查看>>
Linux多命令协作:管道及重定向
查看>>
DotNetCore跨平台~2.0提前发布喽
查看>>
zTree理解和简单Demo(转)
查看>>
IEnumerable 使用foreach 详解
查看>>
LeetCode: Single Number II
查看>>
oc11---结构体作为属性
查看>>
ios17--自定义控件2改进
查看>>
Android零基础入门第40节:自定义ArrayAdapter
查看>>