HTML+CSS基础知识

一、HTML基础

1.html的基础结构：

2.html中的语法：

- 在尖角符号后面的第一个英文单词就是当前标记的名称

- 标记也可以称为标签或者元素

- 双标签结束的反斜杠不能省略但是单标签的反斜杠是可以省略的

- 在标签名称后面空格都是当前标签的属性(描述当前标签)

- 属性和属性值之间需要使用=号相连,属性值需要使用引号引起来

- 属性有多个的时候不区分前后顺序

3.一些常见的标签及使用：

div:是一个没有任何含义的盒子用来作为网页布局的

span:是一个没有任何含义的盒子用来包裹文字的

--文本标题标签的使用

1.标签的名称:h 有六个 h1、h2、h3、h4、h5、h6

2.标签的默认样式

- h1到h6的字体越来越小

- h1到h6的加粗效果越来越弱

- 默认会独占一行并且换行

- 字体上下会有间距

3.标签的作用

- h1用来存放当前网页中最为重要的部分(主题文本或者是logo)

- h2~h6没有固定的用法,可以表示标题

-- 段落标签的使用

1.标签的名称:p

2.默认样式

- 独占一行并且换行

- 上下有间距

- 段落标签会默认在一行宽度根据当前的可视区域进行变化

--加粗标签

1.标签名称:b、strong

2.区别:b和strong之间是有区别的后者的加粗多一点但是浏览器区分不明显肉眼不可见

3.strong标签表示语气加强

--倾斜标签

1.标签名称:i、em

2.区别:i和em之间是有区别的后者的倾斜多一点但是浏览器区分不明显肉眼不可见

3.em标签表示语气加强、

-- 删除线标签的使用: del、s

--下划线标签的使用: u

-- 上标和下标:sup sub

-- 两个单标签的使用

- br 强制性换行

- hr 水平线

常见的列表标签有三种表达形式:无序列表、有序列表、自定义列表

一.无序列表

1.标签名称:

- ul父级标签表示列表的盒子

- li子级标签表示列表中的内容

2.默认样式

- 无序列表默认的符号是黑色的实心圆

- 独占一行并且换行

- 如果需要有多个子级的时候书写li即可

3.属性:type类型

- disc 实心圆

- circle 空心圆

- square 方形

4.常用于新闻列表页面或者一些轮播图

二:有序列表

1.标签名称:

- ol父级标签表示列表的盒子

- li子级标签表示列表中的内容

2.默认样式

- 有序列表的默认符号是序号默认是1

- 独占一行并且换行

- 如果需要有多个子级的时候书写li即可

3.属性

type类型 - A/a I/i

start开始 - 属性值只能是数字表示从第几个开始数的

4.常用于新闻列表页面或者一些轮播图

三:自定义列表

1.标签名称

- dl父级标签表示列表盒子

- dt+dd子级

2.默认样式

- 文本是有缩进效果的

- 当子级元素较多的时候不可以写在一起

图片标签的使用

1.标签名称:img单标签

2.标签中的属性应用

- src 设置图片的路径

- alt 提示文本(当图片加载失败的时候)

3.只需要了解的属性:width/height/border 宽度/高度/边框单位像素px

路径的使用(Image preview)

1.绝对路径的使用:这种方式只能在自己电脑中使用不可以在工作中使用

- 含有盘符的路径地址

2.相对路径的使用

- 同级找同级:目标文件的名称.后缀名

- 父级找子级:目标文件的文件夹/目标文件的名称.后缀名

超链接标签的使用:点击可以跳转到相应的页面

1.标签名称:a

2.属性

- href 路径

- target 目标 _self 打开会覆盖原窗口 _blank 打开新窗口

3.默认样式

- 没有设置href属性值的时候默认字体颜色是紫色

- 设置href属性值的时候默认字体颜色是蓝色

- 文本有下划线

表单的使用:收集用户信息

1.表单框/表单域

- 标签名称:form

- 标签作用:就是一个盒子让用户填写个人信息的默认在浏览器中是不显示的

- action 行为动作地址

- method 方法方式前后端交互的方式 get/post

- get携带参数,post不会携带参数

- get相对于post而言安全低一些

- 在参数前面的问号的意思:接参数

2.表单控件:表单框就是一个盒子在浏览器中是看不见需要在表单框中让用户填写个人信息需要表单控件

- 标签名称:input单标签

- type属性:默认的属性值text 表示文本框

表单控件的使用(现在的是H4)

1.属性

- type 类型可以设置成不同的效果

- name 姓名/名字记录数据保存

- value 提示文本占位置用户输入个人信息的时候需要手动删除

