Cloud_Player's Notes
0%

HTML+CSS入门笔记

发表于 更新于
本文字数： 11k 阅读时长 ≈ 10 分钟

预备

尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频

学习路线
HTML4 -> CSS2 -> HTML5 -> CSS3

应用软件 C/S 架构 与 B/S 架构： C : Client B : Browser S : Server C/S 架构：需要安装 偶尔更新 不跨平台 B/S 架构：无需安装 无需更新 可跨平台 大型专业应用、安全要求较高的应用，还需采用 C/S 架构

前端工程师主要开发 B/S 架构的应用 —— 通俗来说就是写网页
大前端时代，不止是网页：
微信小程序
React Native -> 客户端开发
uni-app + Vue -> 客户端开发
nodejs -> 搭建服务器
ECHARTS -> 数据可视化

浏览器内核？
内核是浏览器的核心，用于处理浏览器所得到的各种资源
Chrome 内核：早期webkit，现在Blink

网站 -> 多个网页
网页的组成：结构（HTML） + 表现（CSS） + 行为（JavaScript）

HTML 初体验

HTML: HyperText Markup Language
即超文本标记语言

先来一个 Hello World 跑马灯效果

HTML初体验.html
1
<marquee>Hello World!</marquee>

上面的是 源代码，通过浏览器 渲染 成为 页面

在 chrome 里面可以 ->右键->查看网页源代码
【注】严格来说，文件名与文件夹名最好都不出现中文

HTML 标签

标签，又称元素
在上面的源代码中，<marquee> 与 </marquee> 均为标签
<marquee> 为起始标签
</marquee> 为结束标签
marquee 为标签名
Hello World! 为标签体
即

1
2
3
<标签名>标签体</标签名> 
<!-- <标签名>为起始标签 </标签名>为结束标签 -->
<!-- 规范为小写 -->

标签有双也有单

1
2
<input>
<input/> <!-- 自结束 -->

标签可以并列，也可以嵌套，注意缩进

02_HTML标签.html
1
2
3
4
5
<marquee>
    Hello World!
    <input>
</marquee>
<input>

HTML 标签属性

对上面的跑马灯效果提出需求：只想让它跑一次
利用属性进行控制，标签属性用于给标签提供附加信息

1
2
3
4
<marquee loop="1">
    Hello World!
</marquee>
<!-- loop="x" 其中 x > 0 -->

更多的属性

1
2
3
<marquee loop="1" bgcolor="orange">
    Hello World!
</marquee>

不同的标签有不同的属性

1
<input type="password">

属性分通用属性与独有属性

1
2
3
4
<marquee loop="1" bgcolor="orange" id="hello">
    Hello World!
</marquee>
<input id="typein">

归纳

1
2
<标签名 属性名="属性值" 属性名="属性值">
<!-- 起始标签或单标签 -->

没有属性名，只有属性值

1
<input disabled>

可以写多个属性，但不能重复，重复以第一个为准，后写的失效

1
<input type="text" type="password">

属性名属性值不能乱写
不区分大小写，但是推荐小写
单双引号或无引号都可，但是推荐双引号

03_HTML标签属性.html
1
2
3
4
5
<marquee loop="1" bgcolor="green">
    Hello World!
    <input type="text" type="password">
</marquee>
<input disabled>

HTML 基本结构

1
<marquee>Hello World!</marquee>

浏览器会对源代码进行 HTML 格式检查
若格式合法将直接渲染
若格式不合法浏览器会进行处理（尽可能帮助调整）后，再渲染

处理后的代码

1
2
3
4
5
6
<html>
    <head></head>
    <body>
        <marquee>Hello World!</marquee>
    </body>
</html>

可以这样看到：
用 chorme 打开 html 文件 -> 右键 -> 检查
检查和查看网页源代码的区别：
查看网页源代码：即程序员编写的源代码
检查：经过浏览器处理后的源代码

图片所展示的其实是浏览器的开发者工具

网页的基本结构如下：
呈现在网页中的内容写在 body 标签中
head 标签中的内容不会出现在网页中
head 标签中的 title 标签可以指定网页的标题（页签名）

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        ...
    </body>
