8day-回顾

最新推荐文章于 2024-07-08 17:28:27 发布

DaB210

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量1k

点赞数 21

分类专栏： HTML&CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/DaB210/article/details/137170604

版权

HTML&CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文概述了HTML的历史变迁，强调了其在网页构成中的关键角色，介绍了CSS的基础知识，包括继承性、层叠性、选择器、样式结构，以及CSS3中的新特性如背景渐变和浮动元素的管理。还详细讲解了表单元素、CSS盒模型、清除浮动等实用技术。

摘要由CSDN通过智能技术生成

HTML

历史

05年前：开发设计是合在一起的
05年后：javascript崛起
08年：HTML诞生
12年：HTML5普及
14年：迅猛发展至今

作用

实现日常生活中所看到的所有网页
由三大部分组成：HTML（结构）、css（样式）、js（网页交互）

HTML 基本机构

<!DOCTYPE html>
<html>
  <head>
    <meta name="keywords" content="前端">
    <meta charset="utf-8">
    <title></title>
    <link>
    <style></style>
  </head>
  <body>

  </body>
</html>

常用标签

div
span
p
img
ul
li
ol
h1~h6
input
form
table
button
a
link
title
script
section
nav
header
footer
video
audio
aside
select
option
caption
tbody
thead
tfoot
tr
td
th
textarea
b
strong
i
em
del
ins
hr
br

table

现在一般只用于数据展示
需要格外注意的是进行单元格合并时
行合并表示的是，行与行之间进行合并（扩大），列合并表示的是单元格与单元格之间的合并（扩大）

表格元素

table
可包含一下
col-group：单独设置表格列的样式
caption：定义表格的标题
thead
tbody
tfoot
可以包含
tr
可以包含
td
th

表格属性

width:宽度
height：高度
border：边框
cellspacing：单元格之间的间隙
cellpadding：单元格的内边距

form

用于用户的信息收集

表单元素 input

text
password
submit
reset
radio
checkbox
number
search
file
button

表单元素的属性

name：定义表单数据的名称
value：定义数据的默认值，一般不会设置
placeholder：当内容为空显示的提示内容
readonly：只读
checked：默认下，是否勾选
required：设为必填项
minlength、maxlength：设置最短和最长的字符数。

select

通过select定义配合option标签使用
默认的展示形式为下拉菜单

select属性

size：可以设置我一次可以看见多少个选项，当设定的值大于1时，select展示形式会变为列表框
selected：默认选中的选项

选项分组

通过optgroup元素对下拉菜单定义分组选项，可通过在optgroup元素上使用label属性定义分组名称。

textarea

一般会用与服务条款、评论框等等。

文本域的属性

rows：定义文本域的行数（高度）
cols：定义文本域的列数（宽度）
wrap：换行属性
- virtual：默认值，允许换行，换行出不携带换行符信息
- off：关闭换行，超出的文本内容，会以滚动条的形式拖动展示
- physical：允许换行，换行处携带换行符信息

button

定义一个普通按钮，通常会使用js来定义这个按钮点击后的动作

同样具有type属性默认为submit。

form表单元素

action：用于设置将表单信息发送给谁。
method：定义表单数据提交的方式
- get，简便、性能好，相对不安全的一种发送方式，且发送携带的数据有限制。
- post：相对安全的一种方式，没有携带数据大小的限制。
enctype：编码类型
- application x-www-form-urlencoded：用于传递查询字符串
- multipart/form-data：可以用于传输文件
- text/plain：一般用作发送邮件

CSS

三大特性

继承性
- 子元素或后代元素会继承父元素中的某写样式
- 子元素可以继承父元素的样式：text-\font-\line-这些属性开头的可以继承，以及color属性
层叠性
- 一般发生于选择器之间，选择相同元素并设置了相同样式，就会造成样式冲突
- 层叠性用于解决样式冲突，遵循就近原则。
优先级（权重）
- 选择器相同：执行层叠性
- 选择器不同：执行优先级

基本结构

选择器{属性：属性值;}

引入方式

共三种

外联样式表：通过定义.css后缀文件，之后通过link标签引入到页面中
內联样式表：一般在页面head中定义一个style标签，在内部写入样式
行内样式表：在元素身上定义style属性，在属性中定义样式。

css选择器

基础选择器

