hhHTML5，CSS3，学习笔记
html笔记
1.html的基本格式
<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签,网页中的所有内容都要写在这里面-->
<html>
<!--网页的头部，不会再网页中出现，帮助浏览器或搜索引擎解析网页-->
<head>
<!--meat标签，用来设置网页的元数据，这里用来设置网页的字符集，避免乱码问题-->
<meta charset="utf-8">
<!--title里的内容显示在浏览器的标题栏上，搜索引擎会根据title中的内容来判断网页的主要内容-->
<title>网页的标题</title>
</head>
<!--表示网页的主体，网页中的所有的可见内容都应该写在body里-->
<body>
<h1>第一个网页</h1>
<h2>马保国</h2>
<h3>松果糖豆闪电鞭</h3>
</body>
</html>
2.标签
常用的标签，例如：
<meta name="keywords" content="马保国,混元形意太极门掌门人,武德">
<!-- keywords表示网站关键字。多个关键字之间使用英文 "," 隔开 -->
<meta name="description" content="这个网站针不戳">
<!-- description用于指定网站的描述 -->
<hgroup>
<h1> 马保国大战英国大力士 </h1>
<h2> 折手指头 </h2>
</hgroup>
<!-- hgroup标签用来为标题分组，可以把一组相关的标题同是放到hgroup里 -->
<p>在p标签中的内容表示一个段落</p>
<br>表示换行
语义化标签
<p>
住在山里<em>针不戳</em>
</p>
<!--
em标签用于语气的加重
在页面中不会独占一行的元素叫做行内元素
-->
<p>
住在山里<strong>针不戳</strong>
</p>
<!-- strong表示强调主要的内容 -->
<blockquote>
你找周树人，关我鲁迅什么事呢？
</blockquote>
<!-- blockquote表示长引用 -->
<header></header>
<!-- header表示网页的头部 -->
<main></main>
<!-- main表示网页的主体
一个网页只有一个main
-->
<footer></footer>
<!-- footer表示网页的底部 -->
<nav></nav>
<!-- nav表示网页中的导航 -->
<aside></aside>
<!-- aside表示和主体相关的其他内容(侧边栏) -->
<article></article>
<!-- 表示一个独立的文章 -->
<section></section>
<!-- 表示一个独立的区块，上面的标签不能使用时用section>
块元素&行内元素
1.块元素：对网页进行布局。
2.行内元素：行内元素主要用来包裹元素。
一般情况会在块元素中放行内元素。而不会在行内元素中放块元素。
<div>
</div>
<!-- div没有语义,就用来表示一个区块，目前来讲div还是主要的布局元素。-->
<span>
</span>
<!-- 没有语义，是行内元素，一般用于网页中选择文字 -->
3.列表
html中的列表一共有三种
1.有序列表
有序列表，使用ul标签来创建无序列表
使用li标签表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
2.无序列表
有序列表，使用ul标签来创建无序列表
使用li标签表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
3.定义列表
使用dl标签来创建定义列表
使用dt来定义内容
使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页哪里是标题，哪里是段落。</dd>
</dl>
4.超链接
超链接可以从一个页面跳转到其他页面。
超链接也是一个行内元素。
在中可以嵌套任何元素，除了它自身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="https://www.bilibili.com">进入新世界</a>
<br>
<a href="https://www.bilibili.com/video/BV14t411J7bR?from=search&seid=11879629248292825137">马老师松果糖豆闪电鞭在线教学</a>
</body>
</html>
1.相对路径
当需要跳转到一个服务器（项目）内部页面时，一般都会使用相对路径
相对路径都睡使用 . 或 … 开头 ，./，…/可以不写，如果不写，就默认为./。
./ 表示当前文件所在的目录。
…/ 表示当前文件所在目录的上级。
2.超链接的其他用法
打开新的标签
target属性，用来指定链接打开的位置，是可选值。
_self 默认值，在当前页面中打开链接。不写默认为self。
_blank 在一个新的页面中打开超链接。
<a href="https://www.bilbil.com"target="_self">超链接</a>
<!--与不写无区别-->
<a href="https://www.bilbil.com"target="_blank">超链接</a>
1.回到顶部
直接把href的属性值设置为“#”
<a href="#">超链接返回顶部</a>
2.到网页的任意位置
给a标签加特殊的标记（id属性)
每一个标签都可以添加id属性，同一个页面中不能出现相同的id属性。
<a href="#abc">点击这里</a>
<a id="abc"href="#">到这个超链接的位置位置</a>
<a href="#def"></a>
<p id="def">
到这个段落的位置
</p>
5.图片标签
用于网页中引入一个外部图片。使用img标签，
src 属性指定的是外部图片的路径。（路径规则和超链接是一样的）
alt是对图片的描述
widht 图片的宽度
hight 图片的高度
如果只修改一个 ，图片会等比例缩小或放大
<img widht="200"src="002.png" alt="anmi大师的画">
6.内联框架
在一个页面内引用另一个页面
src里是要引用的链接
frameborder=“0”，表示内联框架的边框，0无，1有
<iframe src="hptts://bilibili.com"width="800"hight="600" frameborder="0"></iframe>
7.音视频播放
音视频引入时默认为不可操作
1.加上“controls”，用户可控制播放。
2.autoplay控制在打开页面时是否自动播放。(一般浏览器不会自动播放)
3.loop控制是否循环播放。
audio标签用来在页面中引入外部音频文件。
<audio src=" " controls></audio>
<audio src=" " controls autoplay></audio> <!-- 可控，自动播放-->
video标签
<video controls>
<source scr="">
</video>
css笔记
1.css语法
1.内部表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
内部样式表
所有将样式编写到head中的style标签里，通过css选择器来选中元素并将其改为各种样式，可以同时设置多个标签的样式，
并且修改时只要修改一次就能全部应用
-->
<style>
p{
color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<p>aquaSUKI</p>
</body>
</html>
2.外部表样式
可以将css编写到一个外部的css文件，然后通过link标签来引入外部的css文件。
只要想使用这种样式都可以引入，使样式可以在不同页面之间反复使用。
<link real="stylesheet" href="./style.css">
<!-- ./style.css 为外部css样式表的链接。-->
p{
color: aqua;
font-size: 50px;
}
3.css选择器
css的注释格式
p为css选择器 通过选择器可以选定指定元素
通过声明块来指定元素的样式，声明块由一个一个的声明组成
一个样式名对应一个值，名和值之间用冒号连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
/* css的注释格式
p为css选择器
通过选择器可以选定指定元素
通过声明块来指定元素的样式，声明块由一个一个 的声明组成
一个样式名对应一个值，名和值之间用冒号连接。
*/
p{
color: aqua;
font-size: 40px;
}
</style>
<p>针不戳</p>
</body>
</html>
2.选择器
1.常用选择器
元素选择器
id选择器
class选择器
通配选择器
<!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>
/*
将所有的段落设置为红色
元素选择器
作用，根据标签名选中指定元素
语法，标签名（）
例子： p{}，h1{},div{}
*/
p{
color: aqua;
}
/*
id选择器
根据元素的id选择元素
语法；#id属性值{}
例子； #box{}，#red{}
不能重复！！！！
*/
#red{
color: red;
}
/*
将两行改变样式
类选择器
作用，根据class属性值选中一组元素，
语法， .class属性值
class可以重复！！！！
*/
.blue{
color: blue;
}
/*
通配选择器
作用：选中页面中的所有元素
语法 *
例如
*{
color: red;
}
*/
</style>
</head>
<body>
<h1>针不戳</h1>
<p id="red">住在山里针不戳</p>
<p>住在山里针不戳</p>
<p class="blue">住在山里针不戳</p>
<p class="blue">住在山里针不戳</p>
</body>
</html>
2.复合选择器
1.交集选择器：
注意：交集选择器中如果有元素选择器，必须以元素选择器开头
<!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> /* 将class为aqua的div字体大小设置为40px ,颜色改为aqua*/ /* 交集选择器 作用，选中复合多个条件的元素 语法：选择器1选择器2选择器3{} */ div.aqua{ color: aqua; font-size: 40px; } </style> </head> <body> <div class="aqua"> 我是div </div> <p class="aqua">我是p</p> </body> </html>
2.选择器分组：（并集选择器）
选择器1，选择器2{ }
<style> h1,span{ ........ } </style>
3.关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/*
子元素选择器
作用，选择指定父元素的指定子元素
语法：父元素>子元素
后代选择器
作用：选中指定元素内的所有后代元素
语法：祖先 后代
div span{
color aqua；
}
选择下一个兄弟 兄的元素：拥有相同父元素的元素是兄弟元素
语法：前一个+后一个
*/
/* 将p中的span元素改为aqua色 */
p>span{
color: aqua;
}
</style>
</head>
<body>
<!--
div中的p和span为兄弟元素
-->
<div>
<p>
<span>
我是p元素中的span
</span>
</p>
<span>我是div中的span</span>
</div>
<span>我是div外的span</span>
</body>
</html>
4.元素选择器
<!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>
/*
属性选择器
选中含有指定属性的元素
[属性名]
选中含有指定属性和属性值的元素
[属性名=属性值]
*/
p[title]{
color: aqua;
}
p[title=efg]{
color: brown;
}
</style>
</head>
<body>
<p title="abc">轻音少女</p>
<p title>京阿尼</p>
<p title="efg">mio</p>
<p>yui</p>
</body>
</html>
效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwKyV6cq-1606055176496)(C:\Users\19167\Desktop\098.png)]
5.伪类选择器
伪类：不存在的类，特殊的类。
伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素。
伪类一般情况下都是：开头。
1.根据所有排序：
<style>
ul>li:first-child {
color: aqua;
}/* 第一个子元素 */
ul>li:last-child{
color: aqua;
} /*最后一个子元素 */
ul>li:nth-child(x){
color: aqua;
}/* 第x个子元素，当x为n时，表示全部子元素，2n（even）选中偶数位的元素，2n+1（odd）奇数，*/
</style>
2.同类型元素中排序
只找相同类型
<style>
ul>li:first-of-type{
color: aqua;
}
ul>li:last-of-type{
color: aqua;
}
ul>li:nth-of-type(){
color: aqua;
}
</style>
3.否定伪类
：not（）
将符合条件的元素从选择器中剔除。
<style>
ul>li:not(3){
color: aqua;
} /* 只有第三个元素不变为aqua色 */
</style>
4.超链接的伪类
<style>
/*
1.没访问过的链接(a:link)
2.访问过的链接 (a:visited)
3.鼠标移入 （a:hover)
4.鼠标点击 （a:active)
*/
a:link{
color: aqua;
}
a:visited{
color: aquamarine;
}
a:hover{
color: rgb(6, 104, 11);
font-size: 40px;
}
a:active{
color: crimson;
}
</style>
5.伪元素选择器
伪元素，表示页面中一些特殊并不真实存在的元素。
<style>
/*
伪元素用 :: 开头。
*/
p::first-letter{
font-size: 50px;
}/* 将p中第一个元素变大 */
p::first-line{
background-color: cyan;
}/* 第一行 */
p::selection{
color: darkmagenta;
}
/* 改变选中元素的样式 */
</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47KeUCNH-1606055176498)(C:\Users\19167\Desktop\QQ截图20201116202747.png)]
6.选择器的权重
内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承的样式
通配选择器优先级为零，继承的样式没有优先级
3.继承
1.样式的继承
我们为一个元素设置样式，样式也会应用到他的后代元素上。
发生在祖先和后代中
继承的设计是为了方便我们的开发，利用继承将一些通用样式统一设置到共同的祖先元素上，这样只需设置一次，即可让所有元素都是该样式。
4.em与rem。
1.em
em是相对于元素的字体大小来计算的。
1em = 1font - size；
em会根据字体的大小而改变。
2.rem
相对于根元素（html）的字体大小来计算。
5.RGB值
在css中，直接使用颜色名非常不方便
RGB值通过三种颜色的不同浓度来调色
每一种颜色的范围在0~255之间。
<style>
.box1{
width: 100px;
height: 100px;
background-color: rgb(150, 200, 100);
}
</style>
rgba最后一个值为透明度
1表示完全不透明
0表示完全透明
.5表示半透明
<style>
.box1{
width: 100px;
height: 100px;
background-color: rgba(150, 200, 100,0);
}
</style>
3，css中的layout
1.文档流
网页是一层落着一层，用户看到的是最顶层。
这些层中最底下的一层叫做文档。
我们所创建的元素都是默认在文档流里
元素主要有两个状态。
1.在文档中：
特点：
1.块元素：
1.块元素在网页中独占一行。
2.默认宽度是父元素的全部。默认高度为是被子元素撑开。
2.行内元素：
1.不会独占一行，自左向右水平排列。如果一行之中不能容纳下搜有元素，则会换行。
2.行内元素的默认宽度和高度都会被内容分开。
2.脱离文档：
2.盒模型（box model）
css将页面中的所有元素都设置为矩形的盒子。
将元素设置为矩形的盒子后，对页面的布局就变成将不同大小的盒子摆放到页面的指定位置。
每一个盒子都有以下几个部分：
1：内容区
2：边框
3：内边距
4：外边距
1.盒子模型-边框
<style>
/*
内容区，元素中的所有子元素和文本内容都在内容区中排列。
内容区的大小由width和height决定。
*/
.box1{
width: 100px;
height: 100px;
background-color: aqua;
/*
边框，边框属于盒子边缘，边框里边属于盒子内部，除了边界就是盒子外部
边框设置至少要设置三处。
边框的宽度 border-widht
边框的颜色 border-color
边框的样式 border-style
boreder-width可以指定边框四个方向的宽度
boreder-width：10px 20px 30px 40px；
分别为：上，右，下，左。
boreder-color可以用来指定四个边框的颜色
规则和boreder-width是一样的。
border-style 指定边框的样式。
*/
border-width: 10px;
border-style: solid;
border-color:orange;
border-radius: 10px;
}
</style>
简写
<style>
.abc{
background-color: aqua;
width: 100px;
height: 100px;
border: solid 10px orange;
}
</style>
2.盒子模型-内边距
<style>
.abc{
background-color: aqua;
width: 100px;
height: 100px;
border: solid 10px orange;
/*
内容区和边框之间的距离叫做内边距。
一共有四个方向的内边距。
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小。
背景颜色会延伸到内边距上。
盒子的可见框的大小是由内容区，内边距和边框共同决定的。
在计算盒子大小时，需要将这三个区域一起计算。
*/
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
}
.bcd{
width: 100%;
height: 100%;
background-color: papayawhip;
}
</style>
3.盒子模型-外边距
外边距不会影响盒子可见矿的大小。
但是会影响盒子的位置。
一共有四个方向的外边距。
<style>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
border: solid 10px orange; /*
margin-top
margin-right
margin-bottom
margin-left
元素在页面中按照自左向右排列。
所以，默认情况下，如果设置的是左或上外边距，元素将会移动。
如果设置下或右外边距，会移动其他元素。
margin也可以是负值
如果是负值，则会向相反的方向走。
*/
margin-top: 100px;
margin-left: 100px;
}
</style>
4.盒子模型-水平方向的布局
元素水平方向的布局，
元素在父元素中水平方向的位置右由以下几个属性共同决定。
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，他的水平布局必须要满足
4.浏览器的默认样式
在默认情况下
浏览器会为一些元素设置默认样式
默认样式会影响浏览器的页面布局。
通常情况下在写网页时要去除网页的默认样式
重置样式表
专门对浏览器的样式进行重置
reset.css 直接去除浏览器的默认样式
normalize.css 对默认样式进行统一
例如：
<link rel="stylesheet" href="./reset.css">
5.布局练习
1.京东图片列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片列表</title>
<link rel="stylesheet" href="./reset.css">
<style>
body{
background-color: rgb(210, 214, 214);
}
/* 设置外部ul的样式 */
.img-list{
/* 设置ul的宽度 */
width: 190px;
/* 设置ul的高度 */
height: 470px;
/* 裁剪溢出的内容 */
overflow: hidden;
/* 使ul居中 */
margin: 50px auto;
background-color: rgb(247, 245, 243);
}
/* 设置li的位置 */
.img-list li{
margin-bottom: 9px;
}
/* 设置图片的大小 */
.img-list img{
width: 100%;
}
</style>
</head>
<body>
<ul class="img-list">
<li>
<a href="">
<img src="./1.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./2.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./3.png" alt="">
</a>
</li>
</ul>
</body>
</html>
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
