从零开始学习前端【第1周】

风淅鱼

已于 2024-07-05 09:37:43 修改

阅读量736

点赞数 8

文章标签：学习

于 2024-06-26 17:54:50 首次发布

本文链接：https://blog.csdn.net/qq_34220702/article/details/139986733

版权

第1周：HTML 基础学习
HTML 即超文本标记语言，完整英文 Hyper Text Markup Language,个人理解就是规范范和个性化内容的描述语言，采用标签的形式描述内容，然后我把html的标签整理了一下，今天的任务主要就是认识和运用标签，如下：

1. 基本结构标签(day1)

<!DOCTYPE html>：声明文档类型和HTML版本（HTML5）。
<html>：根元素，包含整个HTML文档。
<head>：头部元素，包含元数据（如文档的标题、样式、脚本等）。
<title>：文档标题，显示在浏览器的标题栏或标签页上。
<meta>：元数据标签，提供文档的元信息（如字符集、描述、关键词等）。
<link>：链接外部资源（如CSS文件）。
<style>：嵌入CSS样式。

<body>：主体元素，包含文档的可见内容。
常见结构

<!DOCTYPE html> <!-- 声明文档类型和HTML版本 -->
<html> <!-- 根元素，包含整个HTML文档 -->
  <head> <!-- 头部元素，包含元数据 -->
    <meta charset="UTF-8"> <!-- 设置字符编码 -->
    <title>Document Title</title> <!-- 文档标题 -->
  </head>
  <body> <!-- 主体元素，包含文档的可见内容 -->
    <h1>Hello, World!</h1> <!-- 一级标题 -->
  </body>
</html>

meta标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"> <!-- 设置字符集 -->
  <meta name="description" content="A brief description of the webpage."> <!-- 网页描述 -->
  <meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 关键词 -->
  <meta name="author" content="Author Name"> <!-- 作者 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置，适用于响应式设计 -->
  <title>Meta Tag Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

<!--
charset：定义文档的字符编码。
name="description"：提供页面的简要描述，通常用于搜索引擎优化（SEO）。
name="keywords"：列出页面的关键字，通常用于SEO。
name="author"：指定页面的作者。
name="viewport"：控制页面的布局在不同设备上的显示方式。 -->

link标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css"> <!-- 链接外部CSS文件 -->
  <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- 链接网站图标 -->
  <title>Link Tag Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>


<!--
rel="stylesheet"：指定链接的资源是一个样式表。
href：指定外部资源的URL。
rel="icon"：指定链接的资源是一个网站图标。
type：指定资源的MIME类型。
-->

style标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style> <!-- 嵌入CSS样式 -->
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      margin-left: 20px;
    }
  </style>
  <title>Style Tag Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

<!--
<style>：标签内部包含CSS样式规则。
CSS样式规则：如 body 和 h1 的属性和值。
CSS属性如 background-color、color、margin-left 等，用于控制元素的外观和布局。这个涉及以后学习 CSS 的时候讲解-->

2. 文字内容标签(day2)

<h1>至<h6>：标题标签，从一级标题到六级标题。
<p>：段落标签，用于定义段落。
<br>：换行标签，用于插入换行符。
<hr>：水平线标签，用于插入水平线。
<pre>：预格式化文本标签，保留文本的格式（如空格和换行）。
<blockquote>：引用块标签，用于表示长引用。
<abbr>：缩写标签，用于表示缩写或首字母缩写。
<cite>：引用标题标签，用于引用作品的标题。
<code>：代码标签，用于表示一段代码。
<em>：强调标签，用于强调文本（通常以斜体显示）。

