HTML和CSS基本知识-酒店常州论坛

前端完整笔记

一、基础概念

HTML：盖房子（页面结构）
CSS：全屋定制（样式美化）
JavaScript：智能家居（交互逻辑）
jQuery + Ajax：做数据交互
JavaScript 和 Java没关系，只是名字像
LiveServer：以服务方式打开，热加载（改了代码立刻更新，不用手动刷新）

二、HTML 基础

基本结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> 页面内容 </body> </html>

head：放基本信息（标题、编码、样式引入等）
body：页面可见内容
：注释，快捷键ctrl + /

Emmet 快捷语法（必背）

在编辑器里输入以下缩写按 Tab 自动生成：

缩写	生成结果
`!`	完整 HTML 框架
`标签名`	生成对应标签
`div{文本}`	生成带文本的标签
`div*3`	生成 3 个 div
`div>p`	`>`下一级（父子关系）
`div+p`	`+`同级（兄弟关系）
`div.a`	生成 class 为 a 的 div
`div#a`	生成 id 为 a 的 div
`div[attr=val]`	生成带属性的标签

多个属性之间用空格隔开

三、HTML 常用标签

文本标签

标签	类型	作用
`div`	块级	块级容器，独占一行，竖着排列
`span`	行内	行内容器，不独占一行，横着排列
`h1`~`h6`	块级	标题标签（h1最大，h6最小）
`p`	块级	段落标签
`br`	-	换行

⚠️ 注意：不是所有标签都识别所有属性，比如 span 不识别宽高

链接标签

标签	关键属性	作用
`a`	`href`链接地址	超链接
`target="_self"`	当前窗口打开（默认）
`target="_blank"`	新窗口打开
`target="窗口名"`	配合 iframe 的 name 在指定窗口打开

图片标签

<img src="路径" alt="加载失败提示文字">

src：图片路径（相对路径 / 绝对路径）
alt：图片加载失败时显示的文字

内嵌窗口

<iframe src="页面地址" name="win1" frameborder="0"></iframe>

iframe：在页面里嵌入另一个页面
name：窗口名，配合 a 标签的 target 可以在指定 iframe 里打开页面
frameborder：边框线，0 表示无边框

列表

标签	作用
`ul`+`li`	无序列表（ul 是容器，li 是列表项）
`ol`+`li`	有序列表

表格

标签	作用
`table`	表格容器
`tr`	行
`td`	列（单元格）
`thead`	表头，包起来的内容在最上面
`tbody`	主体，形成独立空间
`tfoot`	表尾，包起来的内容在最下面

表格属性：

border：边框宽度
cellspacing：单元格之间的间距
cellpadding：单元格内边距（内容和边框的距离）

多媒体

标签	常用属性
`audio`	`controls`控制条，`autoplay`自动播放
`video`	`controls`控制条，`autoplay`自动播放（不会让视频变形）

表单

<form action="提交地址"> <input type="text"> <input type="radio" name="sex"> <input type="checkbox"> <input type="file"> <select> <option>选项1</option> </select> </form>

form：表单容器，action是提交地址
input：收集用户信息
- text：文本框
- radio：单选框，name 值相同的视为一组
- checkbox：多选框
- file：选择文件
select+option：下拉选择框

四、CSS 基础

三种引入方式

行内样式：写在标签的 style 属性里 → 优先级最高
内部样式：<style>标签写在 head 里
外部样式：<link rel="stylesheet" href="xxx.css">引入

优先级：行内样式 > 内部样式 = 外部样式同一级别：后面的覆盖前面的

CSS 语法规则

选择器 { 属性名: 属性值; 属性名: 属性值; }

五、CSS 选择器

基础选择器

选择器	写法	优先级
通配符选择器	`* {}`	最低
元素选择器	`div {}`	低
class 选择器	`.a {}`	中
id 选择器	`#a {}`	高
行内样式	style=""	最高

优先级排名：行内 > id > class > 元素 > * 口诀：选择器写得越准确，优先级越高

属性选择器

写法	作用
`[attr^="aa"]`	属性值以 aa 开头
`[attr$="aa"]`	属性值以 aa 结尾
`[attr*="aa"]`	属性值包含 aa

组合选择器

写法	作用
`div.a`	选中 class 为 a 的 div（交集）
`div p`	选中 div 里面所有 p（后代，包括子孙）
`div > p`	选中 div 的直接子元素 p（亲儿子）
`div, p`	选中 div 和 p（并集）

class 值可以设置多个，用空格隔开：<div class="a b c">

伪元素选择器

伪元素选择器主要用在块级元素上

