标签语义化之常用HTML标签
一、布局的理解误区
网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已，在很多情况下，我们可以使用其他更合适且更简洁的标签可以替代它。
二、标签的差异
共性：都是一个容器，可以在其中放置内容
差异：分为行内和块级两个大类，且不同便签有相应含义上的预设，如：h-标题，p-段落，a-链接，等等
三、标签语义化的好处
a、让结构更简洁，让搜索引擎更友好
b、通过多重组合，减少不必要的CSS命名
四、语义化标签的使用
a、列表：ul、ol、li、dl、dt、dd
b、标题：h1~h6
c、段落：p
d、强调：strong
e、表格：table、tr、td，以及表格的其他成员th、thead、tbody、tfood
附录：常用HTML标签表
红色：结构标签 黑色：行内元素 蓝色：块级元素 绿色：表格元素 灰色：其他标签
| <!--...--> | 定义注释。 |
|---|---|
| <body> | 定义文档的主体，默认有外边距，注意清除。 |
| <head> | 定义页面的信息。 |
| <html> | 定义 HTML 文档。 |
| <meta> | 定义页面的描述信息，便于搜索优化。 |
| <title> | 定义文档的标题。 |
| <link /> | 定义引用外部文件，如联入CSS样式表。 |
| <style> | 定义内联的CSS样式信息。 |
| <script> | 定义内联或外联的客户端脚本，如JS。 |
| <a> | 定义锚链接或其他链接，行内元素。 |
| <img /> | 定义引入一张图片，行内元素。 |
| <strong> | 定义强调文本，样式为加粗，行内元素。 |
| <span> | 定义一个行内元素的空盒子。 |
| <div> | 定义一个块级元素的空盒子。 |
| <h1> to <h6> | 定义标题部分，默认有外边距，块级元素。 |
| <ul> | 定义无序列表，默认有外边距和内边距，块级元素。 |
| <ol> | 定义有序列表，即数字列表，默认有内外边距，块级元素。 |
| <li> | 定义列表的项目，一般被嵌套在<ul>和<ol>内，块级元素。 |
| <dl> | 自定义列表的项目，默认有外边距和内边距，块级元素。 |
| <dt> | 自定义列表的标题，嵌套在<dl>内，与<dd>区别，块级元素。 |
| <dd> | 自定义列表的内容，嵌套在<dl>内，与<dt>区别，块级元素。 |
| <p> | 定义段落，默认有一个行高的外边距。 |
| <table> | 定义表格。 |
| <tr> | 定义表格中的行。 |
| <td> | 定义表格中的单元。 |
| <th> | 定义表格中的表头单元格。 |
| <thead> | 定义表格中的表头内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <br /> | 定义一个回车换行。 |
| <map> | 定义图像映射，即鼠标热区。 |
| <area> | 定义图像映射内部的区域。 |
| <form> | 定义输入提交的表单。 |
| <button> | 定义表单中的按钮 (push button)。 |
| <input> | 定义表单中的输入控件。 |
| <select> | 定义表单中的选择列表（下拉列表）。 |
| <frame> | 定义框架集的窗口或框架。 |
标签语义化之常用HTML标签的更多相关文章
- 【转载】html标签语义化
Html语义化标签-语义化你的HTML标签和属性 1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...
- 谈CSS布局中HTML标签语义化
很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...
- 灵魂代码分享HTML元素标签语义化及使用场景实用到爆
灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...
- web标签语义化的理解_web语义化是什么意思
web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...
- HTML标签语义化
标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...
- ASP.NET动态网站制作（5）-- 标签语义化及知识补充
前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html
- 基础复习之HTML （doctype、标签语义化）
这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...
- HTML语义化：HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
随机推荐
- dedecms笔记
截取字符串 方法一: [field:title function="cn_substr(@me,10)"/] 方法二: {dede:arclist typeid=’9′ title ...
- VIM自动补全插件 - YouCompleteMe--"大神级vim补全插件"
VIM自动补全插件 - YouCompleteMe 序言 vim 之所以被称为编辑器之神多半归功于其丰富的可DIY的灵活插件功能,( 例如vim下的这款神级般的代码补全插件YouCompleteMe) ...
- Redis总结（一）Redis安装
最近项目中需要使用Redis,刚好这两天有时间,便总结记录一下Redis的安装,以及如何在.NET中使用Redis. Redis是一个用的比较广泛的Key/Value的内存数据库.目前新浪微博.Git ...
- Shader
Shader的学习方法总结 http://www.cnblogs.com/Esfog/p/How_To_Learn_Shader.html [Shader 着色器]学习shader之前必须知道的东西之 ...
- live555在Raspberry Pi上的点播/直播
1.live555在Raspberry Pi上的点播 live555MediaServer这个实例是个简单的服务器,支持多媒体点播,直接在Raspberry Pi上编译运行,或者通过交叉编译出ARM核 ...
- GoLang之基础
GoLang之基础 Go是一种并发的.带垃圾回收的.快速编译的语言. 经典的"hello world"入门: package main import "fmt" ...
- Saltstack常用模块及API
Saltstack提供了非常丰富的功能模块,涉及操作系统的基础功能.常用工具支持等,更多模块信息可以查看官网模块介绍.也可以通过sys模块列出当前版本支持的模块. salt '*' sys.list_ ...
- [MongoDB]mapReduce
摘要 上篇文章介绍了count,group,distinct几个简单的聚合操作,其中,group比较麻烦一点.本篇文章将学习mapReduce的相关内容. 相关文章 [MongoDB]入门操作 [Mo ...
- java项目命名规范
一.命名规范 1. 项目名全部小写 2. 包名全部小写 3. 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. 如:public class MyFirstClass{} 4. 变量 ...
- Java 中浮点数---------BigDecimal和double（初探）
为什么要使用 bigdecimal? 借用<Effactive Java>这本书中的话,float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了 ...