1.实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊狩号
比如。多个连续的空格，比如字母两慎的大于和小于号
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体〔转义字符）
实体的语法:
&实体的名字;
>大于号
<小于号
©:版权符号
-->
<p>
今天 222333
</p>
<p>
2
</p>
<p>
3
</p>
<p>
a < b > c
</p>
</body>
</html>
2.标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<!--
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset指定网页的字符集
name指定的数据的名称
content指定的数据的内容
keywords表示网站的关键字
title标签的内容会作为搜索结果的超链接上的文字显示
description用于指定网站的描述
<meta http-equiv="refresh" content="3;url=https ://vw.mozilla.org">
-->
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>
</body>
</html>
3.语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</title>
</head>
<body>
<!--
在网页中HTMIL专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签:
h1 ~ h6一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素〔block element）
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
-->
<hgrour>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>在p标签中的内容就表示一个段落</P>
<p>在p标签中的内容就表示一个段落</p>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素〔inline elementp
-->
<p>今天天气<em>真</em>不错!</p>
<!--
strong表示强调，重要内容!
-->
<p>你今天必须要<strong>完成作业</strong>! </p>
鲁迅说:
<!-- blockquote表示一个长引用-->
<blockquote>
这句话我是从来没有说过的!
</blockquote>
<!--
q表示一个短引用
-->
子曰：<q>学而时习之，乐呵乐呵!</q>
</body>
</html>
4.块元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快元素和内行元素</title>
<!--
-块元紊（block element）
-在网页中—般通过块元素来对页面进行布局
-行内元素〔inline element）
-行内元素主要用来包裹文字
-—般情况下会在块元素中鼓行内元紊，而不会在行内元素中放块元素
-块元紊中基本上什么都能放
-p元素中不能放任何的块元素
-浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如
-标签写在了根元紊的外部
-p元素中嵌客了块元素
-根元素中出现了除head和body以外的子元素
-浏览器中的开发者工具如何查看—
—右击浏览器页面——>检查——>elements
-（或者直接点击电脑键盘上的f12）
查看源代码在内存中的情况，是以什么形式呈现的
-->
</head>
<body>
</body>
</html>
5.语义化标签2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签2</title>
</head>
<body>
<!--
布局标签（结构化语义标签〕
header表示网页的头部
main表示网页的主体部分(一个页面中只会有一个main)
footer表示网页的底部
nav表示网页中的导航
aside和车体相关的其他内容
section表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span行内元素，没有任何的语义，—般用于在网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<section></section>
<div></div>
</body>
</html>
6.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--
列表〔list）
1、铅笔
2、尺子
3、橡皮
在html中也可以创建列表，html列表一共有三种:
1、有序列表
2、无序列表
3、定义列表
无序列表，使用ul标签来创建无序列表
使用li表示列表项
有序列表，使用ol标签来创建有序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为g/1i
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
</body>
</html>
7.超链接
1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面，
或者是当前页面的其他的位置
使用a标签来定义超链接
超链接是也是一个行内元素，在a标签中可以嵌套除它外的任何的元素
-->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="https://www.baidu123.com">超链接</a>-->
<a href="07_list.html">超链接2</a>
</body>
</html>
2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对踏径
相对路径都会使用.或..开头
./
../
./可以省略不写，如果不写./也不写../则就相当于写了./
/表示当前文件所在的目录
-在这里当前页面就是09_path.html
-./就等于09_path.html所在的目录 path
../表示当前文件所在目录的上一级目录,即02_HTML_STUDY
-->
<a href="../path/target.html">超链接1</a>
<br><br>
<a href="../07_list.html">超链接2</a>
<br><br>
<a href="./inner/target2.html">超链接3</a>
<br><br>
<a href="../outer/target3.html">超错接4</a>
</body>
</html>
3）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
target属性，用来指定超链接打开的位置
可选值:
_self默认值在当前页面中打开超链接
_blank在一个新的要么中打开超链接
-->
<a href="07_list.html" target="_blank">超链接</a>
<br></br>
<a href="#bottom">去底部</a>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<p>哥哥</p>
<!--在开发中可以将#作为超链接的路径的占位符使用-->
<a href="#">这是一个新的超链接</a>
<br><br>
<!--可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生-->
<a href="javascript:;">这是一个新的超链接</a>
<br><br>
<!--
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生到转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href国性设置 #目标元素的id属性值
id属性（唯一不重复的）
-每一个标签都可以添如一个id属性
- id属性就是元紊的唯一标识，同一个页面中不能出现重复的id属性
-->
<a href="#">回到顶部</a>
</body>
</html>
8.图片标签
-图片标签用于向当前页面中引入一个外部图片
-使用img标签来引入外部图片，img标签是一个自结束标签属性;
-img是替换元素，位于块元素和行内元素之间，具有两种元素的特点
属性
-alt
图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片
-width图片的宽度
-height图片的高度
-宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：—般情况在pc端，不建议修改图片的大小,
需要每大的图片就裁多大但是在移动端，经常需要对图片进行缩放(大图缩小图）
-src属性指定的是外部图片的路径（路径规则和超链接是一样的)
图片的格式:
jpeg(jpg)
-支持的颜色比较丰富,不支持透明效果,不支持动图-—般用来显示照片
gif
-支持的颜色比较少，支持简单透明,支持动图-颜色单一的图片,动图
png
-支持的颜色丰富,支持复杂透明,不支持动图-颜色丰富，复杂透明图片〔专为网页而生)
webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
-它具备其他图片格式的所有优点
-缺点:兼容性不好
base64
-将图片使用base64进行编码
-般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
9.内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--
内联框架,用于向当前页面中引入一个其他页面
src指定要引入的网页的路径
frameborder指定内联框架的边框
-->
<iframe src="http://www.qq.com" width="800" height="600"frameborder="0"></iframe>
</body>
</html>
10.audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>晓燕可可爱爱</title>
</head>
<body>
<!--
audio标签用来向页面中引入一个外部的音频文件的I
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性:
-controls是否允许用户控制播放
-autoplay音频文件是否自动播放
-如果设置了autoplay 则音乐在打开页面时会自动播放
-但是目前来讲大部分浏览器都不会自动对音乐进行播放
-->
<video src="./video/dance.mp4" controls autoplay loop></video>
<video src="./video/game.mp4" controls autoplay loop></video>
<video src="./video/stand.mp4" controls autoplay loop></video>
<video src="./video/111.mp4" controls autoplay loop></video>
<video src="./video/222.mp4" controls autoplay loop></video>
<video src="./video/333.mp4" controls autoplay loop></video>
<video src="./video/444.mp4" controls autoplay loop></video>
<video src="./video/easy.mp4" controls autoplay loop></video>
<video src="./video/work.mp4" controls autoplay loop></video>
<!--
<audio controls>
对不起，您的浏览器不支持播放音频!诘升级浏览器!<source src="./source/ audio.mp3">
<source src="./audio/dance.mp3"></audio>
<source src="./audio/dance.ogg"></audio>
-->
</body>
</html>
1437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
