Web阶段 - HTML与CSS学习总结

高超不爱笑

已于 2022-11-24 09:34:48 修改

阅读量459

点赞数

分类专栏：前端文章标签： html css html5 css3

于 2020-06-21 15:27:04 首次发布

本文链接：https://blog.csdn.net/weixin_45453240/article/details/106849185

版权

前端专栏收录该内容

7 篇文章

订阅专栏

HTML总结

概述

超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言
实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
			Holle world!
</body>
</html>

注释<!–注释内容–>
常见标签
- <html>根标签
- <head>头部标签
- <title>标题标签
- <body>主体标签
- <font>文本标签
  - color=“颜色”//规定文本颜色
  - size=“值”//规定文本大小
- <small>小字体标签//比外标签字体小
- <hn>排题标签//h1~h6由大到小
- <p>段落标签
- <hr/>水平线标签(单标签)
- <br/>换行标签
- <div>盒子标签(块级)
- <span>盒子标签(行级)
- 文本格式化标签:<strong>与<b>文本加粗
  <em>与<i>文本倾斜
  <del>与<s>文本删除线
  <ins>与<u>文本下划线
- <img>图片标签(单标签)
  - src=“URL”//图片地址
  - alt=“值”//未加载时显示的文本
  - title=“值”//鼠标悬停时显示的文本
  - width=“值”//图片宽
  - height=“值”//图片高
  - border=“值”//边框宽
- <a>链接标签/锚点标签
  - href=“URL"或”#锚点"//跳转地址/锚点(id=“锚点名”)
  - href=“javascript:void(0)”//不跳转
  - target=“值”//跳转方式_blank新窗口打开|_self默认,在相同的框架中打开|_parent在父窗口打开
- <base>设置整体链接
  - target=“值”//跳转方式_blank新窗口打开|_self默认,在相同的框架中打开|_parent在父窗口打开
列表
- 无序列表
  - <ul type=“disc”>
    <li>圆形无序列表</li>
    </ul>
  - <ul type=“circle”>
    <li>空心无序列表</li>
    </ul>
  - <ul type=“square”>
    <li>方形无序列表</li>
    </ul>
- 有序列表
  - <ol type=“序号类型”>
    <li></li>
    </ol>
  - 序号类型有1,a,A,i,I等
  - start=“起始下标”
- 无序列表(常用于页面底部)
  - <dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    </dl>
表格
- <table border=“边框宽度”>
  <tr>//行
  <th>表头单元格</th>//粗体居中
  <td>列</td>
  </tr>
  </table>
- <caption></caption>//表格标题
- td属性
  align=“值”//水平:left,center,right
  valign=“值”//垂直:top,middle,bottom
  colspan=“值”//跨列合并
  rowspan=“值”//跨行合并
表单(收集信息)
- <form>
  <input type=“值”>
  <select name=“值”>//下拉列表
  <option value=“值”>列表值</option>
  </select>
  <textarea>默认文本</textarea>//文本域
  <button type=“button”>普通按钮</button>
  <button type=“submit”>提交按钮</button>
  <button type=“reset”>重置按钮</button>
  </form>
- form属性
  action=“提交目的地址”
  method=“提交方式”//get,post
  id=“唯一标识”
- input属性
  type=“text”//单行输入框value=“默认值”,size="值"显示宽度,name=“控件名”,maxLength=“可输入长度”,placeholder=“默认文字”
  type=“password”//密码输入框
  type=“radio”//单选表单check="check"默认选中项
  type=“checkbox”//多选表单check="check"默认选中项
  type=“hidden”//隐藏表单
  type=“file”//提交文件表单
  type=“button”//普通按钮
  type=“submit”//提交按钮
  type=“reset”//重置按钮
- select属性
  multiple开启多选
  size=“显示行数”

HTML5总结

