什么是 HTML

HTML 指的是超文本标记语言（Hyper Text Markup Language）。它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，HTML 使用标记标签来描述网页。

HTML 标签

HTML 标签是由尖括号包围的关键词，形式为 <标签名>，如：<html>，而标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签，结束标签的形式为 </标签名>，如：<html>。

标签分为两种关系：

嵌套关系

<head>
  <title></title>
</head>

并列关系

<head></head>
<body></body>

HTML 基本结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>这里是网页标题</title>
  <script>这里可以引用或内建 JavaScript 脚本</script>
  <style>这里可以内建 CSS 样式表</style>
  <link>这里可以引用外部 CSS 文件</link>
</head>
<body>
  <h1>这里是标题</h1>
  <p>这里是段落</p>
  <a>这里是链接</a>
  <img /> 这里是图片
</body>
</html>

解析：

<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。在head中设置网页标题和字符集编码

标签语义化

所谓标签语义化，就是指标签的含义。

为什么要有语义化标签？

方便代码的阅读和维护。
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
使用语义化标签会具有更好地搜索引擎优化。

语义是否良好，在于当我们去掉 CSS 之后，网页结构依然阻止有序，并且有良好的可续性。也就是说，一眼看去知道哪个是重点结构是什么，知道每一块的内容有什么作用。遵循的原则是先确定语义的 HTML，再选合适的 CSS。

段落标签

<p>段落，标签的默认样式，段前段后都会有空白。</p>

换行标签

在不产生一个新段落的情况下进行换行（新行），可使用<br />，如：

<p>
  你好世界
  <br />
  我在这里
</p>

标题标签

标题标签一共有 6 个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，并且依据重要性递减。

标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。

水平线标签

<p>欢迎</p>
<hr /> 水平线
<p>谢谢</p>

超链接

超链接类型分为三种：内部链接、外部链接和锚链接

<a href="跳转目标" target="目标窗口的弹出方式" title="鼠标滑过显示的文本">
  链接显示的文本
</a>

href： 用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。Hypertext Reference 的缩写。意思是超文本引用
target： 用于指定链接页面的打开方式，其取值有_self 和_blank 两种，其中_self 为默认值，_blank 为在新窗口中打开方式。

注意点：

外部链接，需要添加 http://，如：http://www.baidu.com
内部链接，直接链接内部页面名称即可比如 <a href="index.html">首页</a>
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为#（即 href="#"），表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

使用<a href="#id">链接文本</a>创建链接文本，如：

<a hef="#footer"></a>

使用相应的 id 名标注跳转目标的位置

<a id="footer">跳转到锚链接</a>

图片

<img src="图片地址" alt="指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本" title="提示文本">

注释

注释的作用是为了解释代码的用途，方便程序员查找以及他人阅读。常见的注释有：

<!-- 注释
/* 注释 */
这里都是注释内容
-->

div span 标签

div、span没有语义，它的作用是为了结合 CSS 设置单独的样式使用。

<div>
  <span></span>
</div>

列表

列表分为无序列表、有序列表和自定义列表

无序列表： 使用ul及li标签实现，没有前后顺序的信息列表。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

有序列表： 使用ol及li标签实现，是有前后顺序的信息列表。

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

自定义列表： 使用dl及dt及dd标签实现，通常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。

<dl>
  <dt></dt>
  <dd></dd>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dd></dd>
</dl>

表格

创建表格几元素：table（定义表格）、tr（行）、td（列）、thead（表格头部）、th（表格表头）、tbody（表格主体），除此之后还有<caption>指定表格标题，rowspan 合并行，colspan 合并列。

<table>
  <caption>标题</caption>
  <tr>
    第一行<td>第一列</td>
    <td colspan="2">跨两列</td>
    <td></td>
  </tr>
  <tr>
    第二行<td>第二列</td>
    <td></td>
    <td></td>
  </tr>
</table>

表单

网站使用 HTML 表单进行交互，表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件" name="表单名称"></form>

action： 在表单收集到信息之后，需要将信息传递给服务器进行处理，该属性用于指定接收并处理表单数据的服务器程序的 URL 地址。
method： 用于设置表单数据的提交方式，取值为 get 或 post。
name： 用于知道你跟表单的名称，以便于区分同一个页面中的多个表单。

表单控件

表单控件包括单行文本输入框、密码输入框、复选框、单选框、提交按钮、重置按钮等，必须放在<form></from>标签之间。

单行文本输入框： 当用户要在表单中输入字母、数字等内容时，就需要文本输入框，文本框也可以转化为密码输入框。

// 当 type="text" 对应的就是文本输入框；当 type="password"，对应的就是密码输入框。
<form>
  <input type="text/password" name="名称" value="文本" />
</form>

复选框：

// 比如个人资料填写爱好的勾选
<input type="checkbox" value="值" name="名称" checked="checked" />

单选框：

// 比如性别的选取
<input type="radio" value="值" name="名称" checked="checked" />

多行文本框：

// 比如备注的填写
<textarea rows="行数" cols="列数">
  文本
</textarea>

下拉框：

<select>
  <option value="提交值" selected="selected">
    选项值
  </option>
  <option value="提交值">选项值</option>
  <option value="提交值">选项值</option>
</select>

 按钮：

// 提交按钮
<input type="submit" value="提交" />

// 重置按钮
<input type="reset" value="重置"/>

HTML 基础知识