HTML标签经常使用总结，巩固基础更扎实

时间 2019-11-24

标签 html 标签经常使用总结巩固基础扎实栏目 HTML 繁體版

原文原文链接

一个好的网站是万丈高楼，html标签就是高楼里的一砖一瓦，但愿这篇文章能为你打好基础。javascript

首先讲述html里几种元素的区别

至于我为何要先讲述这元素种类呢，由于本人在学习html就是忽略了一下这个知识点，更惨的是它仍是很重要的，吃了一点苦头，因此这个放在开头，没基础的能够先看看，先记个大概，而后区分开各个元素的类别，元素的分类关系到一个网站基础构架，看完下文对经常使用标签的学习，能够回来再看一次加深印象。css

块状元素

一个块状元素独占一行，可设置元素的高度、宽度、行高、顶和底边距，不设置宽度时为父类容器的宽度。
常见的块状元素标签有：html

<div>、<h1>...<h6>、<p>、<ol>、<ul>、<li>、<table>、<address>、<blockquote>、<form>
复制代码

内联元素

和其余元素都在一行上，不可设置元素的高度、宽度、顶和底边距，宽度与高度由内容决定，就是它包含的文字或图片的宽度，不可改变。
常见的内联元素有：前端

<span>、<a>、<label>、<strong>、<em>、<br>、<i>、<q>、<var>、<cite>、<code>
复制代码

内联块状元素

和其余元素都在一行上，元素的高度、宽度、行高、顶和底边距均可设置（就是同时拥有块状元素和内联元素的特色）
常见的内联块状元素有：html5

<img>、<input>
复制代码

区别：

种类	是否占一行	可否设置宽高	可否设置垂直方向的边距margin
块状元素	是	是	是
内联元素	否	否	否
内联块级元素	否	是	是

HTML标签

这里就从html文档最开始的元素，开始简述各类经常使用标签的含义及做用（包括html5的新增长的标签）java

1.标签`<!DOCTYPE>`

描述：定义文档类型浏览器

1).<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于<html>标签以前。
2).务必在html文档开头添加<!DOCTYPE> 声明，这样浏览器才能获知文档类型。
3).在html5之前有许多种声明方式，这里就不讲述了，而在 HTML5 中只有一种声明：服务器

<!DOCTYPE html>
复制代码

2.标签`<html></html>`

描述：定义 HTML 文档布局

1.告知浏览器其自身是一个 HTML 文档。
2.<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部<head>和主体<body>。
3.代码：post

<!DOCTYPE html>
<html>

</html>
复制代码

3.标签`<head></head>`

描述：（文档头部）定义关于文档的信息

1).<head></head>中的元素能够引用脚本、指示浏览器在哪里找到样式表、提供元信息等，大部分数据是不展现给网站读者。
2).在<head>中可添加标签有： <title>,<meta>,<base>,<link>,<script>,<style>，其中<title>定义文档的标题，它是 head 部分中惟一必需的元素
3).代码：

<!DOCTYPE html>
<html>
<head>
    <title>html文档标题</title>
</head>
</html>
复制代码

4.标签`<body></body>`

描述：定义文档的主体

1).包含文档的全部内容（好比文本、超连接、图像、表格和列表等）。
2).不同意在body元素这里使用任何属性。
3).代码：

<!DOCTYPE html>
<html>
<head>
    <title>html文档标题</title>
</head>
<body>网站主体部分</body>
</html>
复制代码

5.标签`<script></script>`

描述：定义客户端脚本

1).type 属性规定脚本的 MIME 类型,如javascript表示为：type="text/javascript" 。
2).script 元素既能够包含脚本语句，也能够经过 src 属性指向外部脚本文件，如：src="./myscript.js"。
3).代码：

<script type="text/javascript" src="./myscript.js"></script><!--引用外部脚本文件，能够相对路径，也能够绝对路径-->

<script type="text/javascript"> document.write("Hello World!") </script><!--直接包含脚本语句-->
复制代码

6.标签`<style></style>`

描述：定义文档样式信息

1).type 属性是必需的，惟一可能的值是 type="text/css"。
2).<style> 元素位于 <head> 部分中，同样能够引用外部的层叠样式表或者直接包含样式语句 ,不过引用外部的层叠样式表要使用<link>标签。
3).代码：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" /><!--引用外部的层叠样式表-->
    <style type="text/css"> a{ color:blue; } </style><!--直接包含样式语句-->