新增标签
- <nav>导航栏标签
- <header>定义文档页眉头部
- <main>文档主要内容
- <footer>定义文档或节页脚
- <article>定义文章
- <section>定义文章中的节(类似于div)
- <aside>定义侧边内容
- <progress max=“长度” value=“进度”></progress>//进度条
- <meter max=“最大值” min=“最小值” high=“规定高度” low=“规定地址” value=“进度”>//度量器,高于high和低于low会变换颜色
- <label for=“id值”>//for属性与input的id属性相连使文字标注与input绑定
- <form>//输入栏提示标签
  <datalist id=“input标签的list属性值”>
  <option value=“值”>input中可能输入的值</option>
  </datalist>
  </form>
- <form>//将表单元素分组
  <fieldset>
  <legend>分组标题</legend>
  <input type=“text” />
  <input type=“text” />
  </fieldset>
  </form>
新增表单
- <input type=“email”>//验证email格式
- <input type=“tel”>//验证手机号格式
- <input type=“url”>//验证网址格式
- <input type=“number”>//验证邮政编码
- <input type=“time”>//验证时间
- <input type=“date”>//验证日期
- <input type=“datetime”>//验证日期时间
- <input type=“month”>//验证月份
- <input type=“week”>//验证星期
- <input type=“range”>//滑块
- <keygen >//加密提交
- <output for=“定义输出域相关的一个或多个元素”>//只显示不可修改
- 属性:autocomplete=“on”/"off"打开关闭提示(必须有name属性)
- 属性:autofocus="autofocus"自动获取光标
- 属性:accesskey=“s”//规定使用此元素快捷键为S
- 属性:pattern=“正则表达式”//规定格式
- type="file"属性:multiple//上传多个文件或多个邮箱地址,以,分隔
- type="submit"属性:required//不能为空
媒体标签
- 音频
  <audio>
  <source src=“音频地址.mp3”>//可定义多个格式
  <source src=“音频地址.ogg”>
  </audio>
  - src=“音频地址”
  - autoplay=“autoplay”//自动播放
  - controls//显示控件
  - loop//循环
  - poster=“封面地址”
- 视频
  <video>
  <source src=“视频地址.mp3”>//可定义多个格式
  <source src=“视频地址.ogg”>
  <video>
  - src=“音频地址”
  - autoplay=“autoplay”//自动播放
  - controls//显示控件
  - loop//循环
  - poster=“封面地址”

CSS总结

概述
CSS 指层叠样式表(Cascading Style Sheets),用于定义如何显示HTML元素

书写位置

方式一 : 行内式

<标签名 style="属性:值;属性:值;...">

方式二 : 内嵌式

<style type="text/css">
    选择器{
		  属性:值;
		  ...
	}
</style>

方式三 : 外部css文件

<link href="css文档路径" rel="stylesheet" type="text/css"/>

选择器

通配符选择器: *{ 属性:值; }//全部
元素选择器: 标签名{ 属性:值; }
id选择器: #id名{ 属性:值; }//用一次
类选择器: .class名{ 属性:值; }//用多次
多类名选择器: .class名 .class名{ 属性:值; }
后代选择器: 外层名内层名{ 属性:值; }
子代选择器: 外层名>内层名{ 属性:值; }//后代中的亲儿子
相邻兄弟选择器: 元素 + 元素{ 属性:值; }
交集选择器: 标签名.class名{ 属性:值; }
并集选择器: 标签名,标签名…{ 属性:值; }
链接伪类选择器:
a:link{ 属性:值; }//未访问过时
a:hover{ 属性:值; }//鼠标悬停时
a:action{ 属性:值; }//鼠标压下时
a:visited{ 属性:值; }//鼠标点击后
伪元素选择器:
:first-letter{ 属性:值; }//向文本的第一个字母添加特殊样式
:first-line{ 属性:值; }//向文本的首行添加特殊样式
:before{ 属性:值; }//在元素之前添加内容
:after{ 属性:值; }//在元素之后添加内容

三大特性

层叠性: 下层属性会将上层属性覆盖
继承性: 内层继承外层某些属性
优先级: 权重能叠加 id>类>标签内>外自身>继承

