HTML 基础知识

最新推荐文章于 2024-09-13 17:21:46 发布

陆仟

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量1.4k

点赞数 25

分类专栏： Web前端开发文章标签： html 前端

本文链接：https://blog.csdn.net/2302_77228054/article/details/142007359

版权

Web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在Web前端开发中，HTML（HyperText Markup Language）是基础和核心技术之一。它主要用于定义网页的结构和内容。

HTML 主体结构

1. <head>标签中常用的标签

1.1 常用的<meta />标签

常用的<meta />标签
<meta charset="UTF-8" />	定义字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />	用于响应式设计，设置视口属性。
<meta name="description" content="..." />	提供网页的描述，常用于搜索引擎结果中的摘要。
<meta name="keywords" content="..." />	定义网页的关键字（现代搜索引擎优化中这个标签的重要性已经降低）。
<meta http-equiv="refresh" content="..." />	定义页面刷新或重定向的行为。

1.2 常用的<link />标签

在 HTML 的 <link> 标签中，属性 rel、type 和 href 扮演了重要的角色。

1.2.1 `rel` 属性

作用: 定义当前文档与链接目标文档之间的关系。

rel 属性常见值
`stylesheet`	指定一个外部样式表文件，用于为当前文档应用样式。
`icon`	指定网页的图标（favicon），显示在浏览器的标签页、书签等地方。
`alternate`	指定替代版本的文档，例如不同语言版本。
`canonical`	指定页面的规范 URL，用于 SEO 优化，帮助搜索引擎识别内容的主版本。
`next`	指定文档的下一个相关文档，通常用于分页。
`prev`	指定文档的上一个相关文档，通常用于分页。

1.2.2 `type` 属性

作用: 指定链接目标文件的 MIME 类型（媒体类型），帮助浏览器正确处理资源。

`type` 属性常见值
`text/css`	用于 CSS 文件。
`image/x-icon`	用于图标文件（favicon），通常是 `.ico` 格式。
`image/png`	用于 PNG 图像文件。
`application/rss+xml`	用于 RSS 提要文件。
`application/atom+xml`	用于 Atom 提要文件。

注意: 现代浏览器可能会自动推断 MIME 类型，因此 type 属性在某些情况下可能不是必需的，但提供它可以确保浏览器正确处理资源。

1.2.3 `href` 属性

作用: 指定链接目标资源的 URL（可以是相对路径或绝对路径）。

`href` 属性常用方法
`href=`"`styles.css`"	指定外部样式表的 URL。
`href=`"`favicon.ico`"	指定网站图标的 URL。
`href=`"`https://example.com`"	指定外部资源的 URL（如果用作 `<link>` 标签的其他关系类型）。

示例

1. 引入外部样式表:

<link rel="stylesheet" type="text/css" href="styles.css" />

这里，rel 的值是 stylesheet，表示这是一个样式表链接；type 的值是 text/css，指示文件类型为 CSS；href 指向实际的 CSS 文件 URL。

2. 指定网页图标:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

这里，rel 的值是 icon，表示这是一个图标；type 的值是 image/x-icon，表示图标文件的类型；href 指向实际的图标文件 URL。

3. 指定 RSS 提要:

<link rel="alternate" type="application/rss+xml" href="feed.xml" />

这里，rel 的值是 alternate，表示这是一个替代版本的文档；type 的值是 application/rss+xml，表示 RSS 提要的 MIME 类型；href 指向实际的 RSS 文件 URL。

2. <body>标签中常用的标签

2.1 文本与文本格式标签

<p></p>	段落标签
<b></b>	加粗文本（推荐使用<strong>）
<strong></strong>	强调某段文本
<em></em>	强调某段文本（推荐使用<i>）
<i></i>	斜体文本
<br/>	换行标签
<hr/>	水平线
<u></u>	下划线文本（HTML5中不推荐使用，用CSS的text-decoration:underline 替换）
<del></del>	删除线文本
<hn></hn>	标题（n: 1~6）
<bdo></bdo>	覆盖默认的文本方向，使用 dir 属性，值可以是 "ltr"（从左到右）或 "rtl"（从右到左）
<sub></sub>	下标文本
<sup></sup>	上标文本
<details></details>	互式控件，用于显示额外的细节
<summary></summary>	为 <details> 元素定义标题
<dialog></dialog>	定义对话框或窗口，可通过 open 属性控制显示状态
<pre></pre>	原格式输出，保留空格和换行
<figure></figure>	用于组合图像及其说明
<figcaption></figcaption>	为 <figure> 元素定义标题
<mark></mark>	标记文本，用于突出显示文本