- placeholder 提示文本不占位置 HTML5里面新增的属性占位符

2.属性值

- text 默认为文本输入框

- password 密码框

- radio 单选设置相同的name属性即可

- checkbox 多选

- 默认选择 checked

- 禁止选择 disabled

3.功能按钮:需要放在form表单域中才会有作用

- submit 提交按钮

- reset 重置按钮

4.特殊的空按钮标签

- input中type类型为button 需要绑定js事件才有意义

- button标签需要绑定js事件才有意义会跳转页面和submit的作用一样(默认提交一次)

二、CSS基础

浮动属性的使用

1.作用:可以改变元素的位置(默认从上到下排列改变成从左到右/从右到左)

2.属性:float 使xx漂浮/浮动

3.属性值:left/right/none(默认值)

4.特点

- 根据浮动的属性值可以观察得到浮动只能控制元素在水平方向上移动

- 元素设置浮动,初始位置不存在,漂浮在当前浏览器的上方,后面的盒子就会自动的往上移动

- 浮动元素的停止条件

- 浮动元素不会飘出当前的父级元素,碰到父级元素的边框就会停止浮动

- 还会碰到前面一个含有浮动属性的元素也会停止浮动

5.特殊情况:当子级元素的宽度大于父级元素宽度的时候,最后一个子级元素会像气球一样往下移动直至找到足够的空间、浮动元素只会覆盖住元素盒子大小,不会覆盖住文本内容(真实的DOM结构)

盒模型的概念

1.盒模型的作用:设置元素与元素之间的位置关系(调间距)

2.盒模型的组成:

- content 内容区域不做讨论盒子的宽高大小

- padding 内边距

- border 边框

- margin 外边距

3.盒模型的分类

- 标准的盒模型

- 怪异的盒模型

盒模型中的外边距margin的使用

1.属性:margin

2.作用:主要是用来设置同级元素之间的位置关系

3.特点

- 属性值要设置为数值加单位

- 属性值的设置方法

- 一个值:上下左右

- 两个值:上下左右

- 三个值:上左右下

- 四个值:上右下左(前端默认的顺序方向是顺时针)

- 属性值还可以添加方向

- margin-top

- margin-right

- margin-bottom

- margin-left

4.固定搭配

- *{margin:0;padding:0} 清除浏览器的外边距

- 版心的选择器{margin:0 auto} 版心居中

5.margin的常见bug

- 两个盒子上下排列,分别设置margin-top/bottom的时候,会错误的取之间的最大值

- 如果父级元素下面只有一个子级元素的时候,给自己元素设置margin-top会错误的解析到父级元素

盒模型中的内边距padding的使用

1.声明: padding数值加单位

2.作用: 设置父级元素与子级元素之间的位置关系

3.特点

- margin和padding之间可以换着用,使用灵活

- padding添加的位置

- 可以添加在父级元素上:padding会撑大当前父级元素的宽高大小,为了不影响后面的布局需要在初始宽高上减去相应的padding值(控制所有的子级元素都会移动位置)

- 可以添加在子级元素上:padding会撑大当前子级元素的宽高大小(控制单个子级元素的位置)

盒模型中边框的使用

1.属性:

- border-width 边框的宽度

- border-style 边框的样式

- border-color 边框的颜色

2.属性值

- 边框的宽度:数值+单位(像素px)

- 边框的样式:solid(实线) dashed(虚线) dotted(点线) double(双实线)

- 边框的颜色(背景颜色、字体颜色)

- 英文单词:red、blue、green

- 十六进制:

- 以#开头的后面有六位字符数0123456789abcdef(ABCDEF)

- 常见的十六进制:#000000 #cccccc #ffffff(当六位字符相同的时候可以省略三位)

- rgb/rgba(red,green,blue,alpha)

- 取值范围是0~255,,透明度的取值范围是0~1

3.复合属性/简写方式

- 属性:border

- 属性值:5px solid red (顺序可以互换)

4.边框的需求

- 需要改变上面边框的颜色:border-top-color:red

- 需要改变上面边框的所有:border-top:2px dashed green

- 需要清除边框:border:none

背景属性

1.背景颜色

- 属性:background-color(可以简写background)

- 属性值:英文单词、十六进制、rgb/rgba

2.背景图片

- 属性:background-image

- 属性值:url()

问:img图片和背景图片的区别是什么?

- img图片默认只会显示一张并且是占位置的 => img结构标签

- 背景图片默认会进行平铺并且不占位置的 => css样式必须要容器大小支撑

3.背景平铺方式

- 属性:backgrund-repeat(重复)

- 属性:no-repeat/repeat/repeat-x/repeat-y

