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

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>