Document

HTML基础知识速查

2024-07-03
dfer
274
html 前端 CSDN

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）。它使用预定义的标记标签来描述网页内容的结构和呈现。

基础语法

<!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> 标签嵌入内联脚本或引用外部脚本。

文本格式化

<!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>

![外链图片转存失败,源站可能有防在这里插入图片描述

粗体和斜体：

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

下划线和删除线：

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

上标和下标：

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

代码文本：

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

引用：

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

缩写：

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

引用地址：

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

变量：

<var> 用于表示变量。

预格式化文本：

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

高亮：

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

地址：

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

标记：

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

块级元素和行内元素

块级元素的特点

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

内联元素的特点

不独占一行：内联元素不会从新的一行开始，它们与相邻的内联元素和文本内容在同一行内显示。
宽度随内容变化：内联元素的宽度根据其内容的宽度变化，不会像块级元素那样自动填满父元素的宽度。
只能包含内联元素：内联元素通常只能包含其他内联元素或文本，不能包含块级元素。

<!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. ：无序列表和有序列表，用于创建列表。
：列表项，用于列表中的每一项。
：表格，用于显示表格数据。
：页面或区块的头部，用于包含介绍内容或导航链接。
：页面或区块的底部，用于包含作者信息、版权声明或导航链接。
：文档的区段，用于划分页面内容的不同部分。
：独立的内容片段，用于表示文章、博文、评论等。

常见的内联元素

- 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. **<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（单词断点）

后记

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

上一篇：收银系统源码分享-P

下一篇：基于PHP实现的考研

Document

HTML基础知识速查

HTML基础学习记录

前言

学习资料

什么是HTML

相关专业术语

基础语法

基础语法

文本格式化

块级元素和行内元素

块级元素的特点

内联元素的特点

常见的块级元素

到

：标题标签，用于定义六级标题。

常见的内联元素

来学学英语单词

后记