HTML5 + CSS3
HTML5 + CSS3
HTML5 + CSS3
网页中使用的语言
结构：HTML
表现：CSS
行为：JavaScript
HTML语法
HTML使用标签的形式标识网页中的不同组成部分。
标签的作用：标识处理对象。
HTML5基本结构
<!--文档声明（doctype）告诉浏览器当前网页的版本
html5的文档声明
<!doctype html>
<!Doctype html>
-->
<!doctype html>
<html>
<head> <!--不会出现在网页中-->
<!-- 通过meta标签设置网页的字符集，避免乱码问题 -->
<meta charset="utf-8">
<title>
哈哈，我在哪？<!--网页的标题-->
</title>
</head>
<body>
<!--内容会出现在网页中-->
<!--注释不能嵌套-->
<h1>回乡偶书</h1>
<h2>其一</h2>
<h2>贺知章</h2>
<p>少小离家老大回，</p>
<p>乡音无改鬓毛衰。</p>
<p>儿童相见不相识，</p>
<p>笑问客从何处来</p>
<img>
<!--自结束标签，不需要后标签-->>
<input>
</body>
</html>
纯语法版本
<!doctype <!DOCTYPE html
<html lang="zh">
<!-- 声明当前网页的版本 -->
<html>
<!-- html的根标签（元素）-->
<head>
<!-- head是网页的头部，head不会在网页中出现，用于帮助浏览器或搜索引擎解析网页 -->
<meta charset="utf-8">
<!-- meta设置网页的元数据，这里设置字符集 -->
<title>
<!-- 网页的标题，显示在标题栏上，搜索引擎主要根据title中的内容判断网页的主要内容 -->
</title>
</head>
<body>
<!-- 网页的主要内容 -->
<h1>
<!-- 网页的一级标题 -->
</h1>
</body>
</html>
属性与添加属性
<body>
<h1>
<!--
在开始或自结束标签中可以设置属性，属性是一个名值对，属性和标签名应该使用空格隔开，属性名值对不能随便写（官方文档规定）
-->
看，这是<font color = 'red' size = '3'>第二个</font>网页！
</h1>
</body>
实体
<body>
<!-- 在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格,在HTML里，有时不能直接书写特殊符号(通过HTML中的实体（转义字符）实现)
实体名称对大小写敏感！
实体的语法：
& 实体的名字 ;
:空格
>:大于号
<:小于号
©:版权符号
-->
<p>
今天 天气真不错！<!--今天 天气真不错！-->
</p>
<p>
a<b>c<!--a<b>c-->
</p>
</body>
4.meta标签
<head>
<meta charset="UTF-8">
<!-- meta主要用于设置一些元数据
如：charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容 -->
<meta name = "keywords" content="HTML5,前端，CSS3">
<!-- keywords 表示网站的关键字，可以同时指定多个关键字，用,隔开 -->
<meta name = "description" content="这是一个很好的网站。">
<!-- discription指定对网站的描述 -->
<title>
Document
</title>
<!--title标签的内容会作为搜索结果的超链接上的文字显示 -->
<meta http-equiv="refresh" content="3;url=https//www.baidu.com">
<!-- 将页面重定向到另一个网站，表示3秒后跳转到https//www.baidu.com --> </head>
5.语义化标签
HTML专门负责网页的结构，所以更关注标签的语义而不是样式
<body>
<!--标题标签：
h1~h6重要性依次降低，h1重要性仅次于title，往往只有一个。一般情况下只会用到h3-->
<h1>
一级标题
</h1>
<!-- hgroup用来给一组相关的标题分组 -->
<hgroup>
<h1>回乡偶书</h1>
<h2>其一</h2>
</hgroup>
<p>
<!-- P标签表示页面中的一个段落 -->
</p>
<!--em标签用于表示语音语调的加重-->
今天天气<em>真</em>不错！
<!-- 在页面中不会独占一行的元素称为行内元素 -->
<p>你今天必须<strong>完成作业!</strong></p>
<!-- strong表示语义 -->
鲁迅说，
<blockquote>
这句话我没说过！
</blockquote>
<!--blockquote表示一个长引用-->
<br>
<!-- br标签表示换行 -->
子曰<q>
学而时习之，乐呵乐呵
</q>
<!-- q表示短引用 -->
</body>
6.块元素和行内元素
<body>
<!-- 块元素（block element)
在网页中通过块元素对页面进行布局
行内元素（inline element）
用来包裹文字，设置特殊效果
一般情况下会在块元素中放置行内元素
块元素一般什么都能放
p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正（在运行时，代码不会改变）
-->
</body>
7.语义化标签2
<body>
<!-- 布局标签（结构化语义标签） -->
<header>
<!-- header表示网页的头部 -->
</header>
<main>
<!-- main表示网页的主体部分（一个网页只有一个） -->
</main>
<footer>
<!-- footer表示网页的底部 -->
</footer>
<nav>
<!-- nav表示网页中的导航 -->
</nav>
<aside>
<!--与主体相关的其他内容（侧边栏） -->
</aside>
<article>
<!-- 表示独立的文章 -->
</article>
<section>
<!-- 表示一个独立的区块，上面标签都不合适时使用 -->
</section>
<div>
<!-- 没有语义，表示一个区块。div是最多的布局元素，可以代替以上所有 -->
</div>
<span>
<!-- 行内元素，没有任何语义，一般用于在网页中选中文字 -->
</span>
</body>
8.列表
<body>
<!-- 列表（list)
1.有序列表
2.无序列表
3.定义列表 列表之间可以互相嵌套-->
<ul>
<!-- 无序列表，li表示列表项(list item)（习惯用） -->
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<!-- 有序列表，li表示列表项(list item) -->
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构</dd>
</dl>
</body>
9.超链接
<body>
<!-- 超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置
使用 a 标签来定义超链接
属性：
href指定跳转的目标路径
可以是一个外部网站的地址
可以是一个内部网站的地址
超链接是行内元素，在a标签中可以嵌套除它自身外的任何元素-->
<a href="https://www.baidu.com">超链接</a>
<br>
<a href="列表.html">超链接2</a>
<!-- 相对路径：用./(可以省略不写)或../开头 -->
<!-- ./表示当前文件所在的目录
../表示当前文件的所在目录的上一级目录
./inner/target.html表示在当前目录下找到inner的目录下找到target.html的网页-->
<a href="https://www.baidu.com" target="_blank">超链接3</a>
<!-- target属性，指定链接打开的位置
可选值：_self 默认值 在当前页面中打开超链接
_blank 在新的页面中打开超链接-->
<!-- 可以直接将超链接的href属性设置为#，这样点击后会转到页面的顶部位置
id属性（唯一不重复）
每一个标签可以添加一个id属性作为元素的唯一标识(id必须字母开头)，-->
<a href="#bottom">去底部</a>
<!-- 跳转到任意位置 -->
<a id = "bottom"href="#">回到顶部</a>
<a href="#">这是一个占位符代替的超链接</a>
<!-- 开发中可以将#作为超链接路径的占位符，点击会跳转顶部 -->
<a href="javascript:;">这是一个占位符代替的超链接</a>
<!-- javascript作为占位符，点击不会有任何反应 -->
</body>
10.图片标签
<body>
<!--图片标签用于向当前页面中引入一个外部照片-->
<img src = "img/WLIL5FQ$@J{U@C[5QV{E@QM.jpg" width="1200" >
<img src = "https://inews.gtimg.com/newsapp_bt/0/14095497867/1000" alt="樱花狼灵">
<!-- 使用img标签引入外部图片，img是一个自结束标签，img属于替换元素（介于行内元素和块元素）
src 属性指定外部图片的路径
alt 属性描述图片的内容，默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别照片
width 图片的宽度（单位是像素）
height 图片的高度
注意：一般情况在PC端，不建议修改图片的大小，需要多大的就裁多大，但在移动端，经常需要对图片进行缩放
<!-- 图片的格式：
jpeg(jpg)(颜色丰富)一般用于显示照片
gif(颜色少，支持简单透明，支持动图)用于颜色单一的图片，动图
png(颜色丰富，支持复杂透明，不支持动图)用于颜色丰富，复杂透明图片(专为页面而生)
webp(用来表示网页图片的一种格式)具备其他照片格式的所有优点，而且文件特别小 缺点：兼容性不好
base64(使用base64编码，将图片转换为字符，通过字符的形式来引入图片，一般需要和网页一起加载时才会使用base64)-->
</body>
11.内联框架
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
src指定引入网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.icourse163.org/" width="1200" height="1200" frameborder="0"></iframe>
<!--引入内联框架，不影响当前网页中的其他部分-->
<h1>1</h1>
</body>
12.音视频
<body>
<!-- audio标签用于向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止 -->
<audio src="music/ALisa - insomnia (治愈版).mp3" controls loop></audio>
<!-- controls决定是否允许用户控制播放
autoplay决定音频文件是否自动播放(大部分浏览器不会自动对音乐进行播放)
loop决定音乐是否自动播放 -->
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！<!--如果音频都无法播放，则显示这一段提示信息-->
<source src="music/ALisa - insomnia (治愈版).mp3">
<embed src="music/ALisa - insomnia (治愈版).mp3" type="audio/mp3" width="200" height="100"><!--解决兼容性问题，和上面的文字描述取其一-->
<!--通过source指定音频路径，有效的处理兼容性问题 -->
</audio>
<!--视频和音频基本相同-->
<video controls>
对不起，您的浏览器不支持播放该视频！请升级浏览器！
<source src = "路径">
<source src = "路径">
<embed src = "路径" type="video/mp4"><!--解决兼容性问题-->
</video>
<!--可以将视频平台的源码粘贴过来，类似于内联框架-->
</body>
CSS3语法
1.CSS3简介
CSS:中文名：层叠样式表
网页实际上是一个多层的结构，通过CSS分别为网页的每一层设置样式，而最终展示的是最后一层。
2.CSS编写的位置
1.第一种：内联样式，行内样式
<body>
<!--使用CSS改变元素的样式
第一种方式（行内样式），
在标签内通过style属性设置元素的样式（不推荐使用）-->
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰。</p>
</body>
问题：影响的元素数量少
2.第二种：（内部样式表）将样式编写到head中的style标签里
<head>
<meta charset="UTF-8">
<title>
CSS
</title>
<style>
p{color:blue;
font-size: 60px;
}
</style>
</head>
<!--通过CSS的选择器选中元素并为其设置各种格式-->
缺点：只能对一个网页起作用
3.第三种：（外部样式表）
将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS的文件
优点： 增加代码复用性的同时可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
/*style.css*/
p{
color:lime;
font-size: 60px;
}
<head>
<link rel="stylesheet" href="style.css"
</head>
3.CSS基本语法
p{
color:aliceblue;
font-size: 40px;
}
/*选择器，选择页面中所有的对应元素，声明块，通过声明块来指定要为元素设置的样式
声明块是一个名值对，以：连接，以;结尾 */
选择器
1.常用选择器
1.元素选择器，根据标签名来选中指定的元素
p{
color:red;
}
h1{
color:aqua;
}
2.id选择器，根据元素的id属性值选中一个元素
<p id = "red">少小离家老大回，</p>
#red{
color: purple;
}
3.class选择器，可以选择多个属性，可以同时为一个元素指定多个class的属性 。
<p class="blue abc">儿童相见不相识，</p>
.blue{
color:blue;
}
.abc{
color:aqua
}
4.通配选择器，所有元素进行渲染
*{
color:red;
}
2.复合选择器
1交集选择器，选中同时符合多个条件的元素
注意：元素选择器优先开头
div.red{
font-size: 30px;
}//选择同时符合div和red的元素
2.选择器分组（并集选择器），同时选中多个选择器中的元素
h1, span {
color:aliceblue
}
3.关系选择器
1.元素之间关系
父子元素
祖先后代元素：直接或间接包含
兄弟元素
2.子元素选择器
div > p > span{
color:red;
}
3.后代元素选择器
div span{
color:blue;
}
4.兄弟元素选择器
选择＋号后面的元素,
p + span{
/* span需要紧挨者p */
color:cadetblue;
}
p ~ span{
color:azure;
}//选择p下面的所有兄弟元素
4.属性选择器
/* [属性名]选择含有指定属性的元素 */
p[title]{
color:orange;
}
/* [属性名 = 属性值]选择含有指定属性和属性值的元素 */
p[title=ab]{
color:orange;
}
/*属性名^=属性值，表示以该属性值开头的所有属性值 */
p[title^=ab]{
color:red;
}
/* 属性名$=属性值，表示以该属性值结尾的所有属性值 */
[title$=abc]{
color:red
}
/* 属性名*=属性值，表示含有该属性值得元素 */
p[title*=a]{
color:blueviolet;
}
5.伪类选择器
1.伪类（特殊的类）
描述一个元素的特殊状态，如第一个元素，被点击的元素....
2.伪类选择器
伪类一般以:开头
-
:first-child第一个元素
-
:last-child最后一个元素
-
:nth-child()指定第n个元素,n,表示全部选中，2n,表示选中偶数次序上的数,odd表示奇数
ul > li:nth-child(){
color:red;
}
伪类根据所有元素的子元素进行排序
-
first-of-type
-
last-of-type
-
nth-of-type
功能类似。但是在同类型元素中排序。
ul > li:nth-of-type(){
color:red;
}
not()否定伪类
将复合条件的元素去除
ul > li:not(:nth-child(3)){
color:rgb(221, 29, 144);
}
6.超链接伪类
<a href="https://www.baidu.com">Baidu</a>
/* link用来表示没访问过的链接 */
a:link{
font-size: 50px;
color:red;
}
/* visited表示访问过的链接
由于隐私的原因，visited这个伪类只能修改链接的颜色 */
a:visited{
font-size: 50px;/*修改失败*/
color:orange;
}
/*link和visited独属于超链接
/* hover 表示鼠标移入的状态 */
a:hover{
color:beige;
font-size: 100px;
}
/* active 表示鼠标点击 */
a:active{
color:blue;
}
样式
1.伪元素
伪元素，表示页面中一些特殊的，不真实存在的元素（特殊的位置）
伪元素使用::开头
/* 伪元素，表示页面中一些特殊的，不真实存在的元素（特殊的位置）
伪元素使用::开头
::first-letter 表示第一个元素
::first-line 表示第一行
::selection 表示给选中元素设置样式
::before 表示元素的起始位置
::after 表示元素的结束位置
before和after必须结合content属性来使用
*/
p::first-letter{
font-size: 100px;
}
P::selection{
background-color: bisque;
}
div::before{
content:"abc";
color:red;
}/*添加的元素无法选中*/
2.选择器的权重
样式的冲突
当通过不同的选择器时，选中相同的元素，并且为相同的样式设置不同的值时，此时就会发生样式冲突。
发生冲突时，应用哪个样式由选择器的权重（优先级）决定
权重顺序
-
内联样式
-
id选择器
-
类和伪类选择器
-
元素选择器
-
通配选择器
-
继承的样式
比较优先级时，需要将所有的选择器的优先级进行相加计算，下一级的优先级不会超过上一级。 如果优先级计算后相同，此时后面的样式会覆盖前面的。
可以在某一个样式后面添加!important,使其获得最高的优先级（能不用尽量不用）
分组优先级，各组分单独计算
3.像素，百分比,em和rem
1.长度单位：像素
屏幕实际由一个一个的小点点构成的，像素越小的屏幕显示的效果越清晰。
同样的200px在不同的设备下显示效果不一样
2.百分比
可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素
3.em
相对于元素的字体的大小来计算
1em = 1 font-size
4.rem
rem相对于根元素的字体大小计算
1 rem = 1 html font-size
4.颜色RGB
RGB：通过红绿蓝三种颜色的不同浓度调配出不同的颜色
红绿蓝的范围均是：0~255
三种都没有是黑色，三种都是255都是白色（光的三原色）
RGBA：A表示透明的效果（0完全透明~1完全不透明）
16进制的RGB值
语法：#红色绿色蓝色
00~ff
如果两两重复可以简写（aabbcc）
布局
1.文档流
网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式。作为用户只能看到最顶上一层，最底下一层称为文档流。
块元素在文档流:1.独占一行，2.默认宽度是父元素的全部3.默认高度是被内容撑开（子元素）
行内元素在文档流中：1.不会独占页面的一行，只占自身的大小2.行内元素在页面中自左向右排列。如果一行之中不能容纳所有，则会换到下一行。行内元素的默认宽度和高度都是被内容撑开
2.盒模型（box model)
1.盒模型（box model）
CSS将页面中的所有元素都设置为一个矩形的盒子， 对页面的布局就变成不同的盒子摆放。
每一个盒子都由以下几个部分组成：
内容区（content）
内边距（padding）：内容与边框的距离
边框（border）
外边距（margin）:决定与其他盒子的位置关系
2.盒子模型的设置
<div class="box1"></div>
<style>
.box1{
/* 内容区：所有的子元素和文本内容 */
width: 200px;
height: 200px;
/* 设置内容区的大小 */
background-color: darkgoldenrod;
/* 边框（border）:边框属于盒子边缘，是盒内和盒外的分界线
设置边框：
1.边框的宽度
2.边框的颜色
3.边框的样式 */
border-width: 10px;
border-color: aqua;
border-style: solid;
}
</style>
3.边框样式
border-width: 10px;
/* width可省略，默认3px（不同浏览器可能不同）
当设置4个值时，分别设置，上，右，下，左的宽度。
当设置3个值时，分别设置上，左右，下的值。
当设置2个值时，分别设置上下，左右的值。 */
border-color: aqua;
/* 其他属性 */
/* border-xxx-width(取值：top,left,right,bottom) */
/* border-color也可以指定特定边的颜色，用法同上
如果不写，默认为color的值 */
border-style: solid;
/*solid:实线;
dotted:点状虚线
dashed:虚线
double:双线*/
/* border简写属性:通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求*/
border:10px orange solid(最常用)
/*除了border之外，还有
border-xxx:left, right, bottom,top
*/
4.内边距
/* 内边距（padding）
内容区和边框之间的距离是内边距
一共有四个方向的内边距
padding-top
padding-bottom
padding-left
padding-right*/
/*内边距的设置影响盒子的大小
内容区的颜色会延伸到内边距上*/
/* 一个盒子的可见框大小，由内容区 内边框和边框共同决定*/
padding-top:100px;
padding-bottom:100px;
padding-left:100px;
padding-right:100px;
/* 简写：
padding: 10px 20px 30px 40px */
}
5.外边距
/* 外边距（margin）
外边距不会影响盒子可见框的大小
但是外边框会影响盒子的位置
一共有四个方向的外边框：
margin-top
margin-right
margin-bottom
margin-left */
margin-top: 100px;
margin-left: 100px;
/* 左和上移动自己
右和下移动别人
设置负值，往相反的方向移动
margin的简写
margin: 50px 100px 150px 200px
margin会影响到盒子实际占用空间的大小*/
6.水平方向布局
元素的水平方向的布局：
一个元素在其父元素中，水平布局必须满足以下的等式
margin-left+
border-left
padding-left+
width+
padding-right+
border-right+
margin-right
= 父元素的内容区宽度
如果不满足，则会在左边的
margin-right中补全（如果左边没有auto的情况）
width
margin-left
margin-right
可以设置为auto,则会调整设为auto的值
多个auto优先设置width
*/
7.垂直方向的布局
子元素在父元素的内容区中排列时，如果子元素的大小超过了父元素，则子元素会从父元素中溢出（大部分情况下不希望发生）
在父元素中添加以下属性解决
overflow:auto;
/* visible:默认溢出
hidden:溢出内容截取不显示
scroll:生成两个滚动条，查看额外的内容
auto：根据需要生成滚动条*/
overflow-x: ;
/* 单独处理x方向 */
overflow-y: ;
/* 单独处理y方向 */
8.外边距的折叠
相邻垂直方向外边距的重叠（折叠）： 相邻的垂直方向外边距会发生重叠现象
兄弟元素：
取较大值
特殊：如果有一个负值,则会相互抵消
如果有两个负值，则取绝对值较大值并向相反方向移动。
父子元素：
子元素的外边距会传递给父元素。（上外边距）
9行内元素的行模型
/* 行内元素不支持设置宽度和高度
行内元素可以支持设置padding，border,margin但是垂直方向不会影响页面的布局。
display 用来设置元素显示的类型
可选值：
inline：设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为行内-块元素
table:将元素设置为表格
none:元素不显示
visibility 用来设置元素的显示的状态
visible(默认)：正常显示
hidden：隐藏，不显示(但是会保留页面位置)
可以设置高度和宽度，且不会独占一行 */
10.浏览器的默认样式
通常情况，浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局
通常情况下编写网页时必须去除浏览器的默认样式（pc端的页面）
方法1：单个去除
body{
margin: 0;
}
p{
margin:0;
}
方法2：全部清除
*{
margin:0;
padding:0;
}/*但还会有部分不会清除*/
方法3：引入重置样式表
重置样式表，专门对浏览器的样式进行重置的
reset.css直接去除了浏览器的默认样式
normalize.css对样式进行了统一
<link rel="stylesheet" href = "路径">
11.盒子的大小
.box1{
width: 100px;
height:100px;
background-color: #bfa;
padding: 10px;
border:10px red solid ;
/* 默认情况下，盒子可见框的大小由内容区,内边距和边框共同决定*/
box-sizing: content-box;
/* box-sizing 设置盒子尺寸的计算公式（设置width 和 height的作用 ）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边距和边框的总大小*/
}
2.开发经验
1要让一个文字在父元素中垂直居中，只需将父元素的line-height设置为和父元素height相等
(全文完) (本文不定时更新) 以上内容只代表个人观点，如果对你有所帮助，点击这里给我一个小小的star
如果有任何问题欢迎随时联系我进行批评指正：2076577077@qq.com
我是gled fish, 点击这里来到我的博客网站：
尊重作者原创, 转载请注明作者和出处，请勿用于任何商业用途。