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. 到 **

    **:标题标签,用于定义六级标题。
    • 和 **
        **:无序列表和有序列表,用于创建列表。
      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(单词断点)


        后记

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