html相同元素运用CSS,html+css的综合运用（二）

一、html语义化

语义化：简单来说就是根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

注意：

1、尽可能少的使用无语义的标签div和span；

2、在语义不明显时，即可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3、不要使用纯样式标签，如：b、font、u等，改用css设置。

4、需要强调的文本，可以包含在strong或者em标签中(浏览器预设样式，能用CSS指定就不用他们)，strong默认样式是加粗(不要用b)，em是斜体(不用i)；

5、使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

二、HTML的新元素(笔者只是用来记录跟随斌叔学习的过程 如果此文章有什么错误不足的地方 接受指正)

1. 标签定义文档的页眉

2. 标签定义文档中的节。比如章节。页眉、页脚或文档的其他部分。该标签有点类似于将一本书分成几个章节，每个section标签代表一节。一个section通常有内容和标题组成，通常不推荐那些没有标题的内容用section。

3.标签定义 section 或 document 的页脚。其实它跟我们的header标签有点对应的感觉。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

4.标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。是独立的内容，与上下无关。

div section article的区分：

(1)语义是从无到有，逐渐增强的。div没有任何语义，仅仅用作样式化。

(2)对于一段有主题的内容块，则就适用 section，而如果这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

(3)section是整体的一部分，article是独立的一部分。如果实在分不清该用哪种的话就用div吧。虽然并不推荐这么使用。

5.导航元素。例如百度首页的新闻 网页 贴吧等。

三、块级元素和行内元素

块级元素：块级元素占据其父元素(容器)的整个空间，因此创建了一个“块”。例：

  总是在新行上开始，默认宽度占父级元素宽度100%，可以设置宽高等属性就是块级元素，div、p、header、section等都是块级元素

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。例：  和其他元素在一行，宽高由内容决定的元素就是行内元素，span、i、a等就是行内元素

有一点要注意，行内元素内部不能包涵块级元素

当我们想在行内块级元素中一行放多个的块级元素是可以用到css-display属性

css---display属性 可以设置inline、block、inline-block等几个不同的值

inline  设置这个属性的元素就会变成行内元素，不论之前是块级元素还是行内元素。而且设置的宽高也会失效哦。

display:inline-block; 设置这个属性的元素就会变成块级元素，不论之前是块级元素还是行内元素。

注意：如果某个元素被添加了float属性或者用了绝对定位，那么这个元素就会变成块级元素或行内块级元素哦。

四、css样式表

在网页中有很多相同的样式，所以就会产生很多相同的代码，这样会让代码看起来很乱不美观，当然更重要的是后期维护的工作量会很大，所以我们就要把html和css分离，将元素的样式抽离出来，单独放在样式表里。这样代码会美观不少，相同的样式只需要调用一个标签就可以。

例如：

小仙女

div{  width:150px;

height:150px  }

xiaoxiannv

我是小仙女

这样两块内容我们用的是同一个样式，如果我们要改别的样式，只需要修改style标签内的样式即可，当然，我们也可以在style里添加别的样式。

以上，在style标签内写css样式为内部样式表

外部样式变就是把css单独写成一个扩展名为css的文件，这样是样式表的复用性更强。此时把style的内容换成css文件的链接即可  例：

五、选择器

选择器，就是用来选择元素的。选择器有很多种，主要包括元素选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器。当然这只是最常用的部分。

元素选择器就是根据元素名写的，div{} ，这个其实就是元素选择器。

类选择器是选择一类元素，而这个类型是由开发者自己定的。注意：写类选择器的样式时是要用 "."   例：.left

id选择器，经常用于javascript  具体可以参考这篇文章www.jianshu.com/p/48dc1f4307d0

通用选择器。我们来在html.css文件的开头加上如下代码：

*{——font-size:14px;}  网页上所有文字的大小都会改变成一样的

六、派生选择器

群组选择器,当有多个选择器下有相同的属性时，可以写成一个群组选择器。这样可以精简我们的代码，维护起来也很方便。

例：header，section{

——border：1px;}

后代选择器。顾名思义，这个选择器就是选中一个元素的所有后代元素来添加样式。这里笔者也不是很明白，但是选择器很方便不能用的太随意。在写样式的时候尽量不要再全局对某个元素定义特殊样式。

子元素选择器，大于(>)符号指的是直接子元素。例：".right > header"这个的意思是类选择器right的直接子元素header元素。这样就会只修改类选择器为right的section元素中的header元素的样式。

注意:选择器是有优先级的。当代码里有两个选择器定义了不同的样式，但是添加给了同一个元素，浏览器需要知道该渲染哪一个。

内联 > id > 类 > 标签(元素选择器) > 伪类 > 通配符(通用选择器)

七、伪类

伪类，你可以理解为伪造的类，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它可以算是一种状态类，比如在有的网站上，有些文字或者图片，你鼠标放在上面会变样式，就是用伪类实现的。伪类有很多，感兴趣的同学可以自行百度。

伪元素：是通过css创建的元素，而不是通过html创建的。可以显示在页面中，但在dom树中却没有。例：

.list::before{

——content:"小仙女排名"

}     伪元素也不止before一个  有兴趣的同学可自行百度。

八、媒体查询(css)

先给出一个例子：(以下代码写在css中)

@media(min-width:900px){

p{

color:#f60;

}

}

当满足"@media()"括号中的条件时，就会应用其中的样式规则了。有一点要注意，默认样式要写在媒体查询之前。否则媒体查询的效果会被覆盖。

媒体查询时很常用的，因为现在的电脑显示器大小不一，各种尺寸都有，这就造成我们写的网页有可能会在各种不一样尺寸的显示器上显示。

当你放一个800px的div在页面上，在1366宽度的电脑屏幕上显示正常，可是在2600宽度的显示器上就会只有一小块了。这时候就需要我们的媒体查询了。其实媒体查询就相当于屏幕的自适应问题。

注：本文中知识点学习自陈斌的程序媛课程  感兴趣的同学可百度搜索

告诫自己：知足常乐，以梦为马，浪迹天涯