html语义化与前端页面排版规则

2019/06/06 16:52
阅读数 15

1.使用div进行布局,不要用div进行无意义的包裹  span行内常见元素

2.可以使用div和p的情况下,尽量用p.p有默认上下间隔字体加粗等,可以对终端有适配

3.需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用css指定就不用他们), strong默认样式是加粗(不要用b),em是斜体(不用i)
 
4.使用表格时, 标题要用caption, 表头用thead,主体部分用 tbody包围, 尾部tfoot包围.表头和一般单元格要区分开, 表头用th,单元格用td
 
5. 表单要用 fieldset标签抱起来,并用 legend标签说明表单的用途 (技术过老不推荐)
<dl></dl><dd></dd>
<cl>带有排名序号的列</cl>
<ol>前面为圆点</ol>
<ul></ul>

6.每个input标签对应的说明文本都需要使用label标签(点击文字说明使input框获取焦点),并且通过为input设置id属性.在label标签中设置for=someld来让说明文本和相对应的input关联起来.

7.尽量少写html,一定要少写
(好处:1.减少dom渲染时间,2.浪费文件大小)
//以下代码可以一个一个div顶替3个div使用
::after,::before
用display:inline-block(顶替一个div)
content:"输入文字"
height:300px//设置块的高度
position:absolute
top:-10px
//以下是具有语义化的标签
nav标签
header标签
article标签(正文标签)
section标签(块)
footer标签
aside标签
 //页面排版要以下这种形式,使爬虫便于工作
<header>
    <nav></nav>
</header>
 
<div class=:content>
    <section>1喽</section>
    <section>2喽</section>
    <aside>边栏</aside>
    <address>地址(用处不多)</address>
</div>
<footer>
</footer>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部