元素选择器：以元素的标签名进行选择器
类选择器：通过为元素定义class属性然后写入自定义的类名，在样式表中以.开头跟上自定义类名
id选择器：通过为元素定义id属性然后写入自定义的id名称，在样式表中以#开头跟上自定义类名，唯一，不可复用
群组选择器：可以配合使用id、class、元素选择器等使用，每个选择器之间以“,”隔开，同时为多个元素定义相同的样式。
兄弟选择器：以波浪线定义，选择当前元素的所有兄弟元素
相邻选择器：以+号定义，选择与当前元素相邻的下边或者说是右边的元素
通配符选择器：选择器页面中所有的元素，一般用于简易的样式清除
子代选择器：选择当前元素内的某个子代元素
后代选择器：选择当前元素内的某个后代元素
权重：
!important>內联样式>id>class>元素选择器>*
!important定义在元素样式属性属性值的分号以内，和属性值以空格隔开。

复杂选择器

伪类选择器

与用户界面相关的伪类选择器

：hover：鼠标悬停在元素上时触发的样式
：link：链接未访问状态下，应用的样式
：visited：链接已访问状态下，应用的样式
：active：元素被点击时，应用的样式

结构类伪类选择器

X:first-child:匹配元素中第一个与X对应的元素，如对应则应用样式，否则无事发生
X:last-child：匹配元素中最后一个与X对应的元素，如对应则应用样式，否则无事发生
-div X:nth-child(1):匹配元素中第一个与X对应的元素，如对应则应用样式，否则无事发生
X:nth-of-type(1)：选择指定元素的第一个
last-of-type:指定元素的最后一个
first-of-type：指定元素的第一个
nth-last-of-type：倒叙选择指定元素的第n个
X:nth-last-child(n)：倒叙的选择元素的第n个，与X对应的元素，如果对应则应用样式，否则无事发生

伪元素选择器

first-letter：装饰首字母或开头的标点符号
first-line：装饰元素文本的首行
after：后置元素
before：前置元素

样式重置

清除标签本身自带的一些样式属性

简易重置

{
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
}

开发中使用的重置

样式重置文件网址：https://meyerweb.com/eric/tools/css/reset/

字体类与文本类的样式

字体类样式

font系列
- font-size：字体大小
- font-style：字体样式（是否斜体）
- font-weight：字体的粗细
- font-family：定义字体族
  - 自定义字体族
    首先下载一个字体文件，然后通过在样式中使用@font-face自定义字体，通过font-family属性定义自定义字体的名称，在通过src属性引入字体文件，使用时，使用自定义的字体名称即可。
color：字体颜色

文本类

line-height：行高
text系列
- text-decoration：定义文本的装饰线
  是三个属性的复合语法
  - text-decoration-line:线的类型
  - text-decoration-style：线的样式
  - text-decoration-color：线的颜色
text-indent：文本首行缩进
text-align：文本水平的对齐方式
word-spacing：定义单词间的间隙（空格处的间隙）
letter-spacing：定义字符间的间隙

背景

background-color：背景颜色
background-images：背景图片
background-repeat：背景是否重复
background-position：背景定位
background-attachment：背景关联
attachment-size：背景尺寸
background：color images repeat position/size attachment；

精灵图

也雪碧图，是一种网页图片应用的处理方式，优化网页加载。

原理

将一些小图标合并到一张大图中，之后通过css的背景定位属性让小图标显示出来。

背景渐变

线性渐变

{
  background:linear-geadient(30deg,to left top,red  40%,green 90%)
}

径向渐变

{
  background:radial-gradient(形状 尺寸 at 定位,颜色，颜色)
}
{
  background:radial-gradient(50px 60px at 定位,颜色，颜色)
}

重复的渐变一般需要设定渐变区域。

显示元素 display

用于设置元素展示的类型。
常用属性值：

none：让元素不被渲染
block：此元素会显示为块级元素，前后带有换行符
inline：将元素显示为行内元素，前后没有换行符
inline-block：将元素显示为行内块元素，同时具有行内和块级元素的特点
list-item：将元素作为列表显示，例如li
table：将元素作为块级表格显示，例如table

行内与块级元素的特点

行内：
- 不可直接设置宽高
- 默认宽度由内容区撑开，会与其他行内元素共处一行
- 上下内外边距失效，只能设置左右内外边距
块级：
- 可以设置宽高、内外边距
- 元素会占满整行，不能与其他元素共处一行

visibility 元素是否可见

属性

visbel：默认值，元素可见
hidden：元素不可见，但元素在页面中位置会被保留
collapse：在表格中使用可以用于删除一行或一列，但用在其他元素上则显示效果与hidden一致。

opacity 透明度

取值范围为0～1
0为=完全透明
1为不透明

盒子模型

标准盒模型

以W3C标准渲染的盒子模型

元素盒模型总宽 = 内容区 + 边框 + padding + margin

怪异盒模型

以IE浏览器制定的规则渲染盒子模型

元素盒模型总宽 = 内容区 + margin
怪异盒模型内容区宽度 = 内容 + padding + border

