当前位置：首页 > news >正文

01-html css

news 2025/9/8 5:50:18

1. 开发基础

1.1 含义

超文本标记语言

保存html标签文件是 .html
html标签名放在尖括号里
内容放到开始标签和结束标签的之间

<strong>加粗标签</strong>

1.2 基本骨架

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>
<strong>加粗标签</strong>
</body>
</html>

1.3 标签关系

父子关系：换行缩进
兄弟关系：换行对齐

标签分为单表签和双标签

1.4 注释

即在页面不需要显示的部分

<!--这个是注释，不要进行显示-->
<strong>加粗标签</strong>

1.5 标题标签

h1-h6
1.文字加粗
2. 字号逐渐变小
3. 独占一行
4. 一般h1就使用一次

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

1.6 段落标签

段落标签：p

独占一行
段落之间有间隙

<p>段落标签</p>
<p>段落2</p>

1.7 换行和水平线标签

换行<br>
水平线<hr>

换<br>行
<hr>
</body>

1.8 文本格式化标签

突出重点：加粗、倾斜、下划线、删除线等

标签名	标签名	效果
`strong`	`b`	加粗
`em`	`i`	倾斜
`ins`	`u`	下划线
`del`	`s`	删除线

左边的自带强调含义

1.9 图像标签

<img src="url地址" alt="图片无法显示时候显示的文字" title="鼠标悬停在图片显示的文字" width="纯数字没有单位" height="纯数字没有单位">

<属性名 = 属性值> 空格隔开

1.10 相对路径&绝对路径

相对路径

. 当前文件所在的文件夹
… 当前文件上一级文件夹
/ 进入某个文件夹里面

绝对路径

从盘符开始出发查找目标文件C:/XX/XXX
建议统称使用：/

1.11 超链接标签

<a href="链接地址" target="_blank">点击</a>

点击跳转到其他页面
不确定跳转使用在链接地址替换#
target="_blank表示在新窗口打开

1.12 音频标签

<audio src="音频地址" controls loop autoplay></audio>
controls :显示音频控制面板
loop: 循环播放
autoplay:自动播放

1.13视频标签

<video src="视频地址" controls loop autoplay muted></video>
2. controls :显示音频控制面板
3. loop: 循环播放
4. autoplay:自动播放【前提是静音播放属性】
5. muted:静音播放

1.14 列表&表格&表单

1.14.1 列表

作用：布局内容排列整齐的区域
分类： 1. 无序列表 2. 有序列表 3. 定义列表

无序列表

<!--无序列表-->
<ul><li>苹果</li><li>香蕉</li><li>西瓜</li>
</ul>

有序列表

<!--有序列表-->
<ol><li>苹果</li><li>香蕉</li><li>西瓜</li>
</ol>

定义列表

dl是定义列表
dt是定义列表的标题
dd是定义列表的描述|详情

<!--定义列表-->
<dl><dt>水果</dt><dd>苹果</dd><dd>香蕉</dd><dd>西瓜</dd>
</dl>

1.14.2 表格

table 嵌套tr，tr嵌套th和tb

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

<table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td>4</td><td>5</td><td>6</td></tr>
</table>

合并单元格

跨行合并：rowspan
跨列合并: colspan

<table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td rowspan="2">4</td><td colspan="2">5</td></tr><tr><td>7</td><td>8</td></tr>
</table>

1.14.3 表单

收集用户信息，登录、注册、搜索。。。
<input type="text" placeholder="请输入内容">

type	说明
text	文本
password	密码
radio	单选框
checkbox	多选框
file	文件

单选框 radio

name:控件分组。同组只能选择一个
checked：默认选中

<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女

多文件上传 file
添加：multiple

<input type="file" multiple>

多选框 checkbox
默认选中 checked

<input type="checkbox" checked>选项1
<input type="checkbox">选项2

下拉菜单：

<select><option>选项1</option><option>选项2</option><option selected>选项3</option>
</select>

多文本域

<textarea></textarea>

标签说明:label：增大点击范围

只包裹内容，不包裹表单控件
for属性值和标签id属性值一致
两种写法：

我是<input type="radio" name="sex" value="1" checked id="man"><label for="man">男</label>
<label><input type="radio" name="sex" value="2"> 女</label>

按钮 button,和form标签进行配合使用

<button type="button">按钮</button>

type属性	说明
submit	提交数据到后台
reset	表单控件清空
button	普通按钮

<form action=""><textarea></textarea>我是<input type="radio" name="sex" value="1" checked id="man"><label for="man">男</label><label><input type="radio" name="sex" value="2"> 女</label><button type="reset">按钮</button>
</form>

1.15 布局标签

独占一行div
同一行 span

1.16 字符实体

显示	说明	代码
	空格	` `
<	大于号	`>`
>	小于号	`<`

2. css

2.1 含义

样式表语言，用来描述html文档的呈现，美化内容
写法规则：<style>选择器 {属性名：属性值;}</style>

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>p {color: red;}</style></head>
<body>
<p>段落标题</p>
</body>
</html>

2.2 引入方式

内部样式：css代码在style标签中
外部样式：css和html的代码分开放

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css.css"> <!--外部样式表-->
</head>
<body>
<p>段落标题</p>
</body>
</html>

/* css代码*/
p {color: #40bcff;
}

行内样式

<p style="color: antiquewhite">段落标题</p>

2.3 选择器

标签选择器，即标签名, 标签名
id选择器，根据标签属性id，#id
类选择器,根据类名某一类，.class
通配符选择器，*

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css.css"> <!--外部样式表--><style>p {color: red;}#p1 {color: blue;}.p2 {color: green;}.p3 {font: bold 20px/1.5 'Microsoft YaHei';}</style>
</head>
<body>
<p>段落标题</p>
<p id="p1">段落标题</p>
<p class="p2">段落标题</p>
<p class="p2 p3">段落标题</p>
</body>
</html>

2.4 宽度&高度&背景色

属性名	作用
width	宽度
height	高度
background-color	背景色

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box1 {width: 100px;height: 100px;background-color: red;}#box2 {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

2.5 文字控制属性

描述	属性
字体大小(加单位)	font-size
字体粗细	font-weight
字体倾斜	font-style
行高(不加单位为自豪的倍数)	line-height
字体	font-family
字体符合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线	text-decoration
颜色	color

单行文字垂直居中：行高属性等于盒子高度属性值
符合属性：
/是否倾斜是否加粗字号/行高字体/
font: normal 100 80px/20px '楷体';
3.文本缩进：text-indent
属性值：
数字 + px
数字 + em (推荐的 1em = 当前标签的字号大小)

text-align本质是控制内容的对齐方式，属性要设置给内容的父级
text-decoration :
none:无
underline:下划线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{font-size: 40px;/* 字体字号*/font-weight: 900;/* 字体加粗*/font-family: '楷体','宋体';/* 字体*/line-height: 40px;/* 行高*/font-style: italic;/* 文字倾斜，正常normal*/text-align: center;}#p1{/*是否倾斜 是否加粗 字号/行高 字体*/font: normal 100 80px/20px '楷体';text-indent: 2em;text-decoration: underline;}</style>
</head>
<body>
<p> 字体大小</p>
<p> 字体大小</p>
<p id="p1"> 字体大小</p>
</body>
</html>

2.6 复合选择器

有两个或者多个基础选择器，通过不同的方式进行组合
作用：更准确、搞笑的选择目标元素
分类：
- 后代选择器：父选择器子选择器 {css属性} 父子选择器之间使用空格隔开，后代的相应标签都会发生改变
- 子代选择器：父选择器>子选择器{}，父选择器与子选择器之间用>隔开，只是子选择器发生改变
- 并集选择器：为多组标签设置相同样式：标签,标签2,...{},使用逗号隔开
- 交集选择器:满足多个条件的元素：选择器1选择器2{}，直接连写没有任何符号，遇见标签选择器放到最前边

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box span{color: red;}#box1 > #span1{color: red;}#s1,#s2{color: #b1f100;}</style>
</head>
<body>
<span>其他选择器
</span>
<div id="box"><span>子选择器</span><p><span>子的子选择器</span></p>
</div>
<div id="box1"><span id="span1">子选择器</span><p><span>子的子选择器</span></p>
</div>
<span id="s1">选择器1</span>
<span id="s2">选择器2</span>
</body>
</html>

2.7 伪类选择器

伪类表示元素的状态，选中元素某个状态设置样式
鼠标悬停状态：选择器:hover{css属性},任何标签都可以设置伪类选择器的样式

