当前位置：首页 > news >正文

HTML的初步学习

news 来源：原创 2025/6/12 19:03:40

1. `<img>` (图像标签)

作用: 在网页中插入图片。
常用属性:
- src: 指定图片的 URL (路径)。这是 必须的 属性。
- alt: 当图片无法显示时，显示的替代文本。 强烈建议添加，为了可访问性和 SEO。
- width: 设置图片的宽度。(尽量用 CSS 控制样式)
- height: 设置图片的高度。(尽量用 CSS 控制样式)

示例:

<img src="images/my-image.jpg" alt="一张日落的照片" width="500" height="300">

2. `<h1>` - `<h6>` (标题标签)

作用: 定义不同级别的标题。 <h1> 是最高级别的标题， <h6> 是最低级别的标题。
重要性: <h1> 应该用于页面上的主要标题，每个页面应该只有一个 <h1>。标题标签对 SEO 也很重要。

示例:

<h1>这是一个主要的标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>

3. `<hr>` (水平线标签)

作用: 创建一个水平分割线，用于分隔内容。
用法: 一个空标签，没有闭合标签。

示例:

<p>这是分割线之前的内容。</p>
<hr>
<p>这是分割线之后的内容。</p>

4. `<a>` (链接标签)

作用: 创建一个超链接，链接到其他页面、文件、位置或 URL。
常用属性:
- href: 指定链接的目标 URL。这是 必须的 属性。
- target: 指定在何处打开链接。常用的值有 _blank (在新标签页或窗口中打开) 和 _self (在当前页面打开，默认值)。

示例:

<a href="https://www.example.com" target="_blank">访问 Example 网站</a>
<a href="about.html">关于我们</a>
<a href="mailto:me@example.com">发送邮件给我</a>

5. `<video>` (视频标签)

作用: 在网页中嵌入视频。
常用属性:
- src: 指定视频的 URL。虽然可以，但通常不用这个属性，而是用 <source> 子标签。
- controls: 显示视频播放控件 (播放/暂停按钮, 音量控制等)。 通常需要添加。
- width: 视频的宽度。(尽量用 CSS 控制样式)
- height: 视频的高度。(尽量用 CSS 控制样式)
- autoplay: 视频自动播放。(不推荐，用户体验不好)
- loop: 视频循环播放。
- muted: 静音播放。
使用 <source> 标签: 为了兼容不同的浏览器，可以使用多个 <source> 标签指定不同格式的视频文件。

示例:

<video width="640" height="360" controls><source src="videos/my-video.mp4" type="video/mp4"><source src="videos/my-video.webm" type="video/webm">您的浏览器不支持 video 标签。
</video>

6. `<audio>` (音频标签)

作用: 在网页中嵌入音频。
常用属性: 与 <video> 类似，包括 src, controls, autoplay, loop, muted。
使用 <source> 标签: 为了兼容不同的浏览器，可以使用多个 <source> 标签指定不同格式的音频文件。

示例:

<audio controls><source src="audio/my-audio.mp3" type="audio/mpeg"><source src="audio/my-audio.ogg" type="audio/ogg">您的浏览器不支持 audio 标签。
</audio>

7. `<p>` (段落标签)

作用: 定义一个段落。
用法: 用于组织文本内容。浏览器会自动在段落前后添加一些空白。

示例:

<p>这是一个段落。 这是段落中的一些文本。</p>
<p>这是另一个段落。 它可以包含更多的文本。</p>

8. `<b>` (粗体标签)

作用: 将文本设置为粗体。
注意: <b> 标签仅仅是为了样式上的呈现，不表示强调。如果想要强调文本，应该使用 <strong> 标签。

示例:

<p>这是一段包含 <b>粗体</b> 文本的段落。</p>

9. `<strong>` (强调标签)

作用: 将文本设置为粗体，并且表示强调。这对屏幕阅读器和其他辅助技术很重要。
语义: <strong> 表示文本的重要性或严肃性。

示例:

<p><strong>警告！</strong> 这是一个非常重要的信息。</p>

10. `<div>` (division 标签)

作用: 定义一个文档中的区块 (division) 或区域。它是一个通用的容器，用于组织和分组 HTML 元素。
用法: 通常与 CSS 一起使用，用于布局和样式化网页。
特点: <div> 是一个块级元素，会占据一整行。

示例:

<div class="header"><h1>网站标题</h1><p>网站的描述。</p>
</div><div class="content"><h2>文章标题</h2><p>文章内容...</p>
</div>

11. `<span>` (span 标签)

作用: 一个内联的容器，用于包裹一小段文本或其他内联元素。
用法: 通常与 CSS 一起使用，用于样式化文本的特定部分。
特点: <span> 是一个内联元素，不会换行。

示例:

<p>这是一段文字，其中 <span class="highlight">一部分</span> 需要突出显示。</p>

12. `<table>`、`<tr>`、`<td>` (表格标签)

<table>: 定义一个表格。
<tr>: 定义表格中的一行 (table row)。
<td>: 定义表格中的一个单元格 (table data cell)。
其他常用的表格标签:
- <th> (table header cell): 定义表头单元格。
- <caption>: 定义表格的标题。

示例:

<table><caption>学生成绩表</caption><tr><th>姓名</th><th>科目</th><th>分数</th></tr><tr><td>张三</td><td>语文</td><td>80</td></tr><tr><td>李四</td><td>数学</td><td>90</td></tr>
</table>

13. `<form>` (表单标签)

作用: 创建一个 HTML 表单，用于收集用户输入的数据。
常用属性:
- action: 指定表单数据提交到的 URL。
- method: 指定提交表单数据的 HTTP 方法 (GET 或 POST)。 POST 更常用，因为它更安全。
表单元素: <form> 标签内部可以包含各种表单元素，例如：
- <input>: 用于创建文本框、密码框、单选按钮、复选框等。
- <textarea>: 用于创建多行文本输入框。
- <select>: 用于创建下拉列表。
- <button>: 用于创建按钮。
- <label>: 为表单元素添加标签，提高可访问性。

示例:

<form action="/submit-form" method="post"><label for="name">姓名:</label><br><input type="text" id="name" name="name"><br><br><label for="email">邮箱:</label><br><input type="email" id="email" name="email"><br><br><input type="submit" value="提交">
</form>