学习心得分享/HTML+CSS技术总结

qq_53500077

已于 2022-11-19 21:06:04 修改

阅读量523

点赞数 3

文章标签： html5 css3

于 2022-11-19 20:42:09 首次发布

本文链接：https://blog.csdn.net/qq_53500077/article/details/127939773

版权

HTML+CSS技术总结

一、html阶段总结

1.1.HTML基本结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

1.2.列表

1.2.1无序列表

type 属性修改项目符号     可选值

disc     实心原点     默认值

circle     空心圆

square     正方形

<ul type="square">
            <li>富强</li>
            <li>民主</li>
            <li>文明</li>
        </ul>

1.2.2有序列表

type可选值
				1 		默认 
				A/a 	英文字母
				I/i 	罗马数字
				none 	空
<ol type="1">
			<li type="none">111</li>
			<li>222</li>
			<li>333</li>
		</ol>

1.2.3自定义列表

<dl>
			<!-- 自定义列表 -->
			<dt>李白</dt>
			<dd>人称诗仙</dd>
			<dt>术语/标题</dt>
			<dd>对术语的解释说明</dd>
		</dl>

1.3.超链接——a标签

<a href="https://baidu.com" target="_blank">百度</a>
href属性     链接的地址
target     规定在何处打开链接文档 
可选值
    _self 	在当前窗口显示跳转之后的内容
    _blank 	空白页显示跳转之后的内容 
    _parent 在父页面的窗口显示
    
锚点
	设置id属性，a标签里的href设置为"#id值"
					
回顶部
	a标签里的href设置为"#"

<a href="https://baidu.com" target="_blank">百度</a>
		<a href="#bottom">底部</a>
		<div id="p1" style="width: 200px;height: 600px;">第一段</div>
		<div id="p2" style="width: 200px;height: 600px;">第二段</div>
		<div id="bottom" style="width: 200px;height: 600px;">第三段</div>
		<a href="#" style="background-color: aqua;">顶部</a>

1.4.form表单

表单form

name 表单域的名字，一个HTML中可以有多个表单域
	action 	设置处理表单的服务器的URL地址

method	提交表单的方式
	get 	把提交的参数附在action的URL地址中，会显示在地址栏，一般用于不需要保密的信息，比如分页
	post	把提交的参数包含在提交的表单体中，不会显示在地址栏中

表单元素 input
    常见 type属性
        text 		文本框
		password 	密码框
		radio 		单选框
		checkbox 	复选框
		data 		日期 yyyy/mm/dd
		month		月份
		datatime-local 		具体日期/时间
		color 		颜色选择框
		file		文件选择框
		submit 		提交
		reset 		重置
    name 属性 	定义元素的名字，它的值来自输入的值或者是value中设置的值
				一组单选按钮的name属性应该设置为同一个值，获取到的是被选中的那一个值
				一组复选框的name属性值应该设置为同一个值，被选中的复选框的value值构成一个数组
    value 			设置元素的值，
	placeholder 	设置输入框中的提示文字
	required 		设置必填项，如果不填将会弹出提示信息
	checked 		在打开页面时，让元素是选中状态
	readonly 		设置元素只读
	disabled 		设置元素禁用

1.5.表格

table 	
	tr（table row） 一行
	td（table data）	一个单元格
	th 	表头

表格常用的属性
	border 		表格的边框，值是数字
	cellspacing 	单元格之间的空隙，单位是像素
	width 		表格的宽度
	cellpadding 	单元格的内边距，单位是像素
	align 		表格的位置

表格的三个部分
	thead 	头部
	tbody	主体
	tfoot	底部
	三个顺序是固定的，不会因为在HTML中的顺序改变而变化

rowspan 	合并行，保留最上一行
colspan 	合并列，保留的是目标单元格

<table border="1">
			<thead>
				<tr>
					<td>序号</td>
					<td>姓名</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>小明</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2">总人数</td>
				</tr>
			</tfoot>
		</table>

1.6.下拉框

select 标签    定义一个下拉列表
	选项用option标签包裹

