在了解了基本的框架之后就可以进一步学习了，刚开始写Html代码的时候是使用的文本编辑器和notepad++，这样将整个框架自己敲一遍，就能对基本的代码更加熟悉！当熟悉了基础的代码之后就没必要每次写的时候都敲一遍，因为整体的框架都是相同的，就可以借助集成的编辑器来写，各种快捷键比较方便快捷！这里我使用的是VSCode。

在安装好之后，配置好环境就可以开始使用。学习Html其实就是学习它的各种标签。

目录

  • 知识点学习
    • 1、实体
    • 2、meta标签
    • 3、语义化标签（1）
    • 4、语义化标签（2）
    • 5、列表
    • 6、超链接
    • 7、图片标签
    • 8、内联框架
    • 9、音视频标签
  • 总结

知识点学习

当使用VSCode进行编码，只需要Shift+!，然后回车即可，就可以快速生成代码框架！如下：

<!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>

下面就是学习的每一个小的知识点。

1、实体

对于实体，其实就相当于C语言或者C++中的转义字符，当我们想要表示一些特殊的符号的时候，例如：空格、字母两侧的大于号或者小于号，为了和标签等其他符号的混淆，所以就用到了实体，需要特殊记忆。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实体</title>
</head>
<body><p><!-- 在网页中想要写一些特殊的符号，例如空格，字母两侧的大于号小于号，则要使用html中的实体（转义字符）实体的语法：&实体的名字；&nbsp; 空格&gt; 大于号&lt; 小于号&copy; 版权符号···--><h1>M&nbsp;&nbsp;&nbsp;&nbsp;YH</h1><p>a&gtb&ltc</p></p>
</body>
</html>

到用到的时候可以去查，到w3cschool网站去查。

2、meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的。例如：网页中的字符集、搜索关键字、网页的描述等等。

一般都写在head里面，因为这些内容不想给用户在网页中看到。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- charset 指定网页的字符集name 指定数据的名称content 指定数据的内容keywords 表示网站的关键字，可以同时指定多个关键字，用逗号隔开<meta name="keywords" content="360,购物,导购,折扣,实惠,品牌特卖,促销,特价商品,特价,低价,女装,男装,母婴,零食">description 用于指定网站的描述<meta name="description" content="360购物-“惠”聚全网优质折扣商品,为您推荐近期热门有趣的商品,致力于打造“有温度”的购物体验。囊括女装、男装、鞋包、美妆、母婴、数码、美食等多个品类【你爱的都在这里！】">网站的描述会显示在搜索引擎的搜索结果中title标签的内容会作为搜索结果的超链接--><meta name="keywords" content="html5,前端,CSS3"><meta name="description" content="这是一个非常不错的网站"><title>meta标签</title>
</head>
<body></body>
</html>

其中还有一个相对比较特殊的可以用来跳转网页，与后面学习的超链接还有一些差别，这个可以实现自动跳转，下面这个meta标签就可以实现3秒之后从当前的网页跳转到百度网页。

<!-- 用来跳转网站
-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

3、语义化标签（1）

语义化标签，当使用的时候应该更注重它的语义，而不是样式。因为Html主要负责网页的结构，它的样式交给CSS来处理，所以我们需要关注语义。
主要内容：
标题标签：h1~h6
标题分组标签：hgroup
段落标签：p
语气加重标签：em
强调标签：strong
长引用标签：blockquote
短引用标签：q
换行标签：br
关注语义，不关注长什么样
块元素（独占一行）
行内元素（不独占一行）

<!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一边情况下标题标签只会用到h3，h4~h6几乎不用都是块元素块元素：在页面中独占一行的成为块元素（block element）--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 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>我从来没说过这句话！</blockquote><!-- q表示一个短引用 -->子曰：<q>学而时习之，不亦说乎！</q><!-- br表示页面中的换行，一个换一行，两个换两行 --><br><br>今天天气真不错！</body>
</html>

这里只学习了一部分，其他在使用的时候可以查阅帮助文档。

4、语义化标签（2）

布局标签（结构化语义标签），这里讲述了一些布局标签，指示网页的头部、底部或者一篇文章网页导航等等。但是常用的还是div和span。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 布局标签（结构化语义标签）主要用的还是 div 和 span--><!-- 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>

5、列表

Html中创建列表，分为3种：有序列表、无序列表和定义列表。

  1. 有序列表，使用ol标签来创建无序列表，使用li来表示列表项
  2. 无序列表，使用ul标签来创建无序列表，使用li来表示列表项
  3. 定义列表，使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对定义的内容解释说明。

列表之间可以相互嵌套。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><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</li></ul></li></ul></body>
</html>

