让我们的标签语义化成为一种习惯好处多多

 

使用标签语义化的理由可以有无数条: 

  1. 去掉样式或者样式丢失时页面结构依然清晰分明
  2. 移动设备能够更加完美的展示你的网页(移动设备对css的支持较弱)
  3. 阅读器会根据标签的语义自动解析,呈现更容易阅读的内容形式(无障碍阅读)
  4. 搜索引擎会根据标签的语义确定上下文和权重问题
  5. 便于后期的开发以及维护,团队合作效率提高
  6. ……  

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

P

段落标记,知道了 p 作为段落,你就不会再使用<br />来换行了,而且不需要<br /> 来区分段落与段落。p中的文字会自动换行,而且换行的效果优于<br />。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。  

<abbr> 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式,IE6及以下版本浏览器不支持。 

<address> 可定义一个地址(比如电子邮件地址)。您应当使用它来定义地址、签名或者文档的作者身份。 

不论创建的文档是简短扼要还是冗长完整,都应该确保每个文档都附加了一个地址,这样做不仅为读者提供了反馈的渠道,还可以增加文档的可信度。  

<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。 

          area 元素总是嵌套在 <map> 标签中。

           注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。

如下例:

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />  <map name="planetmap" id="planetmap">  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />  
</map>  

<b> 定义粗体,最好使用strong代替 

<base> 定义页面中所有链接的基准 URL

 <blockquote> 标签定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会    在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

      提示:请使用 q 元素来标记短的引用。

<blockquote cite="http://www.iteye.com">让语义化标签成为一种习惯</blockquote>

 <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。

<p>  
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347),于至正十年完成。   
</p> 

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

 

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

 

<var> 标签表示变量的名称,或者由用户提供的值。

<var> 标签是计算机文档中应用的另一个小窍门,这个标签经常与 <code> 和 <pre> 标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。

用 <var> 标签标记的文本通常显示为斜体。

 

 

<table>

<caption> 定义表格标题

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

<th> 定义表格内的表头单元格。 <tr>定义表格中的行

<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

<td> 标签定义 HTML 表格中的标准单元格。

<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。 

<sub><sup>上标和下标文本 

<del> 定义删除文本

<strong>重点强调  <em>强调 

<optgroup> 标签定义选项组。

optgroup 元素用于select组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

<select>  <optgroup label="Swedish Cars">  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  </optgroup>  <optgroup label="German Cars">  <option value ="mercedes">Mercedes</option>  <option value ="audi">Audi</option>  </optgroup>  
</select>  

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<form>  <fieldset>  <legend>health information</legend>  height: <input type="text" />  weight: <input type="text" />  </fieldset>  
</form>  

<i>斜体文本,建议使用font-style

好了,就写到这儿吧。

 

转载于:https://www.cnblogs.com/helenR/p/code_xiguan_all.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292152.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ABP vNext微服务架构详细教程——简介

简介该系列文章主要展示ABP vNext框架在微服务架构下的用法&#xff0c;提供一套可落地的技术实现思路&#xff0c;并演示各服务在Kubernetes下的部署方案。基础概念ABP vNext基于ASP.NET Core的应用框架&#xff0c;是.Net主流应用开发框架之一。提供基于模块化的灵活项目模板…

linux c之用fopen、fputs、fgets、 fseek来对文件进行写、替换、读

1、函数说明 1、fgets #includechar *fgets(char *s, int size, FILE *stream); 功能:从文件流读取一行,送到缓冲区,使用时注意以下几点: 返回值:成功时s指向哪返回的指针就指向哪,出错或者读到文件末尾时返回NULL 2、fputs #includeint fputs(const char *s, F…

Scala:First Steps in Scala

var and val 简单来说&#xff0c;val声明的变量可以重新修改其引用&#xff0c;val则不行&#xff0c;见下面的例子&#xff1a; 1 def max(x: Int, y: Int): Int {2 if(x > y) x else y 3 }4 5 def max(x: Int, y: Int): Int if(x > y) x else y 6 7 var list Ar…

CIDR

CIDR&#xff08;无类别域间路由&#xff0c;Classless Inter-Domain Routing&#xff09;是一个在Internet上创建附加地址的方法&#xff0c;这些地址提供给服务提供商&#xff08;ISP&#xff09;&#xff0c;再由ISP分配给客户。CIDR将路由集中起来&#xff0c;使一个IP地址…

电脑怎么测试硬盘的读写速度_两块硬盘合二为一,电脑读写翻倍?这样的“好事”你必须得了解...

近日&#xff0c;技嘉在旗下顶级的B550 AORUS MASTER主板上做了一次PCIe4.0固态阵列测试&#xff0c;由于该款主板支持3个PCIe4.0的M.2固态硬盘&#xff0c;所以这次的测试为3块PCIe4.0固态组建RAID0&#xff0c;来进行读写测试。常见的PCIe3.0x4的固态硬盘的读写速度一般在250…

