写个笔记对HTML语法进行简单总结

HTML简介

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过一系列的标签（tags）和属性（attributes）来定义网页的结构和内容，浏览器根据这些标记来解析和显示网页。

基本结构

一个基本的HTML文档结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面主体内容 -->
    <h1>主标题</h1>
    <p>段落内容</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>：声明文档类型为HTML5。
<html>：HTML文档的根元素，lang属性指定语言。
<head>：包含文档的元数据，如字符集、视口设置、标题等。
<body>：包含网页的可见内容，如标题、段落、图像等。
核心概念
标签（Tags）
标签是HTML的核心组成部分，用于定义文档的结构和内容。标签通常成对出现，如<标签名>内容</标签名>，但也有自闭合标签如<img>。
常见标签：
<h1>到<h6>：标题标签，级别从高到低。
<p>：段落。
<a>：超链接。
<img>：图像。
<ul>、<ol>：列表。
<table>：表格。
<form>：表单。

属性（Attributes）

属性提供关于标签的额外信息，通常以name=”value”的形式出现在起始标签中。

常见属性

href：指定链接的URL。
src：指定图像或脚本的URL。
alt：图像的替代文本。
class、id：用于CSS样式或JavaScript操作。
元数据（Metadata）
元数据描述了HTML文档的信息，如字符集、作者、关键词等，通常放在部分。

1
2
<meta charset="UTF-8">
<meta name="author" content="作者名称">

HTML的作用

HTML：主要用于构建网页的结构框架，定义了网页上各种元素的类型和展示方式。它与CSS（层叠样式表）和JavaScript（脚本语言）结合使用，可以创建功能丰富、样式美观的动态网页。

CSS：负责网页的外观和布局，通过选择器和样式规则控制元素的显示效果。

JavaScript：为网页添加交互功能，如响应用户事件、动态更新内容等。

HTML语法

基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面内容 -->
    <h1>标题</h1>
    <p>段落内容</p>
    <script src="script.js"></script>
</body>
</html>

标签和属性

标签使用尖括号< >包裹，如
属性用于提供额外信息，格式为name=”value”

1
2
<img src="image.jpg" alt="描述文字">
<a href="https://example.com">链接文字</a>

常用标签

文本标签

1
2
3
4
5
6
<h1>到<h6>：标题标签，h1最大，h6最小
<p>：段落
<strong>：加粗
<em>：斜体
<br>：换行
<hr>：水平线

列表

1
2
3
4
5
6
7
8
9
<ul>：无序列表
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

<ol>：有序列表
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

链接

1
2
<a href="https://example.com">链接文字</a>
<a href="mailto:email@example.com">发送邮件</a>

图像

1
<img src="image.jpg" alt="描述文字" width="200" height="100">

表格

1
2
3
4
5
6
<table>
    <tr>：表格行
        <th>表头单元格</th>
        <td>普通单元格</td>
    </tr>
</table>

表单

1
2
3
4
5
6
7
8
9
10
11
12
<form action="/submit" method="post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password">
    <textarea name="description" rows="4" cols="50"></textarea>
    <select name="country">
        <option value="china">中国</option>
        <option value="usa">美国</option>
    </select>
    <input type="radio" name="gender" value="male"> 男
    <input type="checkbox" name="hobby" value="reading"> 阅读
    <input type="submit" value="提交">
</form>

多媒体

1
2
3
4
5
6
7
8
9
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频元素。
</audio>

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频元素。
</video>

布局

1
2
3
4
5
6
7
8
9
10
<div>：块级容器
<span>：行内容器

<header>：页眉
<nav>：导航栏
<main>：主要内容
<section>：内容区块
<article>：独立文章
<aside>：侧边栏
<footer>：页脚

注释

```html