写个笔记对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
