HTML 知识总结-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59276096/article/details/145311983

一、 HTML 概念

HTML 即超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。它通过各种标签来描述网页的结构和内容，浏览器会根据这些标签来渲染出可视化的网页。HTML 不是一种编程语言，而是一种标记语言，它使用标签对文本、图像、链接等元素进行标记，以实现网页的布局和功能。

二、常见标签

HTML 标签通常是成对出现的，包含一个开始标签和一个结束标签。标签可以嵌套，形成层次结构。

<html>: 定义 HTML 文档的根元素。
<head>: 包含文档的元数据，如标题、字符集、样式表等。
<title>: 定义文档的标题，显示在浏览器的标题栏或标签页上。
<body>: 包含文档的主体内容，如文本、图片、链接等。

三、文档结构标签

<!DOCTYPE html>: 声明文档类型，告诉浏览器使用 HTML5 标准。
<html>: 定义 HTML 文档的根元素。
<head>: 包含文档的元数据。
<body>: 包含文档的主体内容。

四、文本标签

<h1> 到 <h6>: 定义标题，<h1> 是最高级标题，<h6> 是最低级标题。
<p>: 定义段落。
<br>: 插入换行符。
<hr>: 插入水平线。
<strong>: 定义加粗文本，表示重要内容。
<em>: 定义斜体文本，表示强调内容。
<span>: 用于对文档中的行内元素进行分组或样式化。

五、格式标签

<b>: 定义粗体文本。
<i>: 定义斜体文本。
<u>: 定义下划线文本。
<sub>: 定义下标文本。
<sup>: 定义上标文本。
<pre>: 定义预格式化文本，保留空格和换行。
<code>: 定义计算机代码文本。

六、列表标签

<ul>: 定义无序列表。
<ol>: 定义有序列表。
<li>: 定义列表项。
<dl>: 定义定义列表。
<dt>: 定义定义列表中的术语。
<dd>: 定义定义列表中的描述。

七、图片标签

<img>: 插入图片。
- src: 指定图片的 URL。
- alt: 指定图片的替代文本。
- width: 指定图片的宽度。
- height: 指定图片的高度。

八、音视频标签

<audio>: 插入音频。
- src: 指定音频文件的 URL。
- controls: 显示音频控件。
<video>: 插入视频。
- src: 指定视频文件的 URL。
- controls: 显示视频控件。
- width: 指定视频的宽度。
- height: 指定视频的高度。

九、链接标签

<a>: 定义超链接。
- href: 指定链接的目标 URL。
- target: 指定链接的打开方式（如 _blank 在新窗口打开）。
<a>标签中的target属性
_self：这是默认值，表示在当前窗口或框架中打开链接文档，即覆盖当前页面内容。例如：<a href="page2.html" target="_self">在当前窗口打开</a>。
_blank：在新的浏览器窗口或标签页中打开链接文档。常用于希望用户在访问链接后仍能保留当前页面的情况，方便用户对比或返回原页面。例如：<a href="https://www.example.com" target="_blank">在新窗口打开</a>。
_parent：在父框架中打开链接文档。如果当前页面是嵌套在框架集（<frameset>）中的框架页面，_parent会使链接在包含当前框架的父框架中打开。
_top：在整个浏览器窗口中打开链接文档，会移除所有框架并在顶级窗口中显示链接内容。当页面存在多层嵌套框架时，使用_top可确保链接在最顶层窗口打开。
自定义框架名称：可以指定一个已存在的框架的名称作为target的值，这样链接将在指定名称的框架中打开。例如，如果有一个框架的name属性设置为myFrame，那么<a href="page3.html" target="myFrame">在myFrame框架中打开</a>会在名为myFrame的框架中显示page3.html的内容。

十、语义标签

<header>: 定义文档或节的页眉。
<footer>: 定义文档或节的页脚。
<nav>: 定义导航链接。
<section>: 定义文档中的节。
<article>: 定义独立的文章内容。
<aside>: 定义页面内容之外的内容（如侧边栏）。
<main>: 定义文档的主要内容。
<figure>: 定义独立的流内容（如图片、图表等）。
<figcaption>: 定义 <figure> 元素的标题。

十一、表单标签

<form>: 定义表单。
- action: 指定表单提交的 URL。
- method: 指定表单提交的方法（如 GET 或 POST）。
<input>: 定义输入字段。
- type: 指定输入类型（如 text, password, email, submit ，radio，checkbox等）。
- name: 指定输入字段的名称。
- value: 指定输入字段的默认值。
<textarea>: 定义多行文本输入字段。
<label>: 定义表单控件的标签。
<select>: 定义下拉列表。
<option>: 定义下拉列表中的选项。
<button>: 定义按钮。
<fieldset>: 定义表单中的一组相关元素。
<legend>: 定义 <fieldset> 元素的标题。