HTML5+CSS3笔记
一、HTML5
1 简述
HTML用于描述页面的结构（骨头，看不见）
CSS用于控制页面中元素的样式（皮肤，外在表现）
JavaScript用于响应用户操作（动起来）
HTML：超文本标记语言，使用标签的形式来标识网页中的不同组成部分。
超文本：指超链接，可以让我们从一个页面跳转到另一个页面。（纯文本编辑器写的就是纯文本，比如记事本。而word里面写的是富文本）
自行操作：打开记事本（建议不要新建），开始-菜单-notepad-回车-写-ctrl+s保存为xxx.html）
左边是文本，右边是浏览器渲染出来的效果。
如果要修改网页内容，可以右键该html文件，选择用记事本打开，或者直接将html文件拖至记事本编辑页面中。
关于文件后缀名显示问题（查看->勾选文件扩展名）
1.1 VSCode快捷键
！+回车：快速生成完整网页结构；
ctrl+/：自动生成注释；
ctrl+回车：光标下移；
Shift+Alt+⬇：向下复制；
快速生成标签
·1.ul>li 再回车
2.ul+ul 再回车
3.ul>li*5再回车
1.2 编写你的第一个网页
标记就是用来表示网页中不同内容，告诉浏览器是什么东西。
html是根标签，网页中有且只有一个，其他所有网页内容写在html标签中，html中有两个子标签，为head标签和body标签
head子标签为title
head中的内容不会出现在网页中
title中的内容出现在标题栏
1.3 自结束标签和注释
标签一般成对出现，但是也存在一些自结束标签可以这样写
<img>或 <img><img/>
<input>或<input><input/>，一般第一个
<!--
HTML的注释：注释中的内容会被浏览器所忽略，不会在网页中直接显示
但是可以在源码中查看注释，注释是用来对代码进行解释说明的，
开发中一定要养成良好的编写注释的习惯，注释要求简单明了
注释还可以将一些不希望显示的内容隐藏
注释不能嵌套
-->
1.4 标签中的属性
属性：在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）结构
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有
如果有属性值，属性值应该使用引号引起来
<h1>这是我的<font color="red" size='3'>第三个</font>网页！</h1>
1.5 文档声明和进制以及字符编码
<!DOCTYPE html>
<html>
<head>
<!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 -->
<meta charset="utf-8">
<title>网页的基本结构</title>
</head>
<body>
<!--
迭代
网页的版本
HTML4
HTML2.0
HTML5
…
文档声明（doctype）
-文档声明用来告诉浏览器当前网页的版本
-htm5的文档声明
<!doctype html>
<!Doctype HTML>
不区分大小写
进制：
十进制（日常使用）
-特点：满10进1
-计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13
-单位数字：10个（0-9）
二进制（计算机底层的进制）
-特点：满2进1
-计数：0 1 10 11 100 101 110 111
-单位数字：2个（0-1）
-扩展：
-所有数据在计算机底层都会以二进制的形式保存
-可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
这一个小格子在内存中被称为1位（bit）
8bit=1byte（字节）字节是最小操作单位
1024byte=1kb(千字节)
1024kb=1mb(兆字节)
1024mb=1gb（吉字节）
1024gb=1tb(特字节)
1024tb=1pb
八进制（很少用）
-特点：满8进1
-计数：0 1 2 3 4 5 6 7 10 11 12
-单位数字：8个（0-7）
十六进制（一般显示一个二进制数字时，都会转换为十六进制）
-特点：满16进1
-计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 …… 1A 1B
-单位数字：16个（0-F）
字符编码
中国->110001110111（编码）
110001110111->中国（解码）
-所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外，
所以一段文字在存储到内存时，都需要转换为二进制编码
当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
-编码
-将字符转换为二进制编码的过程称为编码
-解码
-将二进制码转换为字符的过程的称为解码
-字符集（charset）
-编码和解码所采用的规则称为字符集
-乱码问题
-如果编码和解码所采用的字符集不同就会出现乱码问题
-常见的字符集：
ASCII
ISO88591
GB2312
GBK
UTF-8(万国码，在开发时我们使用的字符集都是UTF-8)
-->
</body>
</html>
1.6 文档的使用
<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有内容都要写在根元素的里边 -->
<html lang="en">
<!-- head是网页的头部，head中内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset="UTF-8">
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>
</head>
<!-- body时html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
<!-- h1网页的一级标题 -->
<h1>网页的大标题</h1>
</body>
</html>
1.7 VScode安装教程并配置Live Server
安装地址：https://code.visualstudio.com/Download
电脑是哪个版本就选择哪个版本
安装完成！
相关插件安装：
中文插件：
主题插件：
界面字体修改：
lan="en"表示网页是用英文写的，是英文网页，运行会出现下面界面。
“zh”表示中文网页
自动保存：
配置Live Server设置默认浏览器
安装插件
设置默认浏览器
2 实体
实体查找网站：https://www.w3school.com.cn/html/html_entities.asp
<!--
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊符号
比如，多个连续的空格，比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：
&实体的名字；
 ；空格
