HTML5+CSS3学习笔记,三

打开一个网页,看源代码,会发现,html大部分的内容还是文本,何况html本身就是叫超文本标记语言,所以大部分的标签,针对的都是文本。这些标签非常的多,而且有些,我是感觉语义上界限比较模糊,咱们一个一个的来看。

  1. 添加段落

    由于HTML会自动忽略你在文本编辑器里写的空格和换行,这里就需要用到<p>标签来标记新的段落,将每一段都放进一个<p></p>标签里,而不是用<br>标签,当然两者完全可以实现同样的排列样式,但不推荐使用<br>,它将表现样式带入HTML,<p>标签语义性更强,使用的频率也是相当高

  2. 指定细则

    这里用到的是small标签,"通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名,或者满足许可要求"。浏览器的默认显示样式为小字号,但不要为了显示小字号而去使用这个标签,一定要符合语义,并且small标签通常标记的是短语,不要太长

  3. 标记重要和强调的文本

    strong元素表示内容的重要性,而em元素则表示内容的着重点,通常情况下浏览器将strong显示为粗体,而em显示为斜体。在这里不得不提的是b和i标签,分别将文本变成粗体和斜体,表现效果上与strong和em标签相同,只有在strong和em语义之外才会用到这两个元素,否则还是使用strong和em标签比较贴切。HTML5对b和i元素的重新定义为:

    b元素表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不表示其他的语态和语气,用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等;

    i元素表示一块不同于其他文字的文字,具有不同的语气和语态,或其他不同于常规之处,用于如分类名称、技术术语、外语里的惯用词、翻译的散文、西方文字中的船舶名称等

  4. 创建图

    figure标签是HTML5里新添加的标签,就是专门用来处理诸如图表、照片、图形、插图、代码片段以及其他类似的独立内容。figcaption标签是可选元素,表示figure的题目,只能使用一次。浏览器里默认的显示样式为缩进

  5. 指明引用和参考

    使用cite元素可以指明对某内容源的引用或参考,如戏剧、脚本或图书的标题,歌曲、电影、照片或雕塑的名称,演唱会或音乐会,规范、报纸或法律文件等。cite里可以添加lang属性,指示引用内容的语言。浏览器里默认以斜体显示,cite只是用于参考源本身,一般比较短,至于引述的内容,看下面

  6. 引述文本

    两个标签,blockquote表示单独存在的引述,通常更长,而q则用于比较短的引述,像是句子里的引述。可以在标签里放置cite属性,指明引用来自的地址url等。blockquote浏览器的默认显示效果为缩进,而p则显示为引号,根据lang属性里的不同,会更换为相应语言的引用格式

  7. 指定时间

    这里用到的是time标签,time标签里不能在嵌套其他的标签,在写这个标签的时候,最好用上datetime属性,属性值的格式是固定的,类如:YYYY-MM-DDThh:mm:ss,小时部分使用的24小时制,如果要表示时间段,则为:nh nm ns

  8. 解释缩写词

    缩写词在英语里比较常见,如人称,还有一些专有名词的缩写等,html里用abbr标签标记这些文本,使用title属性提供缩写词的全称,考虑到有些移动端用户可能看不到title里的内容,所以最好在写完这个标签之后,再加上"(缩写词的全称)"

  9. 定义术语

    在印刷物上,首次定义术语通常会对其添加区别于其他文本的格式(英文常为斜体,汉语则是黑体或者楷体),而在html中定义术语就要用到dfn标签。要注意的是dfn仅需包围定义的术语即可,不必也把定义包上

  10. 创建上标和下标

    比主体文本稍高或稍低的字母或数字分别称为上标和下标,常见的上标元素有商标符号、指数和脚注编码等,常见的下标包括化学符号等,html里用sup创建上标,用sub创建下标。

  11. 添加作者联系信息

    address元素是用以定义与HTML页面或页面一部分(如一篇报告或新文章)有关的作者、相关人士或组织的联系信息,通常位于页面底部(置于footer元素里)或者相关部分内。address标签里通常会嵌套一个a标签作为链接,链接电子邮件、电话或者网站等

  12. 标注编辑和不再准确的文本

    有时可能需要将在前一个版本之后对页面内容的编辑标注出来,或者对不再准确、不再相关的文本进行标记,html提供了代表添加内容的ins元素和标记已删除内容的del元素,s元素则被用于标注不再准确或不再相关的内容,ins和del元素都有cite和datetime两个属性,cite指向说明编辑原因的界面,datetime提供编辑的时间

  13. 标记代码

    code元素常用于包含代码示例和文件名的文本,如果代码需要显示"<"和">",应该用&lt和&rt标记,还有一些计算机相关元素,但很少被使用,这里多提一下:kbd----标记用户输入;samp-----指示程序或系统的示例输出;var-----表示变量或变位符的值

  14. 使用预格式的文本

    Html是忽略的空格和回车的,但是在pre元素里的内容则不是这样:浏览器会按照你输入的格式原样的执行输出,经常配合code元素一起使用

  15. 突出显示文本

    这里使用的是mark元素,就像是拿荧光笔标记的感觉一样,和em、strong语义上是有所不同的

  16. 创建换行

    上面已经提到过,html会忽略空格和换行,强制换行的话要用到br标签,可用于诗歌、街道地址等的换行,一般情况下不建议使用

  17. 创建span

    同div一样,span元素是没有任何语义的,与div相比粒度更小,包围的是字词或短语内容,在没有特殊语义或者实在找不到合适标签,又或者想要提高控制某种样式的精度时,可以考虑使用,经常会增添ID和class属性

  18. 其他元素(很少用到,浏览器的支持也各有不同)

    u元素:"为一块文字添加明显的非文本注解,比如在中文中将文本标为专有名词,或者标明文本拼写有误",默认形式是加下划线

    wbr元素:与br接近,"一个可换行处",指示浏览器在必要的时候这里可以执行换行

    ruby、rp、rt元素:使用的就更少,"旁注标记,中文和日语里常用,比如标记发音,通常出现在待标记上方"。rt是旁注的标记,而rp是可选的,因为有些浏览器并不支持rt,所以就需要rp元素在标记外面加一层括号,通常是这样用的:

<ruby>

文本<rp>(</rp><rt>注解</rt><rp>)</rp>

</ruby>

bdi和bdo元素:有些语言是从左往右写,而有些则是从右往左写,除非在<html>这个标签里添加dir=rtl,否则浏览器都是从左往右显示的。但对于出现的部分需要从右往左的语言,这样就不合适了,所以有bdo,只需在这个标签里添加dir=rtl这个属性,并将待显示的内容置于这个标签里即可,而bdi更智能,会根据不同的语言,决定显示的方向

meter元素:表示"任务的完成度",属性有value(必须的)、min(默认为0)、max(默认为1)、low、high、optimum,许多浏览器会根据value直接生成一个条状的图形,还会根据low和high等程度的不同赋予不同的颜色,但还是推荐在meter元素中假如指示反映测量值的文本,毕竟有些浏览器并不支持meter

progress元素:和meter元素有些像,指示某项任务的完成进度,可以用来表示事情的一个进度条,有三个属性:max(总任务量)、value(已完成量)、form(值通常为相关联form元素的ID)

总结:标签很多,HTML5将这些标签划分的非常细,几乎可以处理任何一种语义,及时无法很合适的表示,不还有几个通用标签吗?划分的如此之细,文本的语义就愈发的明晰,不会有什么歧义,控制的也就更为精细。但是有的时候,文本本身的语义是模糊的,就要细细品味不同标签之间的差异,选择表达最合适的,所以说,写一个html文档并不难,但要写好,写得清楚,没那么容易

参考资料:http://www.w3school.com.cn/tags/html_ref_byfunc.asp (html所有标签)

https://www.w3.org/standards/webdesign/ (W3C官网,查看最新动态)