伪元素	作用
`::first-letter`	选中第一个字母/汉字
`::first-line`	选中第一行
`::before`	在元素内容前面插入内容（必须加 content）
`::after`	在元素内容后面插入内容（必须加 content）

div::before { content: "前面加的文字"; }

伪类选择器

伪类	作用
`:nth-child(n)`	第 n 个子元素
`:nth-of-type(n)`	同类型的第 n 个
`:nth-last-child(n)`	倒着数第 n 个
`:hover`	鼠标悬停状态
`:focus`	获取焦点状态（点击后）
`:checked`	选中状态（单选/多选框）

常用关键词：

odd：奇数
even：偶数

六、常用 CSS 属性

文字属性

属性	作用	示例
`font-size`	字号	`16px`
`font-weight`	字重	`bold`加粗 /`normal`正常
`font-family`	字体	`"微软雅黑"`
`color`	文字颜色	`red`/`#fff`/`rgb(255,0,0)`
`text-align`	文字水平对齐	`left`/`center`/`right`
`line-height`	行高	`20px`（等于高度时文字垂直居中）
`text-decoration`	文字装饰	`none`去掉下划线 /`underline`下划线
`word-break`	单词换行	`break-all`单词裂开换行

背景属性

属性	作用
`background-color`	背景颜色
`background-image`	背景图片
`background-repeat`	是否平铺（no-repeat 不平铺）
`background-position`	背景位置
`background-size`	背景尺寸（cover 覆盖 / contain 包含）

简写：

background: 颜色 图片 位置/尺寸 平铺;

其他常用

属性	作用
`box-shadow`	盒子阴影
`opacity`	透明度（0~1）
`border-radius`	圆角（50% 是圆形）
`overflow: hidden`	超出部分隐藏，也可以用来清除浮动

七、盒子模型

三种盒子类型

类型	特点	例子
块级 block	独占一行，支持宽高	div、h1-h6、p、ul、li
行内 inline	不独占一行，不支持宽高	span、a
行内块 inline-block	不独占一行，支持宽高	input、img

⚠️ 行内块级元素的坑：HTML 里换行/回车会被浏览器读成空格，导致元素之间有间隙

盒子四层结构

从内到外：

内容区 content
内边距 padding
边框 border
外边距 margin

padding（内边距）

padding: 上 右 下 左; /* 顺时针 */ padding: 上下 左右; padding: 10px; /* 四边都是10px */

margin（外边距）

写法和 padding 一样
垂直方向外边距不叠加，取最大值（谁大听谁的）
margin: 0 auto：块级元素水平居中

border（边框）

属性	作用	示例
`border-width`	边框宽度	`1px`、`2px`
`border-style`	边框样式（必须写，否则不显示）	`solid`实线、`dashed`虚线、`dotted`点线
`border-color`	边框颜色	`red`、`#fff`、`rgb()`

box-sizing（盒模型类型）

值	效果
`content-box`（默认）	width/height 只算内容区，padding+border 额外撑大盒子
`border-box`	width/height 包含内容+padding+border，整体尺寸固定

✅ 开发推荐全局设置：
* { margin: 0; padding: 0; box-sizing: border-box; }

八、浮动 float

作用

让元素浮起来，脱离文档流，实现横向排列。

问题

子元素全部浮动后，父容器高度塌陷（父盒子高度变 0）。

清除浮动（解决高度塌陷）

父元素加overflow: hidden（最简单）
伪元素清除法（项目通用）：

.clearfix::after { content: ""; display: block; clear: both; }

九、定位 position

五种定位模式

值	特点	是否脱离文档流
`static`	默认静态定位	否
`relative`	相对定位（相对于自己原来的位置）	否
`absolute`	绝对定位（相对于最近的已定位父元素）	是
`fixed`	固定定位（相对于浏览器窗口）	是
`sticky`	粘性定位（滚动到一定位置吸顶）	否

定位偏移属性

top、bottom、left、right：设置距离各边的位置
z-index：层叠顺序，数值越大越靠上（必须配合定位使用）

经典搭配：子绝父相

子元素用absolute，父元素用relative，子元素相对于父元素定位。

十、Flex 弹性布局（重点）

父容器属性（写在父盒子上）

1. flex-direction（主轴方向）

值	效果
`row`（默认）	从左到右横向
`row-reverse`	从右到左横向倒序
`column`	从上到下纵向
`column-reverse`	从下到上纵向倒序

.father { display: flex; flex-direction: row; }

2. justify-content（主轴对齐）

值	效果
`flex-start`（默认）	靠起点
`flex-end`	靠终点
`center`	居中
`space-between`	两端贴边，中间均分
`space-around`	元素两侧空白相等
`space-evenly`	所有空白完全相等