</html>

如果将 marquee 标签作为 head 标签的标签体
即如下代码：

1
2
3
4
5
6
7
8
<html>
    <head>
        <marquee>Hello World!</marquee>
    </head>
    <body>
        <marquee>Hello World!</marquee>
    </body>
</html>

浏览器会自己进行调整，把 marquee 标签移到下面的 body 中去

04_HTML基本结构.html
1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>MyWebPage</title>
    </head>
    <body>
        <marquee>Hello World!</marquee>
        <marquee>Hello World!</marquee>
    </body>
</html>

安装 VSCode

  • 安装中文语言包
  • 使用 VSCode 打开文件夹的两种方式
  • 调整字体大小
  • 设置主题
  • 安装图标主题（可选：vscode-icons）

安装 Live Server 插件

  • Live Server 插件可以更方便的打开网页
    安装后，在代码编辑区域点击右键，选择 Open with Live Server

  • 与在文件夹中双击直接打开比较，其路径不同
    后者是文件路径，而前者是服务器路径（127.0.0.1:5500）
    用服务器路径打开网页的方式更贴近项目上线

  • 代码出现改动后，可以自动刷新

  • 可以配置一下 VSCode 的自动刷新（还是习惯手动 Ctrl + S）

  • 【注】Live Server 需要 VScode 打开的是文件夹才能正常工作

  • 【注】打开的网页源代码必须是标准的 HTML 结构，否则无法自动刷新

HTML 注释

注释：对代码进行解释和说明
注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见

注释的写法

1
<!-- 这里写注释 -->

注释不可以嵌套

1
2
3
4
<!-- 
    这里写注释 
    <!-- 这里又写注释 -->
-->
05_HTML注释.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <title>HTML注释</title>
    </head>
    <body>
        <marquee loop="1">
            Hello World!
            <!--
                下面的输入框是可以滚动的，
                且只能滚动一次
                <!-- 可以通过控制 loop 属性，操作循环次数 -->
            -->
            <input type="text">
        </marquee>
        <!-- 下面的输入框是不可以滚动的 -->
        <!-- <input type="text"> -->
    </body>
</html>

HTML 文档声明

Recommended list of Doctype
The simplest and most reliable doctype declaration to use is the one defined in HTML5:

1
<!DOCTYPE html>
06_HTML文档声明.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
	    <title>An HTML standard template</title>
	    <meta charset="utf-8"  />
    </head>
    <body>
        <p>… Your HTML content here …</p>
    </body>
</html>

HTML 字符编码

字符集：
ASCII | ISO 8859-1 | GB2312 | GBK | UTF-8

原则1：存储时，务必采用合适的字符编码
否则：无法存储，数据会丢失，不可恢复
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码
否则：数据错乱（乱码），可恢复

统一采用 UTF-8 编码
通过 meta 标签配合 charset 属性指定字符编码

1
2
3
<head>
    <meta charset="UTF-8"/>
</head>
07_HTML字符编码.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="gbk" />
        <title>HTML字符编码</title>
    </head>
    <body>
        <marquee>
            hello world 你好世界 こんにちは世界 안녕 세상
        </marquee>
    </body>
</html>

直接打开会出现乱码，使用 Live Server 打开，会修正为正确的文字

HTML 设置语言

让浏览器显示对应的翻译提示
有利于搜索引擎优化

1
2
3
<html lang="zh-CN">
...
</html>
08_HTML设置语言.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>HTML设置语言</title>
    </head>
    <body>
        <marquee>hello world</marquee>
        <marquee>你好世界</marquee>
        <marquee>こんにちは世界</marquee>
        <marquee>안녕 세상</marquee>
    </body>
</html>

HTML 标准结构

09_HTML标准结构.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>我是一个标题</title>
    </head>
    <body>
        <p>… Your HTML content here …</p>
    </body>
</html>

可以借助 VSCode，输入 !，随后回车即可快速生成标准结构

1
2
3
4
5
6
7
8
9
10
11
12
<!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>
    