<strong>：强调标签，用于表示重要性（通常以粗体显示）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 标签示例</title>
</head>
<body>
    <!-- 标题标签，从一级标题到六级标题  <h1> 是最重要的标题，<h6> 是最不重要的标题-->
    <h1>一级标题 (h1)</h1>
    <h2>二级标题 (h2)</h2>
    <h3>三级标题 (h3)</h3>
    <h4>四级标题 (h4)</h4>
    <h5>五级标题 (h5)</h5>
    <h6>六级标题 (h6)</h6>
    
    <!-- 段落标签，用于定义段落 -->
    <p>这是一个段落 (p)。段落标签用于定义文本文段。</p>
    
    <!-- 换行标签，用于插入换行符 -->
    <p>这是一段文字<br>这段文字在使用<br>标签后换行。</p>
    
    <!-- 水平线标签，用于插入水平线 -->
    <hr>
    <p>上面是一条水平线 (hr)，用于分隔内容。</p>
    
    <!-- 预格式化文本标签，保留文本的格式（如空格和换行） -->
    <pre>
        这是预格式化文本标签 (pre)
        这里的空格和换行会被保留。
    </pre>
    
    <!-- 引用块标签，用于表示长引用 -->
    <blockquote>
        这是一个引用块标签 (blockquote)。这段文字表示引用内容。
    </blockquote>
    
    <!-- 缩写标签，用于表示缩写或首字母缩写 -->
    <p>HTML 是 <abbr title="HyperText Markup Language">HTML</abbr> 的缩写。</p>
    
    <!-- 引用标题标签，用于引用作品的标题 -->
    <p>这是一本好书，叫做<cite>《HTML和CSS设计与构建网站》</cite>。</p>
    
    <!-- 代码标签，用于表示一段代码 -->
    <p>要在网页中插入图片，可以使用 <code>&lt;img&gt;</code> 标签。</p>
    
    <!-- 强调标签，用于强调文本（通常以斜体显示） -->
    <p>这是<em>强调文本</em>，通常以斜体显示。</p>
    
    <!-- 强调标签，用于表示重要性（通常以粗体显示） -->
    <p>这是<strong>重要文本</strong>，通常以粗体显示。</p>
</body>
</html>

3. 文本格式标签(day2)

<b>：粗体标签，用于加粗文本。
<i>：斜体标签，用于倾斜文本。
<u>：下划线标签，用于给文本加下划线。
<mark>：标记标签，用于高亮文本。
<sub>：下标标签，用于显示下标文本。
<sup>：上标标签，用于显示上标文本。
<small>：小型文本标签，用于显示较小的文本。
<del>：删除线标签，用于表示被删除的文本。

<ins>：插入线标签，用于表示被插入的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 标签示例</title>
</head>
<body>
    <!-- 粗体标签，用于加粗文本 -->
    <p>这是<b>粗体文本</b>，用于加粗显示。</p>

    <!-- 斜体标签，用于倾斜文本 -->
    <p>这是<i>斜体文本</i>，用于倾斜显示。</p>

    <!-- 下划线标签，用于给文本加下划线 -->
    <p>这是<u>下划线文本</u>，用于加下划线显示。</p>

    <!-- 标记标签，用于高亮文本 -->
    <p>这是<mark>高亮文本</mark>，用于突出显示。</p>

    <!-- 下标标签，用于显示下标文本 -->
    <p>化学公式：H<sub>2</sub>O，这里<sub>2</sub>是下标。</p>

    <!-- 上标标签，用于显示上标文本 -->
    <p>数学表达式：X<sup>2</sup>，这里<sup>2</sup>是上标。</p>

    <!-- 小型文本标签，用于显示较小的文本 -->
    <p>这是<small>小型文本</small>，用于显示较小的文字。</p>

    <!-- 删除线标签，用于表示被删除的文本 -->
    <p>这是<del>删除线文本</del>，表示被删除的内容。</p>

    <!-- 插入线标签，用于表示被插入的文本 -->
    <p>这是<ins>插入线文本</ins>，表示新插入的内容。</p>
</body>
</html>

4. 链接和图像标签(day3)

<a>：锚点标签，用于创建超链接。

<!DOCTYPE html>
<html>
<head>
    <title>超链接标签示例</title>