<select name="job" id="">
			<option value="">请选择</option>
			<option value="teacher">教师</option>
			<option value="layer">律师</option>
			<option value="IT">程序员</option>
		</select>

1.7.音视频

音频标签
<audio src="./meth/listen.mp3"autoplay controls loop muted></audio>

视频标签
<video src="./meth/movie.ogv" controls loop width="500px"></video>

autoplay 	自动播放
controls	允许用户设置播放状态
loop 		循环播放
muted		设置静音状态

1.8.内联框架

内联框架 iframe
    在页面中嵌入另一个页面
    属性
        src 设置嵌入页面的url地址 source 默认页面的路径
        width 设置页面内联页面的宽度 height 设置内联页面的高度

    实现点击连接切换页面
        为iframe页面设置name属性
        a链接的target="" iframe的name的属性值
        a链接的href中写将要跳转的页面的url地址，不加target属性，会自动跳到其他页面，不会在iframe内部进行跳转
		a标签的target和iframe的name值相同时，就会在iframe内部进行展示对应的页面--内联框架的切换

        frameborder 内联框架的边框 可选值 0/1

二、CSS阶段总结

2.1 CSS名为层叠样式表

可分为（1）、内联样式（2）内部样式（3）外部样式

（1）内联样式，即将样式写在标签内部

（2）内部样式，将样式写在头部head标签内的style标签内

（3）外部样式，写在HTML外部，使用link标签或@import引入

2.2 CSS选择器

通配选择器：选择所有元素
    语法：
        *{ }

标签选择器：选中相同标签的所有元素

id 选择器：选中元素中id值为该选择器的元素

类选择器: 选中相同类名的所有元素
    class: 给标签分门别类，指定类别
         有时一个元素不止一个类，多个类的情况，中间用空格隔开

后代选择器
    选择后代元素的选择器
    语法：
        selector selector selector ...

子代选择器
    选择子代元素的选择器
    语法：
        selector>selector ...

兄弟选择器
    选择复合条件的兄弟级别的下一个元素
    语法：
        selector + selector

    选择复合条件的兄弟级别的后面的所有兄弟元素
    语法：
        selector ~ selector

属性选择器
    selector[属性名]               选择含有指定属性的元素
    selector[属性名 = 属性值]      选择含有指定属性和属性值的元素
    selector[属性名 ^= 属性值]     选择属性值以指定值开头的元素
    selector[属性名 $= 属性值]     选择属性值以指定值结尾的元素
    selector[属性名 *= 属性值]     选择属性值含有某值的元素

伪类选择器
    伪类：不存在的类，特殊的类；用来描述一个元素的特殊的状态；比如说：第一个子元素、被点击的元素、鼠标移入的元素等等
    
    hover:      鼠标悬停时的伪类
    link        元素中的连接样式，这里指的是a标签中的文本
    visited     点击改链接过后的样式
    active      元素激活时的伪类(鼠标点住不放) 
    注意：对于a标签链接的处理，active必须在hover后，hover必须在link和visited后

    :first-child 第一个子元素
    :last-child 最后一个子元素
    :nth-child() 选中第n个子元素
			特殊值：
				n 0到n
				2n或even 选中偶位数的元素
				2n+1或odd 奇位数的元素
		---根据所有子元素进行排序的
    :first-of-type
	:last-of-type
	:nth-of-type()
	--跟上面的功能相似，不同的是在同类型中进行排序

    :not()否定伪类
			将符合条件的元素从选择器中去除

    :empty 空标签 （没有内容的标签）

    :root 代表HTML标签

  
伪元素选择器
    伪元素，表示页面中一些特殊的并不真实存在的元素
    
    ::first-letter  表示第一个字母
    ::first-line    表示第一行
    ::selection     表示鼠标选中的内容
    ::before        元素开始的
    ::after         元素最后的
            before和after必须结合content属性来使用

2.3 样式的继承

几乎所有文本相关样式都可以继承，子元素可以继承父元素的样式。但是背景相关的，布局相关的等的样式不会被继承

2.4 选择器的权重

