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这算是很初级的错误了,完全没有理解标签的语义。标签仅仅用于文本内容中的换行。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180716A0UJLR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券