>；大于号
<；小于号
©；版权符号
-->
示例：
<p>
今天 天气真不错！
</p>
<p>
a<b>c
</p>
3 meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
keywords 表示网站的关键字（搜购物搜到京东），可以同时指定多个关键字，多个关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
descritpion 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索结果中
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
title标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<!--
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
将页面重定向到另一个网站;3s
-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<title>Document</title>
</head>
<body>
</body>
</html>
4 语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
块元素（block element）
- 在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
……
-->
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
<h1>我就要写在html标签的外部！</h1>
输出
开发者工具使用：
右键—检查
Element：查看网页源码，即网页在内存中的结构
5 结构化语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header 表示网页的头部
main 表示网页的主体部分（一个页面中只会有一个main）
footer 表示网页的底部
nav 表示网页中的导航
aside 表示和主题相关的其他内容（其他内容）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的予以，一般用于在网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<span></span>
</body>
</html>
6 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
列表（list）
1、铅笔
2、尺子
3、橡皮
在html中也可以创建列表，html列表一共有三种：
1、有序列表
2、无序列表
3、定义列表
有序列表，使用ol标签来创建无序列表
使用li表示列表项
无序列表，使用ul标签来创建有序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
输出
7 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面
或是当前页面的其他位置
使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以是一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
-->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="https://www.baidu123.com">超链接</a> -->
<a href="07.列表.html">超链接2</a>
</body>
</html>
输出：（访问过呈紫色，未访问过呈蓝色）
8 相对路径
9 超链接的其他用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
-->
<a href="07.列表.html" target="_blank">超链接</a>
<br><br>
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去第三自然段</a>
<br><br>
<p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡碟乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春;他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼��眼;直刺着天空中圆满的月亮，使月亮窘得发白。</p>
<p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡碟乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春;他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼��眼;直刺着天空中圆满的月亮，使月亮窘得发白。</p>
<p id="p3">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡碟乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春;他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼��眼;直刺着天空中圆满的月亮，使月亮窘得发白。</p>
<p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡碟乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春;他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼��眼;直刺着天空中圆满的月亮，使月亮窘得发白。</p>
<p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡碟乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春;他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼��眼;直刺着天空中圆满的月亮，使月亮窘得发白。</p>
<p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样的奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡碟乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春;他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼��眼;直刺着天空中圆满的月亮，使月亮窘得发白。</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum placeat quod iste commodi sint quam inventore architecto. Totam fugit maxime quos delectus vitae. Nobis blanditiis hic ipsam itaque saepe architecto?</p>
<!-- 在开发中可以将#作为超链接的路径的占位符使用 -->
<a href="#">这是一个新的超链接</a>
<br><br>
<!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
<a href="JavaScript:;">这是一个新的超链接</a>
<br><br>
<!--
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
-->
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
10 图片标签及格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度（单位是像素）
height 图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示图片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64，可以加快访问速度
效果一样 用小的
效果不一样，用效果好的
-->
<img src="./img/1.jpg" alt="风景">
<img width="500"src="https://www.akailibrary.com/wp-content/themes/ripro/timthumb.php?src=https://www.akailibrary.com/wp-content/uploads/2021/01/036-stethoscope.jpg&h=270&w=480&zc=1&a=c&q=100&s=1" alt="图标">
</body>
</html>
base64转换网站：https://base64.us/
11 内联框架
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
内联框架中的信息不会被搜索引擎搜索
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
</body>
12 音视频播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
-->
<!-- <audio src="./source/audio.mp3" controls autoplay loop></audio> -->
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="200" height="50">
</audio>
<!--
使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
-->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4" allowFullScreen="true" width="500" height="300">
</video>
</body>
</html>
二、CSS
1 CSS简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
第二种方式
- 将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
- 内部样式表更加方便对样式进行复用
我们的内部样式表只能对一个网页起作用
它里边的样式不能跨页面进行复用
-->
<!-- <style>
p{
color: green;
font-size: 50px;
}
</style> -->
<!--
第三种方式（外部样式表） 最佳实践
- 可以将CSS样式编写到一个外部的CSS文件中
然后通过link标签来引入外部的CSS文件
- 外部样式表需要通过link标签进行引入，
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
- 将样式编写到外部的CSS文件中，可以使用浏览器的缓存机制，
从而加快网页的加载速度，提高用户的体验
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--
网页分成三个部分：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS
- 层叠样式表
- 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
最终我们能看到只是网页的最上边一层
- 总之一句话，CSS用来设置网页中元素的样式
-->
<!--
使用CSS来修改元素的样式、
第一种方式（内联样式，行内样式）：
- 在标签内部通过style属性来设置元素的样式
- 问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍、
并且当样式发生变化时，我们必须要一个一个修改，非常不方便
- 注意，开发时绝对不要使用内联样式
-->
<!-- <p style="color: red; font-size: 30px;">少小离家老大回，乡音无改鬓毛衰</p> -->
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<p>少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>
2 CSS的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
CSS中的注释，注释中的内容会自动被浏览器所忽略
CSS的基本语法
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以 : 连接，以 ; 结尾
*/
p{
color: red;
font-size: 40px;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>我是H1</h1>
<p>今天天气真不错！</p>
<p>今天天气真不错！</p>
<p>今天天气真不错！</p>
<p>今天天气真不错！</p>
<p>今天天气真不错！</p>
</body>
</html>
3 选择器
3.1 常用选择器
元素选择器、id选择器、类选择器、通配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名()
例子：p{} h1{} div{}
*/
/* p{
color: red;
}
h1{
color: green;
} */
/*
将儿童相见不相识设置为红色
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
*/
/* #red{
color: red;
} */
/*
将 秋水…… 和 落霞…… 设置为蓝色
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
*/
/* .blue{
color: blue;
}
.abc{
font-size: 20px;
} */
/*
通配选择器
作用：选中页面中的所有元素
语法：*
*/
*{
color: red;
}
</style>
</head>
<body>
<h1 class="blue abc">我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--
class是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-->
<p class="blue">落霞与孤鹜齐飞</p>
<p class="blue">秋水共长天一色</p>
</body>
</html>
3.2 复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 将class为red的元素设置为红色（字体） */
.red{
color: red;
}
/* 将class为red的div字体大小设置为30px */
/*
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: blue;
}
/* div#box1{} 语法没有问题，但是不建议这样写，#box1就唯一指定了 */
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
#b1,.p1,h1,span,div.red{}
*/
/* h1{
color: green;
}
span{
color: green;
} */
/* 上面两个元素选择器可以改为下面这种 */
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>标题</h1>
<span>哈哈</span>
</body>
</html>
3.3 关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为div的子元素span设置一个字体颜色红色
（为div直接包含的span设置一个字体颜色）
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
*/
/* div.box > span{
color: orange;
} */
/*
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
*/
/* div span{
color: skyblue;
} */
/* 选中孙子 */
/* div>p>span{
color: red;
} */
/*
选中下一个兄弟
语法：前一个 + 下一个（紧挨着）
选择下边所有的兄弟
语法：兄 ~ 弟
*/
p + span{
color: red;
}
p ~ span{
color: red;
}
</style>
</head>
<body>
<!--
父元素
- 直接包含子元素的元素叫做父元素
子元素
- 直接被父元素包含的元素是子元素
祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素、
- 子元素也是后代元素
兄弟元素
-拥有相同元素的元素是兄弟元素
-->
<div class=
最低0.47元/天 解锁文章
扫一扫
5147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