</head>
复制代码

7.标签`<div></div>`

描述：定义文档中的分区或节

1).把文档分割为独立的、不一样的部分,就像是把网站分割成一个个具备属性的方块，<div> 是最经常使用的布局标签。
2).经过给 <div> 加上 class 或 id 属性能够应用额外的样式。
3).代码：

<div class=" " id=" ">块状元素</div>
复制代码

8.标签`<h1>...<h6>`

描述：六个不一样的 HTML 标题

1).<h1>定义最大的标题。<h6> 定义最小的标题。
2).代码：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
复制代码

9.标签`<p></p>`

描述：定义段落

1).段落样式建议不要直接属性取值定义，最好在样式表中规定。
2).<p>元素会自动在其先后建立一些空白。浏览器会自动添加这些空间，也能够在样式表中规定 3).代码：

<p>这是段落。</p>
<p>这是段落。</p>
复制代码

10.标签`<ol></ol>` ，`<ul></ul>` ，`<li></li>`

描述：<ol></ol>定义有序列表，<ul></ul>定义无序列表，<li></li>定义列表项目

1).<ol>有三个属性值的注意的：type规定在列表中使用的标记类型（如一、A、a、I、i）默认是数字；start规定有序列表的起始值；reversed规定列表顺序为降序(9,8,7...)。
2).建议不要直接属性取值定义类型，最好在样式表中规定类型。
3).<li>标签可用在有序列表 <ol> 和无序列表 <ul> 中。
4)代码：

<ol type="a" start="4" reversed="reversed">
  <li>标记类型为a</li>
  <li>从4（就是d）开始</li>
  <li>规定倒序</li>
</ol>
<ul>
  <li>一个无序列表</li>
  <li>一个无序列表</li>
  <li>一个无序列表</li>
</ul>
复制代码

11.标签 `<table></table>`,`<tr></tr>`,`<th></th>`,`<td></td>`

描述： <table></table>定义表格,<tr></tr>定义表格中的行,<th></th>定义表格中的表头单元格,<td></td>定义表格中的单元

1). 有一个属性要注意的，是summary规定表格的摘要，这个的值网站读者不可见的，可是使搜索引擎更好的读懂表格内容，增长了表格的可读性（语义化），屏幕阅读器也能够利用该属性。
2).想深刻了解表格绘制的能够去了解<caption>、<col>、<colgroup>、<thead>、<tfoot>、<tbody> 元素 3).代码：

<!--两行两列表格-->
<table>
  <tr>
    <th>onehead</th>
    <th>twohead</th>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
</table>
复制代码

12.标签`<address></address>`

描述：定义文档做者或拥有者的联系信息

1). 当<address> 元素位于 <body>元素内，则它表示文档联系信息。当 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。文本一般呈现为斜体。
2).一般连同其余信息被包含在 <footer> 元素中。
3).代码：

<address>
Written by <a href="https://juejin.im">掘金</a>
</address>
复制代码

13.标签`<blockquote></blockquote>`，`<q></q>`

描述：<blockquote></blockquote>标记长的引用,<q></q>标记短的引用

1).<blockquote> 与 </blockquote> 之间的全部文本都会从常规文本中分离出来，常常会在左、右两边进行缩进（增长外边距），并且有时会使用斜体。
2).<q></q>的短文本引用，呈现形式浏览器常常在引用的内容先后添加引号。
3).代码：

<html>
<body>
    <span>Here comes a long quotation:</span>
    <blockquote>
    This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
    </blockquote>
    <!--浏览器在 blockquote 元素先后添加了换行，并增长了外边距。-->
    <q>112233445566778899</q>
</body>
</html>

复制代码

14.标签`<form></form>`

描述：用于为用户输入建立 HTML 表单