4.背景定位

- 属性:background-position(定位、位置)

- 属性值

- 有两个:水平方向X 垂直方向Y (X和Y的属性值相同的时候可以简写成一个)

- 可以使用法定的属性值:left right center / top bottom center

- 可以使用常规的属性值:数值+单位(前端的坐标轴) 可以使用负值

5.背景固定(大型的游戏网站+电商页面)

- 属性:background-attachment

- 属性值:scroll/fixed

6.简写方式

- 属性:background

- 属性值:颜色图片平铺定位固定(不区分前后顺序)

文本溢出属性

1.属性:overflow

2.属性值

- visible 默认值正常显示内容较多会溢出容器

- hidden 内容超出容器的时候直接隐藏起来

- scroll 超出的内容会撑出滚动条的作用

- auto 自动当内容没有超出的时候就不会显示滚动条的样式当内容超出的时候就会有滚动条的样式和作用

如何显示省略号

1.当前的容器要有固定的宽高大小 width/height

2.容器内的文本要超出 white-space:nowrap

3.超出去的文本隐藏起来 overlfow:hidden

4.隐藏的文本变成省略号 text-overflow:ellipsis

根据CSS的显示分类:所有的元素/标签可以分为三大类

1.块级元素/块元素

2.行内元素/内联元素

3.行内块元素

一:块元素

1.常见的块元素有哪些:div、ul、li、p、h、ol

2.块级元素常见的特点

- 可以直接设置宽高大小,以一个矩形的盒子在浏览器中显示的

- 块级元素独占一行,默认是从上到下排列的

- 块级元素嵌套行内元素或者其他元素作为网页的布局盒子

二:行内元素

1.常用的行内元素有哪些:span、a、b、strong、i、em、s

2.行内元素的常见特点

- 行内元素无法直接设置宽高大小,宽高大小由自身的内容决定的

- 行内元素默认在一行内逐个显示

- 常见的bug:设置margin-top/bottom的时候会失效

三:之前CSS中第三个分类叫做可变元素,现在统一规范叫做行内块元素

1.常见的行内块元素:input、img

- 行内块元素特点:可以直接设置宽高大小 => 块元素

- 行内块元素特点:可以在一行内逐个显示 => 行内元素

- 结合两者的特点形成行内块元素

2.问题:所有的行内块元素都是以基线对齐的(基线:中线和底线之间的一条虚拟线)

3.解决:vertical-align

- baseline 基线对齐默认值

- top/middle/bottom

元素类型的转换关系:块转换成行内、行内转换为块

1.属性:display 显示方式

2.属性值:19个常用的三个 block、inline、inline-block、none、list-item

一:block 块表示将其他元素类型转换为块级元素,显示方式就是以块的特点显示的

二:inline 行内表示将其他元素类型转换为行内元素,显示方式就是以行内的特点显示的

三:inline-block 行内块表示将其他元素类型转换为行内块元素,显示方式就是以行内块的特点显示的

四:list-item 列表项目(了解:转换成块)

五:none

1.目前学习到属性值可以设置为none的情况有哪些?

- border:none 清除边框

- background:none 清除背景

- list-style:none 清除列表符号

- text-decoration 清除下划线

- resize:none 禁止用户拖动多行文本域

- outline:none 表单控件点击时候清除边框

2.display:none 隐藏元素删除标签的结构

- 需要结合display:block 不仅仅可以设置转换成块还可以表示显示

- block和none就是一对应用表示显示和隐藏

六:【重要】浮动属性:不仅仅可以控制元素脱离文档流,还可以将元素转换为行内块元素

动态伪类选择器(伪类选择器:0010)

1.选择器:link {color: red;} 未访问的链接状态,必须给a

2.选择器:visited {color: green;} 已访问的链接状态,必须给a

3.选择器:hover {color: blue;} 鼠标滑过链接状态,可以随便给

4.选择器:active {color: yellow;} 鼠标按下去时的状态,必须给a

注意:

- 如果要用动态伪类选择器的话,四个选择器的使用顺序不能颠倒、打乱

- 效果太花里胡哨,记住hover就可以了

1.hover的使用方法:表示鼠标移入会触发的效果(只有pc端中才有)

- hover可以改变自己的状态 => 自身的选择器:hover{声明}

- hover可以通过父级改变子级元素 => 父级选择器:hover 子级选择器{声明}

- hover可以改变相邻的一个 => 当前选择器:hover +相邻一个选择器{声明}

- hover可以改变相邻的全部 => 当前选择器:hover ~相邻一个选择器{声明}

行内块元素的垂直方向的对齐设置