属性	权重
继承或*	0,0,0,0
标签	0,0,0,1
类,伪类	0,0,1,0
id	0,1,0,0
行内样式	1,0,0,0
!important	∞无穷大

属性

背景
- 背景颜色: background-color //rgba(red,green,blue,透明度)
- 背景图片: background-image //url(图片路径)
- 背景图片重复: background-repeat //repeat,repeat-x,repeat-y,no-repeat
- 背景关联: background-attachment //fixed背景固定,scroll滚动
- 背景定位: background-position //center,top,bottom,left,right,长度值
- 连写: background: 颜色,图片,图片重复,关联,定位
文本
- 文本缩进: text-indent
- 水平对齐: text-align //center,left,right
- 垂直对齐: vertical-align //baseline与基线对齐,middle与中线对齐,top与顶线对齐,bottom与底线对齐
- 字间隔: word-spacing
- 字母间隔: letter-spacing
- 颜色: color
- 行高: line-height
- 修饰: text-decoration //none无修饰,underline下划线,overline上划线,line-through删除线,blink闪烁
字体
- 字体风格: font-style //斜体(i),正常(normal)
- 字体粗细: font-weight
- 字体大小: font-size //单位:像素(px),英寸(in),点(pt),厘米(cm)
- 字体系列: font-family //宋体,微软雅黑
- 连写font: font-style,font-weight,font-size(必写),font-family(必写)
元素转换
- 块级元素(占整行): h1,p,div,ul,ol,li
- 行内元素(内容大小): span,select,label
- 行内块元素(设置大小): img,input,td
- 转换: display //block块级,inline行内
盒子模型
- 内容: width、height
- 内边距: padding
  - 一个值: 代表上下左右,
  - 两个值: 第一个代表上下,第二个代表左右
  - 三个值: 第一个代表上,第二个代表左右,第三个代表下
  - 四个值: 第一个代表上,依次顺时针
  - 内上边距: padding-top
  - 内下边距: padding-bottom
  - 内左边距: padding-left
  - 内右边距: padding-right
- 边框: border
  - 边框宽度: border-width
  - 边框颜色: border-color
  - 边框风格: border-style //none无边框,hidden隐藏边框,solid实线边框,dashed虚线边框
  - 连写: border:宽度风格颜色
  - 上边框: border-top
  - 下边框: border-bottom
  - 左边框: border-left
  - 右边框: border-right
  - 合并相邻边框: border-collapse:collapse
- 外边距: margin
  - 默认有外边距,属性与内边距相同
定位
- 静态定位: static(默认)
- 相对定位: relative(占有原位置,以自己走)
- 绝对定位: absolute(不占有原位置,以浏览器屏幕走)
- 固定定位: fixed(不占有原位置,固定在屏幕某个位置)
- 偏移量:
  top:值;//向上偏移
  bottom:值;//向下偏移
  left:值;//向左偏移
  right;//向右偏移
- 叠放次序:z-index 默认为0
- 模式转换: 元素有绝对或固定定位后模式会转换为行内块模式,行内元素加高度后可不转换
浮动
- 浮动框脱离文档流,可向左或向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
- float //left左浮动,right右浮动,none默认
- 清除浮动:把浮动的盒子圈在标准流的盒子里
  1.在浮动盒子后一个盒子并使用clear属性(值为left表左侧不允许浮动元素,值为right表右侧不允许浮动元素,值为both表左右两侧均不允许浮动元素)
  2.为父元素添加overflow:hidden;
  3.为父元素添加class值为clearfix
  .clearfix:after{/伪元素是行内元素正常浏览器清除浮动方法/
  content: “”;
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
  }
  .clearfix{
  *zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行/
  }
  4.为父元素添加class值为clearfix
  .clearfix:after,.clearfix:before{
  content: “”;
  display: table;
  }
  .clearfix:after{
  clear: both;
  }
  .clearfix{
  *zoom: 1;
  }
