【尚硅谷HTML5】前端HTML代码笔记
2024-06-04 11:33:46
HTML5
- 01.text
- 02.实体
- index1
- index2
- index3
- index4
- index5
- 03.标签
- 04.语义化标签
- 05.语义化标签
- 06.语义化标签
- 07.列表
- 08.超链接
- 09.相对路径
- 10.超链接
- 11.图片标签
- 12.内联框架
- 13.音视频
01.text
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 1 安装VScode2 安装中文语言包3 尝试安装ayu主题4 将一个目录作为项目目录大5 创建一个新网页6 安装live server7 尝试通过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><!--迭代网页的版本HTML4XHTML2.0HTML5……文档声明（doctype）-文档声明用来告诉浏览器当前网页的版本-htm15的文档声明<!doctype html>进制：十进制-特点：二进制八进制十六进制字符编码李立超->110000110110(编码)110000110110->李立超(解码- 所有的数据在计算机中存储时都是以二进制形式存储的,文字也不例外所以一段文字在存储到内存中时,都需要转换为二进制编码当我们读取这段文字时,计算机会将编码转换为字符,供我们阅读- 编码将字符转换为二进制码的过程称为编码- 解码将二进制码转换为字符的过程称为解码- 字符集( charset)编码和解码所采用的规则称为字符集- 乱码问题如果编码和解码所采用的字符集不同就会出现乱码问题- 常见的字符集ASCIIIIISO88591GB2312GBKUTF-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 表示一个独立的区块,上边的标签都不能表示时使用 sectiondiv 没有语义,就用来表区块,目前来讲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
【尚硅谷HTML5】前端HTML代码笔记相关推荐
- 2018尚硅谷SpringBoot视频教程附代码+笔记+课件(内含Docker）
尚硅谷SpringBoot视频教程(内含Docker)附代码+笔记+课件 下载地址:百度网盘
- 【视频分享】尚硅谷HTML5前端视频_Vue核心技术视频
本视频基于Vue2.5录制, 涵盖Vue开发所需技术: 模板.数据绑定.声明式渲染.计算属性.事件处理.过渡动画.指令.自定义Vue插件.组件化开发.组件间通信.Ajax前后台交互.Vue-Route ...
- Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
- 【学习笔记】尚硅谷Hadoop大数据教程笔记
本文是尚硅谷Hadoop教程的学习笔记,由于个人的需要,只致力于搞清楚Hadoop是什么,它可以解决什么问题,以及它的原理是什么.至于具体怎么安装.使用和编写代码不在我考虑的范围内. 一.Hadoop ...
- 尚硅谷h5前端开发视频
尚硅谷h5前端开发视频 尚硅谷h5前端开发视频 尚硅谷h5前端开发视频 下载地址:百度网盘
- 尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
- 尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
1 ES介绍 2 ES6的新特性 2.1 let关键字 2.1.1 声明变量 let a; let b,c,d; let e=100; let f=521,g="iloveyou" ...
- SpringBoot练手项目《尚硅谷智慧校园》学习笔记
一 项目展示 1 登录及角色控制 2首页展示 3 业务模块展示 二 智慧校园系统简介 2.1 项目简介 智慧校园管理系统:主要是以年级.班级为单位,进行老师和学生信息记录和统计功能.项目采用前 ...
- 尚硅谷 SpringCloud 第二季学习笔记【已完结】
SpringCloud 一.介绍 (一)cloud和boot之间的依赖关系 https://spring.io/projects/spring-cloud#overview Finchley 是基于 ...
最新文章
- flutter 卡顿_Flutter WebView 卡顿问题
- containerd和docker技术的比较
- 字节跳动 ClickHouse 在实时场景中的应用和优化实践
- python逐行读取数据时出现错误_python如何逐行读取数据
- [html] 通过设置表单的target=“_blank“来下载文件会被浏览器拦截吗？如何解决？
- 织梦文章添加字段填栏目id，内容页调用字段里的栏目文章
- 《Python编程从入门到实践》记录之列表解析
- linux ansible_使用Ansible在Raspberry Pi上构建基于Linux的HPC系统
- linux重置密码的方法和用户切换
- 深入理解PHP之数组(遍历顺序)
- 程序员工资为什么普遍很高，原来是因为这个...
- 有赞大裁员：裁员会超过1500人，加盟4年半的百度副总裁也已离职
- R语言学习笔记之数据清洗与整理（三）
- 寻优算法（1）-------遗传算法（GA）附Matlab代码（copy可用）
- [ENVI]练习过程中遇到的一些问题
- 计算机设备驱动的作用,驱动程序是什么意思，电脑驱动程序有什么作用！
- 学习笔记【Java 虚拟机②】垃圾回收
- 主流互联网开发平台一览
- Grails（Java笨狗）系列-更好的理解闭包（closure）
- 冬季给孩子熬粥有讲究