C# 动态创建控件时注册Name属性

动态创建控件1. 容器控件 .RegisterName("Name",要注册的控件) //注册控件2. 容器控件 .FindName("Name") as 控件类型 //找到控件并转换成相应类型注意仅通过控件.Name来设置是不能通过FindName来找到控件的&#xff0c;必须注册动态删除控件1. 容器控件…

3-07. 求前缀表达式的值(25) (ZJU_PAT数学)

题目链接&#xff1a;http://pat.zju.edu.cn/contests/ds/3-07 算术表达式有前缀表示法、中缀表示法和后缀表示法等形式。前缀表达式指二元运算符位于两个运算数之前&#xff0c;比如23*(7-4)8/4的前缀表达式是&#xff1a; 2 * 3 - 7 4 / 8 4。请设计程序计算前缀表达式的结果…

linux之文件类型

1 、纯文本文件 这是Unix系统中最多的一种文件类型,之所以称为纯文本文件,是因为内容为我们可以直接读到的数据,例如数字、字母等等。设 置文件几乎都属于这种文件类型。举例来说,使用命令“cat ~/.bashrc”就可以看到该文件的内容 2、二进制文件 我们在GNU发展史中提过,…

java配置运行环境和配置

2019独角兽企业重金招聘Python工程师标准>>> 1&#xff1a;准备好下载的java。开始安装 2&#xff1a;第一次蹦出安装路径设置为&#xff08;D:\java\jdk&#xff09;。不要设置下图样式设置路径! 3:jdk安装完成后会再弹出如下窗口&#xff0c;让你选择独立的jre的安…

SQL Server 的锁定和阻塞

本帖提供两种做法&#xff0c;可避免在 SQL Server 事务锁定时产生的不正常或长时间阻塞&#xff0c;让用户和程序也无限期等待&#xff0c;甚至引起 connection pooling 连接数超过容量。 所谓的「阻塞」&#xff0c;是指当一个数据库会话中的事务&#xff0c;正在锁定其他会话…

结构体数组排列_学习RTOS(3)数据结构

在 FreeRTOS 中存在着大量的基础数据结构列表和列表项的操作&#xff0c;列表和列表项是直接从 FreeRTOS 源码注释中的 list 和 list item 翻译过来的&#xff0c;其实就是对应我们 C 语言当中的链表和节点&#xff0c;在后续的讲解&#xff0c;我们说的链表就是列表&#xff0…

python实现元旦多种炫酷高级倒计时_附源码【第20篇—python过元旦】

文章目录 &#x1f30d;python实现元旦倒计时 — 初级(控制台)⛅实现效果&#x1f30b;实现源码&#x1f31c;源码讲解 &#x1f30d;python实现元旦倒计时 — 中级(精美动态图)⛅实现效果&#x1f30b;实现源码&#x1f31c;源码讲解 &#x1f30d;python实现元旦倒计时 — 高…

.NET6之MiniAPI(十一):本地化

.net开发体系里&#xff0c;大部分本地化的实现都是用资源文件实现(.resx)&#xff0c;asp.net core中的多语Culture是指区域性的对象&#xff0c;而UICulture 该对象表示资源管理器在运行时查找区域性特定资源时所用的当前用户接口区域性。asp.net core实现也是通过添注入本地…

C#基础整理

元旦整理书架发现一本小册子——《C#精髓》中国出版社2001年出版的&#xff0c;粗略翻了下关于C#的知识点挺全的虽然内容谈得很浅也有很多过时的内容&#xff08;话说这本书是我在旧书店花5块钱淘的&#xff09;我保留原有章节并删减部分过时和不重要内容添加一些自己觉得重要的…

linux c之fdopen(int fd, const char *type)使用总结

1、fdopen(int fd, const char *type)的介绍 比如一写特殊文件不能用io打开,我们先要用open函数得到文件描述符,也就是这个fdopen函数的第一个参数,第二个参数是常量,不同类型不同意义,如下图 2、代码演示 #include<stdio.h> #include<fcntl.h>int main…

HTML form的一些属性(第一版)

HTML表单属性总结(第一版) 基本格式为:<input type"类型" name"名字[唯一,有的类型的同组是需要设置相同的名字]" value"值,类型不同的,他们的含义是不同的">. 例如:<input type"text" name"username" value"…

基于ASA防火墙的SSL ×××配置

基于ASA防火墙的SSL 配置实验拓扑图 实验目的&#xff0c;PC2通过SSL能够访问到PC1SSL服务端配置全在ASA上面&#xff0c;下面为配置步骤&#xff1a;第一步&#xff1a;建立RSA密钥证书&#xff0c;名称为ssl***keypaircrypto key generate rsa label ssl***keypair第二步&…

晚上去宾馆有什么是一定要带的?

1 前任垃圾袋&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 上一代摸鱼也是很厉害的&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 穿最帅最贵的衣服参加婚礼&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 去宾馆要带什么?&#xff08…