HTML、CSS复习
目录
一、前端技术的构成：
（一） 网页的内容：HTML（超文本标记语言（HyperText MarkUp Language））（从语义的角度，描述页面的结构）(HTML不区分大小写)(标签、元素、属性)
（二） 内容的样式：CSS（从审美的角度，美化页面）
一、前端技术的构成：
Alt+Shift +数字（2）（1）：分屏（分成两屏）（回归一屏）
Ctrl+L :选择一行
Ctrl+光标移动点击：可以同时多行进行编辑
! + Tab ：进行扩展基本结构
border: 1px solid; (solid指实线框)
| 快速生成link属性的代码 | link:css + Tab | |
| 快速生成带id的代码 | div#nav + Tab | |
| 快速生成带class的代码 | div.bar + Tab | |
| 同时快速生成带class和id的代码 | div#nav.bar + Tab | |
| 生成开始和结束标签 | p + Tab | |
| 直接扩展内容 | p{段落内容} + Tab | 段落内容 |
| 扩展带有属性的标签（仅自动扩展重要的属性） | img + Tab | |
| 取值和属性的添加 | img[src="logo.jpg"] + Tab |  |
| 标签的嵌套 | p>span + Tab | |
| 同级标签的添加 | p>img+a + Tab | |
| 分组添加标签 | (div>p)+(div>img) + Tab | |
| 快速生成元素 | ul>li*3 + Tab | |
| 快速设置颜色 | bd-l-c + Tab bd-t-c + Tab bd-r-c + Tab | border-left-color: #000; border-top-color: #000; border-right-color: #000; |
{ }: 写内容
[ ]: 添加属性的取值
对div标签添加样式之快速生成
w30 + Tab width: 30px; h30 + Tab height: 30px; bd1 + Tab border: 1px ; mg10+ Tab margin: 10px; pd5+ Tab padding: 5px; lh2+ Tab line-height: 2; bgc+ Tab background-color: #fff; 样例
（一） 网页的内容：HTML（超文本标记语言（HyperText MarkUp Language））（从语义的角度，描述页面的结构）(HTML不区分大小写)(标签、元素、属性)
标签：
插入图像：img
src属性： 路径 + 文件名 alt（替换文本）:当图片无法正常显示时，会显示替换文字。
区域： div
列表 ：
- (无序列表)
-
表格： table
(行) (列） (表头单元格) 表单：是一个区域，采集用户信息
表单元素：文本框、按钮、单选、复选、下拉列表、文本域
form表单() （当设置 checked ="checked"时，该选项被默认选中 ）
（单选框name属性设置相同；
复选框name属性设置不同）
文本框： type="text"
密码框： type="password"
提交按钮： type="submit"
单选框：type="radio"
复选框：type="checkbox"
重置按钮： type="reset"
value属性：按钮里的文字
name：可以为表单设置名字
下拉列表框
select
option
爱好：
(selected="selected" ：被选择的那一项)
文本域
textarea
（lorem+"按键Tab":快速生成文本）（lorem(一个数字)+"按键Tab":快速生成相应数字的文本）
Web语义化 强调
斜体，无语义
重点强调
粗体，无语义
:强调的斜体
:斜体，无语义
:重点强调的粗体
:粗体，无语义
自定义列表dl、列表项dt、描述dd - HTML
- 超文本标记语言
- CSS
- 层叠样式表
HTML
超文本标记语言
CSS
层叠样式表
（二） 内容的样式：CSS（从审美的角度，美化页面）
CSS语法 p{
font-size:12px；
color:blue；
font-weight:bold；
}
（每个属性值后，都需要加分号）
p:选择器（选择了Html中的p标签）
属性名：
font-size: 字号
color：文字颜色
font-weight：加粗
/*css中注释形式*/
CSS添加方法 例： 行内样式 例：
内嵌样式（放入head标签中） 例：
外部式样式表文件 style.css
p{
color:red；/*设置字体颜色*/
}
网页文件：
单独文件样式（link添加法）
(link:用于文件的链接)
CSS选择器 例：
标题
正文的段落
版权所有
标签选择器 例：
类别1
类别1
类别2
类别2
普通段落中的文字
类别选择器（可以多次引用） 文字1
文字2
ID选择器(仅可一次引用) （混合：
多个class选择器混用，用空格分开
.......
id和class混用
id选择器不可以多个同时使用
）
CSS选择器的声明 例：
天使投资是投资方式的一种
嵌套声明 例：
欢迎访问论坛
欢迎访问论坛
集体声明 例：
欢迎访问论坛
欢迎访问论坛
欢迎访问论坛
全局声明 单位 px: 像素 %: 百分比
em: 1em----一个字符 2em-----两个字符 （自动适应用户所使用的字体大小）
设置的颜色值：
CSS样式----文本 属性 描述 取值及各种表示方式 color 文本颜色 red #f00
rgb(255，0，0)
letter-spacing 字符间距 2px -3px(有重叠部分) line-height 行高 14px 1.5em 120% (垂直居中：让line-height和段落高度像素大小相等) text-align 对齐 center left right justify（两端对齐） text-decoration 装饰线 none overline underline line-through text-indent 首行缩进 2em font属性简化的使用方法：
font： 斜体 粗体 字号/行高 字体
font： italic bold 16px/1.5em '宋体'；
字体font 属性 描述 font 在一个声明中设置所有的字体属性 font : bold 18px '幼圆' font-family 字体系列 font-family："Hiragino Sans GB"，"Microsoft YaHei"，sans-serif；（定义多个字体，依次查找直至字体存在，则使用，加引号：字体的拼写有多个单词时） font-size 字号 14px 120% font-style 斜体 italic font-weight 粗体 bold CSS背景 （空元素需要先定义元素的高度和宽度） background-color background-image： url（"logo.jpg"）/*相对路径*/ background-repeat： repeat / repeat-x / repeat-y / no-repeat(一张大图)
（整体使用顺序）background：颜色 图片 repeat css超链接的四种状态 ：伪类选择器 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方悬停 a:active 链接被点击的时刻 
有次序： a:hover 必须位于a:link和a:visited之后
a:active 必须位于a:hover之后 易记：Love&Hate
列表（ul和ol共用样式） 属性 描述 list-style 所有用于列表的属性设置于一个声明中 list-style-image 为列表项标志设置图像 list-style-position
标志的位置 list-style-type 标志的类型 
CSS表格 table{
width: 500px；
height：200px；
}
表格大小 table，td，th {
border： 1px solid #eee（灰色）；
}
合并表格边框和单元格边框：
table {
border-collaps:collapse；
}
表格边框 例：
tr:nth-child(odd) {
background-color:#EAF2D3；
}
奇偶选择器
：nth-child(odd/even)
CSS布局与定位：（盒子模型与定位机制）
（一）盒子模型
（页面上 区域、图片、导航、列表、段落、都可以是盒子）
盒子模型的组成 content内容（取值：px、%） height 高度 width 宽度 border（-top\-left\-bottom\-right）(有方向)
边框 padding（-top\-left\-bottom\-right）(有方向) 内边距 margin（-top\-left\-bottom\-right）(有方向) 外边距 overflow属性（当内容溢出盒子框时） hidden 超出部分不可见 scroll 显示滚动条 auto 如果有超出部分，显示滚动条 border属性 border-width： px、thin（细）、medium（中）、thick（粗） border-style： dashed（一个个横线）、dotted（一个个点）、solid（一条实线）、double（一条双实线） border-color： 颜色 （设置在一起）border： width style color 例：
水平分割线：
.line{
height ：1px;
width :500px;
border-top: 1px solid #e5e5e5;
}
当只有两个值时：第一个表示上下、第二个表示左右。
三个值时：第二个表示左右
要首先对浏览器默认的设置清零
*{
margin：0；
padding：0；
}
margin的合并：垂直方向合并，水平方向不合并。
水平居中 text-align：center； 图片、文字水平居中 margin：0（指距离浏览器上边的距离） auto（指左右浏览器自动计算）； div水平居中 （二）、CSS定位机制（文档流定位【flow】、浮动定位【float】、层定位【layer】）
display:（显示的方式）
display：none ； (元素不会被显示)
例：a{
display:block；
}
inline元素a转换为block元素从而使a元素具有块状元素的特点。
文档流定位（ flow）元素分类 （默认）block类型：独占一行、元素的height、width、margin、padding都可设置 例：
、
、
....
、
- 、
- 、
、
浮动定位（ float）及清除（ clear）---脱离原来的文档流 float属性 left、right（向右浮动）、none(不浮动) clear属性 left、right、both（清除两侧浮动） 层定位（layer）--position属性（相对于谁定位） static :默认值 没有定位，元素出现在正常的流中
top、bottom、left、right, z-index无效
fixed : 固定定位 相对于浏览器窗口进行定位，
top、bottom、left、right, z-index有效
relative : 相对定位（脱离正常的文档流中，但其在文档流中的原位置依然存在） 相对于直接父元素进行定位，
top、bottom、left、right, z-index有效
absolute : 绝对定位（其在文档流中的原位置不再存在）
即：仅相对于：relative/absolute/body
相对于static定位以外的第一个父元素进行定位，如果其父层中都未定义absolute或relative,则其相对于body进行定位
top、bottom、left、right, z-index有效
top、right、bottom、left、z-index（层叠关系：值大在上边) 决定最后位置在哪 
(三)、弹性盒子布局（移动优先、响应式布局）（元素可以拉大和缩小以适应空间）
弹性盒子样式（ flex）:一维布局（按行水平布局、按列垂直布局） 弹性容器(Flex Container) display：flex；
flex-flow:
flex-direction
flex-wrap
justify-content
align-items
align-content
弹性元素(Flex Item) flex:
flex-grow
flex-shrink
flex-basis
order
align-self
弹性容器样式 （定义弹性容器：display：flex;)
弹性容器样式 （定义弹性容器：display：flex;) flex-direction属性----行布局
行为主(主轴、辅轴)（start---end）（列布局与此相反）
row、row-reverse flex-warp属性（折行） nowrap
wrap
wrap-reverse
flex-flow属性（设置行/列、折行） 例：
flex-flow: flex-direction flex-wrap；
flex-flow: row wrap；
justify-content属性(元素在主轴上的对齐方式)(以行为例) flex-start（左对齐）
center（居中对齐）
flex-end（右对齐）
space-between（两端对齐）
space-around(拉手对齐)
align-items属性(元素在辅轴上的对齐方式)(以行为例) flex-start（顶端对齐）
center（垂直居中对齐）
flex-end（低端对齐）
stretch(去掉元素高度，即和辅轴高度相同)（前提：弹性元素的高度没有设置）
align-content属性（设置多行元素在容器中的整体对齐方式）（折行时）（只有一行或者一列时不起作用） flex-start（左对齐）
center（居中对齐）
flex-end（右对齐）
space-between（两端对齐）
space-around(拉手对齐)
stretch
弹性元素属性 flex-grow 元素被拉大的比例，按比例分配容器剩余空间
默认值为0：元素不占用剩余空间
取值为n:元素占据剩余空间若干份中的n份
flex-shrink 元素被压缩的比例
默认为1，表示弹性元素默认等比例压缩
0则表示不压缩
flex-basis 元素在主轴上的默认尺寸，其优先级高于width属性 flex flex: flex-grow flex-shrink flex-basis；
例：flex：1 1 auto；
order 子元素在弹性容器中的排列顺序，数越小排名越靠前 align-self 单个弹性元素在辅轴上的对齐方式，align-items是全部元素 
（四）、网格布局（二维布局）
网格布局样式 网格容器 display: grid
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap
place-items: justify-items align-items(合并简写方式)
place-content: justify-content align-content(合并简写方式)
网格元素 grid-column-*
grid-row-*
place-self: align-self justify-self(合并简写方式)
网格容器样式（定义网格容器样式----display:grid;） grid-template-columns
grid-template-rows
划分网格的行和列，取值：px / % / auto / fr / repeat()函数 grid-template-areas 命名单元格，相同名称的单元格被划分为一个区域 grid-gap grid-row-gap: 行间距
grid-column-gap:列间距
grid-gap：grid-row-gap grid-column-gap
justify-items:单元格内容的水平位置 start / end / center /默认stretch align-items:单元格内容的垂直位置 start / end / center /默认stretch justify-content:整个内容区域在容器里面的水平位置 start / end / center /默认stretch
space-around / space-between / space-evenly(所有间隙被平分)
align-content:整个内容区域的垂直区域 start / end / center /默认stretch
space-around / space-between / space-evenly(所有间隙被平分)
网格元素样式 grid-row-start/end:数字（以线为基准）
grid-column-start/end:数字
行（row）简写（grid-row:2/3;）
列(column)简写（grid-column:2/3;）
grid-area:2/2/3/3;
注：span 2 (表示合并2个单元格)
justify-self(单元格内容的水平位置) start / end / center /默认stretch align-self(单元格内容的垂直位置) start / end / center /默认stretch 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
- (有序列表)