当我们通过不同的选择器，选择相同的元素，并且为相同的样式设置,此时发生了样式冲突；因此由选择器的权重（优先级）决定；在样式后面加!important,这个样式可以变成优先级最高的；

内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承的样式

2.5背景

引入背景图片    background-image: url(资源路径);

背景重复方式    background-repeat: no-repeat;
    可选值：  
        no-repeat: 不重复
        repeat: 横纵方向都重复
        repeat-x: 横向重复
        repeat-y: 纵向重复
        round: 让图片正好填充满整个背景，但图片可能被拉伸
        space: 有间距的铺满背景，但图片不会拉伸也不会被裁剪

背景图片尺寸    background-size: contain;
    可选值：
        auto: 保持图片原始大小
        cover: 让图片完整覆盖整个背景，但宽高比不变
        contain: 让背景完全包含整个图片，但宽高比不变

图片左上角对齐的位置     background-origin: border-box;
    可选值：
        content-box: 图片左上角对齐内容区域的左上角
        padding-box: 图片左上角对齐内边距的左上角     默认值
        border-box: 图片左上角对边框的左上角

设置背景图的裁剪区域，超过该区域的部分将被裁剪掉    background-clip: border-box;
    可选值：
        content-box: 超出内容区域的部分将被裁剪掉
        padding-box: 超出内边距区域的部分将被裁剪掉
        border-box: 超出边框区域的部分将被裁剪掉

设置背景图在背景中的位置    background-position: center center;
    可选值：
        top: 向上对齐左右居中
        bottom: 向下对齐左右居中
        left: 向左对齐上下居中
        right: 向右对齐上下居中
        center: 居中
        数字：第一个数字代表图片左上角x坐标，第二个数字代表图片左上角y坐标

背景是个复合属性，可以添加多个值
    background: #00ff00 url(../img/1.jpg) no-repeat center center;

2.6 大小单位

长度单位：
	像素：屏幕（显示器）有关

百分比：
	可以设置属性相对于父元素属性的百分比

em：
	em是相对于元素的字体大小来计算的
    1em = 1 font-size
	em会根据字体大小改变而改变

rem
	rem是相对于跟元素的字体大小来计算的--html的字体大小
	1rem = 20px

ex: 
    当前元素字符的半高 2ex = 1个字符高

vh(viewport-height): 
    相对于视口高度的百分比

vw(viewport-width): 
    相对于视口宽度的百分比

2.7 盒模型

盒模型由四个部分组成
内容 content
内边距 padding 内容区域到边框的距离
边框 border
外边距 margin

内边距：
    一个值：    每一边内边距都为相同值
    两个值：    第一个值代表上下内边距 第二个值代表左右内边距
    三个值：    设置 上 右 下的内边距 左侧内边距等于右侧内边距
    四个值：    设置上右下左的四边内边距
        padding: 10px 20px 30px 40px;

    单独设置一边的内边距
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 40px;

边框：
    边框宽度：border-width 
	边框颜色：border-color
	边框样式：border-style
    
    border-width 有默认值，一般都是三个像素
    border-width可以用来指定四个方向的边框的宽度
		值的情况
			四个值：上 右 下 左
			三个值：上 左右 下
			两个值：上下 左右
			一个值：上下左右
		除了border-width还有一组border-xxx-width
			xxx可以是 top right bottom left
    
    border-color用来指定边框的颜色，同样可以分别指定四个边的边框
		规则和border-width一样
		border-color也可以省略不写，如果省略则自动使用color的颜色值
       
    border-style用来指定边框的样式，同样可以分别指定四个边的边框
		规则和border-width一样
		border-style默认值是none 表示没有边框
            可选值：
                solid
                double
                groove
                ridge
                dashed
                dotted
                none
    border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
        border: 10px red solid;
        border-top: 10px double salmon;

外边距：
    设置方法和内边距完全一样

box-sizing 用于规定 width 和 height 属性如何解析
     可选值:
           content-box: 内容盒
           border-box: 边框盒

2.8 外边距穿透问题

子元素的margin-top将穿透到父元素的外面，若希望设置 mini-box 与父元素 box 间的距离，可以设置 box 的内边距。