切换盒子模型 box-sizing

content-box：将元素的盒子模型设为标准盒模型
border-box：将元素的盒子模型设为怪异盒模型

外边距 margin

margin-left
margin-right
margin-top
margin-bottom

复合语法

margin：
- 一个值：四边同时设置
- 二个值：第一个表示上下，第二个表示左右
- 三个值：第一个表示上，第二个表示左右，第三个表示下
- 四个值：按照上–右–下–左的顺序分别设置外边距

margin的特殊应用

块级元素水平居中

{
  margin:0 auto;
}

margin纵向外边距重叠

在默认情况下，当两个块级元素均设置了纵向外边距时，第一个元素的下外边距会与第二个元素的上外边距发生重叠。
这是因为在最早期的HTML段落中，p标签存在默认的上下外边距，为的是和别的行直接产生一些距离，但多个p元素上下排列，会导致p元素之间的距离变得巨大，出于这样的考虑，浏览器在解析时，设置了纵向的外边距重叠规则。
发生重叠时，以数值更大的margin值为准。

内边距 padding

padding-left
padding-right
padding-top
padding-bottom

复合语法：

一个值：四边同时设置
二个值：第一个表示上下，第二个表示左右
三个值：第一个表示上，第二个表示左右，第三个表示下
四个值：按照上–右–下–左的顺序分别设置内边距

border 边框

允许设置边框的颜色、样式、宽度

border-color
border-style
border-width
border-left-color
border-left-style
border-left-width
其余三边语法一致
border-left：颜色样式宽度
border-right：颜色样式宽度
border-top：颜色样式宽度
border-bottom：颜色样式宽度
单独设置某一条边框
border：颜色样式宽度
四边同时设置

color 颜色

默认为黑色

取值：颜色英文十六进制 rgb rgba

style 样式

solid：实线
dashed：虚线
dotted：点线
double：双线
groove：定义3D沟槽边框
ridge：定义3D脊边框
inset：3D嵌入边框
outset：3D突出边框

width 宽度

默认为 3px的宽度

px：固定数值
em：相对于当前元素字体大小计算
rem：相对于根元素的字体大小计算
不能以%作为单位

border-radius 设置圆角

border-radius:

一个值：四个角同时设置圆角半径
两个值：第一个值表示左上角与右下角的圆角半径，第二个值表示右上角和左下角的圆角半径
三个值：第一个表示左上角，第二个表示右上与左下角，第三个表示右下角
四个值：按照左上–右上–右下–左下的顺序分别设置

盒子阴影与文字阴影

盒子阴影

box-shadow:X偏移量 ｜ Y偏移量 ｜ 模糊距离 ｜ 阴影尺寸 ｜ 阴影颜色 ｜ 是否为内阴影

一个元素可以设置多个阴影，之间以，号隔开
其中X与Y的偏移量必填，且允许负值

文字阴影

{
  text-shadow:X偏移量 ｜ Y偏移量 ｜ 模糊距离 | 颜色
}

可以同时设置多个，之间以，号隔开
其中X与Y的偏移量必填，且允许负值

浮动

最初是用来做文字环绕效果的

{
  float:left | right | none
}

浮动元素会脱离文档流，所以会导致浮动元素后面的兄弟元素布局错乱。

文档流

元素一般会存在两种情况，一种是普通流（也叫文档流），另一种则是脱离文档流

普通流

也成为常规流，文档流。是文档可显示对象在排列时所占用的位置。可以将整个网页看作一个文档，这个文档自上而下分成一行行，并在每行当中从左至右的顺序依次排放元素。

脱离文档流

设置浮动、绝对定位的元素都会脱离文档流，此时该元素就不存在普通流中，而是漂浮在普通流元素的上方，就像云层。能够左右运动。

清除浮动

即清除浮动元素在布局中带来的影响

清除浮动属性–clear

clear:none | both | left | right

none:默认值，允许元素两边存在浮动元素
both：不允许元素两边存在浮动元素
left：不允许左侧出现浮动元素
right：不允许右侧出现浮动元素

清除浮动元素造成的父元素高度塌陷

利用空标签，在父元素的最后面添加一个标签，在这个标签上使用clear属性设为both即可。
利用伪元素，为父元素设置一个后置伪元素，为其设置clear：both。（clear只能对块级元素生效）所以要将伪元素设为块级元素。
利用overflow，因为overflow属性会创建一个BFC块
利用display：flow-root，会创建一个BFC块。

兄弟元素清除浮动带来的影响

为浮动元素的下一个非浮动元素的兄弟元素设置clear属性，清除浮动带来的影响。

当需要设置浮动元素与非浮动元素之间的间距时，可以为浮动元素设置margin。