HTML——基础结构以及常见标签
一、HTML基础结构
HTML基础结构是指HTML文档的基本框架和组成部分，包括文档声明、html标签、head标签和body标签。
1. 文档声明
- HTML文档通常以文档声明开始，用于告诉浏览器文档使用的HTML版本。
- HTML5的文档声明为
<!DOCTYPE html>。
代码如下：
<!DOCTYPE html>
2. html标签
- 标签是HTML文档的根元素，包含整个HTML文档的内容。
- 通常包括lang属性来指定文档的语言。
代码如下：
<!DOCTYPE html>
<html lang="en"><!-- HTML文档内容 -->
</html>
3. head标签
- 标签用于包含文档的元数据，如文档标题、字符集、关键字、样式表和脚本等。
- 不会在浏览器中显示内容。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document Title</title><link rel="stylesheet" href="styles.css">
</head>
<body><!-- 页面内容 -->
</body>
</html>
4. body标签
- 标签包含文档的可见内容，如文本、图像、链接等。
- 所有用户看到的内容都应该放在 标签内。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document Title</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是标题</h1><p>这是段落文本。</p>
</body>
</html>
二、常见标签
HTML中的标题、段落和换行标签用于排版和组织文本内容。
1. 标题标签 <h1> - <h6>
<h1> 到 <h6>标签用于定义标题的级别，数字越小，级别越高。- 用于突出显示文档中的重要标题内容。
代码如下：
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
2. 段落标签 <p>
<p>标签用于定义段落文本。- 用于将文本内容分段显示，增强可读性。
代码如下：
<p>这是一个段落文本。</p>
<p>这是另一个段落文本。</p>
3. 换行标签 <br>
<br>标签用于在文本中插入换行。- 适用于在不形成新段落的情况下换行。
代码：
<p>这是第一行。<br>这是第二行。</p>
HTML中的列表标签用于创建有序列表、无序列表和定义列表。
4. 无序列表 <ul>
- 用于创建项目之间没有顺序关系的列表。
- 列表项使用
<li>标签表示。
代码：
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
5. 有序列表 <ol>
- 用于创建有序列表，其中项目按照特定顺序排列。
- 列表项同样使用
<li>标签表示。
代码：
<ol><li>First item</li><li>Second item</li><li>Third item</li>
</ol>
6. 定义列表 <dl> 、 <dt> 、 <dd>
- 用于创建术语及其定义的列表。
<dl>表示整个定义列表，<dt>表示术语，<dd>表示对应的定义。
代码：
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd><dt>CSS</dt><dd>Cascading Style Sheets</dd>
</dl>
7. 图片标签是 <img>
HTML中的图片标签是 <img> 标签，用于在网页中插入图像。
1. <img> 标签基本语法
- 标签是一个空标签，没有结束标签。
- 通过 src 属性指定图像的URL。
- 可以使用 alt 属性为图像添加替代文本，用于辅助阅读和SEO。
代码：
<img src="image.jpg" alt="图像描述">
2. 常用属性
- src ：指定图像的URL。
- alt ：指定图像的替代文本。
- width ：指定图像的宽度。
- height ：指定图像的高度。
- title ：指定图像的标题，鼠标悬停时显示。
- style ：指定图像的样式，如大小、边框等。
代码：
<img src="image.jpg" alt="图像描述" width="200" height="150" title="图像标题" style="border: 1px solid black;">
3. 响应式图片
- 使用 width 属性设置百分比值可以创建响应式图片，根据父元素的大小自动调整图像大小。
代码：
<img src="image.jpg" alt="图像描述" style="width: 100%;">
4. 使用相对路径和绝对路径
- 可以使用相对路径或绝对路径指定图像的URL，根据实际情况选择合适的路径。
代码：
<!-- 相对路径 -->
<img src="images/logo.png" alt="Logo"><!-- 绝对路径 -->
<img src="https://www.example.com/image.jpg" alt="图像">
8. 超链接标签
HTML中的超链接标签是 <a> 标签，用于创建链接到其他页面或资源的链接。
1. <a> 标签基本语法`
- 标签用于创建超链接，需要通过 href 属性指定链接的目标URL。
- 可以包含文本、图像或其他HTML元素作为链接内容。
代码：
<a href="https://www.example.com">文本</a>
2. 常用属性
- href ：指定链接的目标URL。
- target ：指定链接如何打开，常见取值包括 _self （在当前窗口打开）、 _blank （在新窗口打开）、 _parent （在父窗口打开）等。
- title ：指定链接的标题，鼠标悬停时显示。
- rel ：指定与链接资源的关系，如 nofollow （告诉搜索引擎不要跟踪此链接）。
代码：
<a href="page.html" target="_blank" title="Page Title" rel="nofollow">文本</a>
3. 链接到页面内部位置
- 可以使用锚点（ # ）来链接到页面内的特定位置。
代码：
<a href="#section2">Jump to Section 2</a>
...
<h2 id="section2">Section 2</h2>
4. 链接到电子邮件地址
- 可以使用 mailto: 协议链接到电子邮件地址。
代码：
<a href="mailto:info@example.com">Email</a>
9. 表单项标签
HTML中常见的表单项标签用于创建各种表单元素，如文本框、复选框、单选按钮、下拉框等。
1. 文本框 <input type="text">
- 用于输入文本信息。
- type=“text” 指定文本框类型。
代码：
<input type="text" name="username" placeholder="Enter your username">
2. 密码框 <input type="password">
- 用于输入密码信息，输入内容会被隐藏。
- type=“password” 指定密码框类型。
代码：
<input type="password" name="password" placeholder="Enter your password">
3. 复选框 <input type="checkbox">
- 用于选择多个选项。
- type=“checkbox” 指定复选框类型。
代码：
<input type="checkbox" name="apple" value="1"> 苹果
<input type="checkbox" name="banana" value="2"> 香蕉
4. 单选按钮 <input type="radio">
- 用于选择单个选项。
- type=“radio” 指定单选按钮类型。
代码：
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
5. 下拉框 <select> 和 <option>
<select>定义下拉框，<option>定义选项。- 用户可以从下拉列表中选择一个选项。
代码：
<select name="city"><option value="paris">Paris</option><option value="tokyo">Tokyo</option>
</select>
6. 提交按钮 <input type="submit">
- 用于提交表单数据。
- type=“submit” 指定按钮类型为提交按钮。
代码：
<input type="submit" value="Submit">