HTML 基础知识 - 技术栈

文章目录

一、HTML网页基本结构
二、常用标签
- [1. 标题标签](#1. 标题标签)
- [2. 段落标签](#2. 段落标签)
- [3. 超链接标签](#3. 超链接标签)
- [4. 注释标签](#4. 注释标签)
- [5. 标签属性](#5. 标签属性)
三、设置字体格式
- [1. 设置字体字形和效果](#1. 设置字体字形和效果)
- [2. 设置字体颜色](#2. 设置字体颜色)
- [3. 设置字体大小](#3. 设置字体大小)
四、添加多媒体
- [1. 添加网页图片](#1. 添加网页图片)
- [2. 添加网页音频](#2. 添加网页音频)
- [3. 添加网页视频](#3. 添加网页视频)
五、获取网页资源
六、创建容器
- [1. <div>标签](#1.
  标签)
- [2. 布局](#2. 布局)
七、创建表格
- [1. 表格标签](#1. 表格标签)
- [2. 添加表格表头](#2. 添加表格表头)
- [3. 添加表格标题](#3. 添加表格标题)

一、HTML网页基本结构

HTML（超文本标记语言）是网页的基础骨架，定义了网页的内容结构。
基本结构代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容放在这里 -->
</body>
</html>

标签说明：
：声明文档类型为HTML5
：根元素，lang属性指定语言
：头部区域，包含元数据和页面信息
：主体区域，包含所有可见内容

二、常用标签

1. 标题标签

用于定义文档标题，共6个级别（h1-h6）
示例

html 复制代码

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

2. 段落标签

用于定义文本段落
示例

html 复制代码

<p>这是一个段落。</p>
<p>这是另一个段落，HTML会自动在段落之间添加一些空白。</p>

3. 超链接标签

用于创建超链接，跳转到其他页面或位置
示例

html 复制代码

<!-- 链接到外部网站 -->
<a href="https://www.example.com">访问示例网站</a>

4. 注释标签

用于添加注释，不会在浏览器中显示
示例

html 复制代码

<!-- 这是一个HTML注释 -->
<p>这是一个段落。</p>
<!-- 
    这是多行注释
    可以跨越多行
-->

5. 标签属性

属性为HTML元素提供额外信息，总是以名称/值对的形式出现
示例

html 复制代码

<!-- class属性：用于CSS样式和JavaScript操作 -->
<div class="container main-content">内容区域</div>

<!-- id属性：唯一标识元素 -->
<h1 id="main-title">主标题</h1>

<!-- style属性：内联样式 -->
<p style="color: blue; font-size: 18px;">带样式的段落</p>

<!-- src和alt属性（用于图片） -->
<img src="image.jpg" alt="图片描述">

<!-- href属性（用于链接） -->
<a href="page.html" target="_blank">打开页面</a>

三、设置字体格式

1. 设置字体字形和效果

使用语义化标签设置文本样式。
示例

html 复制代码

<!-- 语义化文本标签 -->
<p>
  <b>加粗文本（仅样式）</b>
  <em>斜体文本（强调）</em>>
  <i>斜体文本（技术术语等）</i>
  <u>下划线文本</u>
</p>

2. 设置字体颜色

使用color属性设置文本颜色。
示例

html 复制代码

<!-- 使用style属性设置颜色 -->
<p style="color: red;">红色文字</p>
<p style="color: #0066cc;">蓝色文字（十六进制）</p>
<p style="color: rgb(0, 200, 0);">绿色文字（RGB）</p>
<p style="color: rgba(255, 0, 0, 0.7);">半透明红色文字</p>

3. 设置字体大小

使用font-size属性设置字体大小。
示例

html 复制代码

<!-- 使用绝对单位 -->
<p style="font-size: 16px;">16像素的文字</p>
<p style="font-size: 12pt;">12点的文字</p>

四、添加多媒体

1. 添加网页图片

使用标签添加图片，src属性指定图片路径，alt属性提供替代文本。
示例代码

html 复制代码

<!-- 基本图片 -->
<img src="images/photo.jpg" alt="自然风景图片">

<!-- 图片链接 -->
<a href="large-image.jpg">
  <img src="thumbnail.jpg" alt="点击查看大图">
</a>

2. 添加网页音频

使用标签添加音频，支持多种格式。
示例

html 复制代码

<!-- 基本音频播放器 -->
<audio src="music.mp3" controls>
</audio>

3. 添加网页视频

使用标签添加视频，支持多种格式（MP4、WebM、OGG）。
示例

html 复制代码

<!-- 基本视频播放器 -->
<video src="movie.mp4" controls width="640" height="360">
</video>

五、获取网页资源

六、创建容器

1.

标签

是通用容器，用于分组和布局
示例

html 复制代码

<!-- 基本div容器 -->
<div>这是一个div容器</div>

<!-- 带id和class的div -->
<div id="header" class="container">页眉区域</div>
<div id="main-content" class="container">主要内容区域</div>
<div id="footer" class="container">页脚区域</div>

<!-- 嵌套div -->
<div class="outer-container">
    <div class="inner-container">
        <p>嵌套容器内的内容</p>
    </div>
</div>

2. 布局

使用div结合CSS创建各种网页布局。
示例

html 复制代码

<!-- 基本布局结构 -->
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, sans-serif; }
  
  .container { 
    width: 80%; 
    margin: 0 auto; 
  }
  
  .header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
  }
  
  .nav {
    background-color: #444;
    overflow: hidden;
  }
  
  .nav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
    float: left;
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .sidebar {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
  }
  
  .main {
    flex: 70%;
    padding: 20px;
  }
  
  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
  }
</style>

七、创建表格

1. 表格标签

使用

、、

|------------|
| 等标签创建数据表格。 |
示例代码

html 复制代码

<!-- 基本表格 -->
<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

2. 添加表格表头

使用标签定义表头单元格，通常放在部分。
示例代码

html 复制代码

<table >
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>¥6,999</td>
      <td>50</td>
    </tr>
    <tr>
      <td>智能手机</td>
      <td>¥3,299</td>
      <td>120</td>
    </tr>
  </tbody>
</table>

3. 添加表格标题

使用标签为表格添加标题，通常放在

标签后。
示例代码

html 复制代码

<!-- 带标题的表格 -->
<table >
  <caption>第一季度销售报表</caption>
  <thead>
    <tr>
      <th>月份</th>
      <th>产品A</th>
      <th>产品B</th>
      <th>产品C</th>
      <th>总计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>120</td>
      <td>85</td>
      <td>60</td>
      <td>265</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>135</td>
      <td>92</td>
      <td>68</td>
      <td>295</td>
    </tr>
    <tr>
      <td>三月</td>
      <td>150</td>
      <td>105</td>
      <td>75</td>
      <td>330</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>季度总计</th>
      <th>405</th>
      <th>282</th>
      <th>203</th>
      <th>890</th>
    </tr>
  </tfoot>
</table>