HTML 基础 - Ke.ke

🤖AI 摘要

文章介绍 HTML 基础：

基础结构：HTML 文档由标签构成，含<!DOCTYPE html>声明、<html>根元素，其内部<head>含元数据等，<body>展示可见内容。
常见元素标签：文本内容、列表、链接与媒体、表单、表格等各有对应标签，如<h1> - <h6>标题、<ul>无序列表、<a>链接、<form>表单、<table>表格等。
HTML 属性：如id唯一标识、class指定样式类、style内联样式、href链接地址、src资源路径等。
HTML5 新特性：语义化标签增强结构与 SEO，本地存储提供客户端存储能力，多媒体支持原生音视频播放，<canvas>可动态绘图，Geolocation API 能获取地理位置信息。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

1. HTML 基础结构#

HTML（超文本标记语言）文档由标签（tag）组成，用于描述页面的结构、内容和布局。每个 HTML 文档通常包括以下几个主要部分：

1
<!DOCTYPE html>  <!-- 声明文档类型，告知浏览器使用 HTML5 -->
2
<html lang="zh">  <!-- HTML 文档的根元素，lang 属性定义语言 -->
3
  <head>  <!-- 文档的头部，包含元数据、外部资源引入等 -->
4
    <meta charset="UTF-8">  <!-- 字符集声明，确保正确显示中文 -->
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 视口设置，适配不同设备 -->
6
    <title>网页标题</title>  <!-- 网页的标题，在浏览器标签中显示 -->
7
    <link rel="stylesheet" href="styles.css">  <!-- 外部 CSS 文件 -->
8
    <script src="script.js"></script>  <!-- 外部 JavaScript 文件 -->
9
  </head>
10

11
  <body>  <!-- 文档的主体部分，网页的可见内容部分 -->
12
    <h1>欢迎访问我的网站</h1>  <!-- 主要标题 -->
13
    <p>这是一个段落内容。</p>  <!-- 段落内容 -->
14
  </body>
15

16
</html>

2. 常见的 HTML 元素与标签#

HTML 元素是由标签和内容组成的。标签由尖括号包裹，标签名通常为英文，标签对通常包含开始标签和结束标签，某些元素如 <img> 只是自闭合的标签。

2.1 文本内容标签#

<h1> 到 <h6>：标题标签，用于标识不同层级的标题，<h1> 为最高级标题，<h6> 为最低级。

1
<h1>主标题</h1>
2

3
<h2>副标题</h2>
4

5
○ 用途：标题标签有助于页面结构化，SEO（搜索引擎优化）也会根据标题标签的层级来理解页面内容。

<p>：段落标签，用于将文本分为多个段落。

1
<p>这是一个段落内容。</p>

<span>：内联元素标签，用于修改部分文本的样式。

1
<span style="color:red;">红色文本</span>

<strong>：表示强烈强调的文本，通常显示为加粗。

1
<strong>加粗文本</strong>

<em>：表示文本的强调部分，通常显示为斜体。

1
<em>斜体文本</em>

<br>：换行标签，用于插入换行符。

1
这是第一行<br>这是第二行

2.2 列表标签#

<ul>：无序列表，使用圆点或其他符号显示列表项。

1
<ul>
2
  <li>苹果</li>
3

4
  <li>香蕉</li>
5

6
  <li>橙子</li>
7

8
</ul>

<ol>：有序列表，列表项自动编号。

1
<ol>
2
  <li>第一项</li>
3

4
  <li>第二项</li>
5

6
  <li>第三项</li>
7

8
</ol>

<li>：列表项，用于表示无序或有序列表中的每个项目。

1
<li>列表项</li>

2.3 链接与媒体标签#

<a>：锚点标签，用于创建超链接，href 属性指定目标 URL。

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

常见属性：
href：链接目标地址。
target：指定链接的打开方式，_blank 表示在新窗口中打开。
<img>：图像标签，用于嵌入图片，src 属性指定图片的路径，alt 属性为图片提供替代文本。

1
<img src="logo.png" alt="网站Logo" width="200" height="100">

常见属性：
src：图片的源地址。
alt：图片的替代文本（对于无法显示图片或使用屏幕阅读器的用户非常重要）。
width 和 height：定义图片的显示尺寸。
<audio>：音频标签，用于播放音频文件。