</head>
<body>
    <h1>超链接标签示例</h1>
    
    <!-- 超链接 -->
    <p>这是一个指向 <a href="https://www.example.com" target="_blank">示例网站</a> 的超链接。</p>
    
    <!-- 带标题的超链接 -->
    <p>点击此链接访问 <a href="https://www.example.com" title="访问示例网站" target="_blank">示例网站</a>。</p>
</body>
</html>

<img>：图像标签，用于在页面中嵌入图像。

<!DOCTYPE html>
<html>
<head>
    <title>图像标签示例</title>
</head>
<body>
    <h1>图像标签示例</h1>
    
    <!-- 图像 -->
    <p>这是一个嵌入图像的示例：</p>
    <img src="https://www.example.com/path/to/image.jpg" alt="示例图像" width="300" height="200">
    
    <!-- 带标题的图像 -->
    <p>这是一个带有标题的图像：</p>
    <img src="https://www.example.com/path/to/image.jpg" alt="示例图像" title="示例图像" width="300" height="200">
</body>
</html>

5. 列表标签(day3)

<ul>：无序列表标签，用于创建无序列表。
<ol>：有序列表标签，用于创建有序列表。
<li>：列表项标签，用于定义列表中的项目。
<dl>：定义列表标签，用于创建定义列表。
<dt>：定义术语标签，用于定义列表中的术语。

<dd>：定义描述标签，用于定义列表中的描述。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 列表标签综合示例</title>
</head>
<body>
    <h1>HTML 列表标签综合示例</h1>
    
    <!-- 无序列表 -->
    <h2>无序列表</h2>
    <ul>
        <!-- 列表项 -->
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>

    <!-- 有序列表 -->
    <h2>有序列表</h2>
    <ol>
        <!-- 列表项 -->
        <li>起床</li>
        <li>吃早餐</li>
        <li>去上班</li>
    </ol>

    <!-- 定义列表 -->
    <h2>定义列表</h2>
    <dl>
        <!-- 定义术语 -->
        <dt>HTML</dt>
        <!-- 定义描述 -->
        <dd>超文本标记语言，用于创建网页。</dd>
        <!-- 定义术语 -->
        <dt>CSS</dt>
        <!-- 定义描述 -->
        <dd>层叠样式表，用于控制网页的样式和布局。</dd>
        <!-- 定义术语 -->
        <dt>JavaScript</dt>
        <!-- 定义描述 -->
        <dd>一种脚本语言，主要用于网页开发。</dd>
    </dl>
</body>
</html>

6. 表格标签(day3)

<table>：表格标签，用于创建表格。
<tr>：表格行标签，用于定义表格行。
<td>：表格单元标签，用于定义表格中的单元格。
<th>：表头单元标签，用于定义表格中的表头单元格。
<thead>：表格头部标签，用于定义表格的头部。
<tbody>：表格主体标签，用于定义表格的主体。
<tfoot>：表格尾部标签，用于定义表格的尾部。
<col>：表格列标签，用于定义表格中的列。

<colgroup>：表格列组标签，用于定义表格中的列组。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 标签综合示例</title>
</head>
<body>
    <h1>HTML 列表和表格标签综合示例</h1>
    <!-- 表格 -->
    <h2>表格</h2>
    <table border="1">
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>上海</td>
            </tr>
        </tbody>
        <!-- 表格尾部 -->
        <tfoot>
            <tr>
                <td colspan="3">数据来源：示例数据</td>
            </tr>
        </tfoot>
    </table>

    <!-- 表格列组 -->
    <h2>带列组的表格</h2>
    <table border="1">
        <!-- 定义表格列组 -->
        <colgroup>
            <col style="background-color: lightgrey">
            <col span="2" style="background-color: lightblue">
        </colgroup>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>王五</td>
                <td>25</td>
                <td>广州</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>29</td>
                <td>深圳</td>
            </tr>
        </tbody>
        <!-- 表格尾部 -->
        <tfoot>
            <tr>
                <td colspan="3">数据来源：示例数据</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>