一、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.<header> 标签定义文档的页眉
2.<section> 标签定义文档中的节。比如章节。页眉、页脚或文档的其他部分。该标签有点类似于将一本书分成几个章节，每个section标签代表一节。一个section通常有内容和标题组成，通常不推荐那些没有标题的内容用section。
3.<footer>标签定义 section 或 document 的页脚。其实它跟我们的header标签有点对应的感觉。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
4.<article>标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。是独立的内容，与上下无关。
div section article的区分：
(1)语义是从无到有，逐渐增强的。div没有任何语义，仅仅用作样式化。
(2)对于一段有主题的内容块，则就适用 section，而如果这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。
(3)section是整体的一部分，article是独立的一部分。如果实在分不清该用哪种的话就用div吧。虽然并不推荐这么使用。
5.<nav>导航元素。例如百度首页的新闻 网页 贴吧等。
三、块级元素和行内元素
块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。例：<p><div> 总是在新行上开始，默认宽度占父级元素宽度100%，可以设置宽高等属性就是块级元素，div、p、header、section等都是块级元素
行内元素：一个行内元素只占据它对应标签的边框所包含的空间。例：<span> 和其他元素在一行，宽高由内容决定的元素就是行内元素，span、i、a等就是行内元素
有一点要注意，行内元素内部不能包涵块级元素
当我们想在行内块级元素中一行放多个的块级元素是可以用到css-display属性
css---display属性 可以设置inline、block、inline-block等几个不同的值
inline 设置这个属性的元素就会变成行内元素，不论之前是块级元素还是行内元素。而且设置的宽高也会失效哦。
display:inline-block; 设置这个属性的元素就会变成块级元素，不论之前是块级元素还是行内元素。
注意：如果某个元素被添加了float属性或者用了绝对定位，那么这个元素就会变成块级元素或行内块级元素哦。
四、css样式表
在网页中有很多相同的样式，所以就会产生很多相同的代码，这样会让代码看起来很乱不美观，当然更重要的是后期维护的工作量会很大，所以我们就要把html和css分离，将元素的样式抽离出来，单独放在样式表里。这样代码会美观不少，相同的样式只需要调用一个标签就可以。
例如：
<html>
<head>
<title>小仙女</title>
div{ width:150px;
height:150px }
</head>
<body>
<div>
<p>xiaoxiannv</p>
</div>
<div>
<p>我是小仙女</p>
</div>
</body>
</html>
这样两块内容我们用的是同一个样式，如果我们要改别的样式，只需要修改style标签内的样式即可，当然，我们也可以在style里添加别的样式。
以上，在style标签内写css样式为内部样式表
外部样式变就是把css单独写成一个扩展名为css的文件，这样是样式表的复用性更强。此时把style的内容换成css文件的链接即可 例：<link rel="stylesheet" href="./html.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宽度的显示器上就会只有一小块了。这时候就需要我们的媒体查询了。其实媒体查询就相当于屏幕的自适应问题。
注：本文中知识点学习自陈斌的程序媛课程 感兴趣的同学可百度搜索
告诫自己：知足常乐，以梦为马，浪迹天涯
网友评论