HTML基础知识学习笔记_html学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_57736391/article/details/136431691

1.简介

1.1定义:HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

1.2HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1.3HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

2.基本的 HTML 标签

HTML 标题:HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落:HTML 段落是通过 <p> 标签进行定义的。
HTML 链接:HTML 链接是通过 <a> 标签进行定义的。
HTML 图像:HTML 图像是通过 <img> 标签进行定义的。

3.HTML 元素

3.1 定义:HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

3.2 HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

3.3 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

4.HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。
属性总是在 HTML 元素的开始标签中规定。
举例
- <h1 style="text-align:center"> :居中排列标题
- <body style="background-color:yellow">:改变背景颜色
- <br/>:插入单个折行(换行)

5.HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

6.HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。

7.HTML 的 style 属性

style 属性的作用：提供了一种改变所有HTML元素的样式的通用方法

8.HTML文本格式化

9.HTML引用

HTML <q> 元素定义短的引用:浏览器通常会为 <q> 元素包围引号
用于长引用的 HTML <blockquote>:浏览器通常会对 <blockquote> 元素进行缩进处理。
HTML <abbr> 元素定义缩写或首字母缩略语:对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
HTML <dfn> 元素定义项目或缩写的定义
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示
HTML <cite> 元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。
HTML <bdo> 元素定义双流向覆盖（bi-directional override）。<bdo> 元素用于覆盖当前文本方向

10.HTML中的样式

外部样式表:当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
内部样式表:当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
内联样式:当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

11.HTML超链接(链接)

定义:超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手.
通过使用<a>标签在HTML中创建链接,有两种使用<a>标签的方式:
- 通过使用href属性 -->创建指向另一个文档的链接
- 通过使用name属性 --> 创建文档内的书签

链接语法:<a href="url">link text</a>
- ⚠"链接文本"不必一定是文本,图片或其他HTML元素都可以成为链接
HTML链接 - target属性:使用该属性,可以定义被链接的文档在何处显示
- 例子:< a href="http://www.baidu.com.cn/" target="_blank">visit baidu!</a>
HTML链接 - name属性:name属性规定锚(anchor)的名称. 可以使用name属性创建HTML页面中的书签,书签不会以任何特殊方式显示,它对读者是不可见的. 当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息.
- 命名锚语法:<a name="label">锚(显示在页面上的文本)</a>
- ⚠锚的名称可以是任何你喜欢的名字
- ⚠您可以使用id属性来替代name属性,命名锚同样有效
- 例子":
  - 创建一个书签,即在HTML文档中对锚进行命名
    - <a name="tips">基本的注意事项 - 有用的提示</a>
  - 在同一个文档中创建指向该锚的链接
    - <a href="#tips">有用的提示</a>
  - 也可以在其他页面中创建指向该锚的链接
    - <a href="http://www.baidu.com.cn/html/html_links.asp#tips">有用的提示</a>

12.HTML图像

图标签（<img>）和源属性（Src）
- 在 HTML 中，图像由 <img> 标签定义。
- <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
- 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
- 定义图像的语法:<img src="url" />
替换文本属性（Alt）
- 定义:alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
- <img src="boat.gif" alt="big boat">

13.HTML表格

表格
- 表格由<table>标签定义. 每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义). 字母td指表格数据(table data), 即数据单元格的内容. 数据单元格可以包括文本、图片、列表、段落、表单、水平线、表格等.
- 例子:
  - <table border="1">
  - <tr>
  - <td>row 1, cell 1</td>
  - <td>row 1, cell 2</td>
  - </tr>
  - <tr>
  - <td>row 2, cell 1</td>
  - <td>row 2, cell 2</td>
  - </tr>
  - </table>
表格和边框属性: 如果不定义边框属性,表格将不显示边框
表格的表头:使用<th>标签进行定义
- 例子:
  - <table border="1">
  - <tr>
  - <th>Heading</th>
  - <th>Another Heading</th>
  - </tr>
  - <tr>
  - <td>row 1, cell 1</td>
  - <td>row 1, cell 2</td>
  - </tr>
  - <tr>
  - <td>row 2, cell 1</td>
  - <td>row 2, cell 2</td>
  - </tr>
  - </table>
表格中的空单元格:如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框.为了避免这种情况,在空单元格中添加一个空格占位符,就可以使得边框显示出来.
- 例子:
  - <table border="1">
  - <tr>
  - <td>row 1, cell 1</td>
  - <td>row 1, cell 2</td>
  - </tr>
  - <tr>
  - <td>&nbsp</td>
  - <td>row 2, cell 2</td>
  - </tr>

</table>

14.HTML列表

HYML支持无序、有序和定义列表
无序列表
- 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
- 无序列表始于<ul>标签. 每个列表项始于<li>.
- 例子:
  - <ul>
  - <li>coffee</li>
  - <li>milk</li>
  - </ul>
