本文介绍了HTML的基础知识，包括实体标签、meta标签、语义化标签如`<strong>`用于强调，以及列表、超链接、图片、内联框架和音视频的使用，如`<audio>`和`<video>`标签。
一、实体标签
1、 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
2、 在HTML中有些时候，我们不能直接书写一些特殊符号
比如：多个连续的空格，比如字母两侧的大于和小于号
3、 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：
&实体的名字;
空格
> 大于号
< 小于号
© 版权符号
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<p>
<!--今天 天气真不错 -->
<!-- 会把多个空格读取成一个空格 -->
今天 天气真不错！
</p>
<p>
<!-- a<b>c -->
<!--会把<b>当成一个开始标签 -->
a<b>c
</p>
</body>
</html>
二、meta标签
1、 meta主要用于设置网页中的一些元数据，元数据不是给用户看
meta常用属性：
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
2、示例：
（1）keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,存储卡,京东"/>
<meta name="keywords" content="购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
（2）description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
网站的描述会显示在搜索引擎的搜索的结果中
（3）title标签的内容会作为搜索结果的超链接上的文字显示
3、将页面重定向到另一个网站
<meta http-equiv="refresh" content="时间，几秒后跳转;url=跳转地址">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -
<title>Document</title>
</head>
<body>
</body>
</html>
三、语义化标签
1、常用的语义化标签
在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
（1）标题标签：
h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素
< 在页面中独占一行的元素称为块元素（block element）>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
（2）hgroup标签：
用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
（3）p标签:表示页面中的一个段落
p也是一个块元素
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
（4）em标签:用于表示语音语调的一个加重
< 在页面中不会独占一行的元素称为行内元素（inline element）>
<p>今天天气<em>真</em>不错！</p>
（5）strong标签：表示强调，重要内容！
<p>你今天必须要<strong>完成作业</strong>！</p>
（6）blockquote标签： 表示一个长引用,引用内容较长时使用
是一个块元素，一般用来引用
鲁迅说：
<blockquote>
这句话我是从来没有说过的！
</blockquote>
（7）q标签：表示一个短引用
鲁迅说：
子曰<q>学而时习之，乐呵乐呵！</q>
（8）br标签：表示页面中的换行
<br>
<br>
今天天气真不错
2、块元素和行内元素介绍
2、块元素（block element）
- 在网页中一般通过块元素来对页面进行布局
3、行内元素（inline element）
- 行内元素主要用来包裹文字
注意：
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
... ...
浏览器会自动修正，以下示例的html编写是错误的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
<h1>我就要写在html标签的外部！</h1>
3、布局标签（结构化语义标签）
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
四 、列表
在html中也可以创建列表，html列表一共有三种：
1、有序列表
2、无序列表
3、定义列表
>>>>有序列表，使用ol标签来创建有序列表
使用li表示列表项
>>>>无序列表，使用ul标签来创建无序列表(用的比较多)
使用li表示列表项
>>>>定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--无序列表-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!--有序列表-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!--定义列表-->
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<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>
五 、超链接
1、超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
<a href="链接地址" target="目标窗口的打开方式">
2、target属性
target="_self" 在当前窗口打开资源（默认值）
target="_blank" 在独立的窗口上打开新资源
target="_top" 在顶层框架中打开链接
target="_parent" 在当前框架的上一层里打开链接
3、使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
4、可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生
<a href="javascript:;">回到某个位置</a>
5、定位到顶部（可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部的位置）
<a href="#">回到顶部</a>
6、定位到某个位置（可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id 属性值）
方式一：
<a name="aa"></a>
<a href="#aa">回到某个位置</a>
方式二：
<a id="aa"></a>
<a href="#aa">回到某个位置</a>
注：id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
<a id="bottom" href="#">回到顶部</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<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>
<!-- 在开发中可以将#作为超链接的路径的展位符使用 -->
<a href="#">这是一个新的超链接</a>
<br><br>
<a href="javascript:;">这是一个新的超链接</a>
<br><br>
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
六、图片标签
图片标签用于向当前页面中引入一个外部图片
>>>>语法：
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
1、 src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
2、alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
3、width 图片的宽度 (单位是像素)
height 图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
1、 jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
2、 gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
3、 png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
4、 webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
5、base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
<img src="data:image/png;base64,iVBORw0KGgoAAAAN..." />
选择图片格式的规则：
效果一样，用小的
效果不一样，用效果好的
七、内联框架
内联框架，用于向当前页面中引入一个其他页面
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
src: 指定要引入的网页的路径
width、height： 定义引入页面的宽高
frameborder：指定内联框架的边框
frameborder="0" 表示元素无边框
frameborder="1" 表示元素有边框
scrolling：设置滚动条
scrolling=“auto” 默认值，整个表格在浏览器页面中左对齐
scrolling=“yes” 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
scrolling=“no” 在任何情况下都不显示滚动条
八、音视频
1、embed标签
网页中插入音频、视频和flash都可使用embed标签
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度" hidden="true/false" ></embed>
2、bgsound标签
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签。
<bgsound src="背景音乐的地址" loop="2" />
loop="2" 表示重复2次
loop="infinite" 表示无限次循环播放，
也可以使用loop="-1"表示无限次循环播放。
3、audio标签
audio标签用来向页面引入一个外部的音频文件：
方式一:
<audio src="./a.mp3" controls autoplay loop></audio>
方式二：
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
controls属性，用于控制播放器是否显示。
autoplay属性，用于设置自动播放。
如果设置了autoplay，则音乐在打开页面时会自动播放，
但是目前来讲，大部分浏览器都不会对音乐自动播放。
loop属性，用于循环播放。
注意事项：
1.音视频文件引入时，默认不允许用户控制停止和播放
即不显示播放器。可以使用 controls属性来显示浏览器。
2.方式二优势：
当audio标签不被浏览器不识别时，就会显示标签内文字。
多个source存在时，不会同时使用。当第一个source被播放，不会播放第二个。当第一个source不被播放时，会播放第二个。
4、video 标签
使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
<!--
使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
-->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
</body>
</html>
扫一扫
3180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
