HTML的主要作用之一是划分网页的结构

HTML的主要作用之一是划分网页的结构

划分网页结构

HTML通过定义一系列的元素（或标签）来划分网页的结构。

HTML常用标签详解与示例

在HTML中，各种标签用于创建和组织网页内容。以下是一些基本且常用的HTML标签及其使用示例。

1. 文本标签 <span>

<span>标签用于文本对其应用样式，如改变颜色、字体或大小。

<span style="color: red;">红色</span>

2. 标题标签 h1~h6

标题标签用于创建标题。<h1>是最高的等级，<h6>是最低的。

<h1>H1标题</h1>  <h6>H6标题</h6>

3. div竖着布局的标签

<div>标签用于创建块级容器，独占一行，通常用于布局和分组内容。

<div>hello</div>  <div>hello</div>  <div>hello</div>

4. 段落标签 <p>

<p>标签用于定义文本的段落。

<p>段落标签</p>

<p>段落标签</p>

<p>段落标签</p>

5. 超链接标签 <a>

<a>标签用于创建链接。

href 设置资源路径

target 设置打开窗口的方式  _self默认的，在本窗口打开  _blank在新窗口打开

<a href="https://www.baidu.com/" target="_blank">点击跳转</a>

6. 锚点标签

锚点标签用于创建页面内的跳转链接。

name锚点值

<a name="aaaa">锚点</a>

<a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>

7. 图片标签 <img>

<img>标签用于在HTML页面中嵌入图片。

src:引用的图片资源

路径：

相对路径： 访问资源与被访问资源的关系

兄弟关系 src="OIP-C.jpg"

叔侄关系 src="img/OIP-C.jpg"

表兄弟关系 src="../img/OIP-C.jpg"

绝对路径： 资源的绝对位置

alt：当图片资源不能正常展示时，显示alt里边的内容

<img src="OIP-C.jpg" alt="图片" width="100px" height="400px">

8. 列表标签 <ul>, <ol>, <li>

无序列表使用<ul>，有序列表使用<ol>，列表项使用<li>。

<ul>

    <li>无序列表1</li>

    <li>无序列表2</li>

</ul>   

<ol>

    <li>有序列表1</li>

    <li>有序列表2</li>

</ol>

9. 表格标签

表格使用<table>标签创建，行使用<tr>标签定义，单元格使用<td>标签定义，而加粗居中的单元格则使用<th>标签。表格标签还支持各种属性，如border（边框）、width（宽度）、height（高度）、cellpadding（单元格填充度）和cellspacing（单元格之间的间距）。

<table border="1" width="500px" height="400px" cellpadding="10px" cellspacing="0">

<tr>     

<th>name</th>

<th>sex</th>

</tr>

<tr>

<td>小明</td>

<td>男</td>

</tr>

</table>

10. 框架标签 <iframe>

<iframe>标签用于在页面中嵌套另一个页面。

src：嵌套的资源

width="800px"

height="400px"

frameborder='0' 去掉边框 把任意页面嵌入的更真实

<iframe src="https://www.bilibili.com/" name="demo" width="800px" height="600px" frameborder="0"></iframe>

11. 音频标签 <audio>

<audio>标签用于在页面中嵌入音频。

controls 手动播放，让播放器显示出来

autoplay 自动播放

loop 循环播放

<audio src="audio.mp3" controls autoplay loop></audio>

12. 视频标签 <video>

<video>标签用于在页面中嵌入视频。

controls 手动播放，让播放器显示出来

autoplay 自动播放

loop 循环播放

<video src="video.mp4" controls autoplay loop width="200px" height="200px"></video>

13、收集用户信息 input

text 单行文本框

password 密码框

radio 单选框

checkbox 复选框

file 文件选择器

color 颜色拾取器

date 日期

week 周选择器

range 滑块

number 数字

select 下拉框

textarea 多行文本域

button 普通按钮

reset 重置按钮

submit 提交按钮

    <!-- 文本输入框 -->

    <label for="text">文本:</label>

    <input type="text" id="text" name="text"><br><br>

    <!-- 密码框 --> 

    <label for="password">密码:</label> 

    <input type="password" id="password" name="password"><br><br> 



    <!-- 单选框 --> 

    <label>性别:</label> 

    <input type="radio" id="male" name="gender" value="male"> 

    <label for="male">男</label> 

    <input type="radio" id="female" name="gender" value="female"> 

    <label for="female">女</label><br><br> 



    <!-- 复选框 --> 

    <label for="checkbox">同意条款:</label> 

    <input type="checkbox" id="checkbox" name="agree"><br><br> 



    <!-- 文件选择器 --> 

    <label for="file">选择文件:</label> 

    <input type="file" id="file" name="file"><br><br> 



    <!-- 颜色拾取器 --> 

    <label for="color">选择颜色:</label> 

    <input type="color" id="color" name="color"><br><br> 



    <!-- 日期选择器 --> 

    <label for="date">选择日期:</label> 

    <input type="date" id="date" name="date"><br><br> 



    <!-- 周选择器 --> 

    <label for="week">选择周:</label> 

    <input type="week" id="week" name="week"><br><br> 



    <!-- 滑块 --> 

    <label for="range">滑块:</label> 

    <input type="range" id="range" name="range" min="1" max="10"><br><br> 



    <!-- 数字输入框 --> 

    <label for="number">数字:</label> 

    <input type="number" id="number" name="number" min="1" max="100"><br><br> 



    <!-- 下拉框 --> 

    <label for="select">选择选项:</label> 

    <select id="select" name="select"> 

        <option value="option1">1</option> 

        <option value="option2">2</option> 

        <option value="option3">3</option> 

    </select><br><br> 



    <!-- 多行文本域 --> 

    <label for="textarea">多行文本:</label> 

    <textarea id="textarea" name="textarea"></textarea><br><br> 



    <!-- 普通按钮 --> 

    <button type="button">普通按钮</button> 



    <!-- 重置按钮 --> 

    <button type="reset">重置</button> 



    <!-- 提交按钮 --> 

    <button type="submit">提交</button>