标签语义化之常用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>

定义框架集的窗口或框架。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Bug生活2048

Python自学之路-内置函数说明及实例(三)

filter函数用于过滤序列。过滤的方式则是采用传入的函数,去循环序列的元素调用,如果函数计算的结果为True则保留元素,否则将舍弃该元素。

1013
来自专栏进击的君君的前端之路

CSS选择器知识点整理

1345
来自专栏gaoqin31

Json对象与Json字符串互转(4种转换方式)

最近有用到php的json字符串要转成js对象,以前一直用jq或者eval,又发现了其他的方法,记录下.

703
来自专栏项勇

笔记23 | 复习for/while/do...while的几种循环用法

1447
来自专栏前端知识分享

javascript易混淆的split()、splice()、slice()方法详解

很多时候,一门语言总有那么些相似的方法,容易让人傻傻分不清楚,尤其在不经常用的时候。而本文主要简单总结了JavaScript中的关于字符串和数组中三个容易混淆的...

522
来自专栏哲学驱动设计

WPF Commanding Overview 的笔记

整个命令系统的流程如下: CommandManager 负责监听一些它关注的属性的更改(例如:Focus、Click),当界面上有此类事件发生时,它会通知所有...

1708
来自专栏菜鸟计划

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 内置指令 1、v-bin...

3485
来自专栏hbbliyong

C#,一些非常简单但应该知道的知识点

1.本地变量 一看这个标题你可能会一愣,这是个什么东东。看个小例子: static void main() {    int a=10;    MyClass ...

4119
来自专栏JetpropelledSnake

Python入门之面向对象编程(四)Python描述器详解

本文分为如下部分 引言——用@property批量使用的例子来引出描述器的功能 描述器的基本理论及简单实例 描述器的调用机制 描述器的细节 实例方法、静态方法和...

3457
来自专栏柠檬先生

jquery mobile 移动web(1)

轻量级框架jQuery Mobile   所需文件     <link rel="stylesheet" href="jquery.mobile-1.1.2/...

1856

扫描关注云+社区