HTML基础学习记录

前言

知识是互通的嘛，个人粗浅的感觉就是Android中xml和markdown的杂交（这么说可能是有点倒反天罡了，但毕竟本人接触前两者更早）入门倒是挺快的，也感觉没啥好系统写的。

学习资料

HTML 入门 - 学习 Web 开发 |MDN的 — Getting started with HTML - Learn web development | MDN (mozilla.org)

HTML 教程 | 菜鸟教程 (runoob.com)

denysdovhan/learnyouhtml: Learn you how to create your first web page (github.com)👈英文好的可以试试这个，边学边练

什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它被用来描述网页的结构和内容。HTML使用标记标签（tags）来定义不同的元素，如标题、段落、链接、图片等。每个标签都以尖括号（< 和 >）包围，并通常成对出现，一个开始标签和一个结束标签。

HyperText（超文本）：

  • 超文本 是一种文本，它不仅仅是线性的，用户可以通过点击链接在不同的文档之间跳转。这种能力使得信息在互联网上以网络结构呈现，而不是简单的线性结构。

Markup（标记）：

  • 标记 指的是使用标签（tags）来标记文本的不同部分。HTML 使用标签来定义网页的结构和内容，例如标题、段落、链接、图像等。
  • 这些标签帮助浏览器理解和呈现网页内容。

Language（语言）：

  • 语言 表明 HTML 不是一种编程语言，而是一种标记语言（markup language）。它使用预定义的标记标签来描述网页内容的结构和呈现。

相关专业术语

  • 元素（Element）：由开始标签、内容和结束标签组成的HTML结构。例如，<p>这是一个段落</p> 是一个段落元素。

  • 标签（Tag）：用尖括号包围的HTML标记，用于定义HTML元素。例如，<p> 是段落标签。

  • 属性（Attribute）：用于提供有关元素的附加信息，位于开始标签内。例如，<a href="https://www.example.com">链接</a> 中的 href 是一个属性，定义了链接的目标。

  • 块级元素（Block-level Element）：在页面上占据整个行的元素，常用于布局。例如，<div>, <p>, <h1> 等。

  • 行内元素（Inline Element）：仅占据其内容所需空间的元素，常用于文本格式化。例如，<span>, <a>, <img> 等。

基础语法

基础语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 基础语法示例</title>
    <!-- 外部css -->
    <link rel="stylesheet" href="styles.css">
    <!-- 内联css -->
    <style>
        .inline-style {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 标题和段落 -->
    <header>
        <h1 class="inline-style">这是一级标题</h1>
        <h2>这是二级标题</h2>
        <p>这是一个段落。</p>
    </header>

    <!-- 超链接和图片 -->
    <section>
        <p>这是一个包含<a href="https://www.example.com">链接</a>的段落。</p>
        <p>这是一个包含图片的段落：<img src="example.jpg" alt="示例图片"></p>
    </section>

    <!-- 列表 -->
    <section>
        <h2>无序列表</h2>
        <ul>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
        </ul>

        <h2>有序列表</h2>
        <ol>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
        </ol>
    </section>

    <!-- 表格 -->
    <section>
        <h2>表格</h2>
        <table border="1">
            <tr>
                <th>列 1</th>
                <th>列 2</th>
            </tr>
            <tr>
                <td>单元格 1</td>
                <td>单元格 2</td>
            </tr>
            <tr>
                <td>单元格 3</td>
                <td>单元格 4</td>
            </tr>
        </table>
    </section>

    <!-- 表单 -->
    <section>
        <h2>表单</h2>
        <form action="submit_form.php" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name"><br><br>

            <label for="email">电子邮件：</label>
            <input type="email" id="email" name="email"><br><br>

            <label for="message">留言：</label><br>
            <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

            <input type="submit" value="提交">
        </form>
    </section>

    <!-- 媒体元素 -->
    <section>
        <h2>音频和视频</h2>
        <audio controls>
            <source src="audio.mp3" type="audio/mpeg">
            您的浏览器不支持音频元素。
        </audio>

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

    <!-- 内联脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('h1').textContent = '这是使用 JavaScript 修改的标题';
        });
    </script>

    <!-- 外部脚本 -->
    <script src="script.js"></script>
</body>
</html>

