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>