HTML 基本语法 - 技术栈

一、HTML 基本语法

在 HTML 中，标签可以分为单标记指令和双标记指令。

一、单标记指令：

如<br/>、<hr/>等单标签，不设置属性值时可直接使用。例如<br/>标签是换行标签，相当于操作系统中的\r\n操作符，浏览器渲染后会在当前位置回车操作，换到下一行继续显示内容。同时它也支持空行换行，是常规页面排版很常用的标签之一。也有设置属性值的情况，如<hr width="800"/>。在 HTML5 的版本中、<area>、<base>、<link>这三个单标记是已经报废无效了，而在 HTML4 中是可以继续使用的。使用单标记时不同的 HTML 版本对是否需要带斜杠是有不同的要求的。HTML5：斜杠是可选的。HTML4：斜杠不可选的。但是，它被 W3C 的 HTML 验证器接受了。XHTML：斜线是必需的。单标记指令还有<meta>、<img>、<input>等。<meta>标签是 "有关内容的信息"，它们位于文档的<head>中，用于将页面信息传递给浏览器。有许多不同的<meta>标签，你可以在网页上使用。<img>标签用于将图形图像添加到网页，语法为<img src="图片名称（路径）" witdh="宽度" height="高度">。<input>标签用于从访问者捕获信息的表单元素，有许多有效的输入类型。

二、双标记指令：

由<起始标记>内容</结束标记>构成，如<title>...</title>。也可设置属性值，如<body bgcolor="red">...</body>、<font size="7">...</font>。例如标题标签<h1>到<h6>，一级标题最大且只能用一次，所以一般从二级标题开始使用，语法为<h1 align="center">标题文本</h1>，其中align属性有left（设置标题文字左对齐，也作为默认值）、center（居中对齐）、right（右对齐）三个属性值。段落标签<p>，语法为<p align="对齐文本">这就是文本！</p>。还有<div>标签，意为 division，分割，区域是一个容器，用于网页的布局和规划，div中还可以嵌套多层div。表格标签<table>，表格的结构主要分为四个部分：表格标题，头部结构，表格内容，脚注。定义表格为<table>，表格标题为<caption>表格标题</caption>，头部结构为<thead><th>头部结构内容</th></thead>，表格内容为<tbody><tr><td>内容结构，一个 tr 标签代表一行，td 标签代表一个单元格</td></tr></tbody>，脚注为<tfoot><tr><td>脚注内容</td></tr></tfoot>。列表标签主要划分三种类型，即：有序列表，无序列表，自定义列表。有序列表语法为<ol>，其中较为常用的属性有reversed，star，type三个属性。reversed定义列表为降序排列，star取值数值，可定义有序列表的开始值，type取值不同表示类型，即 1 或 a 这种，顺序变成 1234 或者 abcd。无序列表语法为<ul>，常用属性一般只有type属性，该属性取值有三种，即disc（表示实心圆点，为默认值）、circle（表示空心圆点）、square（表示实心方块）。自定义列表语法为<dl>，<dt>标签是指 key:value 中的 key 值，<dd>标签是指 key:value 中的 value 值。表单标签结构主要有三个，分别为form，input，button，表单中的<input>标签也可以实现button按钮标签的功能特点，但仅推荐在特殊情况下使用。超文本和超链接使用<a>标签，其中<a>标签常用的属性有四个，分别为href，target，rel, download。href用于指定链接的目标 URL 地址，可以是绝对或相对地址，实现页面跳转或资源访问。target决定链接如何打开，常见取值有_blank（新窗口打开）、_self（当前窗口打开）、_parent（父级窗口打开）、_top（顶层窗口打开），用于控制链接的打开方式。rel指示链接与当前文档之间的关系，如nofollow（搜索引擎不跟踪链接）、noopener（防止跨窗口引用），有助于 SEO 优化和提升网站安全性。download指定链接目标资源下载，浏览器会将文件下载到客户端而不是在浏览器中打开，实现文件下载功能。框架标签<iframe>的核心作用是在一个页面中嵌入另一个 HTML 页面，属性包括src，指定嵌入的网页地址，可以是相对或绝对路径。

二、HTML 文档结构

（一）整体结构

文档类型声明：说明文档是 HTML 文档，如 HTML5 的声明为。这一声明是 HTML5 文档的开始标志，告诉浏览器该文档遵循 HTML5 规范。

<html>标签对：是 HTML 文档的根元素，包含整个文档内容。<html>标签是整个 HTML 文档的根节点，它包含了<head>和<body>两个主要部分。属性方面，可通过 lang 属性指定文档的语言，如`<html lang="zh">`表示中文文档。xmlns 属性指定文档的 XML 命名空间，默认值是"http://www.w3.org/1999/xhtml"。

<head>标签对：定义文档的元数据，包含<title><base><link><meta><style><script>等辅助性标签。

