HTML5+CSS3学习笔记
Posted Lucifer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5+CSS3学习笔记相关的知识，希望对你有一定的参考价值。
打开一个网页，看源代码，会发现，html大部分的内容还是文本，何况html本身就是叫超文本标记语言，所以大部分的标签，针对的都是文本。这些标签非常的多，而且有些，我是感觉语义上界限比较模糊，咱们一个一个的来看。
-
添加段落
由于HTML会自动忽略你在文本编辑器里写的空格和换行，这里就需要用到<p>标签来标记新的段落，将每一段都放进一个<p></p>标签里，而不是用<br>标签，当然两者完全可以实现同样的排列样式，但不推荐使用<br>，它将表现样式带入HTML，<p>标签语义性更强，使用的频率也是相当高
-
指定细则
这里用到的是small标签，"通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求"。浏览器的默认显示样式为小字号，但不要为了显示小字号而去使用这个标签，一定要符合语义，并且small标签通常标记的是短语，不要太长
-
标记重要和强调的文本
strong元素表示内容的重要性，而em元素则表示内容的着重点，通常情况下浏览器将strong显示为粗体，而em显示为斜体。在这里不得不提的是b和i标签，分别将文本变成粗体和斜体，表现效果上与strong和em标签相同，只有在strong和em语义之外才会用到这两个元素，否则还是使用strong和em标签比较贴切。HTML5对b和i元素的重新定义为：
b元素表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等；
i元素表示一块不同于其他文字的文字，具有不同的语气和语态，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用词、翻译的散文、西方文字中的船舶名称等
-
创建图
figure标签是HTML5里新添加的标签，就是专门用来处理诸如图表、照片、图形、插图、代码片段以及其他类似的独立内容。figcaption标签是可选元素，表示figure的题目，只能使用一次。浏览器里默认的显示样式为缩进
-
指明引用和参考
使用cite元素可以指明对某内容源的引用或参考，如戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称，演唱会或音乐会，规范、报纸或法律文件等。cite里可以添加lang属性，指示引用内容的语言。浏览器里默认以斜体显示，cite只是用于参考源本身，一般比较短，至于引述的内容，看下面
-
引述文本
两个标签，blockquote表示单独存在的引述，通常更长，而q则用于比较短的引述，像是句子里的引述。可以在标签里放置cite属性，指明引用来自的地址url等。blockquote浏览器的默认显示效果为缩进，而p则显示为引号，根据lang属性里的不同，会更换为相应语言的引用格式
-
指定时间
这里用到的是time标签，time标签里不能在嵌套其他的标签，在写这个标签的时候，最好用上datetime属性，属性值的格式是固定的，类如：YYYY-MM-DDThh:mm:ss，小时部分使用的24小时制，如果要表示时间段，则为：nh nm ns
-
解释缩写词
缩写词在英语里比较常见，如人称，还有一些专有名词的缩写等，html里用abbr标签标记这些文本，使用title属性提供缩写词的全称，考虑到有些移动端用户可能看不到title里的内容，所以最好在写完这个标签之后，再加上"（缩写词的全称）"
-
定义术语
在印刷物上，首次定义术语通常会对其添加区别于其他文本的格式（英文常为斜体，汉语则是黑体或者楷体），而在html中定义术语就要用到dfn标签。要注意的是dfn仅需包围定义的术语即可，不必也把定义包上
-
创建上标和下标
比主体文本稍高或稍低的字母或数字分别称为上标和下标，常见的上标元素有商标符号、指数和脚注编码等，常见的下标包括化学符号等，html里用sup创建上标，用sub创建下标。
-
添加作者联系信息
address元素是用以定义与HTML页面或页面一部分（如一篇报告或新文章）有关的作者、相关人士或组织的联系信息，通常位于页面底部（置于footer元素里）或者相关部分内。address标签里通常会嵌套一个a标签作为链接，链接电子邮件、电话或者网站等
-
标注编辑和不再准确的文本
有时可能需要将在前一个版本之后对页面内容的编辑标注出来，或者对不再准确、不再相关的文本进行标记，html提供了代表添加内容的ins元素和标记已删除内容的del元素，s元素则被用于标注不再准确或不再相关的内容，ins和del元素都有cite和datetime两个属性，cite指向说明编辑原因的界面，datetime提供编辑的时间
-
标记代码
code元素常用于包含代码示例和文件名的文本，如果代码需要显示"<"和">"，应该用<和&rt标记，还有一些计算机相关元素，但很少被使用，这里多提一下：kbd----标记用户输入；samp-----指示程序或系统的示例输出；var-----表示变量或变位符的值
-
使用预格式的文本
Html是忽略的空格和回车的，但是在pre元素里的内容则不是这样：浏览器会按照你输入的格式原样的执行输出，经常配合code元素一起使用
-
突出显示文本
这里使用的是mark元素，就像是拿荧光笔标记的感觉一样，和em、strong语义上是有所不同的
-
创建换行
上面已经提到过，html会忽略空格和换行，强制换行的话要用到br标签，可用于诗歌、街道地址等的换行，一般情况下不建议使用
-
创建span
同div一样，span元素是没有任何语义的，与div相比粒度更小，包围的是字词或短语内容，在没有特殊语义或者实在找不到合适标签，又或者想要提高控制某种样式的精度时，可以考虑使用，经常会增添ID和class属性
-
其他元素(很少用到，浏览器的支持也各有不同)
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官网，查看最新动态)
以上是关于HTML5+CSS3学习笔记的主要内容，如果未能解决你的问题，请参考以下文章