标题和段落：

  • 使用 <h1> 到 <h6> 标签定义标题。
  • 使用 <p> 标签定义段落。

链接和图片：

  • 使用 <a> 标签创建超链接。
  • 使用 <img> 标签嵌入图像，src 属性指定图像路径，alt 属性提供替代文本。

列表：

  • 使用 <ul> 和 <ol> 标签创建无序列表和有序列表。
  • 使用 <li> 标签定义列表项。

表格：

  • 使用 <table> 标签创建表格，<tr> 定义行，<th> 和 <td> 定义表头和单元格。

表单：

  • 使用 <form> 标签创建表单。
  • 使用 <input>、<textarea> 和 <label> 标签定义表单控件。

媒体元素：

  • 使用 <audio> 和 <video> 标签嵌入音频和视频。

内联样式和外部样式表：

  • 使用 <style> 标签定义内联样式。
  • 使用 <link> 标签链接外部样式表。

脚本：

  • 使用 <script> 标签嵌入内联脚本或引用外部脚本。

文本格式化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用文本格式化示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        p {
            margin: 10px 0;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>HTML 常用文本格式化示例</h1>
    
    <!-- 粗体和斜体 -->
    <p>这是一段包含<strong>粗体</strong>和<em>斜体</em>文本的段落。</p>
    
    <!-- 粗体和斜体的另一种表示方式 -->
    <p>这是一段包含<b>粗体</b>和<i>斜体</i>文本的段落。</p>
    
    <!-- 下划线和删除线 -->
    <p>这是一段包含<u>下划线</u>和<del>删除线</del>文本的段落。</p>
    
    <!-- 上标和下标 -->
    <p>这是一段包含<sup>上标</sup>和<sub>下标</sub>文本的段落。</p>
    
    <!-- 代码文本 -->
    <p>这是一段包含<code>代码文本</code>的段落。</p>
    
    <!-- 引用 -->
    <p>这是一段包含<q>短引用</q>的段落。</p>
    <blockquote>
        这是一段块引用，用于引用较长的文本。
    </blockquote>
    
    <!-- 缩写 -->
    <p>这是一个包含缩写的段落：<abbr title="Hypertext Markup Language">HTML</abbr></p>
    
    <!-- 引用地址 -->
    <p>这是一个包含引用地址的段落：<cite>《HTML & CSS: Design and Build Websites》</cite></p>
    
    <!-- 变量 -->
    <p>这是一个包含变量的段落：<var>x</var> + <var>y</var> = <var>z</var></p>
    
    <!-- 预格式化文本 -->
    <pre>
这是一些预格式化的文本。
它保留了所有的空格和换行。
    </pre>
    
    <!-- 高亮 -->
    <p>这是一段包含<span class="highlight">高亮文本</span>的段落。</p>
    
    <!-- 地址 -->
    <address>
        这是一个地址块：<br>
        John Doe<br>
        1234 Main St<br>
        Springfield, IL 62704<br>
        USA
    </address>

    <!-- 标记 -->
    <p>这是一段包含<mark>标记</mark>文本的段落。</p>
</body>
</html>

image-20240702220942808

粗体和斜体：

  • <strong> 和 <em> 用于语义上的重要性和强调。
  • <b> 和 <i> 用于视觉上的粗体和斜体效果。

下划线和删除线：

  • <u> 用于下划线。
  • <del> 用于删除线。

上标和下标：

  • <sup> 用于上标。
  • <sub> 用于下标。

代码文本：

  • <code> 用于表示代码片段。

引用：

  • <q> 用于短引用，通常会自动添加引号。
  • <blockquote> 用于块引用，通常用于长段引用。

缩写：

  • <abbr> 用于缩写，title 属性提供完整的描述。

引用地址：

  • <cite> 用于引用书名、文章名等。

变量：

  • <var> 用于表示变量。

预格式化文本：

  • <pre> 用于保留文本中的空格和换行。

高亮：

  • 使用 <span> 和 CSS 类来实现高亮效果。

地址：

  • <address> 用于表示联系信息或地址。

标记：

  • <mark> 用于高亮显示文本，通常用于表示搜索结果中的匹配项。

块级元素和行内元素

块级元素的特点

  1. 独占一行：块级元素通常从新的一行开始，并且会独占一行。
  2. 宽度自动填充父元素：块级元素的宽度默认会自动填充它的父元素的宽度。
  3. 可以包含其他块级元素和内联元素：块级元素内部可以包含其他块级元素和内联元素。
  4. 常用于布局：块级元素通常用于创建页面布局结构。

内联元素的特点

  1. 不独占一行：内联元素不会从新的一行开始，它们与相邻的内联元素和文本内容在同一行内显示。
  2. 宽度随内容变化：内联元素的宽度根据其内容的宽度变化，不会像块级元素那样自动填满父元素的宽度。
  3. 只能包含内联元素：内联元素通常只能包含其他内联元素或文本，不能包含块级元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 10px;
        }
        header, footer {
            background-color: #f4f4f4;
            padding: 10px;
            margin-bottom: 10px;
        }
        section {
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
        }
        article {
            border: 1px solid #eee;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>块级元素示例</h1>
        </header>
        <section>
            <h2>章节 1</h2>
            <p>这是一个段落。</p>
            <article>
                <h3>文章 1</h3>
                <p>这是文章 1 的内容。</p>
            </article>
            <article>
                <h3>文章 2</h3>
                <p>这是文章 2 的内容。</p>
            </article>
        </section>
        <section>
            <h2>章节 2</h2>
            <ul>
                <li>列表项 1</li>
                <li>列表项 2</li>
                <li>列表项 3</li>
            </ul>
        </section>
        <footer>
            <p>这是页脚内容。</p>
        </footer>
    </div>
</body>
</html>

常见的块级元素

  1. **
    **：通用容器，用于组合内容和创建布局。
  2. **

    **：段落，用于包含文本段落。

  3. 到 **

    **：标题标签，用于定义六级标题。
    4. 和 **
        **：无序列表和有序列表，用于创建列表。
      1. **
      2. **：列表项，用于列表中的每一项。
      3. ****：表格，用于显示表格数据。
      4. **
        **：页面或区块的头部，用于包含介绍内容或导航链接。
      5. **
        **：页面或区块的底部，用于包含作者信息、版权声明或导航链接。
      6. **
        **：文档的区段，用于划分页面内容的不同部分。
      7. **
        **：独立的内容片段，用于表示文章、博文、评论等。

        8. 常见的内联元素

        1. - Anchor（锚点）
        2. - Abbreviation（缩写）
        3. - Bold（粗体）
        4. - Bidirectional Isolate（双向隔离）
        5. - Bidirectional Override（双向覆盖）

        6.  - Break（换行）
        7. - Citation（引用）
        8. - Code（代码）
        9. - Definition（定义）
        10. - Emphasis（强调）
        11. - Italic（斜体）
        12. - Image（图像）
        13. - Input（输入）
        14. - Keyboard Input（键盘输入）
        15. - Label（标签）
        16. - Mark（标记）
        17. - Quote（短引用）
        18. - Strikethrough（删除线）
        19. - Sample Output（示例输出）
        20. - Small Text（小号文本）
        21. - Span（跨度）
        22. - Strong Emphasis（强烈强调）
        23. - Subscript（下标）
        24. - Superscript（上标）
        25. - Time（时间）
        26. - Underline（下划线）
        27. - Variable（变量）

        来学学英语单词

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        62
        63
        64
        65
        66
        67
        68
        69
        70
        71
        72
        73
        74
        75
        76
        77
        78
        79
        80
        81
        82
        83
        84
        85
        86
        87
        88
        89
        90
        91
        92
        93
        94
        95
        96
        97
        98
        99
        100
        101
        102
        1. **<a>** - Anchor（锚点）
        2. **<abbr>** - Abbreviation（缩写）
        3. **<address>** - Address（地址）
        4. **<article>** - Article（文章）
        5. **<aside>** - Aside（旁注）
        6. **<audio>** - Audio（音频）
        7. **<b>** - Bold（粗体）
        8. **<bdi>** - Bidirectional Isolate（双向隔离）
        9. **<blockquote>** - Block Quote（块引用）
        10. **<body>** - Body（主体）
        11. **<br>**Break（换行）
        12. **<button>** - Button（按钮）
        13. **<canvas>** - Canvas（画布）
        14. **<caption>** - Caption（标题）
        15. **<cite>** - Citation（引用）
        16. **<code>** - Code（代码）
        17. **<col>** - Column（列）
        18. **<colgroup>** - Column Group（列组）
        19. **<data>** - Data（数据）
        20. **<datalist>** - Data List（数据列表）
        21. **<dd>** - Description Definition（定义描述）
        22. **<del>** - Deleted Text（删除文本）
        23. **<details>** - Details（细节）
        24. **<dfn>** - Definition（定义）
        25. **<dialog>** - Dialog（对话框）
        26. **<div>** - Division（分区）
        27. **<dl>** - Description List（定义列表）
        28. **<dt>** - Description Term（定义术语）
        29. **<em>** - Emphasis（强调）
        30. **<embed>** - Embed（嵌入）
        31. **<fieldset>** - Field Set（字段集）
        32. **<figcaption>** - Figure Caption（图表标题）
        33. **<figure>** - Figure（图表）
        34. **<footer>** - Footer（页脚）
        35. **<form>** - Form（表单）
        36. **<h1>** to **<h6>** - Heading 1 to Heading 6（标题1到标题6）
        37. **<head>** - Head（头部）
        38. **<header>** - Header（页头）
        39. **<hr>** - Horizontal Rule（水平线）
        40. **<html>** - HyperText Markup Language（超文本标记语言）
        41. **<i>** - Italic（斜体）
        42. **<iframe>** - Inline Frame（内联框架）
        43. **<img>** - Image（图像）
        44. **<input>** - Input（输入）
        45. **<ins>** - Inserted Text（插入文本）
        46. **<kbd>** - Keyboard Input（键盘输入）
        47. **<label>** - Label（标签）
        48. **<legend>** - Legend（图例）
        49. **<li>** - List Item（列表项）
        50. **<link>** - Link（链接）
        51. **<main>** - Main Content（主要内容）
        52. **<map>** - Image Map（图像地图）
        53. **<mark>** - Marked Text（标记文本）
        54. **<meta>** - Meta Information（元信息）
        55. **<meter>** - Meter（计量）
        56. **<nav>** - Navigation（导航）
        57. **<noscript>** - No Script（无脚本）
        58. **<object>** - Object（对象）
        59. **<ol>** - Ordered List（有序列表）
        60. **<optgroup>** - Option Group（选项组）
        61. **<option>** - Option（选项）
        62. **<output>** - Output（输出）
        63. **<p>** - Paragraph（段落）
        64. **<picture>** - Picture（图片）
        65. **<pre>** - Preformatted Text（预格式化文本）
        66. **<progress>** - Progress（进度）
        67. **<q>** - Quote（引用）
        68. **<rp>** - Ruby Parenthesis（注释括号）
        69. **<rt>** - Ruby Text（注释文本）
        70. **<ruby>** - Ruby Annotation（注释）
        71. **<s>** - Strikethrough（删除线）
        72. **<samp>** - Sample Output（示例输出）
        73. **<script>** - Script（脚本）
        74. **<section>** - Section（节）
        75. **<select>** - Select List（选择列表）
        76. **<small>** - Small Text（小号文本）
        77. **<source>** - Source（来源）
        78. **<span>** - Span（跨度）
        79. **<strong>** - Strong Emphasis（强烈强调）
        80. **<style>** - Style（样式）
        81. **<sub>** - Subscript（下标）
        82. **<summary>** - Summary（摘要）
        83. **<sup>** - Superscript（上标）
        84. **<table>** - Table（表格）
        85. **<tbody>** - Table Body（表格主体）
        86. **<td>** - Table Data（表格数据）
        87. **<template>** - Template（模板）
        88. **<textarea>** - Text Area（文本区域）
        89. **<tfoot>** - Table Footer（表格脚部）
        90. **<th>** - Table Header（表头）
        91. **<thead>** - Table Head（表头部）
        92. **<time>** - Time（时间）
        93. **<title>** - Title（标题）
        94. **<tr>** - Table Row（表格行）
        95. **<track>** - Text Track（文本轨道）
        96. **<u>** - Underline（下划线）
        97. **<ul>** - Unordered List（无序列表）
        98. **<var>** - Variable（变量）
        99. **<video>** - Video（视频）
        100. **<wbr>** - Word Break Opportunity（单词断点）


        后记

        个人感觉核心知识不多，都是些细枝末节的记忆点，学起来很快，主要还是要尽快在实践中深化理解