- ⚠列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
有序列表
- 有序列表也是一列项目,列表项目使用数字进行标记
- 有序列表始于<ol>标签,每个列表项始于<li>标签
- 例子:
  - <ol>
  - <li>coffee</li>
  - <li>milk</li>
  - </ol>
定义列表
- 自定义列表不仅仅是一列项目,而是项目及其注释的组合
- 自定义列表以<dl>标签开始, 每个自定义列表项以<dt>开始, 每个自定义列表项的定义以<dd>开始

15.HTML块元素和行内元素

可以通过<div>和<span>将HTML元素组合起来。
HTML块元素
- 大多数HTML元素被定义为块级元素或内联元素
- 块级元素在浏览器显示时,通常会以新行来开始(和结束).
- 例子:<h1>, <p>, <ul>, <table>
HTML内联元素
- 内联元素在显示时通常不会以新行开始
- 例子:<b>, <td>, <a>, <img>
HTML<div>元素
- HTML<div>元素是块级元素,它是可用于组合其他HTML元素的容器.
- <div>元素没有特定的含义. 除此之外,由于它属于块级元素, 浏览器会在其前后显示折行.
- 如果与CSS一同使用, <div>元素可用于对大的内容块设置样式属性.
- <div>元素的另一个常见的用途是文档布局. 它取代了使用表格定义布局的老式方法. 使用<table>元素进行文档布局不是表格的正确用法. <table>元素的作用是显示表格化的数据.
HTML<span>元素
- HTML<span>元素是内联元素,可用作文本的容器.
- <span>元素也没有特定的含义.
- 当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性

16.HTML类

对HTML进行分类(设置类), 使我们能够为元素的类定义CSS样式
为相同的类设置相同的样式,或者为不同的类设置不同的样式
分类块级元素
- HTML<div>元素是块级元素. 它能够用作其他HTML元素的容器
- 设置<div>元素的类,是我们能够为相同的<div>元素设置相同的类
分类行内元素
- HTML<span>元素是行内元素,能够用作文本的容器
- 设置<span>元素的类,能够为相同的<span>元素设置相同的样式

17.HTML id 属性

HTML id 属性用于为HTML元素指定唯一的id
一个HTML文档中不能存在多个有相同id的元素
使用id属性
- id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
- id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
- id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
CLASS与ID的差异
- 同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用
通过ID和链接实现HTML书签
- HTML 书签用于让读者跳转至网页的特定部分。要使用书签，您必须首先创建它，然后为它添加链接。然后，当单击链接时，页面将滚动到带有书签的位置。
在javascript中使用id属性
- JavaScript 也可以使用 id 属性为特定元素执行某些任务。
- JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
⚠
- id 属性用于为 HTML 元素指定唯一的 id
- id 属性的值在 HTML 文档中必须是唯一的
- CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
- id 属性的值区分大小写
- id 属性还可用于创建 HTML 书签
- JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
18.HTML Iframe
定义:iframe用于在网页内显示网页。
添加 iframe 的语法
- <iframe src="URL"></iframe> ⚠URL指向隔离页面的位置
Iframe - 设置高度和宽度
- height 和 width 属性用于规定 iframe 的高度和宽度。
- 属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
Iframe - 删除边框
- frameborder 属性规定是否显示 iframe 周围的边框。
- 设置属性值为 "0" 就可以移除边框
使用 iframe 作为链接的目标
- iframe 可用作链接的目标（target）。
- 链接的 target 属性必须引用 iframe 的 name 属性
19.HTML JavaScript
HTML <script> 标签
- HTML <script> 标签用于定义客户端脚本（JavaScript）。
- <script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
- JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
- 如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。
HTML <noscript> 标签
- HTML <noscript> 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户
20.HTML 文件路径
HTML 文件路径
- 文件路径描述了网站文件夹结构中某个文件的位置。
- 文件路径会在链接外部文件时被用到：网页、图像、样式表和JavaScript
绝对文件路径
- 绝对文件路径是指向一个因特网文件的完整 URL
相对路径
- 相对路径指向了相对于当前页面的文件。
21.HTML 头部元素
HTML <head> 元素
- <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
- 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
- <title> 标签定义文档的标题。
- title 元素在所有 HTML/XHTML 文档中都是必需的。
- title 元素能够：
  - 定义浏览器工具栏中的标题
  - 提供页面被添加到收藏夹时显示的标题
  - 显示在搜索引擎结果中的页面标题
HTML <base> 元素
- <base> 标签为页面上的所有链接规定默认地址或默认目标（target）
HTML <link> 元素
- <link> 标签定义文档与外部资源之间的关系。
  
  <link> 标签最常用于连接样式表
