目录
HTML
一 HTML基本结构
二 HTML开发工具
三 HTML基本标签
四 表单
CSS
一 样式的使用
1.行内样式
2.内部样式
3.外部样式
4.优先级
二 基本选择器
1.标签选择器
2.类选择器
3.ID选择器
--Day_1227
4.通配选择器
5.优先级
三 层次选择器
1.E F
2.E>F
3.E+F
4.E~F
四.结构伪类选择器
1.E:first-child
2.E:nth-child
3.E: last-child
4.E：first-of-type
五.超链接伪类选择器
1. a:ink
2. a:visited
3. a:hover(重要)
4. a:active
六.css常用样式属性
1.背景属性
2.文本属性
3.字体属性
4.列表属性
5.元素分类
--Day_1228
七. 网页布局
1.盒子模型+浮动
2.定位
3.浮动
HTML
一 HTML基本结构
<html>
<head>
<meta name="author" value="Tom"/>
<meta name="wordkeys" value="百度"/>
<title>标题</title>
</head>
<body>
<!--注释-->
<h1>页面内容</h1>
</body>
</html>二 HTML开发工具
webStrom , vsCode , idea
三 HTML基本标签
1.标题标签: hx(1~6)
<h3>怀化学院</h3>
2.段落标签: p
<p>怀化学院是最牛逼的</p>
3.加粗: strong
<p><strong>怀化学院</strong>是最牛逼的</p>
4.斜体: em
<p><em>2023-12-25</em></p>
5.删除线：del
<p><del>怀化学院是最牛逼的</del></p>
6.下标:sub
<p>H<sub>2</sub>O</p>
7.上标：sup
<p>2<sup>3</sup></p>
8.分割线:hr(它是单标签，因为它不是修饰文字的)
<hr>
9.换行标签:br(单标签)
<br>
10.超链接标签:a
href: 链接地址
target: "_self"（会覆盖原来标签）
target: "_blank"（不会覆盖原来标签）
<a href="www.baidu.com" target="_blank">百度一下</a>
11.图片标签：image
-src:图片路径
-width：图片宽度
-height:图片高度
-title : 标题
-alt:图片无法加载时提示内容
<img src="D:\feisi\html\day_1226\test\images\images\header.jpg" width="" height="" title="首页" alt="图片加载失败">
12.视频标签：vedio
<!--不同游览器兼容视频格式不一样-->
<video controls>
<source src="" type="video/mpeg">
<source src="" type="video/webm">
</video>
13.音频标签: audio
<audio controls>
<source src="" type="audio/mpeg">
</audio>
14.列表标签：ul ， ol ， dl
<!--无序列表-->
<ul type="circle">
<li>刘德华</li>
<li>张学友</li>
</ul>
<!--有序列表-->
<ol>
<li>孤勇者</li>
<li>冰雨</li>`
</ol>
<!--自定义列表-->
<dl>
<dt>衣服</dt>
<dd>衬衣 夹克 背心</dd>
<dt>裤子</dt>
<dd>七分裤 蓝裤子 白裤子</dd>
</dl>
15.表格标签:table
<table border="1" cellspacing="0" >
<caption>学生信息表</caption>
<tr bgcolor="pink">
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
</tr>
</table>四 表单
1.表单基本结构
<form action="服务器地址" method="GET||POST">
<input type="" name="" value="">
</form>type: text , password , radio , chechbox , button , submit , reset , image ， tel(这个大部分游览器不兼容)
name: 控件名称 ， 数据提交的key
value: 控件的值 ， 数据提交的value
2.常用输入限制
CSS
一 样式的使用
1.行内样式
<!-- 行内样式 -->
<h3 style="color: blue; font-size: 16px;">怀化学院</h3>2.内部样式
<style type="text/css">
h3{
color: blue;
font-size: 16px;
}
</style>3.外部样式
首先定义一个css文件
再引入这个css文件
<!-- 推荐使用 -->
<link rel="stylesheet" href="css/value.css" type="text/css">4.优先级
就近原则 。 即那个样式离它最近哪个样式的优先级就越高 ， 因为html时边解释边执行 ， 所以后面执行的会覆盖掉前面以及执行的。
二 基本选择器
选择器：选择对应的元素设置对应的效果
1.标签选择器
/* 标签选择器 */
p{
color: blue;
}
<body>
<p>HEllo , World</p>
<p>HEllo , World</p>
</body>2.类选择器
----可以被多个标签使用 ， 一个标签也可以使用多个类选择器
/* 类选择器 */
.box{
color: red;
font-size: 14px;
}
.bd{
font-style: italic;
}
<body>
<p class="box bd">HEllo , World</p>
<h3 class="box">怀化学院</h3>
</body>3.ID选择器
----id是唯一标识 ， 一个标签只能有一个id选择器 ， 一个id选择器也只能被一个标签使用。
/* ID选择器 */
#card{
/* 字体粗细:100-900 */
font-weight: 100;
}
<body>
<h3 id="card">怀化学院</h3>
</body>--Day_1227
4.通配选择器
/* 通配选择器， 优先级很低 */
*{
margin: 0px;
}5.优先级
选择器之间存在样式冲突: 是根据选择器之间的权值来获取优先级:
id选择器>类选择器>标签选择器>通配选择器
三 层次选择器
1.E F
选择E元素后代F元素设定样式【后代选择器】
<!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">
/* 选择body元素的后代p 及1，2，3，5，6，，7都会受影响*/
body p{
color: red;
}
</style>
</head>
<body>
<h2>4</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>2.E>F
选择E元素的子代F设定样式【子类选择器】
<!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">
/* 1，2，3会受影响*/
body>p{
color: red;
}
</style>
</head>
<body>
<h2>4</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>因为时<body>标签的子类 ， 而且时<p>标签只有1，2，3 ， 而5，6，7虽然是<p>标签，但不是直接子类 ， 而是孙子类.
3.E+F
选择E元素相邻的兄弟F设定样式【相邻兄弟选择器】
4.E~F
选择E元素的所有兄弟元素F设定样式 【通用兄弟选择器】
四.结构伪类选择器
1.E:first-child
如果某个标签的第一个儿子是E标签，那么就作用这个样式
<!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">
/* 5,6,7受影响 , 因为body标签第一个儿子是h2标签 ， ul标签第一个儿子是li标签 ， 只有li标签的第一个儿子都是p标签 */
p:first-child{
color: red;
}
</style>
</head>
<body>
<h2>4</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>2.E:nth-child
3.E: last-child
4.E：first-of-type
<!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的儿子，1，5 ,6,7受影响 */
p:first-of-type{
color: red ;
}
</style>
</head>
<body>
<h2>4</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>五.超链接伪类选择器
1. a:ink
点击之前
2. a:visited
点击之后
3. a:hover(重要)
鼠标悬浮于链接之上时的样式
/* 鼠标悬浮于链接之上时的样式 */
a:hover{
color: red;
font-size: 24px;
text-decoration: overline;
}4. a:active
鼠标点击未释放时的样式
/* 鼠标点击未释放时的样式 */
a:active{
color: blue;
font-size: 18px;
}六.css常用样式属性
1.背景属性
backGround-color :背景颜色
background-image:背景图片
background-repeat:背景平铺
background-position:背景定位
background-size: 背景尺寸
background：背景
box{
width: 400px;
height: 400px;
/* 边框:粗细 边框类型 颜色 */
border: 1px solid red;
/* 背景颜色 */
background-color:pink;
/* 背景图片 */
background-image: url("test/练习素材/练习3：制作开心餐厅页面/图片素材/game01.jpg") ;
/*背景平埔帮 */
background-repeat: no-repeat;
/* 背景定位 */
background-position: 0px 0px;
/* 背景尺寸 */
background-size: 100%;
/* background: chartreuse 100px 100px url("test/练习素材/练习3：制作开心餐厅页面/图片素材/game01.jpg") no-repeat; */
}2.文本属性
color :颜色
text-indent: 文本缩进
text-decoration: 文本装饰
text-align: 文本水平对齐方式
line-height: 设置行高
text-shadow: 文本阴影（颜色 x偏移 y偏移 模糊半径）
/* 文本属性 */
.box p{
/* 文本颜色 */
color: blue;
/* 文本缩进 */
text-indent: 2em;
/* 文本装饰 */
text-decoration: line-through;
/* 文本对齐方式 */
/*文本水平对齐 */
text-align: center;
/* 设置行高 */
line-height: 40;
/* 文本阴影 */
text-shadow:red 10px 10px 5px;
}3.字体属性
font-size: 字体大小
font-family: 字体系列
font-weight：字体粗细
font: 字体(有先后顺序:风格 粗细 大小 系列)
/* 字体属性 */
p{
/* 字体大小 */
font-size: 18px;
/* 字体系列 */
font-family: Arial, Helvetica, sans-serif;
/* 字体粗细 */
font-weight: 200;
}4.列表属性
1.list-style-type: 设置列表风格形状
2.list-style-image:列表风格图片
3.list-style-position:列表标志定位
ul{
/* 设置列表风格形状 */
list-style-type: square;
/* 列表风格图片 */
list-style-image: url(test/练习素材/练习3：制作开心餐厅页面/图片素材/game03.jpg);
/* 列表标志定位 */
list-style-position: inside;
}5.元素分类
1.块元素: <p> <hx> <div> <ul> <li>...
特点: 独占一行 ， 有宽度和高度
2.内联元素: <strong> <em> <img>...
特点: 不独占一行 ， 没有宽度和高度表
元素类型转换：display：--
--block:块元素
--inline：行元素
--inline-block: 行块元素（即不独占一行又保留行和高）
--none: 不显示
--Day_1228
七. 网页布局
1.盒子模型+浮动
盒子模型：
1.盒子构成：内容+内边距+边框+外边距
内边距：内容与边框之间的距离
书写方式：padding-【top ， bottom ， left ， right】 设置指定位置边框
padding-上下 ， 左右(两个值)
padding-上 ， 左右 ， 下（三个值）
padding-上 ， 右 ， 下 ， 左（四个值）
外边距: 边框以外的距离
margin：【和上面的内边距书写方式一样】
2.块元素居中(必须是块元素而且明确边界大小)：
margin: 0px auto ; 3.内容居中：如何让一个文本在块元素中居中呢？上面的那个是块元素在这个游览器页面中居中.
<!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">
.number{
/*先让span标签变成有边距的行元素 */
display: inline-block;
/* 设置他的宽 */
width: 20px;
/* 设置它的高 */
height: 20px;
/* 设置边框可见 */
border: 1px solid red;
/* 先让它水平居中 */
text-align: center;
/* 再设置它的行距和宽一样 */
line-height: 20px;
/* 再设置它垂直居中 */
vertical-align: middle;
/* 设置边框形状为圆形 */
border-radius: 50%;
/* 设置圆形边框的背景颜色 */
background-color: #e9185a;
/* 设置字体颜色 */
color: aliceblue;
}
</style>
</head>
<body>
<p><span class="number">1</span>怀化学院</p>
</body>
</html>页面效果展示:
上图可见：这个1已经位于这个圆形图标的正中间位置
2.定位
posistion属性
--absolute:绝对定位
1.脱离文档流 ，对周边元素产生影响
2.当祖先元素有定位(绝对定位/相对定位/固定定位 ) ， 则相对于最近的祖先元素定位 【即祖先移动，它会相对祖先移动】
当祖先元素没有定位 ， 则相对于游览器进行定位。
--relative：相对定位
1.不脱离文档流 ， 对周边元素的位置不会产生影响
2.相对于本身原来的位置定位
--fixed：固定定位
1.脱离文档流 ， 对周边元素的位置会产生影响
2.永远是相对于游览器定位
3.浮动
float：1.left 2.right 3.none(默认)
什么是浮动？
<!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">
.father{
width: 900px;
border: 1px solid red;
}
.box{
width: 400px;
height: 200px;
}
.b1{
/* 浮动 这个效果是蓝色看不见了 。 过程是因为当黄色浮起来后 ， 下面的蓝色和青色会替补上空出来的位置
然后浮起来的黄色会往左边浮动，从而遮住了替补上来在下面的蓝色。
*/
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="box b1" style="background-color: yellow;">1</div>
<div class="box" style="background-color: blue;">2</div>
<div class="box" style="background-color: aqua;">3</div>
</div>
</body>
</html>
父级塌陷：
因为我们最外面的父级盒子的高是自适应的 ，也就是说父级盒子的高是根据你里面有多少内容来自适应的 。而我们用浮动导致里面所有的内容浮起来了 ， 而内容就空了，导致父级盒子的高坍陷了，也就是没高了。
clear：清除浮动影响
解决方案：
/* 清除父元素塌陷给父元素的最后加上这个 */
.father:after{
/* 给父元素最后加上一个块元素 */
display: block;
/* 让它的内容为空 */
content: '';
/* 清除右浮动对它的影响 */
clear: right;
}本周笔记就到这了，新年第一篇bk ， 祝大家新年快乐，万事顺遂！
