让我们的标签语义化成为一种习惯好处多多
使用标签语义化的理由可以有无数条:
- 去掉样式或者样式丢失时页面结构依然清晰分明
- 移动设备能够更加完美的展示你的网页(移动设备对css的支持较弱)
- 阅读器会根据标签的语义自动解析,呈现更容易阅读的内容形式(无障碍阅读)
- 搜索引擎会根据标签的语义确定上下文和权重问题
- 便于后期的开发以及维护,团队合作效率提高
- ……
<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
让我们的标签语义化成为一种习惯好处多多相关推荐
- 《终身成长》读书笔记(part2)--失败从一种行为,转变为一种身份
觉得不错的句子 为什么有些学生如此专注于证明他们的能力,而有些学生却不在乎这一点,仅仅是热衷于学习.突然间,我们发现人们对能力拥有两种不同的理解:一种认为能力是固定的,需要被证明:另一种则认为能力是可 ...
- H5新标签--语义化标签
H5新标签----语义化标签 区别:1.默认样式不一样 2.有SEO优化作用 1.header,一般作为网页的头部使用 2.aside,侧边栏 3.nav,导航栏 4.address,地址,字体样式默 ...
- TensorFlow学习笔记(二)把数字标签转化成onehot标签
在MNIST手写字数据集中,我们导入的数据和标签都是预先处理好的,但是在实际的训练中,数据和标签往往需要自己进行处理. 以手写数字识别为例,我们需要将0-9共十个数字标签转化成onehot标签.例如: ...
- 论文解读:《基于注意力的多标签神经网络用于12种广泛存在的RNA修饰的综合预测和解释》
论文解读:<Attention-based multi-label neural networks for integrated prediction and interpretation of ...
- HTML标签语义化,值得收藏!
思维导图 学习路线 第一阶段:网页制作 HTML:常用标签,锚点,列表标签,表单标签,表格标签,标签分类,标签语义化,注释,字符实体 CSS:CSS介绍,全局样式,行内样式,内联样式,选择器,字体样式 ...
- 图文多模态语义融合前的语义对齐——一种单双混合塔多模态模型
图文多模态语义融合前的语义对齐--一种单双混合塔多模态模型 FesianXu 20220127 at Baidu Search Team 前言 之前在博文[2-4]中介绍了一些图文多模态语义对齐相关的 ...
- 表达无序列表语义的html标签是,HTML 标签语义
什么是HTML HTML全称是HyperText Markup Language,翻译过来就是超文本标记语言.它定义了网页的内容和结构. 为什么要使用语义化标签 可读性.可维护性 html有很多标签, ...
- html标签用于盲人,HTML 标签语义
什么是HTML HTML全称是HyperText Markup Language,翻译过来就是 超文本标记语言 .它定义了网页的内容和结构. 为什么要使用语义化标签 可读性.可维护性 html 有很多 ...
- R语言将数据列中的多种日期格式统一变化为一种固定格式实战:使用lubridate包中的parse_date_time函数
R语言将数据列中的多种日期格式统一变化为一种固定格式实战:使用lubridate包中的parse_date_time函数 目录
最新文章
- 2018-06-02笔记
- iOS之路9-#import 与#include和 @class的区别
- android 变量Map集合
- SAP Cloud for Customer的Mashup位于CustomPane里
- vue 如何获取图片的原图尺寸_阳台洗衣机组合柜如何设计|尺寸规范|案例图片...
- 发动机压缩比怎么计算公式_2020沃德十佳发动机出炉:这三款机头,20万内就能买到...
- java8中的map与flatmap区别
- iptables二之防火墙SNAT源地址转换,MASQUERADE地址伪装之DNAT目标地址转换讲解和实验演示
- 快捷键jdeveloper
- SpringBoot学习---整合JDBC,Druid,MyBatis
- git merge/git rebase分支合并
- IGS发布RINEX 4.00
- SAXReader的使用
- 字节跳动面试题 —— 水壶问题
- sem与seo的区别与联系
- title和alt属性有什么作用?
- Image2LaTeX + AxMath:公式自动识别 + word 编辑公式
- 小微企业如何创作一个具有品牌故事的软文营销方案
- 带蒙版的安卓剪辑软件_安卓手机上的视频剪辑软件哪款好?
- ld: cannot find -lxxx终极解决方法
热门文章
- Linux运行级详解
- LeetCode—207. 课程表
- JSON数据格式解析库(cJSON、Jansson)的使用在STM32上移植和使用
- 可以ping通 但ssh: connect to host 192.168.0.2 port 22: Connection refused
- 全国计算机等级考试题库二级C操作题100套(第08套)
- java ndk 在哪_NDK简介
- c语言编2048,c语言编写的2048游戏代码,大家可以参考一下这些
- linux stm32 ide,一文教你如何在ubuntu上快速搭建STM32 CubeIDE环境(图文超详细+文末有附件)...
- Mybatis之SqlSession简析
- 实现MySQL高可用群集配置_配置高可用性的MySQL服务器负载均衡群集