HTML <style> 元素
- <style> 标签用于为 HTML 文档定义样式信息。
HTML <meta> 元素
- 元数据（metadata）是关于数据的信息。
- <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
- 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
- <meta> 标签始终位于 head 元素中。
- 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
HTML <script> 元素
- <script> 标签用于定义客户端脚本，比如 JavaScript。
22.HTML 布局
使用 <div> 元素的 HTML 布局
- 注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
使用表格的 HTML 布局
- 注释：<table> 元素不是作为布局工具而设计的。
23.HTML 响应式 Web 设计
定义:
- RWD 指的是响应式 Web 设计（Responsive Web Design）
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
使用 Bootstrap
- 另一个创建响应式设计的方法，是使用现成的 CSS 框架。
- Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
24.HTML 计算机代码元素
HTML 计算机代码格式
- 通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
- 在显示计算机代码示例时，并不需要如此。
- <kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。
HTML 键盘格式
- HTML <kbd> 元素定义键盘输入
HTML 样本格式
- HTML <samp> 元素定义计算机输出
HTML 代码格式
- ⚠<code> 元素不保留多余的空格和折行
HTML 变量格式化
- HTML <var> 元素定义数学变量
25.HTML 字符实体
定义:HTML 字符实体
HTML 实体
- 在 HTML 中，某些字符是预留的。
- 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
- 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
不间断空格
- HTML 中的常用字符实体是不间断空格
- 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。
26.HTML 符号
定义:键盘上不存在的字符也可以由实体代替。
27.在 HTML 中使用表情符号
定义:表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗
Emoji
- 表情符号（Emoji）类似图像或图标，但它们并不是。
- 它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。
- 提示：UTF-8 几乎涵盖世界上所有字符和符号。
HTML charset 属性
- 为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。
- 提示：如果未规定，UTF-8 则是 HTML 中的默认字符集。
UTF-8 字符
- 很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们
28.HTML 编码（字符集）
ASCII 字符集
- ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。
- ASCII 使用 32 到 126 的值表示字母、数字和符号。
- ASCII 不使用 128 到 255 之间的值。
ANSI 字符集
- 对于 0 到 127 的值，ANSI 与 ASCII 相同。
- ANSI 有一组专有的字符，其值从 128 到 159。
- 对于 160 到 255 的值，ANSI 与 UTF-8 相同。
ISO-8859-1 字符集
- 对于 0 到 127 的值，8859-1 与 ASCII 相同。
- 8859-1 不使用 128 到 159 之间的值。
- 对于从 160 到 255 的值，8859-1 与 UTF-8 相同。
UTF-8 字符集
- 对于 0 到 127 的值，UTF-8 与 ASCII 相同。
- UTF-8 不使用 12 8到 159 之间的值。
- 对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。
- UTF-8 从值 256 继续，包含超过 10000 个不同字符。
- 如需深入研究，请阅读我们完整的 HTML 字符集参考手册。
@charset CSS 规则
- 可以使用 CSS @charset 规则来指定样式表中使用的字符编码
29.HTML 统一资源定位器
- URL 也被称为网址。
- URL 可以由单词组成，比如 “baidu.com.cn”，或者是因特网协议（IP）地址：202.108.22.50。
URL - Uniform Resource Locator
- 当点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
- 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
- 网址，比如 HTML 教程，遵守以下的语法规则：
  - ```
  scheme://host.domain:port/path/filename
```
- 解释：
  - scheme - 定义因特网服务的类型。最常见的类型是 http
  - host - 定义域主机（http 的默认主机是 www）
  - domain - 定义因特网域名，比如 w3school.com.cn
  - :port - 定义主机上的端口号（http 的默认端口号是 80）
  - path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  - filename - 定义文档/资源的名称
30.HTML 框架
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
框架结构标签（<frameset>）
- 框架结构标签（<frameset>）定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
基本注意事项:
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
- 为不支持框架的浏览器添加 <noframes> 标签。
- 重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
31.HTML 背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
- URL可以是相对地址，也可以使绝对地址。
- 提示：如果你打算使用背景图片，需要紧记几点：
  - 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
  - 背景图像是否与页面中的其他图象搭配良好。
  - 背景图像是否与页面中的文字颜色搭配良好。
  - 图像在页面中平铺后，看上去还可以吗？
  - 对文字的注意力被背景图像喧宾夺主了吗？
基本的注意事项 - 有用的提示：
- <body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
- 应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
32.HTML URL 字符编码
URL编码会将字符转换为可通过因特网传输的格式
URL - 统一资源定位器
- Web 浏览器通过 URL 从 web 服务器请求页面。
- URL 是网页的地址，比如 http://www.baidu.com.cn。
URL 编码
- URL 只能使用 ASCII 字符集来通过因特网进行发送。
- 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
- URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
- URL 不能包含空格。URL 编码通常使用 + 来替换空格。
33.HTML <!DOCTYPE>
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
<!DOCTYPE> 声明
- Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文
- HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
- <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。