【HTML】基础用法

一、HTML简介

HTML（HyperText Markup Language），即超文本标记语言，是用来描述网页的一种标准标记语言。HTML是网页开发的基础，它定义了网页的结构和内容。通过使用各种标签（tags）来标记普通文本，使得文本具有多种含义，如段落、标题、表格和链接等。这些标签不仅描述了页面元素的显示方式，还有助于搜索引擎理解页面内容，提高网页的可访问性。

二、HTML的构成要素

• 文本：设置字体、颜色、大小、加粗、斜体、下划线等，与Word类似
• 图片：设置边框、大小、位置
• 超链接：图片、文本等均可以添加超链接
• 表格：展示行列构成的结构化数据，可以为表格设置大小、背景等，表格里面可以放所有元素。
• 表单：文本框、下拉框、单选框、复选框、按钮、文本域等。
• 多媒体：音频、视频、H5游戏等。

三、HTML元素的基本使用

1. 标题标签：使用<h1>到<h6>来定义标题，其中<h1>表示最重要的标题，通常用于页面的主要内容标题，而<h6>则用于最不重要的子标题>

   <h1>这是一级标题</h1> 
   <h2>这是二级标题</h2> 
   <h3>这是三级标题</h3>

2. 段落和换行标签：p>标签用于定义段落，将整页内容划分为若干逻辑段落。浏览器会自动为每个段落的前后添加适当的空行

   <p>这是一个段落。</p> <p>这是另一个段落。<br/>这是新的一行。</p>

3. 文本格式化标签：加粗文本可以使用<strong>或<b>标签，其中<strong>表示更强烈的强调意味；倾斜文本则使用<em>或<i>标签。另外，删除线可以通过<del>或<s>标签来实现，下划线则可以使用<ins>或<u>标签

   <strong>加粗文本</strong>
    <em>倾斜文本</em>
    <del>删除线文本</del>
    <ins>下划线文本</ins>

4. 图像标签：使用<img>标签可以嵌入图像，通过src属性指定图像的路径，alt属性提供图像无法加载时的替代文本，而title属性则用于添加鼠标悬停时显示的文本。还可以通过width和height属性指定图片的宽和高，以及使用border属性设置图片边框的粗细

   <img src="image.jpg" alt="替代文本" title="鼠标悬停文本" width="200" height="150">

5. 超链接标签：超链接使用<a>标签定义，其href属性指明链接的目标地址。若要在新窗口中打开链接，可以将target属性设置为_blank。超链接可以包含文本或图像，点击后会跳转到指定的URL地址

   <a href="https://www.example.com">点击访问示例网站</a> 
   <a href="download.pdf" target="_blank">下载PDF文件</a>

6. 容器标签：<div>是一个大的容器标签，常用于布局和样式的应用，相当于一个大盒子。通常一个网页由多个<div>组成，每个<div>可以包含其他标签或元素。而<span>则是一个较小的容器，主要用于对文本的一部分进行样式应用，而不打断文本的结构

   <div style="background-color: lightblue; padding: 10px;"> <span style="color: red;">红色文字</span> <span style="font-weight: bold;">粗体文字</span> </div>

7. 列表标签：  
   <ul>标签定义了一个无序列表，通常用项目符号（如圆点）表示每个列表项。
   <li>标签定义了列表中的单个项目
   <ol>标签定义了一个有序列表，通常用数字或字母顺序表示每个列表项。
   <li>标签同样用于定义列表中的单个项目。

   <ul>
       <li>项目1</li>
       <li>项目2</li>
       <li>项目3</li>
   </ul>
   
   <ol>
       <li>步骤1</li>
       <li>步骤2</li>
       <li>步骤3</li>
   </ol>

8. 表格标签：       
   <table>标签定义了一个表格，它是所有表格元素的容器。
   <tr>标签定义了表格中的一行。
   <td>标签定义了表格中的单元格，用于存放数据。   

   <table>
       <tr>
           <th>表头1</th>
           <th>表头2</th>
       </tr>
       <tr>
           <td>数据1</td>
           <td>数据2</td>
       </tr>
   </table>

9. 表单标签：  
   <form>标签定义了一个表单，它是所有表单元素的容器。
   action属性指定了表单数据提交的目标URL。
   method属性指定了提交数据的HTTP方法，通常是"get"或"post"。

   <form action="submit.php" method="post">
       <label for="name">姓名：</label>
       <input type="text" id="name" name="name">
       <input type="submit" value="提交">
   </form>

10. 输入标签:
    type="text"表示文本框类型。
    name属性为输入字段指定一个名称，用于在服务器端识别该字段的值。
    placeholder属性提供了输入字段的占位符提示
    type="password"表示密码框类型。
    type="radio"表示单选按钮类型。

    ​​​​​​​<input type="text" placeholder="输入文本"> 
    <input type="password" name="password">
     <input type="checkbox" name="option1">
     <input type="radio" name="gender" value="male"> 
    <input type="submit" value="提交"> 
    <input type="button" value="按钮"> 
    <input type="reset" value="重置"> 
    <input type="file" name="file">

11. 选择标签：
    <select>标签定义了一个下拉选择框。
    <option>标签定义了选择框中的选项。
    value属性指定了选项的实际值，当表单提交时，选中的选项的值将被发送到服务器

    <select name="options">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
    </select>
    

12. 音频和视频标签：  
    <video>标签定义了一个视频播放器。
    width和height属性定义了视频播放器的尺寸。
    controls属性添加了播放、暂停和音量控制等控件。
    <source>标签指定了视频文件的URL和MIME类型。
    当浏览器不支持<video>标签时，会显示标签内的文本内容。

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

​​​​​​​​​​​​​

每篇一言：停下脚步才注意到 世界被染得雪白。