HTML5+CSS3学习笔记(二)
学习笔记一只是大致介绍了一下HTML的相关内容以及简单的框架,接下来就是学习HTML的各种标签。HTML的标签有很多,简单的介绍可以参照这个网址(http://www.w3school.com.cn/tags/html_ref_byfunc.asp)。 HTML5作为最新的HTML标准,毫无疑问发生了某些变化,增加了很多标签,也修改了一些标签,不过大致的结构没发什么太大变化,并且现在不同的浏览器对于HTML5的支持已经很好,Web更是有着向移动端发力的趋势。HTML5是必须要学的!
下面就具体的说说这些标签。
上次说到HTML的大致框架。
<!--指示这是一个html5文件,应该始终位于第一行--> <!DOCTYPE html> <!--语言为英语--> <html lang="en">
<head> <!--编码方式为utf-8,否则中文有可能出现乱码--> <meta charset="utf-8"> <title></title> </head>
<body>
</body>
</html> |
<head></head>里的内容,除了<title></title>里的内容之外,是不会在浏览器上显示的,这里面的信息,是给浏览器看的,我们重点关注的,是<body></body>里填充的内容,这里的内容将展示在浏览器上,大多数HTML标签生于<body>,死于</body>。
1、<title></title>里放的是网页的题目,上面已经多少提到,显示在浏览器的标签页上。基于SEO的考量,题目应尽可能独特,尽可能的体现网页本身的内容。title标签是必须的,一定在head标签下
2、创建分级标题
共有六个这样的标签,分别是h1~h6,等级一次缩小,表现在浏览器上,是加黑加粗的,这种程度也是递减的,当然了,我们注意的,始终是"语义化",即标签本身所代表的意思,样式的话完全可以有CSS操纵,标签h6的字完全可以更大,但这并无意义。这六个不同的标签具备的重要性是不同的,用好这六个标签,会使网页看的更有条理。
3、HTML5多了几个这样的标签:<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>,这些自然都是放在<body></body>标签里的
一个一个的说
<header></header>是用来创建页眉的,常见的网站最上面都有一个关于各类模块的导航栏,这些都是可以放在<header></header>标签里的,当然这只是其中的一种形式,一个网页可以有多个<header></header>标签,在页面最顶端的被认为是整个网页的页眉,子版块也是可以有的
<nav></nav>标签通常放在<header></header>里,意思也很明确,就是指示导航栏的,这种指示应该只是针对网页中重要的链接群
<main></main>就和C之类的编程语言一样,标记页面的主要区域,一个页面只能使用一次,这是最外层的元素,父标签即为<body>,要仔细体会这个"主要"的意味
<article></article>标签HTML5的定义是:表示文档、也main、应用或网站中一个独立的容器,原则上是可独立分配或可再用的,就像聚合内容的各部分。一个网页可以有多个<article>标签,它们之间也是可以嵌套的
<section></section>标签用来定义区块,用于标记不同的类别,不同的组分,让相同的在一起,不同的区分开,看名字也看得出来。section和article的最大区别在于:section在本质上组织性和结构性更强,而article代表的是自包含的容器
<aside></aside>是用来指定附注栏,表示网页中存在的一部分与主题内容相关性没有那么强,可以独立存在的内容,比如说侧栏,重要引述,广告等,作为不是那么重要的一部分,应该放在<mian>标签的底部,当然,就具体的语义,也是可以放在<main>标签的外卖你。浏览器没有特殊的表现格式,可以用CSS来控制
<footer></footer>可以创建页脚,可以放在很多标签里,像<main>、<articel>等,但只有它的父标签是<body>时才作为整个页面的页脚,可以存放版权信息、联系地址等
4、通用容器<div></div>
这个概念在HTML5之前是已经存在的,没有具体的语义,通常是为了应用CSS或Javascript效果,但是随着HTML5之后具体标签的细化,<div>的使用频率减少,但作为最后一个备用容器,不仅在样式有出色的表现,正因为它的无语义性,可以用来搭建网页的逻辑结构
5、使用ARIA改善可访问性
通常那个使用地标角色,即所谓的role属性,添加了这个属性之后网页表面上是没有任何变化的,但是使HTML的语义更加丰富,传递出更多的信息,尤其是对于要借助一些辅助设备(如屏幕阅读器)的访问者
常见的role属性及其使用方式如下:
<header role="banner"(横幅)></header>:页面级的header元素,每个页面只能用一次
<nav role="navigation"(导航)></nav>:可以多次使用,也可以放在其他的具有导航链接的容器
<main role="main"(补充性内容)></main>:每个页面用一次,最好放在main标签里
<aside role="complementary"(补充性内容)></aside>:可以多次使用,但不要过度使用
<footer role="contentinfo"(内容信息)></footer>:通常放在页面级的页脚里,每个页面用一次
6、为元素指定类别或ID名称
这不是必须的,但可以更加精确地控制标签。ID和class的区别在于:一个标签只能有一个ID,且这个ID是唯一的,而一个标签可以有多个class,用空格隔开即可,同一个class也可以赋给不同的标签。推荐用类为元素添加标签
7、为元素添加title属性
title属性不同于title标签,是作为一个元素的属性存在,可以为网页上任何元素添加提示标签,效果是鼠标停留在该元素上时,会在光标右下方悬浮显示title的内容,并且使用title属性还可以提升无障碍访问功能
8、添加注释
HTML添加注释的方式很别致,其他地方没有见过:<!--(注释内容)-->
推荐做法:在主要区块的开头和结尾处添加注释,开始注释可以写的更加醒目,比如<!-- ======(注释内容)=======-->
总结:依然还是那句话,语义化,不要为了显示某种效果而去使用那个标签,标签本身是不具备任何效果的。有些标签在不同的语义下,很容易混淆,界限并没有那么明晰,这个除了看别人是如何处理之外,还是得自己去感受这之间的不同。这篇学习笔记介绍的标签都很大块,粒度很大,作为一个框架,细节还需要填充