zoukankan      html  css  js  c++  java
  • 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官网,查看最新动态)

    却道,此心安处是吾乡
  • 相关阅读:
    调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)
    Android实例-设置消息提醒(XE8+小米2)
    FastReport二维码打印存在的问题
    一个DELPHI操作USB摄像头类
    利用Delphi编程控制摄像头(图)
    Delphi实现拍照控件的程序代码
    win dos命令行设置ip和dns
    daemontools管理fast-fail的zookeeper
    zookeeper定时清理log
    生成所有全排列 非递归和递归实现
  • 原文地址:https://www.cnblogs.com/lucifer25/p/5847475.html
Copyright © 2011-2022 走看看