HTML5基础之常用标签以及标签选择器
2016-11-14 20:23
591 查看
在html中,标签非常多,比如说列表,按钮,图片,文字等等,每一种标签都有自己的使用方法以及相关的约束条件。具体的标签可以直接到w3c的网站上查看,这里就简单了解一下html5的标签。
首先我们来从视图上认识一下新结构标签的显示。在HTML5中,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块。如下图所示:
相关的代码有:
1、<header>主要用于页面的头部的信息介绍,也可用于板块头部,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。通常<header>标签至少包含(但不局限于)一个标题标记(<h1>-<h6>),还可以包括<hgroup>标签,还可以包括表格内容、标识、搜索表单、<nav>导航等。
2、nav标签代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。
如图所示,是一个简单的导航,点击链接可以实现跳转,实现代码如下:
4、section定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。
当我们描述一件具体的事物的时候,通常鼓励使用article来代替section;当我们使用section时,仍然可以使用h1来作为标题,而不用担心它所处的位置,以及其它地方是否用到;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。
5、aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分等等。
6、footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。它和<header>标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。
如下图中CSDN的页脚:
标签在初始化的时候,都会自带一些样式,比如说标签h1,当我们使用这个标签的时候,就已经有margin的样式,如果想要自己定义样式的话,就需要在初始化标签的时候,清除所有的默认样式。
哪些样式是需要重置的???
1)与盒模型相关的样式:border margin padding
2)标签特有的样式: ul>li ol>li
书写原则:
1)用到什么标签就清除所用标签的默认样式。
2)建议不要直接将所有标签全部加上。
3)不要将所有标签全部统一设置一致的reset,需根据标签默认样式特征来分类设置。
如:
2、标签选择器
1)id选择器:当前页面唯一,“#”
2)类(class)选择器:当前页面可以多个,“.”
3)标签选择器:当前页面上所有标签名为xxx的元素,比如div{},h1{},span{}等
4)群组选择器:用逗号分隔,被逗号分隔的元素(选择器)全部执行统一的代码片段,比如div,p,h1{}
5)包含选择器:
举例说明:我想找到div中的span标签
代码段:
6)通配符*:找到页面上符合规则的所有元素,但是不建议使用通配符。
3、选择器的优先级
选择器的优先级即代码执行生效的顺序,不同的选择器的优先级不一样,也就决定着你所写的样式是否生效的顺序。
以下是选择器的优先级:
行间样式>id选择器>类选择器>标签选择器
接下来举例说明:
我们把选择器的优先级比作是价值,用人民币的大小来表示,即:
1)行间样式 $1000
2)id选择器 $100
3)类选择器 $10
4)标签选择器 $1
目标:看看我们所定义的样式时哪个执行生效?
一、HTML5的新结构标签
在之前的HTML页面中,在布局方式中,大家基本上都是用Div+CSS。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。如下图所示:首先我们来从视图上认识一下新结构标签的显示。在HTML5中,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块。如下图所示:
相关的代码有:
<body> <header>header</header> <nav>nav</nav> <article> <section>section</section> </article> <aside>aside</aside> <footer>footer</footer> </body>接下来详细说明这几个标签的含义:
1、<header>主要用于页面的头部的信息介绍,也可用于板块头部,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。通常<header>标签至少包含(但不局限于)一个标题标记(<h1>-<h6>),还可以包括<hgroup>标签,还可以包括表格内容、标识、搜索表单、<nav>导航等。
2、nav标签代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。
如图所示,是一个简单的导航,点击链接可以实现跳转,实现代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nav</title> <style> li{ list-style: none; display: inline-block; height: 40px; line-height: 40px; font-size: 20px; padding-left: 10px; float: left; } ul{ padding-left: 0px; width:200px; height: 40px; background-color: #00A2E9; } a{ text-decoration: none; color:#fff; } </style> </head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">信息页</a></li> <li><a href="#">主页</a></li> </ul> </nav> </body> </html>3、article是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等。一般来说,article会有标题部分(通常包含在header内),有时也会包含footer。article可以嵌套,内层的article对外层的article标签有隶属关系。例如,一篇博客的文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。
4、section定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。
当我们描述一件具体的事物的时候,通常鼓励使用article来代替section;当我们使用section时,仍然可以使用h1来作为标题,而不用担心它所处的位置,以及其它地方是否用到;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。
5、aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分等等。
6、footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。它和<header>标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。
如下图中CSDN的页脚:
二、标签选择器
1、初始化标签标签在初始化的时候,都会自带一些样式,比如说标签h1,当我们使用这个标签的时候,就已经有margin的样式,如果想要自己定义样式的话,就需要在初始化标签的时候,清除所有的默认样式。
哪些样式是需要重置的???
1)与盒模型相关的样式:border margin padding
2)标签特有的样式: ul>li ol>li
书写原则:
1)用到什么标签就清除所用标签的默认样式。
2)建议不要直接将所有标签全部加上。
3)不要将所有标签全部统一设置一致的reset,需根据标签默认样式特征来分类设置。
如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body, h1, h2, h3, h4, h5, h6, p, dl, dd{ margin: 0; } ul, ol{ margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: top; } a{ text-decoration: none; } </style> </head> <body> <a href="">超链接</a> <a href=""> <img src="img/1.png" alt="" /> </a> <h1>标题 - logo</h1> <h2>标题</h2> <h3>标题</h3> <h4>标题</h4> <h5>标题</h5> <h6>标题</h6> <p>段落</p> <strong>强调</strong> <em>强调</em> <ul> <li>ul - 无序列表</li> <li>列表项</li> <li>ul的子集(下一级元素)只能是li</li> </ul> <ol> <li>ol - 有序列表</li> <li>列表项</li> <li>ol的子集(下一级元素)只能是li</li> </ol> <dl> <dt>dl-自定义列表;dt-自定义列表title</dt> <dd>dd-自定义列表的列表项(信息)</dd> </dl> <mark>标记</mark> </body> </html>
2、标签选择器
1)id选择器:当前页面唯一,“#”
2)类(class)选择器:当前页面可以多个,“.”
3)标签选择器:当前页面上所有标签名为xxx的元素,比如div{},h1{},span{}等
4)群组选择器:用逗号分隔,被逗号分隔的元素(选择器)全部执行统一的代码片段,比如div,p,h1{}
5)包含选择器:
举例说明:我想找到div中的span标签
代码段:
<div class="box"> span1 <span>span2</span> </div>所以包含选择器的写法就是: .box span{}
6)通配符*:找到页面上符合规则的所有元素,但是不建议使用通配符。
3、选择器的优先级
选择器的优先级即代码执行生效的顺序,不同的选择器的优先级不一样,也就决定着你所写的样式是否生效的顺序。
以下是选择器的优先级:
行间样式>id选择器>类选择器>标签选择器
接下来举例说明:
我们把选择器的优先级比作是价值,用人民币的大小来表示,即:
1)行间样式 $1000
2)id选择器 $100
3)类选择器 $10
4)标签选择器 $1
目标:看看我们所定义的样式时哪个执行生效?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style> /* 1 + 1 = 2*/ div div{ height: 100px; background-color: yellow; } /* 100 + 1 = 101*/ #box div{ background-color: pink; } /* 10 + 1 = 11*/ .div1 div{ background-color: green; } </style> </head> <body> <!--<div id="box" class="div1" style="background-color: red;"></div>--> <div id="box" class="div1"> <div>div>div</div> </div> </body> </html>通过代码中计算过程,我们可以得到最后的结果是第二条样式生效,即背景颜色是粉色。
相关文章推荐
- html5 - 基础格式认识和标签用法(文本元素常用方法)
- HTML5基础一:常用布局标签
- Html5和Css3的基础标签及常用属性
- html5常用标签 body部分(2)包括 表格、图片、链接、视频、表单、以及其他html5新增
- html5删除线span标签,cite标签,mark标签,code标签,bdo标签,sup标签,sub标签以及常用转义字符
- JSP基础 JSTL常用标签概述
- 许多HTML5新标签都是由大家最常用的ID名转换过来
- JAVA基础:语句标签的合法使用,以及{}语句块到底有什么用?
- JAVA基础 语句标签的合法使用,以及{}语句块到底有什么用?
- 共享两个最近手机项目的HTML5的widget,星星评级以及标签选项卡,样式美观,iphone/android可用
- html5基础--audio标签元素
- 【JS基础回顾】Array对象及其常用属性以及方法
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
- html5基础教程常用技巧整理
- html5基础的常用的技巧
- 标签自定义属性,获取和操作的方法封装以及在此基础上对标签原有属性的扩展...
- HTML5常用 标签
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
- 常用HTML标签以及各浏览器默认值
- html5基础的常用的技巧