继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。通过其它选择器的配合使用,页面布局显得不再那么让人“捉急”。但是有不少人在这个时候遇到了问题,多种多样的标签给我们的布局操作带来了一定的难度,因其种类繁多,大家在使用的时候出现了“选择困难症”。为此,今天的这篇文章主要为大家讲解网页中常用的标签以及它又是如何进行分类的。
在页面开发中,我们会把标签做一个分类,大致划分为:行元素、块元素、第三类元素。接下来我们就一起来看看这三大类元素的使用情况吧~~~
基本的行元素使用情况到底是怎么样的呢?来敲个实例看看吧!~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<style type="text/css">
span {
width: 200px;
height: 200px;
margin: 20px 100px;
}
</style>
</head>
<body>
<span>这是span标签</span>
<strong>这是strong标签</strong>
<em>这是em标签</em>
<a href="http:www.baidu.com" title='a标签的title'>这是a标签</a>
<img src="" alt="标签img" title='标签title'>
</body>
</html>
代码案例图解:
代码详解:
span标签:
span标签是没有语义性的标签,类似div,如果不对 span 应用样式,那么 span 元素中的文本与div文本没有任何视觉上的差异。
strong标签:
strong标签是定义强调文本,浏览器通常是用加粗的字体来显示其中的内容。
em标签:
em标签也是定义强调文本,浏览器通常是用倾斜的字体来显示其中的内容。
img标签:
img标签向网页嵌入一幅图像。从技术上讲,img标签并不会在网页中插入图像,而是从网页上链接图像,img 标签创建的是被引用图像的占位空间。img标签常用属性有src、title、alt。
img标签的 src 属性是必需的,它的值是图像文件的 URL,也就是引用该图像的文件的绝对路径或相对路径,具体开发中我们都是用相对路径,这样有利于我们项目移动的时候不会发生图片路径错误。title和alt属性有利于搜索引擎优化,在后面SEO课程会提到。
a标签:
a标签定义超链接,用于从一个页面链接到另一个页面,a标签常用属性有title、href。
href属性的值可以是一个网页的路径(相对路径与绝对路径)或者是一个网址,如果未设置 href 属性,则只是超链接的占位符。title属性也是有利于搜索引擎优化,在后面SEO课程会提到。
行元素的嵌套规则来说,行元素只能包含行元素,不能包含块元素。
注意:如果引入了重置文件,标签的默认样式被清除了,所以标签出来的样式没有什么差别。
了解了行元素使用情况后,对于所谓的块元素的使用到底又是怎么样的呢?也一起来看下面的实例吧~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<style type="text/css">
h1 {
width: 200px;
height: 40px;
margin: 50px;
padding: 50px;
background: #fcf;
}
h2, h3 {
background: #ccf;
}
</style>
</head>
<body>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<p>这是p标签</p>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<dl>
<dt>定义列表中的项目</dt>
<dd>描述列表中的项目</dd>
</dl>
</body>
</html>
代码案例图解:
代码详解:
h系列标签:
从语义性理解,它是标题标签;比如可以在模块标题、详情页中段落标题使用等,字体上逐渐变小。
h系列标签的范围为h1~h6,为了SEO优化常用h1~h3,h4~h6不推荐使用,h4较为少用。
p标签:
p标签定义的是段落,p 元素会自动在其前后创建一些空白,浏览器会自动添加这些空间,同时也可以在样式表中书写。主要在模块中内容、详情页中的段落等使用。
ol标签:
ol标签定义的是有序列表,ol只能直接嵌套着li标签。
ul标签:
ul标签定义的是无序列表,ul只能直接嵌套着li标签;
用法:ul和ol常常用于文章标题列表排版或者使用图片列表排版布局;
dl标签:
dl:自定义列表,只能直接嵌套着dt和dd;
用法:dl常用于图文并茂的结构(有图片和图片描述的结构)。
块元素的嵌套规则来说:p标签是属于块元素,但是不能包含块元素只能包含行元素;ol和ul中只能直接嵌套li标签;dl只能直接嵌套着dt和dd,dt是属于块元素,但是不能包含块元素只能包含行元素。
注意:当你引入了reset.css文件,ul和ol不会出现小黑点或者是数字,因为里面已经设置list-style:none;p标签前后也不会自动添加这些空间,因为里面设置了margin、padding都为0。
了解不同的行、块元素各自的特点,也大致知道了行、块元素之间的区别。但是要更明白的了解一些特性就要一起来看看下面的这几个案例了。
设置宽度width 无效;
设置高度height 无效,可以通过line-height来设置;
设置margin 只有左右margin有效,上下无效;
设置padding 只有左右padding有效,上下则无效。
注意:这里说的无效均是指行元素,对其它元素的排列没有影响。也就是说,对于设置了margin,padding的行元素文档流里的上下元素来说,他们的间距不会因为上下margin或者上下padding而产生间距。但是就本身而言,对于左右margin与padding是有效的。
这个特性描述了如何使一个块元素的行内内容对齐;
注意一点,w3c标准里说这个属性是用来对齐行内内容的,所以不应该对块级内容起作用;解释一下,行内内容是说由行内元素组成的内容;但是问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。
IE6/7及IE8文档模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
通过上文我们知道了行元素与块元素的使用,也了解了行、块之间存在区别的特性。但是要具体的做个总结,仍然还不是很明白,接下来小编就给大家整理出了行、块元素的区别总结,一起来看看咯~~~
1) 独占一行,在默认情况下,宽度自动填满父元素宽度;
2) 宽度和高度可以控制;
3) margin和padding横向纵向设置都有效;
4) 可以通过display: inline; 转换为行内元素;
5) 除个别特殊元素外,其他都可包含块状元素和行内元素。
1) 并排显示,不能独占一行;
2) 宽高不可设置,只由内容撑开;
3) margin和padding横向设置有效,纵向设置不产生边距效果;
4) 可以通过display: block; 转换为块状元素;
5) 除ins和del外,其他都不能包含块状元素。
上文中我们讲解了很多标签的特点与使用方法,究其根本,也仍然还是在对行、块元素做了很大篇幅的介绍。而对于HTML5来说,不仅仅只是由行、块两大类元素组成的。在这之外,还有一大类重要的标签,那具体还包括哪些呢?接下来就给大家来列举下吧!
根据今天所学的知识点,总结HTML5中的元素分类,优化标签的选择。