2.2 语义化标签

在 HTML5 中，语义化标签通常指的是具有特定意义的元素，这些标签用于描述文档的不同部分和结构，使文档内容的语义更加明确。

<div></div>	块状元素，代表一个区块
<span></span>	行内元素
<header></header>	头部标签
<footer></footer>	底部标签
<nav></nav>	导航标签
<address></address>	地址
<section></section>	块状元素，表示文档中的一个独立的部分
<article></article>	文章标签，表示文档中的一个自包含的内容
<aside></aside>	侧边栏，表示与主内容略相关的信息

2.3 列表标签

<ul></ul>	无序列表，用于表示没有特定顺序的项目
<ol></ol>	有序列表，用于表示按特定顺序排列的项目
<li></li>	列表项，用于定义无序或有序列表中的每一项
<dl></dl>	定义列表，用于描述术语及其定义
<dt></dt>	定义列表中的一个术语
<dd></dd>	为定义列表中的术语提供详细描述

2.4 超链接标签

<a> 标签 用于创建超链接，允许用户点击跳转到另一个页面或文档内的某个位置。href 属性指定目标地址，target 属性控制链接的打开方式。使用锚点可以在页面内创建跳转链接，方便用户快速定位到页面中的特定位置。

2.4.1 href 属性

作用: 指定链接目标的 URL 或页面内的锚点。

用法示例:

<a href="https://www.example.com">访问示例网站</a>

2.4.2 target 属性

作用: 定义链接打开的方式。

target 属性常用值
_self	默认值，在当前窗口或框架中打开链接。
`_blank`	在新窗口或标签页中打开链接。
`_parent`	在父框架中打开链接（如果存在父框架）。
`_top`	在整个窗口中打开链接，通常用于在最上层框架中打开链接。

2.4.3 锚点的实现

步骤:

1. 在要跳转到的目标位置的元素上设置 id 属性。例如：

<a id="one">到达的地方</a>

2. 在跳转的链接中，使用 # 加上目标元素的 id 来创建锚点链接。例如：

<a href="#one">点击跳转的地方</a>

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点示例</title>
</head>
<body>
    <h1>锚点示例</h1>
    <p><a href="#section1">跳转到第一部分</a></p>
    <p><a href="#section2">跳转到第二部分</a></p>

    <h2 id="section1">第一部分</h2>
    <p>这是第一部分的内容。</p>

    <h2 id="section2">第二部分</h2>
    <p>这是第二部分的内容。</p>
</body>
</html>

2.5 多媒体标签

2.5.1 图像标签

<img src="" alt="" width="" height="" title="" usemap="" />

src=""	用于指定图像的地址
width=""	设置图像的宽度
height=""	设置图像的高度
alt=""	当图像无法加载时显示的替代文本
title=""	设置图像的标题
usemap=""	关联图像映射

2.5.2 图像映射

<map name=""></map>

name=""

定义图像映射的名称，与 usemap 属性进行关联。

2.5.3 图像映射区域

<area shape="" coords="" href="" target="" />

shape=""	定义可点击区域的形状（如 rect, circle, poly）
coords=""	定义形状的坐标点（如矩形的四个角点、圆形的中心和半径等）
href=""	点击区域时跳转的地址
target=""	指定链接打开的方式（如 _blank, _self 等）

2.5.4 音频标签

<audio src="" controls loop></audio>

src=""	用于指定音频文件的地址
controls	显示播放控件
loop	循环播放

2.5.5 媒介资源标签

<source src="" type="" />

src=""	指定媒介资源的地址
type=""	指定资源的 MIME 类型

2.5.6 视频标签

<video controls poster="" loop></video>

controls	显示播放控件
poster=""	视频在播放前显示的图片
loop	循环播放

2.5.7 嵌入标签

<embed src="" width="" height="" />

src	用于指定要嵌入的媒体地址
width	设置嵌入内容的宽度
height	设置嵌入内容的高度

2.5.8 进度条标签

<progress min="" max="" value=""></progress>

min	最小值
max	最大值
value	当前值

2.5.9 度量标签

<meter min="" max="" value="" low="" high="" optimum=""></meter>

min	最小值
max	最大值
value	当前值
low	警告的最小值
high	警告的最大值
optimum	理想值

2.6 表格相关标签

