HTML全套基础知识点（代码式讲解）
作者：互联网
HTML大致框架
<html>
<!-- HTML语言有多个版本，比如HTML4、XHTML2.0、HTML5 HTML5是现在常用的版本-->
<!-- !DOCTYPE属性是文档声明属性可以告诉网页当前语言使用的是什么版本，比如下面 -->
<!DOCTYPE HTML>
<!-- HTML默认为HTML5，所以我们直接<!DOCTYPE HTML> -->
<!-- 这是HTML语言的注释格式 -->
<!-- meat标签用来设置网页的元数据，这里是用来设置网页字符集，防止乱码 -->
<meta charset="utf-8">
<!-- UTF-8是常见的编码字符集，因为它是通用字符集，所以一般都用UFTF-8 -->
<title> title标签一般是设置网页的标题</title>
</head>
<!-- head标签是网页的头部，一般不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<!-- body是html的子元素，表示网页的主体，网页中所有可见内容都要写在body里面 -->
<body>
<!-- h1~h6是页面可见标题标签 -->
<h1>标题一</h1>
<h2>标题二</h2>
<font>font是一个字体标签，但是单纯使用不会出现任何变化</font>
<!-- 为了使font标签起作用，我们可以在标签中加入一些内容 -->
<font color="red">这样就可以是font标签中的文字变色</font>
<!-- 在这句代码中，color叫做属性，red叫做属性值 -->
<!-- 标签中属性可以多个，属性值必须在""中"，下面举个例子 -->
<font color="red" size="35" >属性可以多个，这里有一个color属性和一个size属性，size属性是字体大小属性</font>
<p></p>
</body>
</html>
HTML其他标签与属性
<html>
<p>p标签</p>
<!-- p标签里面的内容表示一个段落，同时p也是一个块元素 -->
<b>b标签</b>
<!-- b标签是字体加粗属性 -->
<head>
<meta name="a" >mate标签用于设置网页元数据，元数据不是给用户看的</mate>
<!-- 在标签里，可以使用name来指定标签的属性或者名称 -->
<meta name="keswords" content="HTML,H5,京东,天猫">
<!-- keswords一般用于指定网页关键词，关键词一般用于网站seo，不懂可以百度“seo” -->
<meta name="decsription" content="这里是网页的一个描述">
<!-- decsription用于指定网页描述，描述也是用于网站的seo -->
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 标题一共有6层，h1~h6，一般一个页面只有一个H1 -->
<!-- h1标签的重要性在网页中仅次于title标签 -->
<!-- 一般只会用到h1~h3,很少用h4~h6 -->
<P>天气<em>真</em>好</P>
<!-- em标签类似于word文档中的斜体 -->
<!-- 页面中不会独占一行的元素称为行内元素 -->
<p>孔子说：</p>
<blockquote>学而时习之，不亦说乎</blockquote>
<!-- blockquote标签表示引用，会在开头有一个缩进 -->
<p>孔子说：<q>学而时习之，不亦说乎</q></p>
<!-- q标签表示一个短引用，不会独占一行，q标签就是一个行内元素 -->
</body>
<br>
<!-- br标签可以换行 -->
<!-- name用于指定标签或属性的名称 -->
</html>
HTML语义化标签
<!DOCTYPE html>
<html lang="cn">
<!-- lang可以指定网页语言，cn表示中文 -->
<head>
</head>
<body>
<!-- 块元素：网页中一般通过块元素进行页面布局 -->
<!-- 行内元素主要用来包裹元素 -->
<!-- 块元素中基本上什么都可以放，p元素中不可以放任何块元素 -->
<header>
<!-- header标签里面内容是网页的头部 -->
网页头部
</header>
<main>
<!-- main标签里面内容表示网页的主体 -->
网页主体
</main>
<footer>
<!-- footer标签里面内容表示网页底部 -->
网页底部
</footer>
<nav>导航</nav>
<!-- nav表示网页的一个导航 -->
<aside>相关内容</aside>
<!-- aside标签用于网页的相关内容结构 -->
<div>这是一个布局元素！</div>
<!-- div这个标签没有语义，它就单纯表示一个区块，div是我们主要的布局元素 -->
<article>文章</article>
<!-- article标签用于写一篇独立的文章 -->
<section>独立区块</section>
<!-- section表示一个独立的区块，以上的标签都不可以使用时，我们就用这个标签 -->
<span>选中文字</span>
<!-- span是一个行内元素，也没有语义，一般用于网页中选中文字 -->
</body>
<!-- 注意：这里不管是什么标签，他们效果都是一样，但是我们需要注意它的语义 -->
<!-- 比如：写一个导航区域，虽然main、标签可以达到相同效果，但是我们必须用nav标签 -->
</html>
a标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<a href="https://blog.janyork.com">这是一个a标签</a>
<!-- 这个标签利用href指定跳转地址 -->
</head>
</html>
超链接
<!DOCTYPE html>
<html lang="cn">
<head>
</head>
<br>
<body>
<!-- 超链接可以让我们从一个页面跳转到其他页面或者当前页面的其他位置 -->
<!-- 我们使用a标签来定义超链接 -->
<!-- 超链接是一个行内元素，a里面可以嵌套任何元素（除了自身外） -->
<a href="HTML的大致框架.html">跳转到HTML的大致框架</a>
<!-- 利用href属性指定超链接跳转位置（这里是同一个文件夹里面的HTML大致框架这个文件） -->
<br>
<a href="https://blog.janyork.com">跳转的我的博客</a>
<!-- 利用href指定超链接跳转的网址（这里是我的博客） -->
<!-- 这里我们提到一个知识点，路径 -->
<!-- 利用href指定跳转地址时,我们有时候跳转出错,可能是没有跳转到文件的相对路径 -->
<a href="./HTML的大致框架.html">相对路径跳转</a>
<!-- 相对路径以.或者..开头,/代表当前文件存放目录如 -->
<!-- ../表示当前文件夹的上一级 -->
<br>
../
<!-- ./表示当前文件夹 -->
<br>
./
<!-- 一般同一个文件夹内可以省略 -->
<p>怎么让超链接在一个新的页面打开?</p>
<!-- target标签可以实现这个要求 -->
<!--
_self 属性,也就是默认值 在当前页面打开链接
_blank 属性,可以让超链接在新的页面打开
-->
<a href="https://blog.janyork.com" target="_blank">新的页面打开我的博客</a>
<a id="A" href="https://blog.janyork.com" target="_blank">新的页面打开我的博客</a>
<p>我们先前说过,超链接还可以跳转到当前页面的一个位置,我们来试一试</p>
<a href="#">回到顶部</a>
<!-- href的属性值设置为#时,就是回到页面顶部的超链接 -->
<p>#可以让超链接回到顶部,那要是回到底部,或者其他位置呢?</p>
<p>注意了,我们这里提到一个id属性</p>
<!-- id是唯一的,不重复的,每一个标签都可以定义一个id,同一个页面不可以出现相同id -->
<p>我们在第38行定义一个id,id名为A</p>
<a href="#A">跳转到第38行代码对于内容</a>
<!-- 这样在#后面+id的名字,就可以跳转到当前页面的指定位置了 -->
<p>我这里因为页面太短,没法实现很清晰的跳转,可以自己多尝试</p>
</body>
</html>
HTML列表
<!DOCTYPE html>
<html lang="zh">
<body>
<!--
HTML中如何创建一个列表？
比如：
1.Java
2.HTML
3.JavaScript
4.Linux
-->
<!-- 在HTML中，列表分为三类
1.有序列表
2.无序刘表
3.定义列表
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- ul标签用于创建无序列表 -->
<!-- 用li标签表示列表项 -->
<!-- ---------------------------------------------------------------------- -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 0l标签用于创建有序列表 -->
<!-- 用li标签表示列表项 -->
<!-- ------------------------------------------------------------------------ -->
<dl>
<dt>结构</dt>
<dd>结构表示网页中的结构，用来规定哪里是标题，哪里是段落</dd>
<dt>表现</dt>
<dt>行为</dt>
</dl>
<!-- dl标签用于创建自定义列表 -->
<!-- 用dt标签表示列表项 -->
<!-- 用dd标签为dt标签做出解释，dd标签中的内容会在开始缩进一次 -->
<!-- ------------------------------------------------------------------ -->
<!-- ul是可以嵌套的 -->
<!-- 举个例子，了解一下就可以 -->
<ul>
<li>结构</li>
<ul>
<li>内部结构1</li>
<li>内部结构2</li>
</ul>
<li>表现</li>
<li>行为</li>
</ul>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="zh">
<head>
</head>
<body>
<p>我们来讲一下图片标签</p>
<font color = "red">我这里代码不包括本地图片，所有本地图片会失效哦！</font>
<!-- 图片标签用于向当前页面中引入一个外部图片 -->
<!-- 我们将使用到img标签,img是一个自结束标签 -->
<p>在img标签里面,我们用scr属性指定外部图片路径</p>
<p>如果是本地图片,路径就是图片所在文件夹/文件名.后缀</p>
<!-- 我们来实际操作一下 -->
<img src="logo.png">
<!-- 也可以是外部图片链接,比如图床的图片链接 -->
<img src="https://z3.ax1x.com/2021/10/03/4qzzpd.png">
<p>我们可以用alt属性为图片添加个名字,但是名字不会在网页中显示,之所以需要,是因为搜索引擎是根据alt中的内容来识别图片的</p>
<!-- 这也是seo的基础知识 -->
<img src="logo.png" alt="我的logo">
<p>你会发现,图片是不是太大了,我们可以将图片尺寸改变一下</p>
<!-- width是改变图片的宽度(单位:像素) -->
<!-- height是该改变图片的高度(单位:像素) -->
<img src="logo.png" alt="我的logo" width="100" height="100">
<p>这个图片我设置的属性是100:100的宽高</p>
</body>
</html>
HTML内联框架
<!DOCTYPE html>
<html lang="cn">
<head>
</head>
<body>
<!-- 内联框架，用于在网页中引入一个其他网页页面 -->
<!-- 利用scr属性指定需要引入的网页地址 -->
<iframe src="https://blog.janyork.com" width="500" height="500" frameborder="0"></iframe>
<!-- iframe标签和我们的img标签类似，可以用width和height属性设置尺寸 -->
<p>------------------------------------------分割线--------------------------------------</p>
<!-- frameborder属性主要是用于设置这个引入页面的边框，0为无边框，除0以外数字为有边框 -->
<iframe src="https://blog.janyork.com" width="500" height="500" frameborder="1"></iframe>
<!-- 这里你会发现这个页面多了个边框 -->
</body>
</html>
HTML音视频的引入
<!DOCTYPE html>
<html lang="zh">
<head>
</head>
<body>
<!-- scr我这里是用的音乐外链，如果是本地音乐，请用本地地址！！！ -->
<audio src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66">赤伶</audio>
<!-- 这样在网页中什么都没有显示，还是不会播放，因为他少了一个控制播放或者自动播放的属性 -->
<p>------------------------------------------------分割线----------------------------------</p>
<audio src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66" controls>赤伶</audio>
<!-- 加一个controls属性，这样，我们就可以自由控制这个音乐的播放了 -->
<p>------------------------------------------------分割线----------------------------------------------</p>
<audio src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66" controls autoplay>赤伶</audio>
<!-- 通过autoplay这个属性，可以实现自动播放音频文件 -->
<p>------------------------------------------------分割线----------------------------------</p>
<audio src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66" controls autoplay loop>赤伶</audio>
<!-- 加一个loop属性，可以让音乐循环播放 -->
<p>------------------------------------------------分割线----------------------------------</p>
<!-- 给大家扩展一下，另一种写法，了解一下就可以 -->
<audio controls autoplay loop>
<source src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66">
</audio>
<!-- 这种写法，效果是一样的，但是比较麻烦，了解一下就可以 -->
<br>
<font color = "red">注意：重点来了！！！<br>source标签不支持IE8</font>
<font color = "red">但是这个东西有一个优点，我们对于不支持的浏览器可以发出一段提示，第二就是，里面可以放多个音频，默认播放第一个，如果第一个播放不了或者出错，就会播放第二个</font>
<p>------------------------------------------------分割线----------------------------------</p>
<audio controls autoplay loop>
抱歉，你的浏览器不支持此播放器
<source src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66">
<source src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66">
</audio>
<br>
在支持的浏览器里面，不会出现什么变化，但是在不支持的浏览器里面，会输出提示话语
<!-- 这里因为Windows11 没有ie，我就不去实现了，大家可以复制代码用ie打开试试 -->
<font color = "red">有人问，怎么让ie8支持播放呢？这里我们提到一个ie可以使用的标签</font>
<br>
<p>------------------------------------------------分割线----------------------------------</p>
<!-- 但是这个标签用的是window自带的播放器，同时他会直接自动播放，同时，这个标签在IE8及以下浏览器，需要设置尺寸 -->
<embed src="http://ws.stream.qqmusic.qq.com/C400001ee9JM0npVgi.m4a?guid=256914712&vkey=F7305AD9C7BC47942A3AC090AA292E38F1288263A289A71373A5DC5BE3F16ED6101F7D734C1CFEC90550F606CA4309696FC416645B0FCCD8&uin=&fromtag=66" type="" width="200" height="100">
<p>embed标签基本上所有浏览器都兼容，但是一般不使用，毕竟没几个人用IE浏览器</p>
<!-- type可以指定文件格式，比如：type = "map"，我这里用的外链，不需要指定格式 -->
<font color = "red">------------------------------------------------分割线-------------------------------------------------------------</font>
<p>我们再来说一说视频文件的引入，与音乐文件同理，就不多演示了，这里我们用视频外链</p>
<h2>方法一</h2>
<video controls>
<source src="https://v.qq.com/x/cover/mzc00200x51n2yo.html">
<!-- 我这里没有本地视频，也没有外链，用不了，大家可以自己尝试 -->
</video>
<h2>方法二</h2>
<video controls src="https://v.qq.com/x/cover/mzc00200x51n2yo.html"></video>
<!-- 视频引入反正就是和音频引入基本上一样的 -->
</body>
</html>
各位可以尝试复制代码保存为html文件亲自尝试一下
标签：------------------------------------------------,知识点,标签,全套,HTML,图片,分割线,属性 来源： https://blog.csdn.net/qq_60750453/article/details/120611059