- <title>标签用于定义文档的标题，它会显示在浏览器的标题栏中。例如`<title>我的网页标题</title>`。

- <base>标签为页面上的所有链接规定默认地址或默认目标。

- <link>标签定义文档与外部资源的关系，最常见的用途是链接样式表。如`<link rel="stylesheet" type="text/css" href="/html/csstest1.css">`。

- <meta>标签提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。例如`<meta name="keywords" content="HTML,CSS,JS">`。

- <style>标签用于定义文档的内部样式表。

- <script>标签用于引入 JavaScript 脚本。

<body>标签对：定义文档的主体内容，包含众多 HTML 标签。<body>标签包含了文档的主要内容，如文本、图像、链接等。<body>标签有很多属性可设置文档背景颜色、文本颜色等。例如`<body bgcolor="red">`设置背景颜色为红色，`<body text="blue">`设置文本颜色为蓝色。

（二）各部分详解

<head>标签：包含页面标题、字符编码、引用的样式表和脚本等。如<meta charset="UTF-8">。

- 页面标题由<title>标签定义，它是<head>标签中的重要元素，用于为文档提供一个简洁明了的标题，方便用户识别和搜索引擎索引。

- 字符编码通常使用<meta charset="UTF-8">来指定，确保文档中的字符能够正确显示，避免出现乱码问题。

- 引用样式表可以通过<link rel="stylesheet" href="styles.css">来实现，将外部的 CSS 文件引入到文档中，以实现对页面样式的统一管理和美化。

- 引用脚本可以使用<script src="script.js"></script>，将 JavaScript 文件引入到文档中，为页面添加交互功能和动态效果。

<body>标签：包含文档的主要内容，如文本、图像、链接等，有很多属性可设置文档背景颜色、文本颜色等。

- 文本可以通过各种文本标签来呈现，如段落标签<p>、标题标签<h1>到<h6>等。

- 图像可以使用<img>标签引入，如`<img src="image.jpg" width="300" height="200">`。

- 链接可以使用<a>标签创建，如`<a href="Example Domain">链接文本</a>`。

- 通过设置<body>标签的属性，可以改变文档的外观。例如，设置 bgcolor 属性可以改变背景颜色，设置 text 属性可以改变文本颜色。超链接文字的颜色可以通过设置 link、vlink 和 alink 属性来分别定义未访问过的超链接颜色、已访问过的超链接颜色和鼠标点击超链接时的颜色。文档边缘与窗口的距离可以通过设置 topmargin、leftmargin、rightmargin 和 bottommargin 属性来调整。

三、HTML 常用标签

（一）标题标签

"<h1> " 表示字体加粗，每个标题标签括中的文字都显示占取一行，随着 h 后面的数字增大，标题越来越小。标题标签常用于网页中文章的标题，其特点是加粗加黑显示，与其它行有一定的行间距且单独占用一行。例如：<h1>一级标题</h1>、<h2>二级标题</h2>、<h3>三级标题</h3>等。

（二）段落标签

"<p></p>" 表示标签内部的内容是以段落的形式呈现。段落标签由开始标签<p>和结束标签</p>组成，开始和结束标签之间的内容会被视为一个段落。浏览器内置的样式会在段落的上下自动添加一定的空白区域。例如：<p>这是一个段落。</p>。段落标签中的文本会按照一定的格式显示，多个连续的空格和换行在显示时会被处理成特定的格式，如果想要在段落中换行，需要使用专门的换行标签<br />。

（三）换行标签

"" 表示前后文本强制换行。换行标签属于自闭合标签，不需要对应的结束标签<br>。例如在段落中使用换行标签：<p>这个<br />段落<br />演示了分行的效果</p>。

（四）文本格式化标签

字体加粗："<strong></strong>" 或者 "<b></b>"。用于将文本加粗显示，吸引读者的注意。例如：<strong>重要文本</strong>或<b>加粗文本</b>。

字体倾斜："<em></em>或者 "<i></i>"。使文本以斜体显示，通常用于强调或表示特殊含义。例如：<em>强调文本</em>或<i>斜体文本</i>。

字体加删除线："<del></del>或者 "<s></s>"。为文本添加删除线效果。例如：<del>删除文本</del>或<s>带删除线文本</s>。

字体加下划线："<ins></ins>或者 ""。在文本下方添加下划线。例如：<ins>下划线文本</ins>或<u>带下划线文本</u>。

（五）<div>和标签

都是用来布局的，<div>内的文本内容独占一行，而一行可以有多个。<div>标签常用于网页的布局和规划，是一个大盒子，可作为容器来划分页面区域。例如：<div>这是一个大盒子，用于布局，一行只能放一个。</div>。<span>标签是一个小盒子，用于布局，一行可以有多个。例如：<span>这是一个小盒子，可在一行中放置多个。</span>。

（六）图像标签

<img />是单标签，有很多属性丰富图像内容，如 src、alt、title、width、height、border 等。图像标签用于在网页中插入图像，其中 src 属性是必须的，用于指定图像的路径，可以是本地路径（包括绝对路径、相对路径）或网络路径。alt 属性是图片替代文本，在图片未加载出来时显示提示信息，同时也用于搜索引擎搜索。title 属性是提示文字，鼠标移入图片时会显示。width 和 height 属性用于设置图片的宽度和高度，可以只设置其中一个属性，另一个属性会自动按比例显示。border 属性用于为图像添加边框。例如：<img src="image.jpg" alt="图片描述" title="鼠标悬停提示" width="300" height="200" border="1">。

（七）超链接标签

格式："<a href="" target=" "> 文本信息</a>"，href 为必须属性，target 表示网页的跳转方式。超链接标签<a>用于创建链接，href 属性指定链接的目标地址，可以是网页、文件、图片等。target 属性决定链接如何打开，常见取值有_blank（新窗口打开）、_self（当前窗口打开）、_parent（父级窗口打开）、_top（顶层窗口打开）。例如：<a href="Example Domain" target="_blank">链接文本</a>。

链接分类：外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接。

- 外部链接：必须以http://开头，如<a href="百度一下，你就知道">百度</a>。

- 内部链接：直接写网页名称即可，如<a href="first_page.html">首页</a>。

- 空链接：如果当时没有确定链接目标时，可以用<a href="#">首页</a>。

- 下载链接：href 里面地址是一个文件或压缩包，点击会下载该文件。

- 网页元素链接：网页中的各种元素如文本、图像、表格等都可以添加超链接。

- 锚点链接：点击链接，可以快速定位到页面中的某个位置。先在链接文本的 href 属性中设置属性值为#名字的形式，如<a href="#two">第二集</a>，然后在目标位置标签中添加一个 id 属性等于刚才的名字，如<h3 id="two">第二集介绍</h3>。

（八）表格标签

大致格式：<table><tr><tb>文本信息 1</tb><tb>文本信息 2</tb></tr></table>。表格标签<table>用于创建表格，<tr>表示表格的行，<tb>表示表格的单元格。但通常使用<td>（表格数据单元格）和<th>（表头单元格）代替<tb>。

表头单元格标签：用<th>文本内容</th>书写，相当于替换掉 td 标签来加强显示功能。表头单元格中的文本通常加粗居中显示。

表格结构标签：用<thead>头部文本</thead>和<tbody>身体标签</tbody>划分表格为头部和身体。这样可以使代码的可读性更强，便于管理表格的不同部分。

合并单元格：跨行合并用rowspan = "合并单元格的个数"，跨列合并用colspan = "合并单元格的个数"。例如：<td rowspan = "2">...</td>表示跨行合并两个单元格。

（九）列表标签

无序列表：<ul>标签表示 HTML 页面中的无序列表，其中的<li>来存放列表项。无序列表中的各个列表项之间没有顺序之分，<ul>标签中只能嵌套<li>标签，但是<li>标签可以存放其他标签。例如：<ul><li>列表项1</li><li>列表项2</li></ul>。无序列表的项目符号可以通过 CSS 设置去除，如li {list-style: none;}。

有序列表：<ol>标签表示 HTML 页面中的有序列表，其中的<li>来存放列表项。各个列表项有顺序之分，<ol>标签中只能嵌套<li>标签，但是<li>标签可以存放其他标签。格式与无序列表相同，有序列表会自动标号。

自定义列表：<dl>标签表示定义列表，<dt>标签定义名字，<dd>标签定义名字解释。<dl>标签中只能包含<dt>和<dd>标签。例如：<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>。

（十）表单标签

由表单域、表单控件和提示信息三部分组成。

表单域：用<form>标签来定义表单域，包含 action、method、name 属性。<form>标签会将范围内的表单元素信息提交给服务器。例如：<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>。

表单控件：有 input 输入表单元素、select 下拉表单元素和 textarea 文本域元素等。

- <input>标签：用于收集用户信息，常见的有账号、密码输入框。格式为<input type="属性值" />，type 的属性值有很多种，例如当账户输入时取 "text"；当密码输入时取 "password"；单选按钮取 "radio"；多选按钮取 "checkbox"；提交按钮取 "submit"；重置按钮取 "reset"；上传文件按钮取 "file"。单选按钮只有都同时定义相同的 name，才能实现出多选一的效果。

- <select>标签：用于定义下拉表单元素，可创建选项菜单，菜单内的内容选项标签为<option>，可以由<optgroup>标签将内容选项进行分组，默认是单选，属性multiple为true时，为多选。例如：<select><option>选项1</option><option>选项2</option></select>。