常用HTML标签

比较全的学习前端网站MDN
还有国内的菜鸟教程 和 W3school

以上都是很全面的前端教程网站，可以免费学习。

什么是 HTML?

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。其实就像是我们现实中搭起来的架子，只要有这个架子才可以很好支起高楼。

HTML基本结构

从上图可以看出来，主要分为：

• 声明 ：必须是 HTML 文档的第一行，位于 标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
• < html >< /html> : 此元素可告知浏览器其自身是一个 HTML 文档；限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 < head > 标签定义，而主体由 < body > 标签定义。
• < head>< /head> : 用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。这些标签可用在 head 部分：< base>, < link>, < meta>, < script>, < style>, 以及 < title>。
• < body>< /body> : 元素定义文档的主体，包含文档所有内容（比如：文本、超链接，图像、表格、列表、表单等…）

这是一个简单的在线DEMO，也可以自己打开编辑器尝试
在线编辑预览的菜鸟编辑器

HTML常用标签

HTML标签主要分为三大类：

1. 行内元素

   行内元素主要的特征就是不能设置宽高，不会自动进行换行，对margin设置的上线间距无效。
   行内元素只能通过内部内容撑开标签，多个行内元素是可以同行显示。常见的行内元素有：span、em、i、a等

2. 块级元素

   块级元素有自己的宽，默认占一行，所以它的宽默认就是100%的，不允许与其他元素共享一行。多个块级元素写在一起会自上而下排列。对margin、padding的样式都有效。
   常用的块级元素有：div、p、nav、aside、header、footer、section、article、ul、li、form等等

3. 行内块

行内块元素结合了行内与块级元素的特性，可以同行展示，还可以有自己的宽高。
这种元素需要通过CSS样式来修改，display: inline-block

a

行内元素
a标签定义超链接，跳转到另一个页面。最重要的属性是href，它指向链接目标地址。

<a href="https://www.baidu.com">这是跳向百度的链接</a>

span

行内元素
span标签用来组合文档中的行内元素，它没有固定的格式表现，是一个纯净版的行内元素。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。

<span>这是span标签</span>

em、i、var、del、b、strong、u

行内元素
以上都是短语元素。虽然这些标签定义的文本大多会呈现特殊的样式，但是实际都是有确切语义的。

<em>这是em，强调的内容</em>
<i>这是i，斜体 Italic</i>
<var>这是var，定义变量 variable</var>
<del>这是del，删除线标签 delete</del>
<u>这是u，下划线 Underline</u>
<b>这是b，加粗标签</b>
<strong>这是strong，加粗标签</strong>

h1-h6

块级元素
< h1> - < h6> 标签可定义标题。< h1> 定义最大的标题。< h6> 定义最小的标题。

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

p

块级元素
p标签表示段落

<p>这是段落，可以有span、a、em等标签包含在内<span>添加使用</span></p>

div

块级元素
div标签是一个纯净的块级元素，没有语义，也是最多用的一个标签。

<div>
	<h1>这是标题</h1>
	<p>段落</p>
	<div>
		<h3>小标题</h3>
		<p>段落</p>
	</div>
</div>

header、nav、section、article、aside、footer

块级元素
这是html5新增语义化标签，可以让人和浏览器更好的阅读。

<header>定义一个页面或是区域的头部</header>
<nav>    <!--导航链接标签-->
	<span>导航页1</span>
	<span>导航页2</span>
</nav>
<div>
	<section>定义一个区域</section>
	<aside>定义页面内容的侧边框部分</aside>
	<article><!--文章块div-->
	　　<h2>文章标题</h2>
	　　<p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
	</article>
</div>
<footer>定义一个页面或是区域的底部</footer>

img

行内块
img标签向网页中嵌入一幅图片

<img src="https://www.wangbase.com/blogimg/asset/201910/bg2019100907.jpg">

figure

块级元素
规定独立的流内容（图片，图表、照片、代码等）

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

video、audio

< video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 < video> 标签用于音频内容，但是 < audio> 元素可能在用户体验上更合适。

<video controls width="280" src="/media/examples/flower.mp4"></video>

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay></audio>

ul-li 、ol-li

块级元素
列表，ul为无序列表、ol为有序列表；
他们的配合元素只有li

<!-- 无序列表 -->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>有序列表一</li>
  <li>有序列表二</li>
  <li>有序列表三</li>
</ol>

table、thead、tbody、tfooter、tr、th、td

定义HTML的表格，tbody表示表格主体，tbody 元素应该与 thead 和 tfoot 元素结合起来使用。thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

form、input、textarea、button、label、select

表单标签用于为用户输入创建 HTML 表单。包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。

<form action="" method="post">
	<ul>
		<li>
			<input type="text" placeholder="这里时text属性" />
		</li>
		<li>
			<input type="password" name="pwd" placeholder="密码"/>
		</li>
		<li>
			<input type="number"  placeholder="这里时number属性"/>
		</li>
		<li>
			<label for="male">Male</label>
			<input type="radio" name="sex" id="male" />
		  
			<label for="female">Female</label>
			<input type="radio" name="sex" id="female" />
		</li>
		<li>
			<label for="1">
				<input type="checkbox" name="vehicle" value="1" id="1"/>1
			</label>
			<label for="2">
				<input type="checkbox" name="vehicle" value="2" id="2"/>2
			</label>
			<label for="3">
				<input type="checkbox" name="vehicle" value="3" id="3"/>3
			</label>
		</li>
		<li>
			<input type="file" />
		</li>
		<li>
			<textarea rows="3" cols="20" placeholder="文本"></textarea>
		</li>
	</ul>
	<br>
	<input type="submit" value="submit"/>
	<button type="button">提交</button>
</form>