HTML标签和CSS样式列表

今天我们来认识一下HTML标签和CSS样式，到底他们有什么功能和作用，在学web的下伙伴们值得一看，如果你在从事网站建设行业更该看看。

还有一些编写高语义HTML代码的最佳实践，下面是四个最重要的原则。

(1)熟悉所有规范中的HTML标记，理解每个标记的语义，并在适当的地方使用适当的标记

如果不考虑HTML的语义，那么使用它就足以在页面上构建大部分布局，但是这两个标记没有语义标记，不推荐使用。语义HTML首先应该从HTML标签语义开始，HTML标签是页面内容的载体，语义标签则是包含一个完整的语句页面的内容，这也使得整个结构变得清晰。Web开发人员应该熟悉所有标准的HTML标记使用场景，并在适当的位置使用适当的标记。例如，label系列代表标题，用于在web页面的不同级别显示标题。表示列表，用于显示各种数据列表或菜单;其他高使用率的语义标签包括:、、、、等。此外，HTML5中增加了一些新的标签，包括:、、、、等。W3C规范对所有标签都有详细的解释和使用场景，前端开发人员应该熟悉最基本的标签使用场景。

(2)熟悉每个标签上的规范化属性，为HTML标签设置必要的属性

与标记语义一样重要的是，某些属性的设置也是HTML语义的重要组成部分。许多前端编码规范中提到的两个属性是Alt和title。这两个属性也被设置为改进HTML的语义。在标记中，Alt是必须设置的属性，因为它是一个自闭标记，不包含解释图像的其他信息。title属性是一个可选属性，当标签没有包含足够内容来说明语义时，可以通过标题添加其他信息。下面的示例展示了如何使用这两个属性:

另一个重要的属性是标记中的for属性。元素是为元素定义的注释，在语义上绑定到元素和表单元素。在编写高度语义的表单代码的章节中，详细描述了标签的作用。

(3)风格与结构的分离

上面提到的样式和结构分离主要是关于CSS样式代码和HTML代码的分离。通过删除HTML代码中用于表示HTML外观的部分，并以CSS样式实现这些部分，这就更进一步了。简单的HTML代码使语义更加清晰。下面是上面示例中所示的分隔符的HTML代码:

从实际的需求分析,分离器不是web内容的一部分,只有为内容的分割,因此,应该从HTML代码分离,然后使用CSS样式来达到相同的效果,在这种情况下,您可以引用的实现CSS样式的第三条道路在上面的例子中显示的代码。

两个CSS伪类:before和:after非常适合在这样的场景中使用，即在开始或结束时添加符合条件的单词或外观元素，同时添加内容不破坏语义HTML代码。这里有一个常见的场景，许多人编写了这样的代码来清除浮动:

这是侧边栏。

这是主要内容。

相应的CSS样式如下:

侧边栏

容器

。明确

为了清除浮动，上面的代码为元素添加了一个元素和一个清晰的样式。很多人可能会认为这是一种正常的做法，但是写作已经破坏了语义HTML代码，不是一个好的解决方案，你应该删除冗余的元素，并使用CSS样式来实现，代码如下:

刘志隆

刘志隆

this is the side bar.this is the main content.对应的CSS样式为：.sidebar { float: left;width:150px;}.container { float:right;width:450px;}.clear { clear:both;}为了清除元素的浮动，上面代码添加了一个元素，并给此元素添加了clear样式。可能很多人觉得这是一个常规的做法，但是这种写法破坏了HTML代码的语义，并不是一种好的方案，应该删除这个多余的元素，并改用CSS样式来实现，代码如下：this is the side bar.this is the main content.对应的CSS类clearfix的声明为：.clearfi x {*zoom: 1;}.clearfi x:before,.clearfi x:after .clearfi x:after 上面的示例使用了:before和:after伪类，很好地解决了由于多余的元素而破坏HTML代码语义的问题。另外一个滥用的标签就是换行符标签。很多新手经常会使用此标签来让元素换行显示，甚至会连续使用多个元素来加大元素之间的行距，示例如下。titleitem1item2item3这算是很初级的错误了，完全没有理解标签的语义。标签仅仅用于文本内容中的换行。