1.属性:vertical-align

2.属性值

- baseline 默认值基线对齐

- top/middle/bottom

- text-top/text-bottom

解决图片在容器中水平垂直方向居中

1.给图片的容器添加text-align:center

2.在图片的后面添加一条辅助线(建议不要加空格)

3.给辅助线添加样式{display:inline-block;height:100%;width:0;}

4.需要给图片个辅助线都添加vertical-align:middle解决居中对齐

图片的默认bug:图片默认会往下撑开3~6px的间距

- display:block

- vertical-align: top

定位的属性设置

- 属性:position

- 属性值:

- static 静态定位默认值(设置不设置效果一样)

- relative 相对定位

- absolute 绝对定位

- fixed 固定定位

- sticky 粘性定位(css2中新增的一种定位方法)

相对定位属性的设置

1.属性:position

2.属性值:relative

3.特点

- 相对于自己初始的位置进行移动的

- 初始位置还存在,不会脱离文档流(正常的网页布局) 不会破坏网页布局

- 定位和盒模型之间的区别

- 相同点:都是可以移动元素的位置

- 不同点:盒模型移动位置的时候需要边框的接触,定位没有方向上的限制

4.作用:可以给绝对定位提供参照物(工具人)

绝对定位属性的设置

1.属性:position

2.属性值:absolute

3.特点

- 绝对定位的参照物的设置

- 如果父级有定位属性的时候,就会相对于父级进行位置移动

- 如果父级没有定位属性的时候,就会一直往上级查找,直至找到浏览器,相对于浏览器进行位置移动的

- 绝对定位是会脱离文档流的,初始位置不存在破坏正常的网页布局

- 建议只在小的布局上使用不要在外围结构上使用

流的概念

1.文档流 => 正常的网页布局在浏览器中布局层

2.浮动流 => 设置了浮动属性在浏览器中浮动层

3.定位流 => 设置了定位属性在浏览器中定位层

固定定位的设置

1.属性:position

2.属性值:fixed

3.特点

- 广告弹窗、聊天窗口

- 绝对定位可以实现脱离文档流,但是浏览器有滚动条的时候不符合需求

- 固定定位脱离文档流的初始位置不存在

- 相对于浏览器位置进行偏移

粘性定位的设置

1.属性:position

2.属性值:sticky

3.特点

- 粘性定位是相对定位和固定定位的结合

- 相对定位 => 不脱离文档流

- 固定定位 => 相对于浏览器

定位总结

一.定位的属性:position

二.属性值

1.相对定位

- 属性值:relative

- 特点:不脱离文档流、相对于自身的位置进行移动

2.绝对定位

- 属性值:absolute

- 特点:脱离文档流相对于父级父级没有就会往上查找直至浏览器

3.固定定位

- 属性值:fixed

- 特点:脱离文档流相对于浏览器进行偏移

4.粘性定位

- 属性值:sticky

- 特点:不脱离文档流相对于浏览器

锚点链接的使用:

1.解释锚点链接的用法

2.使用情况

- 第一种情况:在同一个跳转

- 跳转的位置: <div id="id的属性值">

- a标签实现: <a href="#id属性值">

- 第二种情况:不同页面跳转

- 跳转的位置: <div id="id的属性值">

- a标签实现: <a href="跳转页面的名字#id属性值">

表格及属性的使用

一.表格的作用:之前表格是用来布局的,后来表格只作为数据展示(表格中含有计算属性)

- 计算属性:会在每个单元格中进行检索内容,如果内容较多的时候会分配更多的空间

二.表格的标签

- table标签表格的盒子

- tr标签表格的行

- td标签表格的列(单元格)

三:表格中的HTML属性

1.width/height 设置表格的宽高

2.border 边框

3.bordercolor/bgcolor 边框颜色/背景颜色

4.cellspacing/cellpadding 细胞、单元格与单元格之间的间距/单元格与内容之间的间距

5.对齐方式

- 水平方向 align:left、right、center

- table控制整个表格水平对齐

- tr控制表格中的一行水平对齐

- td控制表格中的单元格水平对齐

- 垂直方向 valign:top、bottom、middle

- table没有效果

- tr控制表格中一行垂直对齐

- td控制表格中单元格垂直对齐

6.【难点重点】合并单元格

- 列合并 colspan(列、选择到几个) 属性值是数字

- 行合并 rowspan(行、选择到几个) 属性值是数字

表格中新增的HTML标签

1.列标题 th(作用和td一样)

2.caption 表格的标题/名称

3.表格的列分组:可以选中表格中的几列形成一组

- 第一种:col

- 第二种:colgroup

- 属性:span="数字" 只有width有作用