水平排列的两个元素，左右外边距融合时，两元素距离为外边距和；

竖直排列的两个元素，上下外边距融合时，两元素谁大取谁的值。

2.9 显示或隐藏元素的四种方法

（1）display: none 元素性质直接设为无；

（2）opacity: 0 通过透明度

（3）transform: scale(0) 元素缩放为0

（4）visibility: hidden 可见性设为不可见

2.10 文本相关

文本水平对齐方式：
    text-align:
    可选值：
        left: 文本靠左对齐
        center: 文本居中
        right: 文本靠右对齐

文本垂直对齐格式
    vertical-align 
    可选值：
		baseline   基线对齐(默认值)
		top        顶部对齐
		bottom     底部对齐
		middle     居中对齐

字体的样式：
    color		颜色
	font-size	字体大小
	font-family	字体族 (字体样式)
        font-family: 'Courier New', Courier, monospace; 可以同时指定多个字体

字体大小
    font-size: 16px

文本粗细
    font-weight: bolder;
    可选值：
        数字：数字越大越粗
        normal: 正常粗细 
        bolder: 加粗
        lighter: 细

行高
    line-height: 100px

文本装饰线
    text-decoration: 
	可选值：
		none         什么都没有
		underline    下划线
		line-through  删除线
		overline     文本上面
    装饰线是否遮挡文本
        text-decoration-skip-ink: auto;
            auto: 装饰线不会遮挡文本
            none: 装饰线会遮挡文本

2.11 颜色

（1）预置文本: 代表颜色的英文单词。

（2）rgb值：使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色。每个参数的取值范围是：0~255。

（3）rgba值：rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明。

（4）HSL值：H色调 S饱和度（灰度） L代表亮度。

（5）十六进制值：以井号开头，十六进制数由1~10超过10的部分由A~F表示。前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色如果颜色值成对出现，可以简写为三个。

2.12 flex布局

flex布局可以分为父元素上的属性和子元素上的属性。

（1）父元素上的属性

在父元素上写，用来开启flex功能
display: flex;

规定主要轴
    flex-direction: row;
        可选值：
            row: 默认值，规定横向为主轴
            column: 规定纵向为主轴
            row-reverse: 规定横向为主轴，同时反向
            column-reverse: 规定纵向为主轴，同时反向

换行方式
    flex-wrap: wrap;
    可选值：
        wrap: 换行
        nowrap: 不换行
        wrap-reverse: 换行且反向

定义元素在主要轴上的排列方式
    justify-content: flex-start;
    可选值：
        flex-start: 对齐主轴起始点
        flex-end: 对齐主轴结束点
        center: 在主轴上居中
        space-around: 每个子元素两侧的间隔相等
        space-between: 两端对齐，中间平均分布
        space-evenly: 平均分布

定义元素在交叉轴上的排列方式
    align-items: flex-start;
    可选值：
        flex-start: 对齐次要轴起始点
        flex-end: 对齐次要轴结束点
        center: 在次要轴上居中居中
        baseline: 根据子元素中的文本进行文本高度对齐
        stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器


align-content: center;
使用条件：子元素在主轴上必须换行
作用：多行子元素在交叉轴上的对齐方式
待选项和 justify-content 相同

（2）子元素上的属性

排序：order，数字越小越靠近主要轴的起始位置；

flex-grow 设置子元素在父元素中如何伸展，数字越大比例越大

flex-shrink 设置子元素在父元素中如何压缩，数字越大比例越大

2.13 浮动

        通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用float 属性来设置元素的浮动。
可选值：
                   none 默认值元素不浮动
                   left 向左浮动
                   right 向右浮动

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，因此可以利用浮动来设置文字环绕图片的效果。

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离以后，元素的一些特点也会发生改变：块元素不再独占一行；脱离文档流以后，块元素的宽度和高度都被内容撑开。行内元素：脱离文档流以后会变成块元素，特点和块元素一样。

元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边还在文档流中的元素会自动向上移动。如果不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清楚浮动元素对当前元素所产生的影响。clear 作用：清楚浮动元素对当前元素所产生的影响。设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。