</body>
</html>

配置 VSCode 的内置插件 emmet，可以对生成结构的属性进行定制

在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标

开发者文档

W3C HTML

the current HTML standard

W3school

MDN Web Docs

HTML 排版标签

h1 ~ h6：标题
p：段落
div：用于整体布局
三种皆为双标签

10_HTML排版标签.html
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML排版标签</title>
</head>
<body>
    <!-- h1~h6 不允许嵌套 -->
    <!-- 
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <h4>我是四级标题</h4>
        <h5>我是五级标题</h5>
        <h6>我是六级标题</h6>
        <div>
            <p>我是一个段落</p>
            <p>我是一个段落</p>
            <p>我是一个段落</p>
        </div> 
    -->
    <!-- p 标签中不能有 h1~h6、p、div 标签 -->
    <h1>生成式AI或将彻底改变在线广告行业</h1>
    <h4>2023年07月10日 08:48 新浪科技</h4>
    <div>
        <p>新浪科技讯 北京时间7月9日早间消息，据报道，就在ChatGPT去年因为超强的问答能力而火遍全球后不久，数字营销老兵谢恩·拉斯纳克（Shane Rasnak）就开始尝试这项技术。</p>
        <p>拉斯纳克的整个职业生涯几乎都在为客户制作网络广告，正是这样的经历，让他看到了生成式人工智能会给这个行业带来多大的变化。他表示，无论是制作Facebook广告标题还是创作广告文案简介，以前都至少要花费他30分钟至1个小时，但现在只需要15分钟即可完成。</p>
        <p>而且，这还只是开始。</p>
    </div>
</body>
</html>

HTML 语义化标签

语义：即含义
语义化：标签默认的效果不重要，语义最重要！
语义化标签：用特定的标签，去表达特定的含义

语义化标签

  • 代码可读性强，结构清晰
  • 有利于 SEO（搜索引擎优化）
  • 方便设备解析（屏幕阅读器、盲人阅读器）

例如：h1 的默认效果可以通过 CSS 进行修改
所以要用 h1 标签时，不是因为它默认的文字加粗、放大效果，而是因为标签体是网页的主要内容
（即符合 h1 的语义）

11_HTML语义化标签.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML语义化标签</title>
    <style>
        h1{
            font-size: 20px;
            color:dodgerblue;
            background-color: aliceblue;
            transform: rotate(-2deg);
        }
    </style>
</head>
<body>
    <h1>生成式AI或将彻底改变在线广告行业</h1>
    <h4>2023年07月10日 08:48 新浪科技</h4>
    <div>
        <p>新浪科技讯 北京时间7月9日早间消息，据报道，就在ChatGPT去年因为超强的问答能力而火遍全球后不久，数字营销老兵谢恩·拉斯纳克（Shane Rasnak）就开始尝试这项技术。</p>
        <p>拉斯纳克的整个职业生涯几乎都在为客户制作网络广告，正是这样的经历，让他看到了生成式人工智能会给这个行业带来多大的变化。他表示，无论是制作Facebook广告标题还是创作广告文案简介，以前都至少要花费他30分钟至1个小时，但现在只需要15分钟即可完成。</p>
        <p>而且，这还只是开始。</p>
    </div>
</body>
</html>

块级元素与行内元素

块级元素：独占一行（排版标签都是）
行内元素：不独占一行
块级元素中能写：行内元素、块级元素（几乎什么都能写）
行内元素中能写：行内元素，但不能写：块级元素