4.表格的行分组

- thead:表格头部

- tbody:默认添加了一个主体内容

- tfoot:表格底部

- tbody可以设置无数个,但是头部和底部只能设置一个并且需要成双成对的出现

5.添加组分隔线

- 属性:rules

- 属性值 "groups/rows/cols/all/none"

表格的CSS属性

1.设置单元格与单元格中的间距

- HTML:cellspacing

- CSS属性:border-spacing:数值单位

2.相邻单元格的边框设置

- 属性:border-collapse(合并)

- 属性值:separate(分开不合并)/collapse(合并)

3.单元格无内容时的显示方式

- 属性:empty-cells

- 属性值:show(显示)/hide(隐藏)

4.表格中计算属性

- 属性:table-layout

- 属性值:auto(自动)/fixed(固定)

BFC的触发条件

1.最简单的触发:HTML文档最大的BFC

2.最常用的触发:overflow(hidden/auto)

二:BFC触发之后会有哪些规范?

1.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠

- 应用:防止marin重叠

2.BFC的区域不会与float box发生重叠

- 应用:自适应两栏布局

3.计算BFC的高度时,浮动元素也参与计算

- 应用:清除内部浮动(高度塌陷)

4、BFC内部的Box会在垂直方向,一个接一个的放置

- 块级元素的特点

5、每个元素的margin box的左边会与包含块border box的左边相接触即使存在浮动也会如此

- 设置margin的时候必须要和父级容器的边框相接触

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

宽度自适应的设置

1.属性和属性值: width:100px/%

2.宽度自适应的特点

- 浏览器HTML、body是块级元素,宽度默认是100%

- 当块级元素设置宽度为100%或者宽度不写的时候,默认是沾满浏览器全屏宽度(通栏效果)

- 子级元素不设置宽度,会与父级等宽,宽度没有继承,只是布局规范效果

- 【重点】如果当前元素没有设置宽度并且脱离文档流的时候,宽度由内容决定

- 设置浮动和定位的时候一定切记要给元素设置宽高大小

高度自适应的设置

1.属性和属性值: height:100px/%

2.高度自适应的特点

- 浏览器默认高度是0,常用的设置html,body{height:100%}

- 设置height:0 高度为0 盒子不会显示,内容会超出容器

- 设置height:auto、或者height不写的时候,做到自适应

- 需求:

- 三个盒子,分别是上中下

- 上下盒子宽度是一样的

- 中间盒子

- 当有内容的时候要根据内容自动撑开父级高度

- 无内容的时候父级的高度保持一个最小高度

新的属性:min-height

1.解释:最小高度

2.作用

- 第一:没有内容的时候可以保持一个固定的高度 => height:固定值

- 第二:内容较多并且超出的时候会自动撑开高度 => height:auto

3.注意:最小高度的兼容问题(不支持低版本浏览器) IE8及以下

1.最大值

- 最大的宽度 max-width:1920px 约束页面的最大值

- 最大的高度 max-height:1000px 评论区

2.最小值

- 最小的宽度布局问题

- 最小的高度 min-height 自适应

高度塌陷/高度坍塌的概念

一.造成的原因:父级没有设置高度(实现自适应),子级设置了浮动属性

二.高度塌陷的解决方法有很多(10几种)

1.在父级元素上添加overflow:hidden即可解决

- 原理:触发了BFC,BFC中有一条布局规则:浮动元素也参与计算高度

2.在浮动元素的下面添加一个任意标签,设置div{clear:both}

- 解释:clear清除 left/right/both两者

- 原理:清浮动,清除的是上方预留出来的空间

- 优缺点:优点清除方便、缺点代码冗余

3.万能清除法(只要求会用,不要求理解)

- 原理:触发BFC并且清除浮动

- 代码:在父级元素上设置类名 clear-fix

.clear-fix::after{

content:"";

display:block;

width:100%;

height:0;

overflow:hidden;

clear:both;

visibility:hidden;

}

一:伪对象选择器/伪元素选择器

1.选择器::after{content:""} 表示在xxx之后添加内容,content固定搭配,可以不写任何内容

2.选择器::before{content:""} 表示在xxx之前添加内容,content固定搭配,可以不写任何内容

3.first-letter{} 第一个字符

4.first-line{} 第一行文本

5.::selection 鼠标选择到的时候状态改变

二:隐藏元素的使用

1.visibility:hidden 隐藏了显示方式、位置还是存在的

2.display:none 隐藏元素(显示方式、页面结构、控制台中结构)

如果你可以看到这的话，希望这个对你有所帮助，

青春不常在，把握时间好好学习，加油