1).表单可以包含 input 元素，好比文本字段、复选框、单选框、提交按钮等。
2).表单用于须要向服务器传输数据的网页部分，想深刻地了解表单还能够了解 <menus>、<textarea>、<fieldset>、<legend>、<label>元素，它们都可被表单包含，结合使用。
3).属性：

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
enctype		规定在发送表单数据以前如何对其进行编码
method	get\post	规定用于发送 form-data 的 HTTP 方法
name	form_name	规定表单的名称
target	_blank，_self，_parent，_top，framename	规定在何处打开 action URL
autocomplete	on\off	规定是否启用表单的自动完成功能(h5新增属性）
novalidate	novalidate	若是使用该属性，则提交表单时不进行验证(h5新增属性）

4).代码：

<form>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
复制代码

15.标签`<span></span>`

描述：定义文档中的节

1).<span> 标签被用来组合文档中的行内元素，以便经过样式来格式化它们。
2).若是不对 span 应用样式，那么 <span> 元素中的文本与其余文本不会任何视觉上的差别，经常添加<span>元素就是为了给行内元素添加更多的样式和区分其余行内元素，能够为<span>添加class或id属性，增长适当的语义。
3).代码：

<span>行内元素</span>
复制代码

16.标签`<label></label>`

描述：为 input 元素定义标注（标记）

1).<label> 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。若是在 <label> 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
2)."for" 属性可把 label 绑定到另一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
3).代码：

<form action="" method="get" id="">
<label>Male
<input type="radio" name="sex" id="male" value="male" />
</label>
<label>Female
<input type="radio" name="sex" id="female" value="female" />
</label>
<input type="submit" value="提交" />
</form>
<p>如下的label位于 form 元素以外，可是设置了for="male",绑定到了form表单内的id为male的元素，仍然是表单的一部分。运行代码请尝试点击这个 label，能够切换到 radio 控件。</p>

<label for="male" form="nameform">Male</label>
复制代码

17.标签`<a></a>`

描述：定义超连接，用于从一张页面连接到另外一张页面（跳转功能）

1).其最重要的属性是 href 属性，它指示连接的目标，例如：href="juejin.im"。
2).有一个规定，若是不使用 href 属性，则不可使用以下属性：download, hreflang, media, rel, target 以及 type 属性。
3).download属性规定被下载的超连接目标；
hreflang属性规定被连接文档的语言；
media属性规定被连接文档是为什么种媒介/设备优化的；
rel属性规定当前文档与被连接文档之间的关系；
target属性规定在何处打开连接文档；
type属性规定被连接文档的的 MIME 类型。
具体用法与前文讲得其余元素的属性用法基本同样，不重复。
4).代码：

<a href="https://juejin.im">掘金</a>
复制代码

18.短语元素

描述：
<em>把文本定义为强调的内容，对浏览器通常呈现斜体；
<strong>把文本定义为语气更强的强调的内容，对浏览器通常呈现斜体；
<code>定义计算机代码文本，能够以代码形式输入给读者看；
<var>定义变量，能够将此标签与<pre> 及 <code> 标签配合使用；
<cite>定义引用,以斜体显示，可以使用该标签对参考文献的引用进行定义，好比书籍或杂志的标题

1).一般状况下不反对也不建议使用这些短语元素，为了达到某种视觉效果可以用样式表解决的，最好用样式表。
2).代码：

<em>须要强调的文本。斜体</em>

<strong>须要强调的文本。加粗</strong>

<code>一行代码语言</code>
<!--注：若是是多行代码，可使用<pre></pre>标签-->

<var>变量</var>

<address>
    <cite>The Scream</cite>
    by Edward Munch. Painted in 1893.
</address>
复制代码

19.标签`<i></i>`、`<mark></mark>`

描述：<i></i>定义显示斜体文本效果;<mark></mark> 标签订义带有记号的文本

1).<i>被用来表示科技术语、其余语种的成语俗语、想法、宇宙飞船的名字等。
2).<mark> 被标记的/高亮显示的文本。
3).代码：

<i> 标签必定要和结束标签一块儿用 </i>

<mark>标记的/高亮显示的文本</mark>
复制代码

20.标签`<input>`

描述：用于搜集用户信息

1).<input>元素很重要，也不少样化。根据不一样的 type 属性值，输入字段拥有不少种形式。输入字段能够是文本字段(text)、掩码后的文本控件(password)、隐藏的输入字段(hidden)、单选按钮(radio)、复选框(checkbox)、按钮(button)、提交按钮(submit)、供文件上传按钮(file)、图像形式的提交按钮(image)、定义重置按钮(reset)等。
2).value属性规定 input 元素的值；placeholder属性规定帮助用户填写输入字段的提示；readonly属性规定输入字段为只读。
3).<input>还有个不少其余的属性，就不一一列举了
4).代码：