<table></table>	表格标签：用于定义一个表格
<caption></caption>	表格标题：用于定义表格的标题
<tr></tr>	表格行：用于定义表格的一行
<th></th>	表头单元格：用于定义表格的表头单元格，通常用于显示列的标题内容默认居中并加粗
<td></td>	表格单元格：用于定义表格的普通单元格
<thead></thead>	表格头部：用于定义表格的头部区域通常用于放置表头单元格
<tbody></tbody>	表格主体：用于定义表格的主体区域通常用于放置表格的内容行
<tfoot></tfoot>	表格底部：用于定义表格的底部区域通常用于放置汇总行或脚注

2.7 表单相关标签

2.7.1 基本表单标签

1. <form>

<form>用于定义一个表单。

<form action="" method="">
    <!-- 表单内容 -->
</form>

action 属性指定表单数据提交的目标 URL。

method 属性指定数据提交的方式（get 或 post）。

2. <input>

<input>用于创建各种类型的输入控件。

<input type="text" name="" value="" />

type 属性定义控件的类型，如 text, password, radio, checkbox 等。

3. <textarea>

<textarea>用于创建多行文本输入区域。

<textarea name="" rows="" cols=""></textarea>

rows 和 cols 属性用于定义显示的行数和列数。

4. <select>

<select>用于创建下拉列表。

<select name="">
    <option value="">Option 1</option>
    <option value="">Option 2</option>
</select>

option 标签用于定义下拉列表的选项。

5. <button>

<button>用于创建按钮。

<button type="submit">Submit</button>

type 属性定义按钮的行为：submit（提交表单）、reset（重置表单）或 button（普通按钮）。

6. <label>

<label>用于为表单控件定义标签。

<label for="input-id">Label text</label>

for 属性指定要绑定的控件的 id。

7. <fieldset>

<fieldset>用于将表单控件分组。

<fieldset>
    <legend>Fieldset title</legend>
    <!-- 表单内容 -->
</fieldset>

legend 标签用于为分组定义标题。

8. <legend>

<legend>用于定义 <fieldset> 的标题。

<legend>Legend text</legend>

2.7.2 特殊输入类型（HTML5）

1. <input type="email" />

用于输入电子邮件地址，支持格式验证。

<input type="email" name="" value="" />

2. <input type="url" />

用于输入 URL 地址，支持格式验证。

<input type="url" name="" value="" />

3. <input type="number" />

用于输入数字，支持最小值、最大值和步进值设置。

<input type="number" name="" value="" min="" max="" step="" />

4. <input type="range" />

用于创建滑块控件，支持范围设置。

<input type="range" name="" value="" min="" max="" step="" />

5. <input type="date" />

用于输入日期，支持日期选择器。

<input type="date" name="" value="" />

6. <input type="time" />

用于输入时间，支持时间选择器。

<input type="time" name="" value="" />

7. <input type="week" />

用于输入周，支持选择周的控件。

<input type="week" name="" value="" />

8. <input type="month" />

用于输入月份，支持选择月份的控件。

<input type="month" name="" value="" />

9. <input type="datetime-local" />

用于输入本地日期和时间，支持完整时间选择器。

<input type="datetime-local" name="" value="" />

10. <input type="color" />

用于选择颜色，显示颜色选择器。

<input type="color" name="" value="" />

11. <input type="tel" />

用于输入电话号码。

<input type="tel" name="" value="" />

12. <input type="search" />

用于输入搜索查询。

<input type="search" name="" value="" />

2.7.3 其他表单控件

1. <datalist>

用于定义一组预定义选项供用户选择，通常与 <input> 结合使用。

<datalist id="list-id">
    <option value="Option 1">
    <option value="Option 2">
</datalist>

2. <optgroup>

用于在下拉列表中对选项进行分组。

<select name="">
    <optgroup label="Group 1">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="Option 3">Option 3</option>
    </optgroup>
</select>

3. <input type="hidden" />

用于在表单中存储隐含数据，这些数据不会被用户看到或修改。

<input type="hidden" name="" value="" />

2.7.4表单常用属性

`readonly`	输入域可以选择，但无法修改（只读）。
`disabled`	输入域无法获取焦点，无法选择，以灰色显示（禁用）。
`placeholder`	为输入域提供提示信息。
`required`	强制用户填写该表单项，否则会提示信息。
`min` 和 `max`	用于设置数值类型输入的最小值和最大值。
`multiple`	允许选择多个文件（适用于 `input[type=file]`）。
`pattern`	自定义验证规则（配合正则表达式）。
`step`	设定步进值或两个数值之间的间隔。
`novalidate`	取消表单验证（适用于 `form` 标签）。