HTML常用的标签

2018-10-05

在讲HTML常用标签之前，我们先认识下HTML。

HTML，超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

最基本的HTML5结构

<!DOCTYPE html>
<html> 
<head> <!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。头部的内容不会显示在浏览器的。 -->
<meta charset="utf-8"> <!-- 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 -->
<title>网页标题</title> <!-- SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,meta定义页面关键词和页面的描述-->
</head>
<body> <!-- 正文部分，所有在浏览器上可见的内容必须写在body标签内部 -->
    
</body>
</html>

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于html标签之前。<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，有助于浏览器中正确显示网页。其它声明方式及最新html标准可以通过以下链接学习：

HTML简介：http://www.runoob.com/html/html-intro.html

HTML标准：https://www.w3.org/TR/html51/

MDN：https://developer.mozilla.org/zh-CN/

二、HTML常用标签基本用法

1、a标签定义超链接，指定页面间的跳转（HTTP get请求）。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

1	<a href="指向的链接地址或者网址#ID名" target="_blank\|_self\|_top\|_parent">谷歌</a>

2、form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。

1	<form id="form1" name="form1" method="post\|get" action="提交到的地址"></form>

3、input标签用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。通常和form标签配合使用

<form action="demo_form.asp">
  输入框: <input type="text" name="请输入"><br>
  按钮: <input type="button" name="按钮"><br> <!--无跳转请求-->
  <input type="submit" value="提交"> <!--有跳转请求-->
</form>

4、button标签定义一个按钮。在 button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input元素（空元素）创建的按钮之间的不同之处。

1	<button type="button">点我!</button>

5、h1 - h6标签被用来定义 HTML 标题。h1定义重要等级最高的标题，h6定义登记最低的标题。从大到小排列就是这样的。h1>h2>h3>h4>h5>h6

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

6、p标签定义段落

1	<p>这是一个段落。</p>

7、hr标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。br标签插入一个简单的换行符。两者都是空标签，没有结束符。

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>
<hr>
<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

1
2
3

<p> 
使用 br 元素<br>在文本中<br>换行。 
</p>

7、ul标签定义无序列表。

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

8、ol标签定义了一个有序列表，列表排序以数字来显示。

<ol>
  <li>一</li>
  <li>二</li>
  <li>三</li>
</ol>

9、small标签定义小型文本（和旁注）。

1 2	<p> runoob.com - the world's largest web development site.</p> <p><small> Copyright 1999-2050 by Refsnes Data.</small></p>

10、strong标签定义重要的文本。有强调的作用色彩

1	<strong>加粗文本，强调重要性</strong>

11、div标签和span标签是html里没有语义的两个标签，在CSS中通常称为块级元素和内联元素，在html里边没有这样的说法。

div标签它是可用于组合其他HTML元素的容器，标签定义 HTML 文档中的一个分隔区块或者一个区域部分。通常用于文档布局，以便通过 CSS 来对这些元素进行格式化。

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

span用标签于对文档中的元素进行组合。标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。提供了一种将文本的一部分或者文档的一部分独立出来的方式。

1	<p>我的母亲是 <span style="color:blue">伟大</span> 的。</p>

12、kbd标签定义键盘文本。目前已废弃，不推荐使用，但是可以通过CSS实现丰富的效果。

1	<kbd>键盘输入</kbd>

13、video标签定义视频，比如电影片段或其他视频流。目前，video元素支持三种视频格式：MP4、WebM、Ogg。可以在video标签之间放置文本内容，这样不支持video元素的浏览器就可以显示出该标签的信息。

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

14、audio标签，HTML5 规定了在网页上嵌入音频元素的标准。在audio标签之间你需要插入浏览器不支持的audio元素的提示文本。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

15、svg标签，SVG 文件可通过以下标签嵌入 HTML 文档：<embed、object或者iframe。这样SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

embed：

优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

语法：

1	<embed src="circle1.svg" type="image/svg+xml" />

object：

优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
缺点：不允许使用脚本。

语法：

1	<object data="circle1.svg" type="image/svg+xml"></object>

iframe：

优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

语法：

1	<iframe src="circle1.svg"></iframe>

在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。

1
2
3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

三、HTML注意事项

1、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。

2、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。

3、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。

4、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。

5、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。

这批文章也只是讲解了一些html常用标签的最基本的用法，介于知识内容宽泛，标签的属性并没有扩展开来，这就需要我们主动利用搜索工具及学习文档学习，html掌握基础并不难，基本上了解标签的语义意思也就会使用了。