伪类超链接（拓展）：设计四个状态时需要按照lvha的顺序书写

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时(激活

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a:link {color: #2ad017;}a:visited {color: #0223cb;}a:hover {color: red;}a:active {color: #00f3cb;}</style>
</head>
<body>
<a href="#">链接</a>
</body>
</html>

2.8 css 特性

继承性：子级默认继承父级的文字控制属性
层叠性：
相同的属性会覆盖：后面的属性覆盖前面的属性
不同的属性会被叠加

优先级：选中标签的范围越大，优先级越低
!important>行内 > id >类> 标签

2.9 背景属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

background-repeat
no-repeat：不平铺
repeat：平铺
repeat-x: 水平方向平铺
repeat-y:垂直方向平铺

background-attachment
背景不会随着元素的内容进行滚动
fixed

2.10 显示模式

块级元素
独占一行
默认宽度时父级的100%
加宽高生效

行内元素
一行共存
尺寸随内容
宽高不显示

行内块
同行共存
与内容相同尺寸
宽高生效

2.10.1 显示模式转换

属性名：display

属性值	效果
block	块级
inline-block	行内块
inline	行内

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;}#box1 {background-color: red;display: inline-block;}#box2 {background-color: blue;display: inline-block;}</style>
</head>
<body>
<div id="box1">123
</div>
<div id="box2">345
</div>
</body>
</html>

2.11 结构伪类选择器

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素

查找规律的：偶数E:nth-child(2n)

2.12 伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器	说明
E::before	在E元素里面最前面添加伪元素
E::after	在E元素里面最后面添加伪元素

必须设置“content:“””属性，没有内容也要引号留空
默认时行内显示
权重和选择器权重一致

2.13 盒子模型

属性名	说明
width&height	内容区域
padding	内边距(可单独方向进行设置)
border	边框线(可单独方向进行设置)
margin	外边距(可单独方向进行设置)

盒子计算：内容尺寸 + border尺寸 + 内边距尺寸
计算方式:

手动减法：减掉border + padding尺寸
内减模式：box-sizing:border-box

垂直排列的兄弟元素，margin会取最大值显示

塌陷问题：父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动

父级添加改换使用padding

行内元素内外垂直改变边距需要加入行高：line-height

2.14 清楚默认样式

*{padding: 0;margin: 0;}

2.15 盒子内容溢出

overflow

属性值	说明
hidden	溢出隐藏
scroll	溢出滚动（溢出不溢出都会有滚动条）
auto	溢出的时候有滚动条

2.16 盒子圆角

border-radius

div{border-radius: 10px 20px 40px 60px;}

2.17 盒子阴影

给盒子添加阴影效果：box-shadow
属性值：x轴偏移量(必须添加) y轴偏移量(必须添加) 模糊半径扩散半径颜色内外阴影(inset内阴影默认为外阴影)

box-shadow: 2px 2px 2px 2px #918f8f;

2.18 浮动

2.18.1 标准流

也叫文档流，指的是标签在也页面中默认的排布规则

2.18.2 基本使用

块级标签在一行使用
属性名:float
属性值：left:左对齐 right:右对齐

特点

浮动后的盒子顶对齐
浮动后的盒子具有行内块的特点
浮动后的盒子托标，不占用标准流的位置

float: left;

2.18.3 清除浮动

问题：浮动元素会托标，如果父级灭有高度，子级无法撑开父级高度（导致布局混乱）
解决：清除浮动（清除浮动带来的影响）

额外标签：在父元素内容的最后添加一个块级元素，设置css属性clear:both
单伪元素法：.父元素::after{content:";clear:both}
双伪元素法(推荐)

 .clearfix::before{content: "";/*防止塌陷*/display: table; }.clearfix::after{content: "";clear:both;}

overflow:父元素添加：overflow:hidden

2.19 Flex 弹性布局

Flex布局也叫弹性布局，是浏览器提倡的布局模式，非常适合结构化布局，提供了强大的布局分布和对齐能理。

Flex模型不会产生浮动布局中的托标现象，布局网页更简单、更灵活

2.19.1 Flex组成

设置方式：在父元素设置display:flex，子元素可以自动挤压或拉伸
组成成分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴/交叉轴：默认在垂直方向

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box1{display: flex;justify-content: space-between;width: 500px;height: 300px;background: #b1f100;border: 1px solid #000000;}#box2{height: 100px;background: #de1f1f;}#box3{/*height: 100px;*/background: #4ee87f;}#box4{height: 100px;background: #5ba6f5;}</style>
</head>
<body>
<div id="box1"><div id="box2">123</div><div id="box3">456</div><div id="box4">789</div>
</div>
</body>
</html>

2.19.2 Flex布局

描述	属性
创建flex容器	display:flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对其方式	align-selt
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

justify-content

属性值	说明
flex-start	默认值，盒子开始的时候依次排序
flex-enf	盒子从终点开始排序
center	沿主轴居中排序
space-between	盒子沿主轴均匀排列，空白均分在盒子之间
space-around	盒子沿主轴均与排列，空白均分在两侧
space-evenly	盒子沿主轴均分排列，弹性盒子与容器之间间距相等

侧轴对齐方式

align-items:当前弹性容器所有弹性盒子的侧轴对齐方式（给弹性容器控制）
align-self:单独控制某个弹性合资的侧轴对齐方式（给弹性盒子设置）

属性值	说明
stretch	弹性盒子沿着侧轴线被拉伸值铺满容器(弹性盒子没有设置侧轴尺寸默认拉伸)
center	拉伸盒子沿侧轴居中排列
flex-start	弹性和子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

flex-direction：默认在水平侧轴在垂直方向

属性值	属性名
row	水平方向，从左向右(默认)
`column`	垂直方向，从向向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

弹性伸缩比：flex

控制弹性盒子的主轴方向的尺寸
属性值：整数数字，表示占用父级剩余尺寸的分数

弹性换行flex-wrap

属性值：wrap:换行；nowrap:不换行（默认）

行对齐方式：align-content

属性值	说明
flex-start	默认值，盒子开始的时候依次排序
flex-enf	盒子从终点开始排序
center	沿主轴居中排序
space-between	盒子沿主轴均匀排列，空白均分在盒子之间
space-around	盒子沿主轴均与排列，空白均分在两侧
space-evenly	盒子沿主轴均分排列，弹性盒子与容器之间间距相等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box1{display: flex;flex-wrap: wrap;/*justify-content: space-between;*/justify-content: space-evenly;align-items: center;align-content: space-between;;flex-direction: column;width: 500px;height: 300px;background: #b1f100;border: 1px solid #000000;}#box2{height: 100px;flex: 2;background: #de1f1f;}#box3{/*height: 100px;*/align-self: stretch;background: #4ee87f;flex: 1;}#box4{height: 100px;flex: 1;background: #5ba6f5;}</style>
</head>
<body>
<div id="box1"><div id="box2">123</div><div id="box3">456</div><div id="box4">456</div><div id="box4">456</div><div id="box4">456</div><div id="box4">456</div><div id="box4">456</div><div id="box4">456</div><div id="box4">789</div><div id="box4">789</div><div id="box4">789</div><div id="box4">789</div><div id="box4">789</div><div id="box4">789</div>
</div>
</body>
</html>

2.20 小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}li{display: flex;list-style: none;width: 500px;height: 88px;}li img{width: 80px;height: auto;padding: 4px;}li .box2{margin-left: 15px;}li .box2 h3{line-height: 40px;font-size: 20px;font-weight: 400;color: #333;}li .box2 p{font-size: 14px;color: #666;}.box1{margin: 50px auto;width: 1200px;height: 418px;border: 1px solid #ddd;border-radius: 20px;}.box1 ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;padding: 90px 40px 90px 60px;height: 418px;}</style>
</head>
<body>
<div class="box1"><ul><li><div><img src="imgs/藏獒.png"></div><div class="box2"><h3>一键发布多端</h3><p>一键发布多端，省时省力</p></div></li><li><div><img src="imgs/藏獒.png"></div><div class="box2"><h3>一键发布多端</h3><p>一键发布多端，省时省力</p></div></li><li><div><img src="imgs/藏獒.png"></div><div class="box2"><h3>一键发布多端</h3><p>一键发布多端，省时省力</p></div></li><li><div><img src="imgs/藏獒.png"></div><div class="box2"><h3>一键发布多端</h3><p>一键发布多端，省时省力</p></div></li></ul>
</div></body>
</html>