HTML（超文本标记语言）是用于创建网页的标准标记语言。以下是 HTML 的基本语法格式：
文档声明
位于 HTML 文件的开头，告知浏览器使用的 HTML 版本，常见的有：
<!DOCTYPE html> 表示 HTML5 文档类型。
<html> 标签
这是 HTML 文档的根标签，所有其他的 HTML 元素都必须嵌套在 <html> 标签内。
<head> 标签
包含文档的元数据和相关的配置信息
<title>
定义网页的标题，显示在浏览器的标题栏或标签页上。<title>网页名称</title>
<meta>
用于提供关于文档的元数据，常见的属性如 charset 用于指定字符编码，name 和 content 用于定义各种描述信息，如页面描述、关键词等，以利于搜索引擎优化。
字符编码：<meta charset="UTF-8">
页面描述：<meta name="description" content="这是一个关于网页内容的简短描述">
关键词：<meta name="keywords" content="html, 网页开发, 示例">
<link>
用于链接外部资源，如 CSS 样式表、图标等。
链接 CSS 样式表：<link rel="stylesheet" type="text/css" href="styles.css">
<script>
可以嵌入或链接 JavaScript 脚本。
嵌入脚本：<script>console.log('Hello World!');</script>
引用外部脚本：<script src="script.js"></script>
<style> ：用于在 HTML 文档中直接编写 CSS 样式。
<style>h1 { color: red; }</style>
<body> 标签
分区标签
<div>：用于划分页面区域，进行布局。
div class="header">
<h1>网页标题</h1>
</div>
<div class="main-content">
<p>这是主要内容区域。</p>
</div>
<div class="sidebar">
<ul>
<li>侧边栏项目 1</li>
<li>侧边栏项目 2</li>
</ul>
</div>
<div class="footer">
<p>版权信息</p>
</div>
文本相关标签
1. <p> 标签（段落标签）：用于定义一个段落。
示例：<p>这是一个段落的文本。</p>
2. <h1> 到 <h6> 标签（标题标签）：用于定义不同级别的标题，<h1> 是最大的标题，<h6> 是最小的标题。
示例：<h1>一级标题</h1> <h2>二级标题</h2>
3. <span> 标签：用于对行内的文本进行样式设置或操作。
示例：<p>这是一段文本 <span style="color:red;">其中这部分是红色的</span></p>
4. <b> 标签（加粗标签）：使文本加粗显示。
示例：<b>这部分文本加粗</b>
5. <i> 标签（斜体标签）：使文本以斜体显示。
示例：<i>这部分文本是斜体</i>
6. <u> 标签（下划线标签）：为文本添加下划线。
示例：<u>这部分文本有下划线</u>
7. <strong> 标签（强调标签）：通常表示文本的重要性，效果类似于 <b> 但语义更强调重要性。
示例：<strong>这是重要的文本</strong>
8. <em> 标签（强调标签）：用于强调文本，效果类似于 <i> 但语义更强调语气。
示例：<em>这是需要强调的文本</em>
9. <blockquote> 标签（引用块标签）：用于引用大块的文本。
示例：<blockquote>这是一段引用的大段文本。</blockquote>
10. <pre> 标签（预格式化文本标签）：保留文本中的空格、换行等格式。
示例：<pre> 这是 预格式化 的文本 </pre>
<p>这是一个段落的文本。</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一段文本 <span style="color:red;">其中这部分是红色的</span></p>
<b>这部分文本加粗</b>
<i>这部分文本是斜体</i>
<u>这部分文本有下划线</u>
<strong>这是重要的文本</strong><p>
<em>这是需要强调的文本</em>
<blockquote>这是一段引用的大段文本。</blockquote>
<pre> 这是 预格式化 的文本 </pre>
列表标签
<ul>（无序列表）和 <li>（列表项）。
<ul>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<ol>（有序列表）和 <li>（列表项）。
<ol>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ol>
图像标签
<img>：用于插入图片。
src：指定图像的路径，可以是相对路径或绝对路径，也可以是网络 URL 。
例如：<img src="image.jpg">alt：当图像无法显示时，显示的替代文本，对于可访问性很重要。
例如：<img src="image.jpg" alt="图片无法显示">width和height：设置图像的宽度和高度，可以是像素值或百分比。
例如：<img src="image.jpg" width="300" height="200">或<img src="image.jpg" width="50%" height="50%">
超链接标签
<a>：创建链接到其他页面或资源的超链接。
href：指定链接的目标地址，可以是网页、文件、电子邮件地址等。
例如：<a href="https://www.example.com">访问示例网站</a>target：指定链接打开的方式，常见的值有_self（在当前窗口或标签页中打开，默认值）、_blank（在新的窗口或标签页中打开）。
例如：<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>
表格标签
<table>：定义表格。<tr>：定义表格的行。<td>：定义表格的数据单元格。<th>：定义表格的表头单元格，通常表头单元格中的内容会加粗并居中显示。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
</body>
</html>
表单标签
<form>：用于定义表单区域。
action属性：指定表单数据提交的目标 URL。method属性：指定提交表单数据的方法，常见的值有GET和POST
<input>：用于创建输入字段，类型多样。
type属性：决定输入字段的类型，如text（文本输入）、password（密码输入）、radio（单选按钮）、checkbox（复选框）、submit（提交按钮）、reset（重置按钮）等。
<input type="text" name="username">
<input type="password" name="password">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="submit" value="提交">
<textarea>：用于创建多行文本输入区域。
rows和cols属性：分别指定行数和列数。
<textarea name="description" rows="5" cols="30"></textarea>
<select> 和 <option>：下拉列表。
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
<label> ：为表单元素添加标签，提高可访问性。
<label for="username">用户名：</label>
<input type="text" id="username">
标题标签
<h1> 到 <h6>：不同级别的标题。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
注释
注释以 <!-- 开头，以 --> 结束。
例如：<!-- 这是一段注释 -->
扫一扫
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
