HTML学习
HTML基础学习记录
前言
知识是互通的嘛,个人粗浅的感觉就是Android中xml和markdown的杂交(这么说可能是有点倒反天罡了,但毕竟本人接触前两者更早)入门倒是挺快的,也感觉没啥好系统写的。
学习资料
HTML 入门 - 学习 Web 开发 |MDN的 — Getting started with HTML - Learn web development | MDN (mozilla.org)
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 |
|
标题和段落:
- 使用
<h1>
到<h6>
标签定义标题。 - 使用
<p>
标签定义段落。
链接和图片:
- 使用
<a>
标签创建超链接。 - 使用
<img>
标签嵌入图像,src
属性指定图像路径,alt
属性提供替代文本。
列表:
- 使用
<ul>
和<ol>
标签创建无序列表和有序列表。 - 使用
<li>
标签定义列表项。
表格:
- 使用
<table>
标签创建表格,<tr>
定义行,<th>
和<td>
定义表头和单元格。
表单:
- 使用
<form>
标签创建表单。 - 使用
<input>
、<textarea>
和<label>
标签定义表单控件。
媒体元素:
- 使用
<audio>
和<video>
标签嵌入音频和视频。
内联样式和外部样式表:
- 使用
<style>
标签定义内联样式。 - 使用
<link>
标签链接外部样式表。
脚本:
- 使用
<script>
标签嵌入内联脚本或引用外部脚本。
文本格式化
1 |
|
粗体和斜体:
<strong>
和<em>
用于语义上的重要性和强调。<b>
和<i>
用于视觉上的粗体和斜体效果。
下划线和删除线:
<u>
用于下划线。<del>
用于删除线。
上标和下标:
<sup>
用于上标。<sub>
用于下标。
代码文本:
<code>
用于表示代码片段。
引用:
<q>
用于短引用,通常会自动添加引号。<blockquote>
用于块引用,通常用于长段引用。
缩写:
<abbr>
用于缩写,title
属性提供完整的描述。
引用地址:
<cite>
用于引用书名、文章名等。
变量:
<var>
用于表示变量。
预格式化文本:
<pre>
用于保留文本中的空格和换行。
高亮:
- 使用
<span>
和 CSS 类来实现高亮效果。
地址:
<address>
用于表示联系信息或地址。
标记:
<mark>
用于高亮显示文本,通常用于表示搜索结果中的匹配项。
块级元素和行内元素
块级元素的特点
- 独占一行:块级元素通常从新的一行开始,并且会独占一行。
- 宽度自动填充父元素:块级元素的宽度默认会自动填充它的父元素的宽度。
- 可以包含其他块级元素和内联元素:块级元素内部可以包含其他块级元素和内联元素。
- 常用于布局:块级元素通常用于创建页面布局结构。
内联元素的特点
- 不独占一行:内联元素不会从新的一行开始,它们与相邻的内联元素和文本内容在同一行内显示。
- 宽度随内容变化:内联元素的宽度根据其内容的宽度变化,不会像块级元素那样自动填满父元素的宽度。
- 只能包含内联元素:内联元素通常只能包含其他内联元素或文本,不能包含块级元素。
1 |
|
常见的块级元素
- ****:通用容器,用于组合内容和创建布局。
- **
**:段落,用于包含文本段落。
- 到 **
**:标题标签,用于定义六级标题。
- **:无序列表和有序列表,用于创建列表。
- **
- **:列表项,用于列表中的每一项。
- **
**:表格,用于显示表格数据。
- **
**:页面或区块的头部,用于包含介绍内容或导航链接。 - **
- **
**:文档的区段,用于划分页面内容的不同部分。 - **
**:独立的内容片段,用于表示文章、博文、评论等。 常见的内联元素
- - Anchor(锚点)
- - Abbreviation(缩写)
- - Bold(粗体)
- - Bidirectional Isolate(双向隔离)
- - Bidirectional Override(双向覆盖)
- Break(换行)- - Citation(引用)
- Code(代码)
- - Definition(定义)
- - Emphasis(强调)
- - Italic(斜体)
- - Image(图像)
- - Input(输入)
- - Keyboard Input(键盘输入)
- - Label(标签)
- - Mark(标记)
- - Quote(短引用)
- Strikethrough(删除线)- - Sample Output(示例输出)
- - Small Text(小号文本)
- - Span(跨度)
- - Strong Emphasis(强烈强调)
- - Subscript(下标)
- - Superscript(上标)
- - Time(时间)
- - Underline(下划线)
- - 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
1021. **<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(单词断点)后记
个人感觉核心知识不多,都是些细枝末节的记忆点,学起来很快,主要还是要尽快在实践中深化理解
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 焦糖酒的妙妙屋!数据库加载中 - **