6、超链接

超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他位置。使用 a 标签来定义超链接。还可以指定超链接打开的位置，在当前页面或者新打开一个页面！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接</title>
</head>
<body><!-- 超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置使用 a 标签来定义超链接属性：href 指定跳转的路径- 值可以是一个外部的网站的地址- 也可以写一个内部页面的地址超链接是也是一个行内元素，在 a 内可以嵌套除了它以外的任何元素--><!-- targrt属性，用来指定超链接打开的位置可选值：_self 默认值 在当前的页面打开超链接_blank 在一个新的页面打开超链接--><a href="https://www.baidu.com">超链接1</a><br><br><a href="07.列表.html">超链接2</a><a href="07.列表.html" target="_blank">超链接3</a>
</body>
</html>

以上的超链接是跳转到另一个页面，下面的超链接是跳转到当前页面的其他位置。只需要将 href 的属性值做相应的更改。

还可以跳转到指定的位置，只要将 href 的值写为 #目标元素的id属性值，为了查看效果，随便粘贴了一篇文章进行测试。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="#bottom">去底部</a><br><br><a href="#p3">去第三自然段</a><p>“周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。</p><p>“周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。</p><p id="p3">“周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。</p><p>“周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。</p><br><br><!-- 可以使用javascript:;作为 href 的属性，但是点击的时候什么也不会发生，相当于一个占位符--><a href="javascript:;">这是一个新的超链接</a><br><br><!-- 可以直接将超链接的 href 属性设置为#，这样就可以跳转到当前页面的顶部还可以跳转到指定的位置，只要将 href 的值写为 #目标元素的id属性值id属性（唯一不重复的）- 每一个标签都可以添加一个id属性- id为每一个元素的唯一标识，同一个页面不能重复- 区分大小写，并且必须字母开头--><a id="bottom" href="#">回到顶部</a>
</body>
</html>

7、图片标签

可以引入本地的图片，也可以引入线上的图片，只需要对路径进行修改即可。还可以设置图片的长度和宽度。

<!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><!-- 图片标签用来向当前页面引入一张外部图片使用img标签来引入外部图片，img标签是一个自结束标签img 是替换元素（基于块元素和行内元素之间，具有这两种元素的特点）属性：src 是图片的路径（可以是本地的，也可以是外部网站的）alt 是对图片的一个描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片width 图片的宽度height 图片的高度注意：一般在PC端，不建议修改图片的大小，需要多大就裁剪多大--><img src="./img/45137cd0182cdd4b91338bc58e32c565.jpg" alt="青蛙"><img src="./img/52311da6c6d0c173c01f8e3fdd3fb574.jpeg" alt="加菲猫"><img width="400" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg&refer=http%3A%2F%2Fa4.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612193435&t=03c83fe8560f09ac16f7e5b75e5202ab" alt="二哈"><!-- 图片的格式：jpeg(jpg)gifpngwebp      base64- 将图片使用base64进行编码- 希望图片加载特别快的时候使用-->
</body>
</html>

8、内联框架

内联框架就是在当前的页面引入一个其他的已经存在的页面，使用标签iframe。很少使用这种标签。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 内联框架，用于向当前页面中引入一个其他的页面src 引入网页的路径frameborder 指定内联框架的边框（有或者没有）很少使用--><iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe><h1>Hello</h1>
</body>
</html>

9、音视频标签

和图片标签类似，只不过标签的名称为audio和vedio。可以添加各种属性来控制自动播放、循环播放等等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音视频</title>
</head>
<body><!-- audio 标签用来向网页中引入一个外部的音频文件引入时，默认不支持用户控制播放属性：controls 是否允许用户控制播放autoplay 音频文件是否自动播放loop 音乐是否循环播放--><!-- <audio src="./source/imagine.mp3" controls autoplay loop></audio> --><!-- 除了使用src来指定外部文件路径，还可以通过source来指定 --><audio controls><source src="source/imagine.mp3"><embed src="source/imagine.mp3" type="audio/mp3"></audio><video controls><source src="./source/194181武汉加油宣传片.mp4"><embed src="./source/194181武汉加油宣传片.mp4" type="video/mp4"></video><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=i0521adt0m5" allowFullScreen="true" width="400" height="300"></iframe>
</body>
</html>

总结

以上就是学习Html基本的一些知识点，当真正使用的时候可以再去查询相关资料。

其实在跟着视频学习的时候，感觉不是很难，毕竟这跟数据结、算法来比没什么太大的难度，但是不容易记住，只能通过多用，现在打算就是先整体的过一遍，熟悉这个体系，可以看懂基本的代码，后续使用的时候也能相对简单一些。