1
<audio controls>
2
  <source src="audio.mp3" type="audio/mp3">
3
  您的浏览器不支持音频标签。
4
</audio>

<video>：视频标签，用于播放视频文件。

1
<video controls>
2
  <source src="movie.mp4" type="video/mp4">
3
  您的浏览器不支持视频标签。
4
</video>

2.4 表单标签#

<form>：表单标签，用于收集用户输入的数据。

1
<form action="/submit" method="post">
2
  <label for="name">姓名:</label>
3

4
  <input type="text" id="name" name="name">
5
  <input type="submit" value="提交">
6
</form>

<input>：输入框标签，接受用户输入。

1
<input type="text" placeholder="请输入用户名">
2
<input type="password" placeholder="请输入密码">

<textarea>：多行文本框，允许用户输入多行文本。

1
<textarea rows="4" cols="50">请输入多行文本...</textarea>

<select>：下拉框，用于选择一个或多个选项。

1
<select name="car" id="car">
2
  <option value="volvo">沃尔沃</option>
3

4
  <option value="saab">萨博</option>
5

6
  <option value="mercedes">梅赛德斯</option>
7

8
</select>

2.5 表格标签#

<table>：表格标签，用于定义表格结构。

1
<table border="1">
2
  <tr>
3
    <th>姓名</th>
4

5
    <th>年龄</th>
6

7
  </tr>
8

9
  <tr>
10
    <td>张三</td>
11

12
    <td>25</td>
13

14
  </tr>
15

16
  <tr>
17
    <td>李四</td>
18

19
    <td>30</td>
20

21
  </tr>
22

23
</table>

<tr>：表格行，用于定义表格的一行数据。
<th>：表头单元格，用于定义列标题。
<td>：表格数据单元格，用于显示表格中的数据。

3. HTML 属性#

HTML 元素可以通过属性来提供更多的特性和功能。常用的属性包括：

id：元素的唯一标识符，在文档中必须是唯一的，用于 CSS 样式、JavaScript 操作等。

1
<div id="header">欢迎来到我的网站</div>

class：元素的类名，可以为多个元素指定相同的类，以便应用相同的 CSS 样式。

1
<div class="container">内容</div>

style：用于在 HTML 元素内联设置样式。

1
<div style="color:red;">红色文本</div>

href：超链接的目标 URL 地址。

1
<a href="https://www.example.com">点击这里</a>

src：外部资源（如图像、脚本、视频）的路径。

1
<img src="image.jpg" alt="描述性文字">

alt：为图像提供描述性文本，当图像无法显示时，浏览器会显示该文本。

1
<img src="logo.png" alt="公司Logo">

placeholder：在文本输入框中显示的占位符，提示用户输入内容。

1
<input type="text" placeholder="请输入您的名字">

4. HTML5 新特性#

HTML5 为前端开发带来了许多新的功能和标签，使得网页更加丰富、交互性更强。常见的新特性包括：

语义化标签：#
<header>：页面头部区域。
<footer>：页面底部区域。
<article>：独立的内容区域，通常代表一篇文章。
<section>：文档中的独立部分，具有标题和内容。
<nav>：定义页面的导航区域。
本地存储：#
LocalStorage 和 SessionStorage 提供了客户端存储数据的能力，LocalStorage 数据持久化，SessionStorage 数据会话结束后失效。
示例：

1
localStorage.setItem('name', 'John');
2
console.log(localStorage.getItem('name'));

多媒体支持：#
<audio> 和 <video> 标签不再依赖 Flash，直接支持原生音频和视频播放。
Canvas：#

1
<canvas id="myCanvas" width="500" height="500"></canvas>

HTML5 引入了 <canvas> 元素，可以通过 JavaScript 动态绘制图形、动画、游戏等。
Geolocation API：#

1
navigator.geolocation.getCurrentPosition(function(position) {
2
console.log(position.coords.latitude, position.coords.longitude);
3
});

获取用户的地理位置信息，用于位置相关的应用（例如地图、定位服务等）。

1. HTML 基础结构#

2. 常见的 HTML 元素与标签#

2.1 文本内容标签#

2.2 列表标签#

2.3 链接与媒体标签#

2.4 表单标签#

2.5 表格标签#

3. HTML 属性#

4. HTML5 新特性#

语义化标签：#

本地存储：#

多媒体支持：#

Canvas：#

Geolocation API：#