WEB学习笔记13-高可读性的HTML之精简HTML代码/过时的块状元素和行内元素

1 <a id="more-intro">点击此处 <img src="down-arrow.png" />a>

 

(1)删除多余的容器

1 <div id="container-up">
2 <div id="signin_logo">
3 <img alt="" src="images/signin.png" />
4 div>
5 <span><a href="#">Click to closea>span>
6 div>

  代码中

元素实现的是让图片独占一行的效果,可以通过设置图片的display样式为block来代替。代码精简为:

1 <div id="container-up">
2 <img id="signin_logo" alt="" src="images/signin.png"/>
3 <a href="#">Click to closea>
4 div>

(2)装饰性的元素使用CSS样式实现

  WEB学习笔记13-高可读性的HTML之精简HTML代码/过时的块状元素和行内元素_第1张图片

  不严谨的HTML代码可能是这样的:

1 <a id="more-intro">点击此处 <img src="down-arrow.png" />a>

  因为效果图中的向下箭头不属于内容的一部分,所以应该通过设置CSS样式实现,代码类似如下:  

1 
6 点击此处

 

   另外一个很有用的技巧是使用::before和::after伪元素。Bootstrap框架中正是利用这两个伪元素来实现下拉菜单的箭头的.

WEB学习笔记13-高可读性的HTML之精简HTML代码/过时的块状元素和行内元素_第2张图片

 1 .navbar .nav > li > .dropdown-menu::before {
 2 position: absolute;
 3 top: -7px;
 4 left: 9px;
 5 display: inline-block;
 6 border-right: 7px solid transparent;
 7 border-bottom: 7px solid #ccc;
 8 border-left: 7px solid transparent;
 9 border-bottom-color: rgba(0, 0, 0, 0.2);
10 content: '';
11 }
12 .navbar .nav > li > .dropdown-menu::after {
13 position: absolute;
14 top: -6px;
15 left: 10px;
16 display: inline-block;
17 border-right: 6px solid transparent;
18 border-bottom: 6px solid #ffffff;
19 border-left: 6px solid transparent;
20 content: '';
21 }

(3)避免使用table布局


常见的块状元素有: