【Web 开发】第2章 HTML 基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_45772878/article/details/107389660

HTML 概述

HTML (HyperText MarkUp Language)：超文本标记语言
一种用来结构化 Web 网页及其内容的标记语言，不区分大小写。
由一系列的 元素 (elements) 组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 标签 (tags) 是由尖括号“<>”包围的关键词，通常成对出现。

HTML 元素

基本结构：<Start tag>Element</End tag>

开始标签 (Start tag)：包含元素的名称，由尖括号“<>”包围。表示元素从这里开始或者开始起作用。
结束标签 (End tag)：与开始标签相似，只是其在元素名之前包含了一个斜杠“/”，表示元素的结尾。
内容 (Content)：元素的内容。
元素 (Element)：从开始标签到结束标签的所有代码。
属性 (Attribute)：包含关于元素的额外信息，一个标签可能有多个属性，属性先后顺序无关，以名称/值对的形式出现，属性名=“属性值”。（布尔属性：控制元素的某一个状态，属性值只能为属性名的属性，属性值可以省略）
空元素 (Empty element)：不包含任何内容的元素，只有一个标签，在开始标签中关闭，如<br />。

嵌套元素：将一个元素置于其他元素之中。必须保证元素嵌套次序正确。一个结束标记必须匹配最近打开的标签。
正确：<html><body></body></html>
错误：<html><body></html></body>

块元素 (Block element)：又称为块级元素。在页面中以块的形式展现，相对于前面的内容会出现在新的一行，其后的内容也会在下一行展现。通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等。不能被嵌套进内联元素中，但可以嵌套在其它块元素中。
内联元素 (Inline elemen)：又称为行内元素。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。在同一行按从左至右的顺序显示，不单独占一行。

HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>page title</title>
  </head>
  <body>
  page content
  </body>
</html>

<!DOCTYPE html> or <!doctype html>：文档类型，位于 HTML 文档的第一行。
<html></html>：<html> 元素，包含整个页面的内容，也称作根元素。
<head></head>：<head> 元素，内容对用户不可见，包含浏览器、搜索引擎所需信息，如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8" />：<meta> 元素，元数据。charset 属性，字符集编码方式。指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。
<title></title>：<title> 元素，设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body>：<body> 元素，包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

HTML 标签

标题

块元素，通过标签 <h1>、<h2>、<h3>、<h4>、<h5>、<h6> 定义。<h1> 定义最大的标题，<h6> 定义最小的标题。

段落

<p>paragraph<p>

块元素，每个段落自动换行，移除源代码中多余的空格和空行，所有连续的空格或空行都被算作一个空格。

换行

<br />

空元素。即使 <br> 可以在所有浏览器中显示，使用 <br /> 也是更长远的保障。

实体引用

在 HTML 中包含特殊字符。一些字符无法从键盘输入，如：带有音节或其它装饰的字母、标点符号、货币符号、数学符号、形状和箭头。若要在网页中正确显示一些 HTML 字符，也要用到字符实体，如多个连续空格、<、>、&。

每个字符引用以“&”开始, 以“;”结束。
两种方式表示字符实体：

用实体名：&实体名;，如   (不换行空格)、&emsp; (全角空格)、& (&)
用实体数字：&#实体数;，如 ‽ (‽)

预留格式

<pre>content</pre>

块元素，定义预格式化的文本，按原格式输出内容，精确地显示文本中的空格和换行，默认情况下，用固定宽度字体显示。

行内组合

<span>content</span>

组合行内元素，以便通过CSS样式进行格式化。

水平线

<hr />

空元素。可用于分隔内容。

强调

倾斜：<em>content</em>，强调；<i>content</i>，斜体，无语义。
加粗：<strong>content</strong>，重点强调；<b>content</b>，粗体，无语义。

注释

不会在浏览器中显示，可以跨行，不可嵌套。可以提高其可读性，使代码更易被人理解。

引用

块引用：<blockquote>content</blockquote>，长引用，块元素。浏览器在渲染时默认增加缩进，作为引用的一个指示符。
行内引用：<q>content</q>，短引用，行内元素。浏览器默认将其作为普通文本放入引号内表示引用。

缩略语

<abbr title="explanation">abbreviation</abbr>

定义缩写或首字母缩略语，title 属性提供缩写的解释，对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

链接

<a href="url">Link text|picture</a>

href：超文本引用 (hypertext reference)，链接目标（页面或锚点）的 URL 地址，相对路径 or 绝对路径。
target：规定在何处打开目标 URL，仅在 href 属性存在时使用。
title：规定关于链接的额外信息。当鼠标悬停在链接上面时，这部分信息将以工具提示的形式显示。
name：规定锚 (anchor) 的名称，可用于创建 HTML 页面中的书签。书签不会以任何特殊方式显示，对读者是不可见的。当使用命名锚 (named anchors) 时，可以创建直接跳至该命名锚的链接。

命名锚：<a name="label">锚</a>，通过在 URL 的末端添加 “#”+“label” 实现链接。
空链接：<a href="#">Link text|picture</a>，未指派的链接，用于向页面上的对象或文本附加行为。

图像

<img src="url" alt="some_text" />

src：图像的 URL 地址，相对路径 or 绝对路径。
alt：为图像定义一串在浏览器无法载入图像时的可替换文本。
height/width：设置图像的高度与宽度，默认单位为像素。

常见图像格式：

JPG：有损压缩，色彩丰富图片
GIF：简单动画、背景透明
PNG：无损压缩、透明、交错、动画

透明：可以给图片指定一种颜色，使其不被显示而成为透明。
交错：在显示图片的过程中，可以从概貌逐渐变化到全貌，清晰度从小变大。

区域

<div>content</div>

块元素，布局工具，把文档分割为独立的、不同的部分，组合块元素，以便通过CSS样式进行格式化。

列表

无序列表

<ul> // ul 代表一个项目无序列表，块元素，可以嵌套
  <li>content</li> // li 代表列表中一个单独的项，块元素
  <li>content</li> // 列表项目使用粗体圆点标记
  ...
</ul>

有序列表

<ol> // ol 代表一个项目编号列表，块元素，可以嵌套
  <li>content</li> // 列表项目使用数字标记，块元素
  <li>content</li>
  ...
</ol>

定义列表

<dl> // dl 代表一个定义项目列表，块元素，可以嵌套
  <dt>item</dt> // dt 代表列表中一个自定义项目，块元素
  <dd>content</dd> // dd 代表列表中一个自定义项目的描述，块元素
  <dt>item</dt>
  <dd>content</dd>
  ...
</dl>

表格

<table border="1"> // table 代表一个表格，经常用于布局、定位、显示规范性元素。border 规定表格边框的宽度。
  <caption>title</caption> // caption 代表表格的标题
  <tr> // tr 代表表格中的一行
    <th>header 1</th> // th 代表表格的表头/列标题，一般为粗体居中
    <th>header 2</th>
    ...
  </tr>
  <tr>
    <td>row 1, cell 1</td> // td 代表表格的单元格
    <td>row 1, cell 2</td>
    <td>&nbsp;</td> // 空单元格中添加一个空格占位符，使单元格边框被显示出来
    ...
  </tr>
</table>

rowspan：设置表头/单元格可横跨的行数。
colspan：设置表头/单元格可横跨的列数。

表单

表单：用户和 web 站点或应用程序之间交互的主要内容之一，用于搜集不同类型的用户输入，采集用户信息。
表单元素：表单由一个或多个小部件组成的，如文本框、按钮、单选、复选、下拉列表、文本域。

<form action="url" method="get|post"> // form 定义一个表单。action 定义提交表单时处理所收集数据的 URL 地址，默认为当前页面。method 定义提交表单时所用的 HTTP 方法，默认为 get。
  <input type="type" name="name" /> // input 定义一个表单输入元素，空元素。type 定义 input 的工作方式。name 定义输入数据名称。
  ...
  <select> // select 定义一个下拉列表框
    <option value="value">name</option> // option 定义一个列表项。value 表示提交至后端的数据。name 为选项显示的名称。
    <option value="value" selected>name</option> // selected 为布尔属性，表示该选项被默认选中。
    ...
  </select>
  ...
  <textarea rows="x" cols="y">content</textarea> // textarea 定义一个文本域。rows 定义文本域的行数，cols 定义文本域的列数。content 为输入字段的初始值。
  ...
</form>

文本输入

<input type="text|password|email" name="name" value="value" />

text：默认值，表示一个单行文本框，接受任何类型的文本输入。
password：表示一个密码框，输入文本做掩码处理。
email：表示一个只接受格式正确的电子邮件地址的单行文本框。
value：定义输入字段的初始值。

提交/重置按钮

<input type="submit|reset" value="name" />

submit：表示一个提交按钮，向表单处理程序提交表单。
reset：表示一个重置按钮。
value：定义按钮表面的文字。

选择框

<input type="radio|checkbox" value="value" name="name" checked />

radio：表示一个单选框。同一组单选框 name 必须相同。
checkbox：表示一个复选框。同一组复选框 name 可以不同。
value：表示提交至后端的数据。
checked：布尔属性，表示该选项被默认选中。

计算机代码

<code>content</code>

行内元素，表示计算机代码，浏览器对其进行等宽显示，不保留多余的空格和换行。

音频

html5元素，格式：MP3、Wav、Ogg

<audio controls> // controls 添加播放、暂停和音量控件
  <source src="xxx.ogg" type="audio/ogg"> // <audio> 元素支持多个 <source> 元素，浏览器将使用第一个支持的音频文件
  <source src="xxx.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。 // 浏览器不支持的<audio>元素的提示文本
</audio>

视频

html5元素，格式：MP4、WebM、Ogg

<video width="xxx" height="xxx" controls> // controls 添加播放、暂停和音量控件
  <source src="xxx.mp4" type="video/mp4"> // <video> 元素支持多个 <source> 元素，浏览器将使用第一个支持的视频文件
  <source src="xxx.ogg" type="video/ogg">
  您的浏览器不支持 video 元素。 // 浏览器不支持的<video>元素的提示文本
</video>