HTML+CSS基础

编程知识更新时间:2023-05-02 15:00:55

认识HTML和网页开发

HTML是hyper text Markup language 的缩写，中文是超文本标记语言
W3C(万维网联盟）
W3C是非盈利的组织，它有四个分部，分别是麻省理工，欧洲数学与信息研究学院，东京庆应大学，北京航天航空大学
HTML是由w3c制定的一套网页编写标准
HTML4.0 1997年；HTML5.0 2014年
常见的浏览器：欧朋、火狐、谷歌，Safari、IE、edge、QQ浏览器
网页开发工具，Hbuilder、webstorm、notepad++、ultraedit等

基本标签

html的主题部分

<!doctype html>表示html5开发的
之间用来编写网页,告诉浏览器这是个HTML文档
是文档的头部，用来存放元信息，网页标题，样式表等
是网页的主题部分，用来编写网页显示的内容

h1~h6是标题标签

分为六个级别的标题，级别越高，字体越小，效果为文字的粗细和大小发生改变

p标签是段落标签

独占一行，用来划分段落，具有换行的特性，默认16px的上下外边距；
align=”left\center\right”设置文字的水平对齐方式

i标签斜体字标签

em标签也可以把文字设置为斜体，但它对文字有强调效果

b标签是文字加粗标签

strong也具有文字加粗的效果，但它对文字有强调的作用

hr标签是水平分割线

noshade=“noshade”;去除阴影

br标签是强行换行

ul标签是无序列表，搭配li使用

type属性取值disc(实心圆)circle（空心圆）square（实心正方形）

ol标签是有序列表，搭配li使用

type属性取值为1（数字）A(大写英文字母)a（小写英文字母）I(大写罗马字母)i(小写罗马字母)

img标签用来嵌入图片

src=“url地址”
alt=“图像加载失败替换文本”
title=“鼠标放上去时显示的文字”
还有width\height\border等用来设置图像的宽高边框
不同高度的图片是以底部为准进行垂直对齐

a标签是超链接标签

href=“url”
href="#id名”书签链接
href=“mailto:邮箱地址？subject=“邮件内容””
target="_self_blank_parent_top"网页的跳转方式，当前网页，新的网页，
父窗口、包含该链接的窗口
src和href的区别:src引用的资源是不可或缺的，例如img中的src，如果引用失败会导致页面不完整。href表达的是一种关联性，例如超链接关联的页面，理论上来说，即使href地址错误，并不影响当前网页的完整性

``对HTML进行注释，css要用/xxx/注释

路径问题

绝对路径

本地绝对路径：当前设备上从盘符开始的路径；例如C:/win/hello.html
网络绝对路径：https://xxx/hello.htm

相对路径

相对于当前页面浏览器的所在的位置，看地址栏
file协议，文件访问协议
./相当于当前位置；…/返回上一级

form表单

action属性
数据提交的服务器地址
method属性
数据提交方式 get post，get会让提交的数据在地址栏显示

input标签

type：text文本输入框
password密码输入框
输入内容会自动屏蔽
radio 单选框
name为一组
checkbox 复选框
submit 提交按钮
reset 重置按钮
date 日期控件
number 数字输入框
file 文件选择
value 代表输入框的内容
并不是所有的input都需要写value值
placeholder 文本框的默认提示

select下拉文本框

配合option使用，selected表示默认选择

textarea 多行文本输入框

rows行宽 cols列宽，单位为单个文字宽度

table表格

table标签里有thead\tbody\tfoot，其中tbody浏览器会自动生成
tr表示行，td表示列，th表示表头文字加粗居中
cellspacing 单元格之间的间距
cellpadding单元格边框和内容之间的间距
algin 如果写在table，会让表格本身水平居中，如果写在tr中会让tr里的文字内容水平居中；left\center\right
行合并rowspan
列合并colspan

容器标签

div

div没有任何显性的作用，仅当做容器使用，用来包裹其它标签，用来区分网页的结构，最重要的是网页区域的划分·
默认宽度100%跟网页保持一致，；高度随内容变化；可以容纳所有标签
div默认独占一行，无论宽度是否被修改

span

span:容器标签，没有宽高，大小随内容大小变化，用来容纳文字内容，无法用来作区域布局

section容器，article容器，aside容器，nav容器，header容器

图片类型

gif
支持动画只有256种颜色,只有全透明和不透明两种颜色，颜色失真
png
png和jpg都是压缩格式
png采用无损压缩算法，支持背景透明，不支持透明
jpg
jpg采用有损压缩算法，不支持透明，不支持动画
svg
svg是矢量图，无论放大多少倍，清晰度都不变，不计算像素，存放形状参数，路径，适合存放形状比较固定的

css层叠样式表(cascading stylesheet)

写法有三种
1.直接在元素的标签上添加style属性，将样式内容写在style属性中（行内样式、内联样式）
2.在页面上编写style标签，将所有样式编写在style标签中（内部样式）
3.将style标签中的样式内容写在单独的文件中（外部样式）<link rel="stylesheet" tyle="text/css" href="url">
选择器
1.ID选择器 #ID号{}
2.类选择器 .类名{}
3.标签选择器标签名{}；自定义标签样式也可以生效
4.属性选择器 input[type=‘number’]{}；p[id=‘abc’]=p #abc
5.通用选择器*{}
6.组合选择器 input，#box{}
7.层级选择器
.box>p{},>表示选取下级的子元素
.box p{}表示选取所有后代p元素
8.伪类选择器
XXX:nth-child(n){}选择xxx元素的第几个
XXX:nth-child(even){}选择xxx元素的偶数
XXX:nth-child(odd){}选择xxx元素的奇数
XXX:hover{};当鼠标划过的时候生效

选择范围越小优先级越高,优先级一样则最后一个执行
ID选择器优先级>class选择器>标签选择器>通用选择器
ID选择器权值：1000；class选择器：100；标签选择器：10；通用选择器：1；算优先级就是权值相加，越大优先级越高

属性
1.背景属性 background
opacity:0;透明度；
background-color:rgba(0,0,0,0.5);最后一位是透明度，范围在0~1；
2.文字属性
color文字颜色
font-size文字大小
text-deroration：none/underline/overline/linthrough文本修饰
text-indent首行缩进
font-family字体种类
font-weight:bold;字体加粗
3.排列方式
text-align： left|center|right
line-height 文字总是会垂直于这一行的中间，当行高和父容器高度一致时，文字就会在容器中垂直居中
4.边距
外边距margin ，内边距padding
5.大小
width|height
6.边框
bolder：1px solid\dotted\dashed red 实线、点线、虚线
bolder-radius，让边框变椭圆；去掉棱角
7.列表样式的删除
list-style:none;
背景图
background-image：URL（URL地址）背景图默认是被元素的大小限制的，超出的部分不可见
background-size：宽高，背景图依然在默认情况下保持宽高比
background-repeat：no-repeat；不让背景图重复
background-color：背景色
background-position:左右上下，更改背景图的位置
background-position-x，水平方向；background-position-y，垂直方向
鼠标拖动图片不变的情况时使用的是背景图
背景图和背景颜色可以并存，如果图片没有占据整个容器，则依然可以看到背景色
float浮动
浮动遮不住文字，会形成文字环绕中文以字为单位，英文以单词为单位，中间用空格隔开，单词太长会溢出
fioat:left/right;向左浮动，向右浮动
所有浮动元素会水平排列
浮动元素脱离文档流，不占据页面空间，因此不会与其他元素重叠，但是不会覆盖文字
当一个宽度100%的容器浮动时，宽度自动改为随内容变化，就是没有了宽度，需要内容撑开
clear:left\right\both；清除浮动的影响，用来清除平级相邻的元素
子元素浮动会导致父元素高度塌陷，解决办法让父元素恢复正常：给父元素添加高度或overflow: auto;
元素的类型
1.块元素（h1\div\p）
可以设定宽高大小，独占一行；
.行内元素（span、a超链接、i、b、）
设置宽高无效，水平排列，当放不下的时候会换行
3.行内块元素（img，input，表单元素）
可以设置宽高大小，水平排列
4.类型转换
display：block/inline/inline-block;
盒模型
1.margin：设置外边距；
上下外边距会重叠在一起，当大小不一样时，以大的为准，
左右外边距不重叠
li默认有40px的左侧内边距，ul默认有16px的上下外边距
margin:auto;自动调整外边距，水平居中
2.padding：设置内边距；
3.设置边框bolder：1px solid\dotted\dashed red ；实线、点线、虚线； border-radius：50%；宽高一样时是圆
overflow
除了背景图溢出会自动隐藏，
overflow：hidden；溢出隐藏；
overflow:scroll;未超出时滚动条不出现，超出时出现滚动条；
overflow：auto;自动处理超出会有滚动条；不超出没有。
overflow-x和overflow-y;分别是水平方向和垂直方向；
常用知识
CSS统筹：把通用的样式写在一个css文件中
字体默认大小16px
box-shadow:0 0 1px black，加阴影
display:none;不显示，去除物理空间
opacity:0;透明度；
visibility：hidden;隐藏，物理空间没有去除
XXX:checked；选择被选中的元素（并不是所有元素都有选中状态）
精灵图
XXX:hover{};当鼠标划过的时候生效
整合小的图片成为一个大图，然后通过调整背景图的位置，来显示其中部分内容
图片整合的作用是通过减少网络的请求，提高网页的加载效率
overflow
除了背景图溢出会自动隐藏，
overflow：hidden；溢出隐藏；
overflow:scroll;未超出时滚动条不出现，超出时出现滚动条；
overflow：auto;自动处理超出会有滚动条；不超出没有。
overflow-x和overflow-y;分别是水平方向和垂直方向；

移动端

物理像素：能支持的最大像素
设备像素：出厂默认的分辨率
dpr设备像素比；物理像素比上默认像素
viewpoint默认宽度980px

rem

如果html{font-size:10px;} 1 rem=20px;
谷歌浏览器支持的最小文字大小为12px；还可以是0；

<script>
	let fontSize = 100 * window.innerWidth / 375;
	window.document.documentElement.style.fontSize = fontSize + "px";
</script>

定位方式

定位，只有当元素有定位方式的时候，坐标才是生效的；原点默认在页面的左上角
如果在父元素上有定位方式，则以父元素的左上角为参考系，否则以页面进行定位
图片是以底部为准对齐的，所以设置行高，只会使底部处于中间位置
坐标的原点，如果父元素有定位方式，则以父元素为参考系，如果父元素，以及所有的上层元素都没有定位，最终以页面为参考系（页面的左上角）
position：relative；相对于自己的定位，坐标的原点就是自己原来的位置
相对定位：position：relative；相对于元素原来的位置
绝对定位：position：absolute；相对于有定位方式的父元素
固定定位：position：fixed；相对于浏览器窗口
凡是有定位的元素，层级都比没有定位的高，越靠后出现的层级越高，宽不在是100%，而是跟随内容
vertical-align：top/middle/bottom;垂直对齐方式

伪元素

伪元素，一个没有标签的元素，它的内容由content属性来指定。不能独立存在，必须依附某个真实的元素；伪元素的其它特性和真实元素没有区别，属于行内元素，无法设置宽高大小；生成的伪元素会出现在主元素的内部，相当于它的子元素
xxx::after{}
xxx::before{}
appearance:none;

阴影效果

box-shadow:阴影横坐标阴影纵坐标阴影虚化程度阴影扩展大小阴影颜色
第一个表示阴影的横坐标
第二个表示阴影的纵坐标
第三个表示阴影的模糊值
第四个表示阴影的扩展值
第五个表示阴影的颜色
第六个表示阴影的方向（向内、向外）

线性渐变

background:linear-gradient(to bottom/to top/to left/to right,#333,#999)
第一个表示渐变的方向
第二个表示开始颜色
第三个表示结束颜色

css动画

过渡
transition： 3s;
变化
transform：rotateX(45 deg)/rotateY()/rotateZ() translate(45px) scale(1.5);旋转，位移，比例;三种变形效果可以同时叠加，注意编写顺序，会影响执行效果
透视
transform：perspective(1000px);写在最开始的位置，否则Chrome不生效，
给父元素添加透视时，因为视角问题，每个子元素的效果是不同的
transform-style：preserve-3d;保持3d效果；做3d要把刚开始的透视效果给删掉
帧动画：
@keyframs name{
0%{}
25%{}
100%{}
}

@keyframs name{
from{}
to{}
}

animation：帧动画名字 3s infinite;

重要

z-index用于确定position不为static的层级
去掉浏览器给输入框加的动态的外边缘
outline：none；
画三角形：width:0;height:0;
border-top:50px solid black;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid transparent;

flex弹性元素

display：flex；flex容器中浮动会失效，vertical-align会失效
justify-content：flex-start；开始对齐
justify-content：flex-end；结尾对齐
justify-content：center；中心对齐
justify-content：space-between；两端对齐
justify-content：space-around；自动分配间隔
flex-direction：row；主轴为x轴，水平排列
flex-direction：column；主轴为y轴，垂直排列
flex容器中，默认是不会换行的，需要换行的话，用flex-wrap：wrap;
flex-wrap：wrap-reverse;向上换行
justify-content：center；align-items:center;其中align-items用来控制交叉轴的对齐方式
flex-grow：数字；扩展比率；对父元素剩余空间进行瓜分；
flex-shrink：数字；元素的多余空间削减比例