HTML&CSS(二）---HTML常见标签

2.1标题标签

         HTML标题标签用于定义文档中的标题和子标题。HTML提供了六个级别的标题，分别是<h1>到<h6>，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。这些标签通常用于创建内容结构，帮助搜索引擎和读者理解文档的重要性和层次结构。

下面是标题标签的示例：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在HTML文档中，标题标签通常按照以下规则使用：

• <h1>标签通常用于页面主标题，即页面内容的主题。
• <h2>到<h6>标签用于子标题和更小的节标题，它们可以嵌套使用，以创建文档的结构和层次。

标题标签不仅在视觉上呈现大小不同的文本，而且在SEO（搜索引擎优化）中也扮演着重要角色。搜索引擎使用标题标签来确定页面内容的主题和结构，因此它们对于提高页面在搜索结果中的排名非常重要。

在使用标题标签时，应该遵循以下最佳实践：

• 只使用一个<h1>标签作为页面的主标题。
• 按照逻辑层次结构使用<h2>到<h6>标签。
• 避免跳过标题级别，以保持内容的逻辑流动。
• 不要仅为了文本的大小或加粗而使用标题标签，应该基于内容的结构使用它们。

正确使用标题标签可以提高网页的可访问性和用户体验，同时也有助于搜索引擎更好地理解和索引你的网页内容。

2.2段落标签

        HTML段落标签，即<p>标签，用于定义文档中的段落。它是HTML文档中最常见的文本容器元素之一。浏览器会在段落之间自动添加一些空白，以便于读者阅读。

以下是段落标签的基本用法：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

在HTML文档中，每个段落都应该使用<p>标签来定义。当你开始一个新的段落时，你应该关闭前一个段落标签并开始一个新的<p>标签。

段落标签的一些特点包括：

• 浏览器会在段落之间添加垂直空白，通常比文本行高要大，以便于区分不同的段落。
• 段落的内容会从新的一行开始，并且左右两边会有一定的边距。
• 段落内的文本会自动换行，如果文本过长，会自动调整到下一行。
• 段落可以包含文本、链接、图片、列表等其他HTML元素。

在使用<p>标签时，应该遵循以下最佳实践：

• 不要使用<p>标签仅仅为了添加空白或进行格式化，它应该用于定义文本的段落。
• 避免在<p>标签内部使用空段落（只有空白或不可见的字符），这可能会导致不必要的垂直空白。
• 确保每个段落都有明确的主题和内容，这有助于提高文档的可读性。

正确使用段落标签可以帮助创建结构清晰、易于阅读的网页内容。

2.3换行标签

        在HTML中，换行标签用于在不创建新段落的情况下强制文本换行。这可以通过使用<br>标签来实现。<br>是一个空标签，意味着它不需要闭合标签。

下面是换行标签的基本用法：

<p>这是一段文本。<br>这里强制换行。</p>

在这个例子中，<br>标签告诉浏览器在"这是一段文本"和"这里强制换行"之间插入一个换行符，但它们仍然属于同一个段落。

<br>标签应该谨慎使用，因为它会创建一个硬换行，这可能会在不同大小的屏幕或设备上导致不一致的布局。通常，最好使用CSS样式来控制文本的布局和换行，而不是依赖于<br>标签。例如，可以使用CSS的white-space属性来控制文本中的空白和换行。

然而，在某些情况下，例如诗歌、地址或简历中的简短列表，使用<br>标签可能是合适的，因为它可以保持文本的简短和简洁，同时确保信息以期望的方式呈现。

在使用<br>标签时，应该遵循以下最佳实践：

• 不要过度使用<br>标签，这可能会导致页面布局混乱。
• 考虑使用CSS来控制文本的换行和布局，以实现更好的响应式设计。
• 在需要手动控制文本换行的地方使用<br>标签，例如在诗歌或地址中。

正确使用换行标签可以帮助你在网页中创建更精确的文本布局。

2.4列表标签

        HTML 提供了多种列表标签，用于在网页中创建不同类型的列表。主要有三种类型的列表：无序列表、有序列表和定义列表。

1. 无序列表（Unordered Lists）：用于创建没有特定顺序的列表。无序列表使用<ul>标签定义，列表项使用<li>标签。浏览器通常会在每个列表项前显示一个圆点。

   <ul>
       <li>苹果</li>
       <li>香蕉</li>
       <li>橙子</li>
   </ul>
   

2. 有序列表（Ordered Lists）：用于创建有特定顺序的列表。有序列表使用<ol>标签定义，列表项同样使用<li>标签。浏览器通常会在每个列表项前显示一个数字或字母。

   <ol>
       <li>第一步</li>
       <li>第二步</li>
       <li>第三步</li>
   </ol>
   

3. 定义列表（Description Lists）：用于创建术语及其定义的列表。定义列表使用<dl>标签定义，术语使用<dt>标签，定义使用<dd>标签。

   <dl>
       <dt>HTML</dt>
       <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
       <dt>CSS</dt>
       <dd>层叠样式表，用于描述网页的视觉效果和布局。</dd>
   </dl>
   

   列表可以嵌套，即在一个列表项中包含另一个列表。例如，一个无序列表中可以包含一个有序列表，反之亦然。

<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>菠菜</li>
            <li>胡萝卜</li>
        </ul>
    </li>
</ul>

2.5超链接标签

        在HTML中，超链接是通过<a>标签创建的，它允许用户点击跳转到其他网页、文件、位置或任何其他资源。<a>标签是锚点（anchor）的缩写，它可以是外部链接、内部链接、锚点链接或下载链接等。

以下是超链接标签的基本用法：

<a href="目标网址或路径">链接文本</a>

例如，创建一个指向外部网站的链接：

<a href="http://www.example.com">访问 Example 网站</a>

或者，创建一个指向同一网站内部页面的链接：

<a href="about.html">关于我们</a>

超链接的一些重要属性包括：

• href：指定链接的目标URL或路径。
• target：指定链接如何打开（例如，_blank在新窗口中打开链接）。
• title：提供链接的额外信息，通常以工具提示的形式显示。
• rel：指定链接与当前文档的关系（例如，nofollow告诉搜索引擎不要跟踪链接）。

除了链接到其他网页，<a>标签还可以用于创建锚点，允许用户跳转到同一页面的不同部分。这需要为链接指定一个#加上锚点名称，并在页面的相应位置使用id属性创建一个锚点。

例如，创建一个锚点链接：

<a href="#section1">跳转到第一部分</a>

...

<h2 id="section1">第一部分</h2>

在这个例子中，点击“跳转到第一部分”的链接会将用户带到页面中id为section1的元素位置。

超链接是网页的核心功能之一，它们使得万维网成为互联的网络。正确使用超链接可以提高用户体验，帮助用户导航和探索网站内容。

2.6多媒体标签

        HTML 提供了多种标签用于嵌入多媒体内容，如图片、音频和视频。这些标签允许你在网页中轻松地添加和展示各种媒体元素。

1.图片标签（Image）：<img>标签用于嵌入图片。它是一个空标签，意味着它不需要闭合标签。<img>标签的主要属性是src，用于指定图片文件的URL路径，以及alt，用于提供图片的替代文本，这在图片无法显示时非常有用。

<img src="image.jpg" alt="描述图片内容" width="300" height="200">

2.音频标签（Audio）：<audio>标签用于嵌入音频内容。它可以包含多个<source>子标签，以便提供不同格式的音频文件，以确保兼容性。<audio>标签支持多种音频格式，如MP3、WAV和Ogg。

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素。
</audio>

3.视频标签（Video）：<video>标签用于嵌入视频内容。与<audio>标签类似，<video>标签也可以包含多个<source>子标签，以支持不同的视频格式。常见的视频格式包括MP4、WebM和Ogg。<video>标签还提供了播放控件，如播放、暂停和音量控制。

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持视频元素。
</video>

2.7表格标签（重点）

在HTML中，表格是通过一系列相关的标签来创建的，用于展示数据和信息。以下是创建表格的基本标签：

1. 表格标签（Table）：<table>标签用于定义一个表格。它是表格的容器，所有的表格内容都应该放在这个标签内。

2. 表格行标签（Table Row）：<tr>标签用于定义表格中的一行。每一行可以包含一个或多个单元格。

3. 表格单元格标签（Table Data）：<td>标签用于定义表格中的一个单元格。它通常位于<tr>标签内，每个单元格可以包含文本、图片或其他HTML元素。

4. 表格头部单元格标签（Table Header）：<th>标签用于定义表格的表头单元格。它通常用于表格的第一行，用于表示列标题。<th>单元格通常呈现为居中和加粗的文本。

5. 表格标题标签（Table Caption）：<caption>标签用于定义表格的标题。它应该放在<table>标签内，紧跟在<table>标签之后。

下面是一个简单的表格示例：

<table>
    <caption>产品列表</caption>
    <tr>
        <th>产品名称</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>$1.00</td>
        <td>100</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>$0.50</td>
        <td>200</td>
    </tr>
    <tr>
        <td>橙子</td>
        <td>$0.75</td>
        <td>150</td>
    </tr>
</table>

在HTML5中，还可以使用<thead>、<tbody>和<tfoot>标签来分别定义表格的表头、主体和表脚部分。这些标签有助于更好地组织表格结构，尤其是在大型表格或需要分页显示的表格中。

<table>
    <thead>
        <tr>
            <th>产品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>苹果</td>
            <td>$1.00</td>
            <td>100</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>$0.50</td>
            <td>200</td>
        </tr>
        <tr>
            <td>橙子</td>
            <td>$0.75</td>
            <td>150</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">总库存：450</td>
        </tr>
    </tfoot>
</table>

2.8表单标签（重点）

在HTML中，表单用于收集用户输入的数据，如用户信息、选择、文件上传等。表单标签定义了表单的 structure 和不同类型的输入字段。以下是一些常用的表单标签：

1.表单标签（Form）：<form>标签用于定义一个表单。它是一个容器标签，所有的表单元素都应该放在这个标签内。<form>标签有两个重要的属性：action和method。action属性指定了表单数据提交到的URL，而method属性定义了数据提交的方式（通常是GET或POST）。

<form action="submit.php" method="post">
    <!-- 表单元素 -->
</form>

2.输入标签（Input）：<input>标签是最常用的表单元素，用于创建各种类型的输入字段，如文本框、密码框、单选按钮、复选框、隐藏字段等。type属性用于指定输入字段的类型。

<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" value="提交">

3.文本域（Textarea）：<textarea>标签用于创建一个多行文本输入字段，允许用户输入更多文本。

<textarea name="message" rows="4" cols="50">请输入您的留言</textarea>

4.选择标签（Select）：<select>标签用于创建一个下拉列表，允许用户从预定义的选项中选择一个或多个值。

<select name="cars">
    <option value="volvo">沃尔沃</option>
    <option value="saab">萨博</option>
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
</select>

5.单选按钮（Radio Button）：<input type="radio">标签用于创建单选按钮，允许用户从多个选项中选择一个。

<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女

6.复选框（Checkbox）：<input type="checkbox">标签用于创建复选框，允许用户从多个选项中选择多个。

<input type="checkbox" name="vehicle" value="Bike"> 自行车
<input type="checkbox" name="vehicle" value="Car"> 汽车

7.按钮（Button）：<button>标签用于创建一个按钮，可以与JavaScript一起使用来执行客户端脚本。

<button type="button" onclick="alert('点击了按钮')">点击我</button>

8.标签（Label）：<label>标签用于关联表单元素与文本标签，提高表单的可访问性。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

9.字段集（Fieldset）：<fieldset>标签用于将表单内的相关元素分组，通常与<legend>标签一起使用来提供分组标题。

<fieldset>
    <legend>个人资料</legend>
    <!-- 个人资料相关的表单元素 -->
</fieldset>

2.9布局相关标签

       在HTML中，布局相关标签用于创建网页的布局结构，包括导航栏、侧边栏、内容区域、页脚等。这些标签可以帮助你组织网页的内容，使其更具结构和可读性。以下是一些常用的布局相关标签：

1.<header>：<header>标签用于定义页面的头部区域，通常包含标题、导航链接、搜索框等。

<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
</header>

2.<nav>：<nav>标签用于定义页面上的导航链接部分，通常包含一个或多个导航栏。

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
</nav>

3.<section>：<section>标签用于定义页面中的一个区域，它可以包含多个段落、标题、图片等。

<section>
    <h2>文章标题</h2>
    <p>这是文章内容。</p>
</section>

4.<article>：<article>标签用于定义页面中的独立内容，例如博客文章、论坛帖子等。

<article>
    <h2>博客标题</h2>
    <p>这是博客内容。</p>
</article>

5.<aside>：<aside>标签用于定义页面中的侧边栏或相关内容区域，通常包含广告、侧边栏导航等。

<aside>
    <h3>侧边栏标题</h3>
    <p>这是侧边栏内容。</p>
</aside>

6.<footer>：<footer>标签用于定义页面的页脚区域，通常包含版权信息、联系信息、链接到其他页面的链接等。

<footer>
    <p>&copy; 2023 版权所有。</p>
</footer>

7.<div>：<div>标签是一个通用容器标签，用于定义页面中的一个区域。它通常用于布局和样式。

<div class="container">
    <!-- 容器内的内容 -->
</div>