.father { display: flex; justify-content: center; }

3. align-items（交叉轴对齐 - 单行）

值	效果
`stretch`（默认）	拉伸填满交叉轴
`flex-start`	靠起点
`flex-end`	靠终点
`center`	居中
`baseline`	文字基线对齐

.father { display: flex; align-items: center; }

4. flex-wrap（换行）

值	效果
`nowrap`（默认）	不换行，挤在一起
`wrap`	换行

5. align-content（交叉轴对齐 - 多行）

⚠️ 必须有多行才生效，一行时无效

值	效果
`stretch`（默认）	拉伸填满
`flex-start`	靠起点
`flex-end`	靠终点
`center`	居中
`space-between`	首尾贴边，行间距均分
`space-around`	每行两侧空白相等
`space-evenly`	所有空隙完全相等

子元素属性（写在子盒子上）

1. flex-grow（放大比例）

默认0：不放大
父容器有剩余空间时，按比例瓜分
数值越大，分到的剩余空间越多

.item { flex-grow: 1; }

2. flex-shrink（缩小比例）

默认1：空间不足时自动缩小
0：不缩小，可能溢出父容器
数值越大，缩得越多

.item { flex-shrink: 1; }

3. flex-basis（基础宽度）

默认auto：以 width 或内容宽度为准
优先级比width高
分配空间前的初始尺寸

.item { flex-basis: 200px; }

4. flex（简写，推荐）

顺序固定：grow → shrink → basis

.item { flex: 1 1 auto; }

简写	等价于	效果
`flex: 1`	`1 1 0%`	等比例填满剩余空间
`flex: none`	`0 0 auto`	不放大也不缩小，固定尺寸
`flex: auto`	`1 1 auto`	自动放大缩小

5. order（排列顺序）

默认0
值越小，排得越靠前
可以是负数

十一、黄金组合（必背）

1. 全局样式重置

* { margin: 0; padding: 0; box-sizing: border-box; }

2. 完全居中（Flex 版）

.father { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ }

3. 导航栏左右分散

.nav { display: flex; justify-content: space-between; align-items: center; }

4. 单行文字垂直居中

.box { height: 40px; line-height: 40px; /* 行高 = 高度 */ }

5. 清除浮动

.clearfix::after { content: ""; display: block; clear: both; }

十二、速记口诀

Flex 布局

主轴方向 →flex-direction
主轴分布 →justify-content
交叉轴单行 →align-items
交叉轴多行 →align-content
子元素放大 →flex-grow
子元素缩小 →flex-shrink
子元素基础宽 →flex-basis
三属性简写 →flex

选择器优先级

行内 > id > class > 元素 > *

企业官网建设流程全解析

前端完整笔记

一、基础概念

二、HTML 基础

基本结构

Emmet 快捷语法（必背）

三、HTML 常用标签

文本标签

链接标签

图片标签

内嵌窗口

列表

表格

多媒体

表单

四、CSS 基础

三种引入方式

CSS 语法规则

五、CSS 选择器

基础选择器

属性选择器

组合选择器

伪元素选择器

伪类选择器

六、常用 CSS 属性

文字属性

背景属性

其他常用

七、盒子模型

三种盒子类型

盒子四层结构

padding（内边距）

margin（外边距）

border（边框）

box-sizing（盒模型类型）

八、浮动 float

作用

问题

清除浮动（解决高度塌陷）

九、定位 position

五种定位模式

定位偏移属性

经典搭配：子绝父相

十、Flex 弹性布局（重点）

父容器属性（写在父盒子上）

1. flex-direction（主轴方向）

2. justify-content（主轴对齐）

3. align-items（交叉轴对齐 - 单行）

4. flex-wrap（换行）

5. align-content（交叉轴对齐 - 多行）

子元素属性（写在子盒子上）

1. flex-grow（放大比例）

2. flex-shrink（缩小比例）

3. flex-basis（基础宽度）

4. flex（简写，推荐）

5. order（排列顺序）

十一、黄金组合（必背）

1. 全局样式重置

2. 完全居中（Flex 版）

3. 导航栏左右分散

4. 单行文字垂直居中

5. 清除浮动

十二、速记口诀

Flex 布局

选择器优先级

热门文章

文章分类

标签云

相关文章

外企GEO外包服务价格大揭秘！必须知道这5个关键因素

鸿蒙NEXT应用开发实战：SM3国密算法在数据安全与完整性校验中的应用

Ubuntu 24.04 + ROS2 Jazzy + PX4 SITL + MAVROS2 最简安装与启动

需要专业的网站建设服务？