1、HTML结构
<!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>
</body>
</html>
2、HTML实体
<p>
a<b>c
</p>
<p>
a c
</p>
上述代码的输出结果为:
3、meta标签,设置网页中的元数据
<!-- 指定网页的字符集 -->
<meta charset="UTF-8">
<!-- 表示3s后重定向到百度页面 -->
<meta http-equiv="refresh" content="3,https://www.baidu.com">
<!-- 这个网页的关键词-->
<meta name="keywords" content="shopping,cd,clothes">
<!-- 这个网页的描述信息-->
<meta name="description" content="this is a good web">
<!-- 这个网页的主题-->
<title>Document</title>
4、语义化标签
<br> 表示换行
<headers> 表示网页的头部
<main>表示网页的主体部分
<footer> 表示网页的底部
<nav>表示网页的导航
<aside>表示和主题相关的内容(网页中表现为侧边栏)
<article>表示一个独立的文章
<section> 表示一个独立的区块,上面的标签都不能表示时使用section
<div> 没有语义,表示一个区块
<span> 行内元素,没有语义,一般用于在网页中选中文字
5、列表
(1)无序列表:使用ul标签来创建无序列表,使用li表示列表项
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ul>
(2)有序列表,使用ol标签来创建有序列表,使用li表示列表项
(3)定义列表,使用dl标签来创建定义列表,使用dt表示定义的内容,使用dd对内容解释说明。
6、超链接
是一个行内元素,在a标签内可以嵌套除它自己外的任何元素。
属性:href 指定跳转的目标路径。(可以跳转到外部网站地址,也可以跳转到内部页面地址)
<a href="https://www.baidu.com.cn">超链接</a>
target属性:用来指定超链接打开的位置
_self:默认值,在当前页面打开超链接
_blank:在一个新的页面打开超链接
id属性(唯一不重复):每一个标签都可以添加一个id属性。id属性是元素的唯一标识,同一页面中不能出现重复的id属性值。
将超链接的href属性设置为#,可以直接跳转到文档顶部。
<a id="bottom" href="#">回到顶部</a>
可以跳转到页面的指定位置,将href属性设置为#目标元素的id属性值。
<a href="#bottom">去底部</a>
<a href="javascript:;">点击这个超链接什么也不会发生</a>
7、图片标签
使用img标签(替换元素)向当前页面引入一个外部图片,此标签是一个自结束标签。
属性:
src: 引入图片的路径
alt: 搜素引擎根据alt的值识别图片
width:图片的宽度(像素)
height:图片的高度(像素)
<img src="./img/20220609191029.jpg" alt="头像">
8、内联框架
iframe:将其他页面当做一个窗口引入当前页面
属性:
src:引入网页的地址
frameborder:指定内联框架的边框 取值为0:去掉边框;1:保留边框
<iframe src="https://www.w3school.com.cn/html/html_iframe.asp" width="1000" height="1000" frameborder="0"></iframe>
9、插入音视频
audio标签(替换元素):向页面引入一个外部的音频文件
属性:
src:引入音频的地址
controls:是否允许用户控制视频的播放;此属性不需要给值,根据属性有没有判断。
autoplay:音频文件是否自动播放;此属性不需要给值
loop:音乐是否循环播放;此属性不需要给值
<!-- 通过src属性引入音频文件 -->
<audio src="./xxx.mp3" controls autoplay loop></audio>
<!-- 通过source标签引入外部音频,可以解决浏览器不兼容问题,支持哪种类型文件播放哪种-->
<audio controls>
<source src="./xxx.mp3">
<source src="./xxx.ogg">
<embed src="./xxx.mp3" type="audio/mp3" width="200" height="300" >
</audio>
10、插入视频文件
video标签:向页面引入一个外部的视频文件
<video controls>
<source src="./xxx.webm">
<source src="./xxx.mp4">
<!-- IE8使用embed标签 -->
<embed src="./xxx.mp4" type="video/mp4">
</video>