本文详细介绍了HTML网页的基本结构，包括文档声明、head和body元素、meta标签的使用，以及块元素、行内元素、语义化标签、标题、段落、链接、图片、音视频播放等核心概念。此外，还讲解了如何创建和使用列表、超链接、内联框架和音视频播放元素，强调了网页的语义化和布局的重要性。
文章目录
网页的基本结构
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>
<!--html的根标签（元素），网页中的所有内容都要写在根元素的里面 -->
<html>
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要帮助浏览器或者搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据 -->
<meta charset="utf-8">
<!-- tittle中的内容会显示在浏览器的标题栏，搜索引擎会主要根据tittle中的内容来判断网页的主要内容 -->
<tittle>网页的标题</tittle>
</head>
<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
<h1>
网页的大标题
</h1>
</body>
</html>
文档链接
实体（转义字符)
实体的语法：
&实体的名字;
空格
> 大于号
< 小于号
© 版权符号
meta标签
1.字符编码
<meta charset="utf8">
2.跳转
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
3.移动端视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
4.网页描述
<meta name="description"
content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
5.网页关键字
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
块元素和行内元素
块元素（block element）
网页通常通过块元素来布局
行内元素
行内元素主要用来包裹文字
嵌套规则
-
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
-
块元素中基本什么都能放
-
p元素中不能放任何的块元素
-
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
-
标签写在了根元素的外部
-
p元素中嵌套了块元素
-
根元素中出现了除head和body以外的子元素
… …
-
语义化标签
标题标签
块元素（在页面中独占一行）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
段落标签
块元素
<p>
在p标签中的内容就表示一个段落
</p>
语音语调重读标签
行内元素（在页面中不会独占一行）
<p>今天天气<em>真</em>不错</p>
强调标签
行内元素
<p>你今天<strong>必须</strong>完成作业</p>
长引用标签
<blockquote></blockquote>
短引用标签
<q></q>
布局标签
结构化语义标签
<!-- 块元素，没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素 -->
<div></div>
<!-- 行内元素,没有任何语义，一般用于在网页中选中文字 -->
<span></span>
<!-- 网页头部 -->
<header></header>
<!-- 网页的主体部分 -->
<main></main>
<!-- 网页的底部 -->
<footer></footer>
<!-- 导航标签 -->
<nav></nav>
<aside></aside>
<article></article>
<section></section>
列表
列表（list），在html中也可以创建列表，html列表一共有三种
列表可以互相嵌套
-
有序列表
用ol标签来创建有序列表，使用li表示列表项
<ol> <li>结构</li> <li>表现</li> <li>行为</li> </ol> -
无序列表
用ul标签来创建有序列表，使用li表示列表项
<ul> <li>结构</li> <li>表现</li> <li>行为</li> </ul> -
定义列表
用dl标签来创定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明
<dl> <dt>结构</dt> <dd>结构表示网页的结构</dd> <dd>结构表示网页的结构</dd> <dd>结构表示网页的结构</dd> </dl>
超链接
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
使用 a 标签来定义超链接
超链接是一个行内元素
在 a 标签中可以嵌套除自身外的任何元素
<!-- href属性 指定跳转的路径 -->
<a href="https://www.baidu,com">百度</a>
<!--
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或..开头
./
../
./可以省略不写，如果不写./，也不写../，则相当于写了./
./ 表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录
-->
<a href="./target.html">超链接</a>
<a href="../07.列表.html">超链接</a>
<!--
target属性，用来指定超链接打开的位置
可选值：
_self 默认值，在当前页面中打开超链接
_blank 在一个新的窗口中打开超链接
-->
<a href="https://www.baidu,com" target="_blank">百度</a>
<!--
回到顶部
可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到
当前页面的顶部位置
可以跳转到页面的指定位置（目标元素），只需将href属性设置为 #目标元素的id属性值
id属性（唯一不重复）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识
- 同一个一名中不能出现重复的id属性
-->
<a href="#p3">去三个自然段</a>
<p id="p3">你好</p>
<!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
<a href="javascript:;">这是一个占位符</a>
图片标签
图片标签用于向当前的页面引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 属性是图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片
width 图片的宽度
height 图片的高度
宽度和高度如果只改变了一个，则另一个会等比例缩放
一般情况在pc端，不建议修改图片的大小，需要多大就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
<img src="./img/1,gif">
<img src="https://...">
图片格式
效果一样，用小的
效果不一样，用效果好的
- jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
- gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
- png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 适合颜色丰富，复杂透明图片（专为网页而生）
- webp
- 谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别小
- 缺点，兼容性不好
- base64
- 对图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
内联框架
向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
<iframe src="https://qq.com" width="800" height="600" frameborder="0">
frame
</iframe>
音视频播放
音频
audio 标签用来向页面中引入一个外部的音频文件
替换元素
音视频文件引入时，默认情况下不允许用户自己控制停止播放
属性：
controls 允许用户控制播放
autoplay 在打开页面时自动播放，但是目前大部分浏览器都不会对音乐进行自动播放
loop 循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
<!-- 还可以用source来指定文件路径，解决兼容性问题 -->
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg"
</audio>
<!-- embed 标签可以播放音视频，兼容IE8等浏览器，自动播放 -->
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height=“100”>
<!-- 兼容IE8 -->
<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=w0041bb7lad" allowFullScreen="true"></iframe>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
