神奇的标签块级元素行内元素空元素

共计 3314 个字符，预计需要花费 9 分钟才能阅读完成。

最近有人问我，前端模块为什么是空着的。是呀，前端模块一直没有着手开始写，不是因为没有东西可写，是一直在想着以什么样的前端开篇，有太多东西要写，但如果没有规划的写，可能久而久之的就遗弃了。所以再三决定，从我第一次认识前端知识开始写起，当然对于那些前端大牛，也许这篇文章没有营养，但我相信也不乏一些刚起步进入前端行业的新人，所以大家选择性预览。

前端是一个很容易入门，但却很难走进去的一个行业。看似简单，但一旦深入，就“不可自拔”。说到，前端，肯定少不了要认识他的组成元素，那这就涉及到块级元素，行内元素以及一些空元素。

html 标签定义：是由一对尖括号包裹的单词构成, 例如: <html>.
标签不区分大小写 <html> 和 <HTML>, 推荐使用小写.
标签分为两部分: 开始标签 <html> 和 结束标签 </html>, 两个标签之间的部分我们叫做标签体.
有些标签功能比较简单, 使用一个标签即可, 这种标签叫做自闭和标签, 例如: <br/><hr/><input/><img/>
标签可以嵌套, 例如:<a><b><b/><a/>; 但是不能交叉嵌套, 例如:<a><b><a/><b/>

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的 100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

块级元素分类(双标签，eg：<div></div>)：<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 定义 HTML 标题。<div> 定义文档中的节。<p> 定义段落。<ul>  定义无序列表。<ol>  定义有序列表。<li>  定义列表的项目。<dl>  自定义定义列表。<dt>  自定义定义列表中的项目。<dd>  自定义定义列表中项目的描述。<table> 定义表格。<thead> 定义表格中的表头内容。<tbody> 定义表格中的主体内容。<tfoot> 定义表格中的表注内容（脚注）。<th>  定义表格中的表头单元格。<tr>  定义表格中的行。<td>  定义表格中的单元。<pre> 定义预格式文本。<address> 定义地址。<article> 定义文章。<aside> 定义页面内容之外的内容。<audio> 定义声音内容。<video> 定义视频。<blockquote>  定义长的引用。<canvas>  定义图形。<caption> 定义表格标题。<details> 定义元素的细节。<fieldset>  定义围绕表单中元素的边框。<figcaption>  定义 figure 元素的标题。<figure>  定义媒介内容的分组，以及它们的标题。<footer>  定义 section 或 page 的页脚。<form>  定义供用户输入的 HTML 表单。<header>  定义 section 或 page 的页眉。<nav> 定义导航链接。<noframes>  定义针对不支持框架的用户的替代内容。<noscript>  定义针对不支持客户端脚本的用户的替代内容。<legend>  定义 fieldset 元素的标题。<menu>  定义命令的列表或菜单。<meter> 定义预定义范围内的度量。<output>  定义输出的一些类型。<section> 定义 section。

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素；

设置宽度 width 无效。
设置高度 height 无效，可以通过 line-height 来设置。
设置 margin 只有左右 margin 有效，上下无效。
设置 padding 只有左右 padding 有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

<a> 定义锚。<abbr>  定义缩写。<span>  定义文档中的节。<strong>  定义强调文本。<i> 定义斜体字。<acronym> 定义只取首字母的缩写。<b> 定义粗体字。<button>  定义按钮 (push button)。<sub> 定义下标文本。<sup> 定义上标文本。<textarea>  定义多行的文本输入控件。<em>  定义强调文本。<bdo> 定义文字方向。<big> 定义大号文本。<cite>  定义引用(citation)。<code>  定义计算机代码文本。<command> 定义命令按钮。<dfn> 定义定义项目。<del> 定义被删除文本。<embed> 定义外部交互内容或插件。<kbd> 定义键盘文本。<label> 定义 input 元素的标注。<map> 定义图像映射。<mark>  定义有记号的文本。<objec> 定义内嵌对象。<progress>  定义任何类型的任务的进度。<q> 定义短的引用。<samp>  定义计算机代码样本。<select>  定义选择列表（下拉列表）。<small> 定义小号文本。<tt>  定义打字机文本。<var> 定义文本的变量部分。

没有闭合标签的标签被称作为空标签。
在我们使用的标签中，有的具有闭合标签。例如 <td> 标签，它有闭合标签 </td>。但是也有一部分标签没有闭合标签，例如<br /> 标签，这一类标签我们称之为空标签。

<input />  用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。<img /> 代表文档中的一个图像。<isindex /> 使浏览器显示一个对话框，提示用户输入单行文本。<hr/>  定义水平线。<br>  定义简单的折行。<area /> 在图片上定义一个热点区域
<base /> 指定用于一个文档中包含的所有相对 URL 的基本 URL。<basefont /> 用来设置文档的默认字体大小。（目前已废弃）<bgsound /> IE 浏览器中设置网页背景音乐的元素。<col /> 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 `<colgroup>` 元素内。<embed /> 用于表示一个外部应用或交互式内容的集合点，换句话说，就是一个插件。<frame />，它定义了一个特定区域，另一个 HTML 文档可以在里面展示。(已废弃)
<link /> 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架. 这个元素经常用来链接 css 文件。<meta /> 元素表示那些不能由其它 HTML 元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.
<param />  定义了 <object> 的参数
<plaintext /> 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。(已废弃)
<spacer /> 它可以向页面插入间隔。它由 Netscape 设计，用于实现单像素布局图像的相同效果，Web 设计师用它来向页面添加空白，而不需要实际使用图片。（已废弃）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Fanstyle</title>
    <!-- 设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容国产浏览器的高速模式 -->
    <meta name="renderer" content="webkit">
    <meta name="Author" content="孟繁胜游" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
      
    </style>
</head>
<body>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  
</script>
</body>
</html>

Html 标签

块级元素

行内元素

空标签

Html 模板

Just My Socks（注册教程内含优惠码）