其他
- display //block块级显示,none不保留位置隐藏
- visibility //visible显示,hidden保留位置隐藏
- overflow //visible不剪切内容也不添加滚动条,auto超出自动显示滚动条,hidden不显示超出内容,scroll总显示滚动条
- 鼠标样式cousor //pointer变手,text文本,move拖拽,default默认
- 取消轮廓outline:none;
- 取消拖拽resize:none;

CSS3总结

选择器

属性选择器
div[class]{} //带class属性的div
div[class=“a”] //class属性值是a的div
div[class^=“a”] //class属性值是以a开头的div
div[class$=“a”] //class属性值是以a结尾的div
div[class*=“a”] //class属性值是包含的div
伪类选择器
li:nth-child(3){} //第三个li
li:nth-child(even){} //偶数的li
li:nth-child(odd){} //奇数的li
li:frist{} //第一个li
li:nth-child(n){} //全部的li
兄弟伪类选择器
.类名+li{} //与类名相邻的li元素
.类名~li{} //与类名为兄弟的li元素
相对于父元素的结构伪类
li:first-child{} //li的父元素中的第一个元素
li:first-of-type{} //li的父元素中的第一个li元素
li:nth-child(5){} //li的父元素中的第5个li元素
li:nth-of-type(even){} //li的父元素中偶数的元素
li:nth-of-type(){-n+5}{} //li的父元素中的前5个元素
li:empty{} //无内容的li元素
li:nth-last-child(n){} //倒着计算的li元素
li:last-child{} //最后的li元素
伪元素选择器
p::first-letter{} //p中第一个字
p::first-line{} //p中第一行
p::selection{} //选择某个状态
p::before{必须有属性content:“其它属性修饰内容”} //在p前放内容,默认为行级元素
p::after{必须有属性content:“其它属性修饰内容”} //在p里放内容
锚点选择器
h2:target{} //为锚点添加样式

前缀

属性名前加-ms- 代表IE浏览器私有属性
属性名前加-webkit- 代表safari、chrome浏览器私有属性
属性名前加–o- 代表Opera浏览器私有属性
属性名前加-moz- 代表firefox浏览器私有属性

背景

线性渐变background:linear-gradient(to 方向,开始颜色位置,终止颜色位置)
径向渐变background:radial-gradient(形状,大小,坐标,颜色)
重复渐变background:repeating-radial-gradient(形状,大小,坐标,颜色)
背景图片background-image:url(“图片地址”)
重复背景图片background-repeat //round图像缩放后平铺,space以相同的间距平铺
背景图片尺寸background-size //值设置图片宽高,contain等比例自适应,cover自适应
背景图片定位区域background-origin //content-box(与border重叠填充背景)padding-box(与padding重叠填充背景)border-box(与内容开始位置重叠)
背景绘制区域background-clip //border-box显示border及以内的背景,padding-box显示padding及以内的背景,显示content及以内的背景

边框

图片边框border-image-source:url(“图片地址”)
图片边框向内偏移border-image-slice //number|%|fill保留边框图像的中间部分
图片边框宽度border-image-width
图片边框区域超出边框的量border-image-outset
图片边框样式border-image-repeat //repeated平铺,rounded铺满,stretched拉伸
连写border-image:地址,宽度,超出量,样式
圆角边框border-radius: 左上,右上,右下,左下
左上圆角边框border-top-left-radius
右上圆角边框border-top-right-radius
右下圆角边框border-bottom-right-radius
左下圆角边框border-bottom-left-radius
边框阴影box-shadow: 水平垂直模糊度颜色内阴影; //可叠加

文本

文本阴影text-shadow: x轴 y轴模糊度颜色; //可多个叠加用逗号分隔
长单词换行到下一行word-wrap:break-word;

过渡

在不使用Flash动画或JavaScript的情况下,为元素从一种样式变为另一种样式添加效果
过渡名称transition-property //none没有属性会获得|all所有属性会获得|自定义名称列表,以逗号分隔
过渡时间transition-duration
过渡速度transition-timing-function //linear匀速|ease慢快慢|ease-in慢速开始|ease-out慢速开始结束|ease-in-out慢速开始和结束|cubic-bezier(n,n,n,n)自定义值在0到1之间
延迟transition-delay
连写transition: property duration timing-function delay

