基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>标题</title>
</head>
<body>
<!--666-->
<p>
lll
</p>
<h6>伦伦</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--使用meta标签可以设置网页的关键字
还可以用来指定网页的描述
给搜索引擎看的，不会影响页面在搜索引擎中的排名
-->
<meta name="keywords" content="关键字1,2,3" />
<meta name="description" content="马上要开学了" />
<!--使用meta做请求重定向
-->
<meta charset="=utf-8" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
<title>标题</title>
</head>
<body>
<!--666-->
<p>
lll
</p>
<h6>伦伦</h6>
<h1>5秒后跳转页面</h1>
</body>
</html>
特殊符号和引入图片
<!DOCTYPE html>
<html>
<head>
<!--注释-->
<meta charset="utf-8" />
<title>网页中的标题</title>
</head>
<body>
<!--注释-->
<h1>大不大</h1>
<p>段落</p>
<!--超链接-->
<a href="http://www.driverzeng.com">飞机</a>
<!--大于小于号和空格-->
<p>a<b>c </p>
<!--版权和空格-->
<p>© 锄禾日当 午</p>
<!--向网页中引入一个外部图片或动图，使用img自结束标签-->
<!--
src:设置一个外部图片或动图的路径
alt：设置图片不能显示时候的描述，搜索引擎可以通过alt来识别不同的图片，不写也可以
只不过搜索引擎不收录
修改图片的宽度，一般使用px作为单位
beigth:修改图片的高度
宽度和高度两个属性如果只设置一个，另一个也会等比例调整大小
-->
<img src="QQ截图20200516072430.png" />
<img src="C:UsersAdministratorDesktopQQ截图20200啊516072430.png" alt="这是一个截图" />
<img src="QQ截图20200516072430.png" width="200px" height="500px" />
<!--图片的格式
JPEG（JPG）：该图片支持的颜色比较多，图片可以压缩，但是不支持透明，一般用来保存照片等颜色丰富的图片
GIF：支持的颜色少，只支持简单的透明，支持动态图，图片颜色单一或者是动态图时可以使用gif
PNG：支持的颜色多，支持复杂的透明，可以用来显示复杂的透明的图片
图片的使用原则：
效果不一致，用好的
效果一致，用小的
-->
</body>
</html>
语法规范
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>xhtml的语法规范</title>
</head>
<body>
<!--
1.HTML中不区分大小写，但是我们一般都使用小写
2.HTML中的注释不能嵌套
3.HTML标签必须结构完整，要么成对出现，要么自结束标签<br><meta>
4.浏览器尽最大努力解析页面，有些时候会修正错误，因为浏览器要抢市场
5.标签不能交叉嵌套
6.HTML标签中必须有值，并且值必须加引号（单双引号）
-->
<p>lll</p>
a
<br>
b
<br/>
c
<br>
<p>今天天气<font color="red">真好</font></p>
<h6>伦伦</h6>
</body>
</html>
<h6>伦伦</h6>
内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>内联框架</title>
</head>
<body>
<!--
使用内联框架可以引入一个外部的页面，可以使用iframe来创建一个内联框架（页面中的页面）
内联框架中的内容不会被搜索引擎检索
属性：
src：指向一个外部页面的路径，可以使用相对路径
height:
name:可以为内联框架指定一个name属性
-->
<iframe src="新建文本文档.txt" name="tom"></iframe>
</body>
</html>
超链接和文本居中
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>超链接</title>
</head>
<body>
<!--
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签可以创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址
链接访问前和访问后的颜色不一样，可以设置
-->
<a href="http://www.baidu.com">百度</a><br><br>
<a href="404.html">本地</a><br>
<!--
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self,表示在当前窗口中打开（写不写都一样）
_blank,在新的窗口中打开超链接（打开一次开启一个）
设置一个内联框架的name属性值，链接将会在内联框架中打开
-->
<a href="http://www.baidu.com" target="_blank">新标题打开百度</a><br>
<a href="http://www.baidu.com" target="_self">当前标题打开百度</a><br>
<!--
内联框架中打开超链接
-->
<iframe src="http://www.baidu.com" name="tom"></iframe>
<!--
center标签中的内容，会默认在页面中居中显示，可以将要居中显示的内容放到该标签里面
-->
<center>
<p>
居中显示
</p>
</center>
<p>
lll
</p>
<h6>伦伦</h6>
</body>
</html>
东风破
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>东风破</title>
</head>
<body>
<!--
跳转到id为eofeof的元素所在的位置
直接在href中写 #id属性值
-->
<a href="#eofeof">直达底部</a> <br>
<a href="#tp">我要看图片</a>
<center>
<h1>东风破</h1>
<hr />
<!--
创建一个超链接时，如果地址不确定，可以直接写一个#作为占位符，作为一个不跳转的超链接
-->
<a href="#">周杰伦</a><br>
<p>
一盏离愁 孤单伫立在窗口<br>
我在门后 假装你人还没走<br>
旧地如重游 月圆更寂寞<br>
夜半清醒的烛火 不忍苛责我<br>
一壶漂泊 浪迹天涯难入喉<br>
你走之后 酒暖回忆思念瘦<br>
水向东流 时间怎么偷<br>
花开就一次成熟 我却错过<br>
谁在用琵琶弹奏 一曲东风破<br>
岁月在墙上剥落 看见小时候<br>
犹记得那年我们都还很年幼<br>
而如今琴声幽幽 我的等候你没听过<br><br>
<a id="tp"></a>
<img src="350126099.jpeg" alt="图片" width="300px"><br><br>
谁在用琵琶弹奏 一曲东风破<br>
枫叶将故事染色 结局我看透<br>
篱笆外的古道我牵着你走过<br>
荒烟漫草的年头 就连分手都很沉默<br>
一壶漂泊 浪迹天涯难入喉<br>
你走之后 酒暖回忆思念瘦<br>
水向东流 时间怎么偷<br>
花开就一次成熟 我却错过<br>
谁在用琵琶弹奏 一曲东风破<br>
岁月在墙上剥落 看见小时候<br>
犹记得那年我们都还很年幼<br>
而如今琴声幽幽 我的等候你没听过<br>
谁在用琵琶弹奏 一曲东风破<br>
枫叶将故事染色 结局我看透<br>
篱笆外的古道我牵着你走过<br>
荒烟漫草的年头 就连分手都很沉默<br>
谁在用琵琶弹奏 一曲东风破<br>
岁月在墙上剥落 看见小时候<br>
犹记得那年我们都还很年幼<br>
而如今琴声幽幽 我的等候你没听过<br>
谁在用琵琶弹奏 一曲东风破<br>
枫叶将故事染色 结局我看透<br>
篱笆外的古道我牵着你走过<br>
荒烟漫草的年头 就连分手都很沉默<br>
</p>
<hr>
友情链接：<br><br>
<a href="#">A网站</a>|<a href="#">B网站</a>|<a href="#">C网站</a><br><br>
<!--
如果将链接地址设为#，则点击超链接以后，会自动跳转到当前页面的顶部
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
这个属性就是id,id属性在同一个页面中只能有一个，不能重复出现
-->
<!--
发送邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
href="mailto:邮件地址"
当点击这个超链接时，会打开计算机的默认电子邮件客户端，并且将收件人设置为mailto后面的邮件地址
如果没有mailto软件，点击无效
-->
<a id="eofeof" href="#">回到顶部</a>|<a href="mailto:1757528181@qq.com">联系我们</a><br>
</center>
</body>
</html>
3种样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>CSS</title>
<!--
内部样式表
也可以将CSS样式编写到head中的style标签里,然后可以通过css选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样试进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离
-->
<style type="text/css">
p{
color: red;
font-size: 40px;
}
</style>
<!--
外部样式表
还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中
这样外部文件中的css样式将会应用到当前页面中
将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
最大限度的使样式可以进行复用
将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度，提高了用户的体验
-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--
内联样式表
可以将CSS样式编写到元素的style属性当中，元素就是标签，标签就是元素
将样式直接编写到style属性中，这种样式我们称为内联样式
内联样式只对当前的元素中的内容起作用，内联样式不方便复用，不方便修改
内联样式属于结构与表现耦合，不方便后期的维护
-->
<p style="color: red;font-size: 20px;">锄禾日当午</p>
<p style="color: red;font-size: 20px;">谁知盘中餐</p>
</body>
css注释和基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>标题</title>
<style type="text/css">
/*
css的注释（/*），作用和HTML类似，只不过他必须编写在style标签中，或者是css文件文件中
css语法：选择器，声明块
选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到应用到选择器对应的元素上
声明块：声明块紧跟在选择器的后面，使用一对{}括起来，声明块中实际上就是一组一组的名值对结构
这一组一组的名值对我们称为声明
在一个声明块中可以写多个声明，多个声明之间使用；隔开
声明的样式名和样式值使用：来连接
/*
P{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<!--666-->
</body>
</html>
快捷键
vscode快捷键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<style type="text/css">
h1{
color: red;
}
-->
<link rel="stylesheet" type="text/css" href="路径">
</style>
</head>
<body>
<h2>黄河</h2>
</body>
</html>
块元素和内联元素
<!DOCTYPE html>
<html>
<head>
<meta charset="=utf-8" />
<title>标题</title>
</head>
<body>
<!--
块元素和内联元素
div就是一个块元素，所谓的块元素就是会独占一行的元素,无论他的内容有多少，他都会独占一整行
p h1 h2...
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为他里面的元素设置任何的默认样式（没有间距）
div元素主要是用来对页面进行布局的（表示一个区域）
-->
<div style="background-color: red; 200px;">
我是一个div
</div>
<div style="background-color: blue; 200px;">
我是一个div
</div>
<p>
我是一个p标签
</p>
<h2>
块元素
</h2>
<!--
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会独占一整行
a img iframe span 都是内联元素
span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
-->
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div>
<span>
哈哈
</span>
</div>
<a href="#">
<div style="background-color: red; 800px;">
我是一个div
</div>
</a>
<!--
p元素不可以包含任何块元素，只能放内联元素
-->
<p>
<span>
我是一个span
</span>
</p>
<p>
<div>
不能这样嵌套,F12可以查看
</div>
</p>
</body>
</html>
选择器和选择器组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用选择器</title>
<style type="text/css">
/* 为页面中所有的p元素设置一个字体颜色为红色 */
/* Ctrl+shift+/注释或取消注释 */
/*
元素选择器
作用：通过元素选择器可以选择页面中所有指定元素
*/
p{
color: blue;
}
h1{
color: brown;
}
/*
id选择器
通过元素的id属性值选中唯一的一个元素
语法：
#id属性值{}
*/
#p1{
font-size: 20px;
}
/*
类选择器：通过元素的class属性值选中一组元素
语法：
.class属性值{}
*/
.p2{
color: chartreuse;
}
.hello{
font-size: 50px;
}
/*
为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色
选择器分组：(并集选择器)
通过选择器分组可以同时选中多个选择器对应的元素
语法：
选择器1，选择器2，选择器N{}
*/
#p1,.p2,.h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<!--
我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个class属性值之间使用空格隔开
-->
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p p2 class="p2 hello ab cd">锄禾日当午</p>
<p>锄禾日当午</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>统配选择器</title>
<style type="text/css">
/*
通配选择器：
他可以选中页面中的所有的元素
语法：*{}
*/
/* *{
color: red;
} */
/*
为拥有class p3 span元素设置一个背景颜色为黄色
*/
.p3{
background-color: rgb(red, green, blue);
}
/*
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
*/
span.p3{
background-color: royalblue;
}
/*
对于id选择器来说，不建议使用复合选择器
*/
/* p#p1{
background-color: royalblue;
} */
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<span>锄禾日当午</span>
<p>锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
元素之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thanks</title>
</head>
<style type="text/css">
/*
为div中的span设置一个颜色绿色
后代元素选择器
作用：
选中指定元素的指定后代元素
作用：
祖先元素 后代元素{}
*/
#d1 span {
color: green;
}
/*
选中id为di的div中的p元素中的span元素
*/
#d1 p span{
font-size: 50px;
}
/*
为div的子元素span设置一个背景颜色为黄色
子元素选择器
作用：
选中指定父元素的指定子元素
语法：
父元素 > 子元素
*/
div > span{
background-color: yellow;
}
</style>
<body>
<!--
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<p><span>我是p标签中的span</span></p>
<span>我是p标签中的span</span>
</div>
<div>
<span>我是p标签中的span</span>
</div>
<span>我是body中的span元素</span>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
<style type="text/css">
/*
伪类选择器专门表示元素的一种特殊的状态
比如访问过的超链接，普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。
正常链接
:link
访问过的链接
:visited(只能定义字体颜色)
鼠标滑过的链接
:hover
正在点击的链接
:active
*/
/*
为没访问过的链接设置一个颜色为绿色
:link
表示普通的链接（没访问过的链接）
*/
a:link{
color: green;
font-size: 20px;
}
/*
为访问过的链接设置一个颜色为红色
:visited
表示一个访问过的链接
浏览器是通过历史记录（缓存）来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色（不能设置大小等）
*/
a:visited{
color: red;
}
/*
:hover伪类表示鼠标移入的状态
*/
a:hover{
color: blue;
}
/*
:active表示的是超链接被点击的状态(点着别松手)
*/
a:active{
color: black;
}
/* 使用伪类选择器给别的元素设置特殊的状态 */
p:hover{
background-color: blueviolet;
}
p:active{
background-color: burlywood;
}
/*
文本框获取焦点以后，修改背景颜色为黄色
*/
input:focus{
background-color: chartreuse;
}
/*
为p标签中选中指定的内容使用样式(不同的浏览器表现不同)
可以使用 ::selection伪类
*/
/* 兼容大部分浏览器 */
p::selection{
background-color: rgb(53, 6, 39);
}
/* 兼容火狐 */
p::-moz-selection{
background-color: dimgrey;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">我是一个访问过的超链接</a>
<br>
<a href="http://www.baidu111.com">我是一个没有访问过的超链接</a>
<p>伪类选择器给别的元素设置特殊的状态</p>
<!--使用input可以创建一个文本输入框-->
<input type="text">
<p>selection伪类</p>
</body>
</html>
伪元素与特殊位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
使用伪元素来表示元素中的一些特殊的位置
*/
/* 为p中第一个字符来设置一个特殊的样式 */
p::first-letter{
color: dodgerblue;
font-size: 50px;
}
/* 为p中的第一行设置一个背景颜色为黄色 */
p::first-line{
background-color: gold;
}
</style>
</head>
<body>
<p>
据国家卫健委消息，5月22日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告无新增确诊病例；无新增死亡病例；新增疑似病例2例，其中境外输入病例1例（在上海），本土病例1例（在吉林）。
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
:before表示元素最前面的部分
一般before都需要結合content這個樣式一起使用
通过content可以向before或after的位置添加一些内容(不能被鼠标选中)
*/
p::before{
content: "我会出现在整个段落的最前面";
color: indigo;
}
/*
::after表示元素的最后面的部分
*/
p::after{
content: "我会出现在整个段落的最后面";
color: lawngreen;
}
</style>
</head>
<body>
<p>
据国家卫健委消息，5月22日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告无新增确诊病例；无新增死亡病例；新增疑似病例2例，其中境外输入病例1例（在上海），本土病例1例（在吉林）。
</p>
</body>
</html>
title属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
为具有title属性的p元素，设置一个字体颜色为黄色
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：[属性名]选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"]选取属性值以指定内容开头的元素
[属性名*="属性值"]选取属性值以包含指定内容的元素
*/
/* p[title]{
color: yellow;
}
p[id]{
color: lemonchiffon;
} */
/*
为title属性值是hello的元素设置一个背景颜色为黄色
*/
/* p[title="hello"]{
background-color: lightcoral;
} */
/*
为title属性值以ab开头的元素设置一个背景原色为黄色
*/
/* p[title^="ab"]{
background-color: yellow;
} */
/*
为title属性值以c结尾的元素设置一个背景颜色
*/
/* p[title$="c"]{
background-color: yellow;
} */
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="我是title中的文字">我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
<p title="abbcb">我是一个段落</p>
<p title="abkkc">我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
</body>
</html>
子元素选择器（伪类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子元素选择器</title>
<style type="text/css">
/*
为第一个p标签设置一个背景颜色为黄色
:first-child可以选中第一个子元素
:last-child可以选中最后一个子元素
*/
/* p:first-child{
background-color: yellow;
} */
/* 整个页面变成黄色 */
/* :first-child{
background-color: yellow;
} */
/* body > p:first-child{
background-color: violet;
} */
/* p:last-child{
background-color: teal;
} */
/*
nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
*/
/* p:nth-child(3){
background-color: tomato;
} */
/* 选择全部的偶数行 */
/* p:nth-child(even){
background-color: turquoise;
} */
/* 选择全部的奇数行 */
/* p:nth-child(odd){
background-color: turquoise;
} */
/*
:first-of-type
:last-of-type
:nth-of-type
和:first-child这些非常的类似
只不过child,是在所有的子元素中排列
而type，是在当前类型的子元素中排列
*/
p:first-of-type{
background-color: wheat;
}
p:last-of-type{
background-color: wheat;
}
</style>
</head>
<body>
<p>hh</p>
<div>
<p>hello</p>
<span>hello</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>span</span>
</div>
<div>
<p>hello</p>
</div>
</body>
</html>