<input type="text" value="文本框" />
<input type="password" value="密码框" />
<input type="hidden" value="不可见输入框" />
<input type="button" value="按钮"/>
<input type="image" value="image" />
<input type="file" value="file" />
<input type="submit" value="提交" />
<input type="reset" value="重置"/>
<input type="radio" value="单选框" />
<input type="chexkbox" value="复选框" />
复制代码

21.标签`<img>`

描述：向网页中嵌入一幅图像

1).<img> 标签建立的是被引用图像的占位空间，并不会在网页中插入图像，而是从网页上连接图像。
2).有两个必需的属性：src 属性规定显示图像的 URL（能够绝对路径，也能够相对路径）和 alt 属性规定图像的替代文本。
3).代码：

<img src="./img/a.jpg" alt="图片1" />
<img src="https://preview.qiantucdn.com/58pic/35/00/10/86c58PICwHV9K52N5wa58PIC58PIC_PIC2018.jpg!w1024_small" alt="图片2" />
复制代码

22.标签`<br>`,`<hr>`

描述：<br>定义简单的折行；<hr>定义水平线

1).<br> 标签只是简单地开始新的一行，若是但愿文本流在内联表格或图像的下一行继续输出，使用 clear 属性：left、right 或者 all，每一个值都表明一个边界或两边的边界。
2).<hr>水平分隔线能够在视觉上将文档分隔成各个部分。
3).代码：

<br/>
<hr/>
复制代码

23.标签`<footer></footer>`

描述：定义文档或节的页脚

1).页脚一般包含文档的做者、版权信息、使用条款连接、联系信息等，但<footer>是 HTML 5 中的新标签，IE 8 以及更早的版本不支持。
2).能够在一个文档中使用多个 <footer> 元素。
3).代码：

<footer>
    <div></div>
    <address>
    Written by <a href="https://juejin.im">掘金</a>
    </address>
</footer>
复制代码

24.标签`<header></header>`

描述：定义文档的页眉（介绍信息）

1).<header> 标签是 HTML 5 中的新标签，IE 8 以及更早的版本不支持。
2).做为介绍内容或者导航连接栏的容器，在一个文档中，您能够定义多个<header> 元素。
3).代码：

<header>
    <div>页眉</div>
</header>
复制代码

25.标签`<meta>`

描述：提供了 HTML 文档的元数据

1).<meta> 标签一般位于<head> 区域内，不会显示在客户端，可是会被浏览器解析；一般用于指定网页的描述，关键词，文件的最后修改时间，做者及其余元数据。
2).在实际使用中，最经常使用到它的一个属性是charset，定义文档的字符编码（中文为"UTF-8"),这是html5出现的新属性，取代了之前复杂的代码写法。
3).代码：

<head>
    <meta charset="UTF-8">
</head>
复制代码

以上是我总结的较为经常使用的html标签及用法，不少都是在我学习HTML时笔记的整理，在html中这只是一部分标签，想深刻前端学习，剩下的标签也要好好学。如文中有不对的地方请指出，谢谢观看！

1. [HTML] HTML经常使用基础标签
2. html基础巩固
3. html经常使用标签总结
4. HTML经常使用标签总结
5. HTML基础标签总结
6. html 基础巩固（1）
7. html 基础巩固（2）
8. HTML经常使用标签
9. html经常使用标签
10. Html-经常使用标签
更多相关文章...
• MyBatis if标签 - MyBatis教程
• MyBatis foreach标签 - MyBatis教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Java Agent入门实战（三）-JVM Attach原理与使用

HTML标签经常使用总结，巩固基础更扎实

首先讲述html里几种元素的区别

块状元素

内联元素

内联块状元素

区别：

HTML标签

1.标签<!DOCTYPE>

2.标签<html></html>

3.标签<head></head>

4.标签<body></body>

5.标签<script></script>

6.标签<style></style>

7.标签<div></div>

8.标签<h1>...<h6>

9.标签<p></p>

10.标签<ol></ol> ，<ul></ul> ，<li></li>

11.标签 <table></table>,<tr></tr>,<th></th>,<td></td>

12.标签<address></address>

13.标签<blockquote></blockquote>，<q></q>

14.标签<form></form>

15.标签<span></span>

16.标签<label></label>

17.标签<a></a>