HTML5
01.text
1 安装VScode
2 安装中文语言包
3 尝试安装ayu主题
4 将一个目录作为项目目录大
5 创建一个新网页
6 安装live server
7 尝试通过live server来运行网页
8 设置代码自动存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1 安装VScode
2 安装中文语言包
3 尝试安装ayu主题
4 将一个目录作为项目目录大
5 创建一个新网页
6 安装live server
7 尝试通过live server来运行网页
8 设置代码自动存储
-->
<h1>Hello</h1>
<p>hhhhhhh</p>
<p>hhh</p>
</body>
</html>
02.实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候,我们不能直接书写一些特殊符号
比如:多个连续的空格,比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊符号，则需要使用html中的实体（转义字符）
实体的语法
&实体的名字；
空格
>；大于号
<；小于号
©；版权符号
-->
<p>
今天 天气这不错
</p>
<p>
a<b>c
</p>
</body>
</html>
index1
<html>
<head>
<title>啊哈？真的吗？</title>
</head>
<body>
<h1>回乡偶书(二首)</h1>
<h2>其一</h2>
<h3>贺知章</h3>
<p>少小离家老大回</p>
<p>乡音无改登毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
</html>
index2
<html>
<head>
<title>这是我的第二个网页</title>
</head>
<body>
<!--这个东西很重要，千万不要删-->
<h1>这是我的第二个网页</h1>
<!--
HTML注释，注释中的内容会被浏览器所忽略,不会在网页中直接显示
但是可以在源码中查看注释,注释用来对代码迸行解释说明的
写注释习惯，简单明了
注释还可以将不希望显示的隐藏
注释不能嵌套
标签一般成对出现，但是也存在一些自结束标签
<img> 自结束标签
<img />
<input >
-->
</body>
</html>
index3
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<!--
属性，在标签中（开始标签或自结束标签）可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性名不能瞎写,应该根据文档中的规定来编写
有些属性有属性值,有些没有。如界有属性值,属性值应该使用引号引起来
-->
<h1>这是我的<font color="red" size='25'>第三个</font>网页</h1>
</body>
</html>
index4
<!doctype html>
<html>
<head>
<!--可以通过meta标签来设置网页的字符集,避免乱码问题-->
<meta charset="utf-8">
<title>网页的基本结构</title>
</head>
<body>
<!--
迭代
网页的版本
HTML4
XHTML2.0
HTML5
……
文档声明（doctype）
-文档声明用来告诉浏览器当前网页的版本
-htm15的文档声明
<!doctype html>
进制：
十进制
-特点：
二进制
八进制
十六进制
字符编码
李立超->110000110110(编码)
110000110110->李立超(解码
- 所有的数据在计算机中存储时都是以二进制形式存储的,文字也不例外
所以一段文字在存储到内存中时,都需要转换为二进制编码
当我们读取这段文字时,计算机会将编码转换为字符,供我们阅读
- 编码
将字符转换为二进制码的过程称为编码
- 解码
将二进制码转换为字符的过程称为解码
- 字符集( charset)
编码和解码所采用的规则称为字符集
- 乱码问题
如果编码和解码所采用的字符集不同就会出现乱码问题
- 常见的字符集
ASCII
IIISO88591
GB2312
GBK
UTF-8 万国码 都是用这个
-->
</body>
</html>
index5
<!--文档声明，声明当前网页的版本-->
<!doctype html>
<!--html的根标签（元素）网页中的所有内容都要写在根元素里边 -->
<html>
<!-- head是网页的头部,head中的内容不会在网页中直接出现,
主要用来帮助浏览器或搜索引擎来解析网页
-->
<head>
<!--meta标签用来设置网页的元数据,这里meta用来设置网页的字符集,避免乱码问题-->
<meta charset="utf-8">
<!-- title中的内容会显示在浏览器的标题栏,搜索引擎会主要根据ti1e中的内容来判断网页的主要内容-->
<title>网页的标题</title>
</head>
<!--body是htm1的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里-->
<body>
<!--h1网页的一级标题-->
<h1>网页的大标题</h1>
</body>
</html>
03.标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta主要用于设置网页中的一些元数据,元数据不是给用户着
charset 指定网页的字符集
name 指定的数据名称
content 指定的数据内容
kewords 表示网站的关键字，可以同时指定多个关键字,关键字间使用,隔开
description 用于指定网站的描述
title 标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywwords" content="HTML5,前端，CSS3">
<meta name="description" content="这是一个非常不错的网站！">
<!--
meta http-equiv="refresh" content="3";url="https://www.mozilla.org">
将页面重定向到另一个网站
-->
<title>Document</title>
</head>
<body>
</body>
</html>
04.语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签
h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于 title标签,一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3,h4~h6很少用
在页面中独占一行的元素称为块元素( block element)
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup标签用来为标题分组,可以将一组相关的标题同时放入到 hgroup
-->
<hgroup>
<h1>回乡偶书</h1>
<h2>其一</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<!--
em 标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline element）
-->
<p>今天天气<em>真</em>不错！</p>
<!--
strong表示强调,重要内容!
-->
<p>你今天必须要<strong>完成作业</strong>！</p>
鲁迅说：
<blockquote>
这句话我是从来没有说过的！
</blockquote>
<!--
q表示一个短引用
-->
子曰<q>学而时习之，乐呵乐呵！</q>
<br>
<br>
今天天气真不错
</body>
</html>
05.语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素( block element)
- 在网页中一般通过块元素来对页面进行布局
行内元素(in1 ine element)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
-->
</body>
</html>
06.语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<div></div>
<span></span>
</body>
</html>
07.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表(list)
1、铅笔
2、尺子
3、橡皮
在htm1中也可以创建列表,htm1列表一共有三种
1、有序列表
2、无序列表
3、定义列表
有序列表,使用u1标签来创建有序
使用li表示列表项
无序列表,使用ol标签来创建无序列表
使用1i表示列表项
定义列表,使用dl标签来创建一个定义列表
使用d来表示定义的内容
使用d来对内容进行解释说明
列表之间可以互相嵌套
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定哪里是标题,哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</body>
</html>
08.超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
复制—— alt + shift + 方向键
超链接 - 可以让我们从一个页面跳转到其他页面
或者是当前页面的其他位置
使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
-->
<a href="htttps://www.baidu.com">超链接</a>
<br><br>
<a href="07.列表.html">超链接2</a>
</body>
</html>
09.相对路径
<!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>
<!--
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径
相对路径都会使用.或..开头
./
../
./可以省略不写，如果不写./也不写../则就相当于写了./
./ 表示当前文件所在的目录
- 在这里当前页面就是 09.相对路径.html
- ./就等于 09.相对路径.html 所在的目录 path
../
-->
<a href="./target.html">超链接</a>
<br><br>
<a href="../07.列表.html">超链接2</a>
<br><br>
<a href="./inner/target2.html">超链接3</a>
<br><br>
<a href="../outter/target3.html">超链接4</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>
<!--
target属性,用来指定超链接打开的位置
可选值:
_se1f 默认值在当前页面中打开超链接
_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>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem facilis neque accusamus consectetur magni amet repellendus fugit tenetur magnam labore cumque, officia numquam sed! Molestias incidunt ea modi quis et.</p>
<!--在开发中可以将#作为超链接的路径的展位符使用-->
<a href="#">这是一个新的超链接</a>
<br><br>
<!-- 可以使用 javascript:;来作为href的属性,此时点击这个超链接什么也不会发生 -->
<a href="javascript:;">这是一个新的超链接</a>
<!--
可以直接将超链接的href属性设置为#,这样点击超链接以后
页面不会发生跳转,而是转到当前页面的顶部的位置
可以跳转到页面的指定位置,只需将href属性设置#目标元素的id属性
id 属性（唯一不重复的）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
-->
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
11.图片标签
<!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 中的内容来识别图片，如果不写，就不会被识别
width 图片的宽度(单位是像素
height 图片的高度
- 宽度和高度中如果只修改了，则另一个会等比例缩放
注意：
一般般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大
但是在移动端,经常需要对图片进行缩放(大图缩小
图片的格式:
jpeg (jpg）
- 支持的颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少,支持简单透明,支持动图
- 适合表示颜色单一的图片，动图
png
- 支持的颜色丰富,支持复杂透明,不支持动图
- 颜色丰富，复杂透明的图片（转为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别小
- 缺点：兼容性不好
base64
- 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
- 网页搜就可以直接转
效果一样，用小的
效果不一样，用好的
-->
<img width="800" src="./电脑壁纸/两女草坪猫.jpg" alt="炮姐">
<br><br>
<img width="500" src="https://tse1-mm.cn.bing.net/th/id/R-C.7751d243ca6f345e341f8bff809b8228?rik=NPpXV7%2ffBFPpSg&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20191015%2f4956998354794ae2b9543b8b2d7cfca2.jpeg&ehk=4tl8KUPBvAphxw4VL02feIMMvcgx8BOC8bEvKDYLMis%3d&risl=&pid=ImgRaw&r=0" alt="鬼灭之刃">
</body>
</html>
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>
<!--
内联框架: 用于向当前页面中引入一个其他页面
src指定要引入的网页的路径
-->
<iframe src="https://www.qq.com" width="1100" height="800" frameborder="0"></iframe>
</body>
</html>
13.音视频
<!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/尹昔眠,小田音乐社 - 西楼别序.mp3" controls loop></audio> -->
<!-- <audio src="./source/尹昔眠,小田音乐社 - 西楼别序.mp3"></audio> -->
<!--
除了通过src来指定外部文件的路径，还可以通过 source来指定文件的路径
-->
<audio controls>
对不起，您的浏览器不支持播放音频!请升级浏览器
<source src="./source/尹昔眠,小田音乐社 - 西楼别序.mp3">
<source src="./source/焦迈奇 - 你曾是少年.ncm">
<embed src="./source/焦迈奇 - 你曾是少年.ncm" type="" width="200" height="100">
</audio>
<!-- 相对路径 -->
<br><br>
<!--
使用 video标签来向网页中引入一个视频
- 使用方式和 audio基本上是一样的
-->
<video controls>
<source src="./source/司南 - 《星星在唱歌》MV——2020丨温暖回望.mp4">
<embed src="./source/司南 - 《星星在唱歌》MV——2020丨温暖回望.mp4" type="video/mp4">
</video>
</body>
</html>
3
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