12_块级元素与行内元素.html
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>块级元素与行内元素</title>
</head>
<body>
    <!-- 块级元素，特点：独占一行 -->
    <!-- <marquee>Hello World</marquee>
    <marquee>Hello World</marquee>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <p>Hello World</p>
    <p>Hello World</p>
    <div>Hello World</div>
    <div>Hello World</div> -->

    <!-- 行内元素，特点：不独占一行 -->
    <!-- <input type="text" />
    <input type="text" />
    <span>Hello World</span>
    <span>Hello World</span> -->
    
    <!-- 规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写） -->
    <!-- <div>
        <span>row1</span>
        <input type="text" />
        <div>row2</div>
    </div> -->

    <!-- 规则2：行内元素中能写：行内元素，但不能写：块级元素 -->
    <!-- <span>
        <span>content1</span>
        <input type="text" />
        <span>content2</span>
        <div>content3</div>
    </span>
    <span>content4</span> -->
    <!-- 否则会导致样式错乱 -->

    <!-- 特殊规则：h1~h6 不能互相嵌套 -->
    <!-- <h1>
        标题1
        <h2>标题2</h2>
    </h1> -->

    <!-- 特殊规则：p 标签中不能写块元素 -->
    <!-- <p>
        <h1>标题1</h1>
    </p> -->
    <!-- 发现 <p><marquee>...</marquee></p> 可以用，这是因为 marquee 标签已经不用了 -->
    <!--
        <marquee> 元素已经 过时，请不要再使用（用 CSS 实现得更好）
        尽管一些浏览器仍然支持它，但它不是必须的
        此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一
        所以请不要这样做。
    -->
</body>
</html>

常用的文本标签

用于包裹词汇、短语等，通常写在排版标签里面
排版标签更宏观，文本标签更微观
文本标签通常都是行内元素

em 要着重阅读的内容 双标签
strong 十分重要的内容（语气比 em 要强） 双标签
span 没有语义，用于包裹短语的通用容器 双标签

13_常用的文本标签.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML_常用的文本标签</title>
    <style>
        span{
            color:blue;
        }
    </style>
</head>
<body>
    <p>
        预防电信诈骗，请安装：<em>国家反诈中心app。</em>
    </p>
    <p>
        当我们出门的时候，一定要<strong>关好门窗</strong>！
    </p>
    <p>
        前端三个框架为：<span>Angular、React、Vue</span>
    </p>
</body>
</html>

不常用的文本标签

cite | dfn | del | ins | sub | sup | code | samp |
kbd | abbr | bdo | var | small | b | i | u | q |
blockquote | address

14_不常用的文本标签.html
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML_不常用的文本标签</title>
</head>
<body>
    <p>
        这首<cite>《光辉岁月》</cite>，非常的好听！
    </p>
    <p>
        <dfn>耗子尾汁</dfn>，是一个网络流行语，意思同<dfn>好自为之</dfn>。
    </p>
    <p>
        商品原价：<del>199</del>，限时秒杀：<ins>99</ins>
    </p>
    <p>
        水的化学方程式：H<sub>2</sub>O，8的三次方：8<sup>3</sup>
    </p>
    <p>
        学了JS，发现这段代码很有意思：<code>alert(1)</code>
    </p>
    <p>
        手机提示：<samp>支付宝到账25元！</samp>
    </p>
    <p>
        保存的快捷键：<kbd>ctrl + s</kbd>
    </p>
    <p>
        <abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩
    </p>
    <p>
        你是年少的欢喜，这句话反过来就是：<bdo dir="rtl">你是年少的欢喜</bdo>
    </p>
    <p>
        JS中，定义变量： <code>let <var>a</var> = 1</code>
    </p>
    <p>
        <small>本网站所有资料、图表仅供参考。</small>
    </p>
    <p>
        我也买过<b>罗技GPW</b>，蛮好用！
    </p>
    <p>
        我说：<i>“燕子，没有你我怎么活啊！”</i>
    </p>
    <p>
        你好不是<u>heelo</u>
    </p>
    <p>
        屈子云：<q>路漫漫其修远兮，吾将上下而求索</q>
    </p>
    <p>
        歌词：<blockquote>后来，我总算学会了如何去爱；可惜你早已远去，消失在人海；后来，终于在眼泪中明白；有些人，一旦错过就不再</blockquote>
    </p>
    <p>
        学校地址：<address>北京市海淀区学院路</address>
    </p>
    <!-- blockquote 与 address 是块元素，其他皆为行内元素 -->
    <!-- 语义感不强的标签，很少使用 -->
</body>
</html>

HTML 图片标签