2D转换

transform:转换方法;
转换方法
- translate(x,y) //沿X和Y轴移动元素
- translateX(n) //沿X轴移动元素
- translateY(n) //沿Y轴移动元素
- scale(x,y) //改变元素宽高
- scaleX(n) //改变元素宽
- scaleY(n) //改变元素高
- rotate(angle) //旋转元素,角度单位deg
- skew(x-angle,y-angle) //沿X和Y轴倾斜元素
- skewX(angle) //沿X倾斜元素
- skewY(angle) //沿Y轴倾斜元素
transform-origin:设置旋转轴心;//值为坐标点

3D转换

transform:转换方法;
转换方法
- translate3d(x,y,z) //沿X,Y,Z轴移动元素
- scale3d(x,y,z) //沿X,Y,Z轴缩放元素
- rotate3d(x,y,z,angle) //沿X,Y,Z轴旋转元素
transform-origin:设置旋转轴心;//值为坐标点
transform-style规定被嵌套元素如何在3D空间中显示//preserve-3d子元素将保留其3D位置
perspective设置元素被查看位置//元素距离视图的距离
perspective-origin设置3D元素的基点位置

动画

规定动画
@keyframes 动画名
{
百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%
0% {background: red;}
50% {background: blue;}
100% {background: green;}
或from {background: red;}
to {background: red;}
}
应用动画
- animation:动画名其他属性值;//可连写顺序如下
- 动画名animation-name
- 花费时间animation-duration
- 速度animation-timing-function //linear匀速|ease慢快慢|ease-in慢速开始|ease-out慢速开始结束|ease-in-out慢速开始和结束|cubic-bezier(n,n,n,n)自定义值在0到1之间
- 延迟时间animation-delay
- 执行次数animation-iteration-count
- 反向播放animation-direction:alternate;
- 动画结束状态animation-fill-mode //forwards保留结束状态|backwards进入初始状态|both合并前两种状态
- 播放还是暂停animation-play-state //paused暂停|running播放不可连写

布局

多列布局
- 分隔列数column-count
- 列规则column-rule:样式,宽度,颜色;//样式none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
- 列间隔column-gap
- 填充列column-fill //balance|auto
- 元素横跨列数column-span
- 宽度和列数连写columns
弹性布局
- display:flex;开启
- 作用于父容器的6大属性
  - flex-direction决定元素的排列方向：column纵向 row横向 wrap-reverse反转
  - flex-wrap决定元素如何换行：nowrap不换行 wrap换行
  - 连写: flex-flow:row wrap
  - align-items元素在交叉轴上的对齐方式 //flex-start交叉轴的起点对齐|flex-end交叉轴的终点对齐|center交叉轴的中点对齐|baseline项目的第一行文字的基线对齐|stretch(默认值)
  - align-content元素在多根轴上的对齐方式 //flex-start与交叉轴的起点对齐|flex-end与交叉轴的终点对齐|center与交叉轴的中点对齐|space-between与交叉轴两端对齐，轴线之间的间隔平均分布|space-around每根轴线两侧的间隔都相等|stretch(默认值)轴线占满整个交叉轴
  - justify-content元素在主轴上的对齐方式 //center居中 flex-start默认左 flex-end右对齐 space-between左右平均 space-around平均散开左右对齐
- 作用于子项目的6大属性
  - flex-grow当有多余空间时,元素放大比例
  - flex-shrink当空间不足时,元素的缩小比例
  - flex-basis元素在主轴上占据的空间//如果主轴为水平设置这个属性相当于设置项目的宽度,原width将会失效
  - 连写flex: 0 1 2px;
  - order定义元素的排列顺序
  - align-self定义元素自身的对齐方式 //可覆盖容器上的align-items属性,