Html相关的基础知识点就是以上的一些标签，接下俩就是学习CSS，给网页的结构添加相应的样式。

Web前端 学习笔记2（Html）相关推荐

  1. web前端学习笔记（最新）

    web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...

  2. Web前端学习笔记（1）

    文章目录 一.第一部分 1.1内容一 Web前端导入 二.第二部分 2.1内容一 HTML和CSS的定义 三.第三部分 3.1内容一 宇宙第一编译器Vs Code 3.2内容二 快捷键的使用 四.第四 ...

  3. Web前端学习笔记学习路线图

    随着互联网的快速发展, web前端行业发展前景较好,虽然web前端薪资高入门门槛低, 但是俗话说的好:入门容易,精通难.web前端开发的知识点繁多,所以,要想真正全部掌握web前端工程师开发技能,并非 ...

  4. web前端学习笔记总页面

    学习资料 自学视频 求知讲堂web前端html+css 参考文档 MDN 书单 你不知道JavaScript JavaScript设计模式和开发实践 css世界 css揭秘 什么是web前端开发 we ...

  5. 极客学院web前端学习笔记 （一）概况

    终于到暑假啦!暑假开始重新(x)学习web前端,其实html和css早已有所接触,但是js接触较少,直接原因是下学期大概要给学弟学妹们解答一些前端基础相关的问题,所以希望在暑假好好整理归纳一下知识体系 ...

  6. web前端学习笔记（2）

    文章目录 前言 二十一.嵌套列表 21.1 嵌套代码 21.2 小练习 二十二.表格标签 22.1表格相关标签 二十三.表格属性 23.1表格属性 二十四.表单input标签 24.1表单标签 24. ...

  7. web前端学习笔记（初识HTML）

    目录 1.简介 2.Html的历史: 3.常用的工具 4.网页的基本信息: 5.网页的标签: 6.安装我们的idea 7.配置idea 8.特殊符号: 9.链接标签: 10.锚链接: 11.功能性链接 ...

  8. web前端学习笔记——JQuery

    web前端开发基础 第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...

  9. web前端学习笔记（二）---Django

    [前言]前面(一)学习了web的基础知识,介绍到了MVC,项目使用一个Django框架. Django book:https://code.ziqiangxuetang.com/django/djan ...

  10. Web前端学习笔记20：Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI

    文章目录 第一阶段学习 1.路由的概念 2.前端路由的初体验 3.Vue Router简介 4.Vue Router的使用步骤(★★★) 5.嵌套路由,动态路由的实现方式 A.嵌套路由的概念(★★★) ...

最新文章

  1. android -------- Lint优化工具
  2. python对象属性查看
  3. Oracle的登陆问题和初级学习增删改查(省略安装和卸载)
  4. mybatis 思维导图，让 mybatis 不再难懂（二）
  5. VOFM、Copy Control与合并开票
  6. android 判断是否正在扫描蓝牙_判断蓝牙是否连接
  7. java对象的访问定位_JVM创建对象及访问定位过程详解
  8. 我奋斗了十四年，却依然不能和你坐在一起相亲
  9. C# 10 的五大新功能
  10. 比特大爆炸为啥老显示服务器满,《有可能是史上最长停服维护公告》
  11. 【数据分享】1997-2016年全国大部分地级市气温降水数据
  12. 我的职业梦计算机软件,我的职业梦作文1000字
  13. 2018年俄罗斯世界杯之Java数据爬虫（一）
  14. 计算机的语言栏怎么更改,语言栏不见了怎么调出来,笔者教你win7电脑语言栏不见了的解决方法...
  15. 证件照片是红底，还是蓝底？这其中有什么讲究？
  16. memmove函数c语言实现,【C语言】实现memcopy、memmove函数
  17. vb中Msgbox函数的应用。
  18. 数据科学与大数据技术专业 —— 云计算●虚拟化 课程 期末复习卷及其简答（2）
  19. 区块链正在颠覆的18个行业
  20. 3.docker创建容器 (docker容器命令)

热门文章

  1. 数据结构c语言版期末考试试题及答案,数据结构c语言版试题大全（含答案）
  2. 简谐振动（物理笔记）
  3. C语言中的bool变量
  4. 甲骨文中国辟谣大面积裁员传闻 精简后集火云业务
  5. Spark远程调试+页面监控--用最熟悉的方式开发Spark应用
  6. NSFC: 研究目标看似简单
  7. OA系统二十：请假审批一：审批功能概述；显示【请假审批】这个内嵌界面中【待审批请假数据】的SQL语句；
  8. DICOM-Modality
  9. 盘点 | 好用的开发者IDE工具
  10. 一个IDEA界面如何同时打开多个项目