＜电子幽灵＞前端第一件：HTML基础笔记下

原创已于 2024-08-04 13:17:07 修改 · 2.3k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #笔记

于 2024-07-15 20:17:17 首次发布

电子幽灵随手记专栏收录该内容

11 篇文章

订阅专栏

HTML基础笔记（下）

介绍

费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。

＜电子幽灵＞前端第一件：HTML基础笔记上中，最基础的一部分HTML标签和已经以表格的形式呈现出来了；接下来，将是对一些重要的标签进行详细叙述，并简单介绍头部和CSS。

HTML基础笔记下

HTML基础笔记（下）

本篇笔记主要来源于对菜鸟教程：HTML教程的学习。

重要标签

a :超链接标签

a用来对文本附加“超级链接”。超级链接是各个网页之间的链接，可以说，没有超级链接，就没有今天的互联网。

<!--该段代码部分由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a id="y1">Hello World</a>
    <br/>
    <a href="https://www.csdn.com" target="_blank">csdn主页</a>
    <br/>
    <a href="https://www.baidu.com">
        <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo"/>
    </a>
    <br/>
    <a href="#y1">这是一个实验性锚点</a>
</body>
</html>

a的常用属性

href:必需属性,指示链接的目标URL。
target：指示在哪个地方打开新页面。常用值：
1. _self:在当前页面打开
2. _blank：在新的空白页面中打开
3. _parent:在父窗口中打开
4. _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)
5. 其他页面名字：输入希望打开的页面名字
download：指示这是不是下载链接。如果存在则是下载链接。
id:设置锚点

img:图片标签

img的用处非常简单：插入各种各样的图像文件。

img的常用属性

src:必需属性,指示图片的来源URL。
alt:必需属性,指示链接的目标URL。
height:设置图像高度。
width:设置图像宽度。
loading:如果一个HTML中有图片，那么图片文件需要另外加载；loading表示图片应当何时加载。
1. eager：立即加载图像（让图像优先级靠前）
2. lazy：延迟加载图像（让图像优先级靠后）

table及附属:表格标签

table/thead/tbody/tr/th/td/tfoot等标签用来定义表格基本表格内的元素。

<!--该段代码部分由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr>   
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>13812345678</td>
                <td>zhangsan@163.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

table及其附属标签、常用属性

table:定义表格
1. border,规定表格有没有边框。只能是border=“1"或border=”"
thead:定义表格的首部，无任何特殊属性
tr:定义表格的一行，无任何特殊属性
th:定义一个表头单元格
1. colspan:单元格可横跨的列数
2. rowspan:单元格可横跨的行数
3. headers:设置该单元格所相关联的一个或多个表头单元格
4. scope:规定该单元格是否是一个列/行/列组/行组的表头
tbody:定义表格的主要部分，无任何特殊属性
td:定义一个标准单元格
1. colspan:单元格可横跨的列数
2. rowspan:单元格可横跨的行数
3. headers:设置该单元格所相关联的一个或多个表头单元格
tfoot:定义HTML的页脚，无任何特殊属性

ol/ul/dl：定义列表

ol/ul/dl可以定义有序/无序/自定义列表。

而且，列表之间几乎可以随意嵌套。

<!--该段代码部分由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ul>
        <li>tuple</li>
        <li>list</li>
        <li>dictionary</li>
    </ul>
    <ol start="4">
        <li>Python</li>
        <li>Java</li>
        <li>C++
            <ol reversed>
                <li>C#</li>
                <li>Swift</li>
                <li>Kotlin</li>
            </ol>
        </li>
    </ol>
    <dl>
        <dt>HTML</dt>
        <dd>- Hypertext Markup Language</dd>
        <dt>CSS</dt>
        <dd>- Cascading Style Sheets</dd>
        <dt>JavaScript</dt>
        <dd>- Programming Language</dd>
    </dl>
</body>
</html>

ol/ul/dl及相关标签、常用属性

ol：定义有序列表
1. start:从哪个数字开始排列
2. reversed：这个列表的数字排序是否是倒序
li：定义列表项
ul：定义无序列表，无任何特殊属性
dl：定义描述列表，无任何特殊属性
dt：定义描述列表项，无任何特殊属性
dd:对描述列表中的一个项目/名字进行描述，无任何特殊属性。

以上标签实际上已经足够我们构建一个简单的、相对完整的HTML页面了；但实际上还不够。它不够美观、不够具有交互性、也不够结构化、不够一目了然。

正如书本上需要一些插图，HTML上也需要一些色彩、一些只有互联网能做到的奇妙效果。在学习怎样实现它们之前，我们先把目光放回到我们已经忽略很久的head身上。虽然一般的head标签及其内容可以自动填补，但是为了下一步的润色以及对HTML更深刻的理解，学习它是必要的。

head介绍

正如之前在＜电子幽灵＞前端第一件：HTML基础笔记上中提到的，head的作用是为整个HTML打底。有了它，HTML页面将会变得更加结构化。

head中的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="https://www.baidu.com/img/" target="_blank"/>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        h1 {color:red;}
        p {color:blue;}
        </style>
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">
        <img src="bd_logo1.png" alt="百度logo"/>
    </a>
    <br/>
    <a href="https://www.google.com">这是个通往google的链接,由于base中设定了target="_blank",点击后会在新标签页打开</a>
    <br/>
    <h1>我是通过style渲染后显示的。</h1>
    <p>我也是。</p>
</body>
</html

head中能够容纳的标签很少，不妨直接全部列出。

标签	解释	常用属性
title	定义文档标题
base	为页面上所有相对链接规定默认 URL 或默认目标	href：规定该页面上所有相对链接的基准URL target：规定在此页面上所有链接在哪里打开
link	定义页面中文档与外部资源的关系，最常用来链接样式表（只在base中出现，但可以出现任意次数）	href：(必需)外部资源所在URL rel：(必需)当前文档和被链接文档的关系
meta	提供HTML的元数据	charset：定义文档用哪种字符编码 http-equiv:把content中的内容关联到http头部 name:把content属性关联到一个名称 content：定义和http-equiv或name相关联的元信息
script	定义客户端脚本，或者指向外部脚本文件	src：指向外部脚本的URL charset：外部脚本中的字符编码 defer：页面完成解析后再执行外部脚本 async：异步执行外部脚本
style	定义HTML文档的样式信息 (可以出现任意次数)	type：规定style的MIME类型

对于style、link、script，后续还会有更加详细的细分和更好的用处，但这里先不妨告一段落，基础的HTML学习大概就是这些了。

CSS介绍

在对以上标签的介绍中，我忽略了很多一部分已经被新的标准废弃或者不推荐使用的属性。这是因为，从HTML4开始，有专门的语言来让它变得更加美观，这门语言就是CSS层叠样式表，后面也会专门来讲。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="https://www.baidu.com/img/" target="_blank"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {color:red;}
        p {color:blue;}
        </style>
    <title>Document</title>
</head>
<body>
    <h1>我是通过style渲染后显示的。</h1>
    <p>我也是。</p>
    <p style="color:green;">我有专门的内联样式。</p>
</body>
</html>