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>

html语义化与前端页面排版规则的更多相关文章

  1. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  2. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

  3. 前端基础:web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  4. 前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)实现下

    提醒自己:上一篇文章属于纯理论的文章,我自己有的部分之从网上摘抄的,我自己也是不理解的.或许过一段日子我就能全明白了.我自己还是喜欢实战,做几个例子就明白了. 怎么做让自己网页的标签来实现语义化,我直 ...

  5. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  6. Semver(语义化版本号)扫盲

    最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念,使用 npm install package@next 时,也不清楚next代表的 ...

  7. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

  8. 说一说你对HTML5语义化的理解

    本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如he ...

  9. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

随机推荐

  1. Fedora20 安装 MySQL

    参考资料: http://www.cnblogs.com/focusj/archive/2011/05/09/2057573.html http://linux.chinaunix.net/techd ...

  2. 魔咒词典--hdu1880(字符串 暴力)

    http://acm.hdu.edu.cn/showproblem.php?pid=1880 不要想其他的   暴力就能过 #include <iostream> #include < ...

  3. GAN Generative Adversarial Network 生成式对抗网络-相关内容

    参考: https://baijiahao.baidu.com/s?id=1568663805038898&wfr=spider&for=pc Generative Adversari ...

  4. DataGridView依据下拉列表显示数据

    我们都知道,DataGridView能够直接绑定数据源.显示数据库中的数据.可是我想做的是能够对他进行条件查询,依据用户级别选择不同级别的记录. 以上这个控件就是DataGridView控件,能够用它 ...

  5. 相机标定(Camera calibration)

    简单介绍 摄像机标定(Camera calibration)简单来说是从世界坐标系换到图像坐标系的过程.也就是求终于的投影矩阵 P 的过程,以下相关的部分主要參考UIUC的计算机视觉的课件(网址Spr ...

  6. 【甘道夫】并行化频繁模式挖掘算法FP Growth及其在Mahout下的命令使用

    今天调研了并行化频繁模式挖掘算法PFP Growth及其在Mahout下的命令使用,简单记录下试验结果,供以后查阅: 环境:Jdk1.7 + Hadoop2.2.0单机伪集群 +  Mahout0.6 ...

  7. .net面试整理

    NET程序员的层次:http://blog.csdn.net/dinglang_2009/article/details/6913852 .NET牛人应该知道些什么http://www.douban. ...

  8. OpenCV实践之路——Python的安装和使用

    本文由@星沉阁冰不语出品,转载请注明作者和出处. 文章链接:http://blog.csdn.net/xingchenbingbuyu/article/details/50936076 微博:http ...

  9. getifaddrs

    getifaddrs 获取本地网络接口的信息.在路由器上可以用这个接口来获取wan/lan等接口当前的ip地址,广播地址等信息. #include <sys/types.h> #inclu ...

  10. 【iOS进阶】UIWebview加载搜狐视频,自动跳回客户端 问题解决

    UIWebview加载搜狐视频,自动跳回搜狐客户端 问题解决 当我们用UIWebview(iOS端)加载网页视频的时候,会发现,当真机上有搜狐客户端的时候,会自动跳转到搜狐客户端进行播放,这样的体验对 ...