HTML 基础内容课程笔记

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签（tag）组成，每个标签标示着不同的内容或元素。

一个基本的 HTML 文档由以下几个部分组成：

htmlCopy Code<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>：这是文档类型声明，告诉浏览器使用 HTML5 来解析网页。
<html>：HTML 文档的根元素。
<head>：头部部分，包含了对页面的描述和引入外部资源的链接。
<title>：指定页面的标题，将显示在浏览器的标题栏上。
<body>：网页的主体部分，包含我们看到的实际内容。

下面我们来了解一些常用的 HTML 标签：

1. 文本标签

<h1> 到 <h6>：标题标签，用于定义不同级别的标题。例如，<h1> 表示最高级别的标题，而 <h2> 表示次级标题。
<p>：段落标签，用于定义一个段落。例如，<p>这是一个段落。</p>。
<b> / <strong>：加粗文本。例如，<b>这是加粗文本。</b>。
<i> / <em>：斜体文本。例如，<i>这是斜体文本。</i>。
<u>：下划线文本。例如，<u>这是下划线文本。</u>。

2. 链接标签

<a>：链接标签，用于创建超链接。例如，<a href="http://www.example.com">点击这里</a> 可以创建一个指向 "www.example.com" 的超链接。

3. 图像标签

<img>：图像标签，用于插入图片。例如，<img src="image.jpg" alt="图片描述"> 可以插入一张名为 "image.jpg" 的图片，并附带图片描述。

4. 列表标签

<ul>

<ol>

：无序列表 / 有序列表。无序列表使用

<ul>

标签，例如：

htmlCopy Code<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表使用

<ol>

标签，例如：

htmlCopy Code<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

5. 表格标签

<table>

：表格标签，用于创建表格。

htmlCopy Code<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

这段代码将创建一个包含有两列的表格，第一行是表头，第二行是内容。

6. 表单标签

<form>：表单标签，用于创建表单。
<input>：输入控件，如文本框、复选框、按钮等。
<select> / <option>：下拉列表。
<textarea>：多行文本输入框。

<label>

：标签，与表单控件关联。例如：

htmlCopy Code<form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
</form>

这里的

<label>

标签为输入框创建了一个标签，通过

for

属性与输入框关联。

7. CSS 样式

CSS（Cascading Style Sheets）用于为 HTML 页面添加样式和布局。可以通过内联样式、嵌入样式表和外部样式表来定义 CSS 样式。

内联样式：在 HTML 元素的 style 属性中定义样式。例如，<p style="color: red; font-size: 16px;">这是一段红色且字号为 16px 的文本。</p>。

嵌入样式表：在

<head>

标签中使用

<style>

标签定义样式。例如：

htmlCopy Code<style>
    p {
        color: red;
        font-size: 16px;
    }
</style>

外部样式表：将样式定义放在一个独立的 CSS 文件中，然后在 HTML 文件中使用
```
<link>
```
标签引入外部样式表。例如：
```
htmlCopy Code<head>
    <link rel="stylesheet" href="styles.css">
</head>
```

8. 多媒体内容嵌入

音频：使用

<audio>

标签来嵌入音频文件。例如：

htmlCopy Code<audio src="audio.mp3" controls>
    您的浏览器不支持音频播放。
</audio>

视频：使用

<video>

标签来嵌入视频文件。例如：

htmlCopy Code<video src="video.mp4" controls>
    您的浏览器不支持视频播放。
</video>

以上是 HTML 的基础内容介绍，包括 HTML 文档结构、常用的 HTML 标签，以及如何使用 CSS 添加样式和布局，以及如何嵌入多媒体内容。掌握这些基础知识将帮助您开始创建简单的网页。

html基础|青训营