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官网,查看最新动态)

时间: 2024-08-10 19:35:03

HTML5+CSS3学习笔记(三)的相关文章

HTML5+CSS3学习笔记(一)

前段时间一直在学Python,不仅仅只是学Python的基础语法,还有科学计算,主要是Numpy和Matplotlib,爬虫,暂时还没有用到Scrapy那么高端的库,还停留在Python自带的urrllib模块,还有BeautifulSoup解析器,我发现,Web的问题,始终绕不过去.不得不承认的是,Web已经成为数据获取的主要渠道,所以有必要了解其机理性的一些规则,更何况,话有一点小私心,就是想做一个个人网站出来.总而言之,Web的知识是必须得学的,最直接的,自然就是HTML.CSS和Java

HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

css3学习笔记三

css3有些特殊的元素选择器这和jquery相似.效果图如下 黑色的小球是旋转3D效果不是特别明显,主要是学习的是对每个小球的控制.上代码. <!DOCTYPE html><html>  <head>    <title>Ball.html</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&g

html5+css3学习笔记-prefixfree前缀补全插件

虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀. 首先在页面任意地方(能生效的方)插入插件 <script src="prefixfree.min.js"></script> 然后打开页面可以看到html标签中加入class="-webkit"(或其他后缀-o-,-ms-,

html5+css3学习笔记音频和视频

格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 <video wi

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个

angular学习笔记(三十一)-$location(2)

之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用 首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle&lt;T&gt;

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T> 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现和源码 下一篇用它们做一个多语言的demo 这两个是事件的订阅和广播,很强大,但用的时候要小心发生不必要的冲突. 先看一下它的实现思想 在Caliburn.Micro里EventAggregator要以单例的形式出现这样可以