HTML+CSS基础内容

最新推荐文章于 2024-06-17 19:17:09 发布

一只阮码猿

最新推荐文章于 2024-06-17 19:17:09 发布

阅读量166

点赞数

分类专栏：大前端之JavaScript 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_47701835/article/details/132003924

版权

大前端之JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文档适用于『基础知识查缺补漏』，仅供参考。

Web 标准的制定者是万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李。

页面由三部分组成：结构层（html），表现层（css），行为层（js）。html就像画了一只静态的鸟，css就给他赋予了色彩，js得以让他起飞。

HTML

背景

HTML是什么？

超文本标记语言，是一种规范，是一种标准，通过标记符号来显示网页中的各个部分，由浏览器解释执行。

怎么用HTML？

在vscode里创建.html或.htm后缀的文件，输入『!(英文)+tab切换』快速创建。

语法：标签 + 属性 + 元素。

<!-- 标签：img；属性：href、title、target；元素：点我跳转 -->
<a href="https://www.baidu.com/" title="鼠标划过时显示的文本" target="_blank">点我跳转</a>

标签（在html页面中用尖括号括起来的叫做标签，成对存在的叫做双标签（开始标签，结束标签/）。单独存在的叫做单标签）：

分类	特性	代表元素
块标签	可以设置宽高，会独占一行；不设置宽度默认父元素的宽度	div、ul、li、ol、p、h1~h6
行标签	不能设置宽高，不会独占一行； margin只有左右，没有上下	a、span、strong、b、em、i、u、s
行内块标签	可以设置宽高，不会独占一行	img、表单

其他

SVG（可缩放矢量图形）、Manifest离线缓存、画布等

CSS

背景

CSS是什么？

用来控制网页样式，允许将网页内容和样式代码分离的一种标记性语言。

怎么用CSS？

语法：

选择器{
    属性名:属性值;
    属性名:属性值;
}

引入：

外部引入方式

<link rel="stylesheet" href="css文件名">

嵌入样式表：在html页面中写

选择器：

基本选择器

作用：选中页面中的元素。

标签选择器：选中页面中所有指定标签的元素。
```
标签名 {
    属性名：属性值；
}
```

类名选择器：选中页面中所有指定类名的元素。

<div class="类名"></div>
.类名 {
    属性名:属性值;
}
//数字，字母，下划线组成，不能以数字开头；不能出现中文；有意义。

id选择器：选中页面中id名的元素，id名是唯一的。
```
<div id="box"></div>
#box {
    属性名:属性值;
}
```
*：通用选择器：选中页面中所有的标签
```
* {
    margin:0;
    padding:0;
}
```
群组选择器：用, 隔开，多个选择器的元素会被选中
```
选择器，选择器，选择器
```
交叉选择器：通过多个选择器共同选中一个元素
```
标签选择器.类名选择器
```

关系选择器：
- 子代选择器：通过父代选中子代
```
父代选择器 > 子代选择器
```
- 后代选择器：所有的后代元素，孙子辈的元素
```
父选择器   子选择器
```
- 相邻兄弟：E+F ，紧挨着E元素后面的第一个F元素
- 同级兄弟：E~F ，紧挨着E元素后面的所有同级F元素。
结构伪类选择器:
- :first-child 第一个子元素 关注元素位置
- :last-child 最后一个子元素
- :nth-child(2n) 第2n个子元素
- ul li:nth-child(20)~.li{} 选中20以后的孩子但不包含第20个孩子
- :nth-last-child(n) 倒数第n个子元素
- nth-child(even) 选中奇数子元素
- nth-child(odd) 选中偶数子元素
- first-of-type 这种元素的第一个子元素 关注元素本身
- last-of-type 这种元素的最后一个子元素
- :nth-of-type(n) 这种元素的第n个子元素
- :nth-last-of-type(n) 这种元素的倒数第n个子元素
- :hover 鼠标移入
- :root 选择当前页面的根元素
- :empty 选择页面中的空元素，且该元素不能包含文字
伪元素选择器：
- ::after 给当前元素的末尾添加最后一个子元素， 与content属性一起使用
- ::before 给当前元素的开头添加第一个子元素，与content属性一起使用
- ::first-letter 选中当前文本的第一个字母
- ::first-line 选中当前文本的第一行文字
属性选择器：

<div class = "box"> </div>    div(E)：元素   class(attr)：属性   box(value)：属性值

- E[attr] 匹配E元素，并且有attr属性的元素。
- E[attr=value] 匹配E元素，有attr属性，属性值为value的元素。
- E[attr~=value] 匹配E元素，有attr属性，属性值为空格分割的列表，其中一个值为value的元素;自身也会被选中。
- E[attr|=value] 匹配E元素，有attr属性，属性值是完整且唯一的value的元素，或者以 - 分割的。
- E[attr^=value] 匹配E元素，有attr属性，属性值中以value字母开头。
- E[attr$=value] 匹配E元素，有attr属性，属性值中以value字母结尾。
- E[attr*=value] 匹配E元素，有attr属性，属性值中包含value字母。

选择器的优先级：

!importent > 行内样式 > id(100) >

类名(10),属性选择器,伪类选择器,交叉选择器,后代选择器 >

标签(1)，伪元素选择器 > * > 继承样式 > 浏览器预定义的样式

基本属性：

属性	属性值
width	宽度：px 百分比 auto
height	高度：px 百分比 auto
background-color	背景色：英文单词，十六进制#，rgb
font-size	字体大小：px
font-weight	字体加粗：100-900, bold, bolder, normal
color	字体颜色：英文单词，十六进制，#，rgb
font-style	字体样式：italic 倾斜；normal 正常
font-family	字体
float 使元素横排	left(左浮动)；right(右浮动)
text-align	文字水平居中：center
line-height	文字垂直居中；盒子的高度
cursor	鼠标样式：pointer手型
border-radius;border-top-left-radius	50%：变成圆形；像素：圆角矩形
text-indent: 2em;（当前文字的字体大小）	首行缩进
white-space: nowrap;	不换行
text-overflow: ellipsis;（加上overflow:hidden; white-space: nowrap;）	省略号显示超出文本
input中autocomplete="off"	点击输入框不显示历史记录
white-space: pre-line;	解决html中不识别\r\n
vertical-algin	middle/top/bottom（解决左右图片不对齐）
letter-spacing	字体间隔
word-break: break-all;	英文字母、数字强制换行

<!-- 单行文本溢出隐藏显示省略号 -->
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
<!-- 多行文本溢出隐藏显示省略号 -->
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;		// 文本显示几行

background-color:red;
background-color:#ff6700;
background-color:rgb(0,0,0);

盒子模型：

页面布局基石，指定元素如何呈现在页面当中。

组成：

名称	描述
内容	盒子中包含的元素和图片
内填充padding	盒子内容到边框之间的距离，显示盒子变大:padding-left,padding-right,padding-top,padding-bottom
边框border	盒子本身的边框 border-top,border-botton,border-left,border-right
边距margin	盒子与盒子之间的距离，margin-top,margin-bottom,margin-left,margin-right

内填充：

分别设置大小：padding-left,padding-right,padding-top,padding-bottom

简写设置：

padding:10px;					四个方向
padding:10px 20px;				上下  左右
padding:10px 20px 30px;			上  左右  下
padding:10px 20px 30px 40px		上 右 下 左

边框

去掉边框：border:none

四周的边框

border:1px solid #000000;
	  粗细  样式（实线） 颜色

单独某个方向的边框：

border-top:1px solid #000000
border-bottom:1px solid #000000
border-left:1px solid #000000
border-right:1px solid #000000

三个属性：

border-width：边框粗细
border-color：边框颜色
border-style：边框样式

外边距：

分别设置四个方向的间距，margin-top,margin-bottom,margin-left,margin-right

简写设置：

margin:10px;				四个方向
margin:10px 20px;			上下  左右
margin:10px 20px 30px		上  左右  下
margin:10px 20px 30px 40px	上  右  下  左

水平居中：margin:0 auto;

盒子模型问题：

浏览器对标签有默认样式，利用通用选择器去掉。*{margin:0;padding:0;}
相邻两个兄弟元素上下外间距会发生合并，外间距值最大的生效
子元素会从父元素的内容开始出现
块元素水平居中：margin:0 auto;
margin可以设置负值，padding不可以
行元素的margin只有左右没有上下，border和padding上下只有样式但不占据页面位置
margin-top的BUG
- 问题：父子元素嵌套；子元素是父元素的第一个子元素；父元素没有填充没有边框；子元素添加margin-top，好像作用到父元素，父元素跟着一起掉下来。
- 解决方案：
  - 给父元素添加overflow:hidden;
  - ```
  .父元素::before{
      content: "";
      display: table;
  }
```

浮动：

为了改变元素在文档流中的排布方式，使元素可以横排，从而使用浮动。

文档流：元素默认从左到右，从上到下进行排布。

分类：

none：没有浮动，默认值
left：左浮动
right：右浮动

特点：

当浮动元素遇到另一个浮动元素会停止；当浮动元素遇到父元素的边界会停止
当容纳的盒子太窄，无法包容所有的浮动元素，最后一个浮动元素会向下移
浮动的元素会脱离文档流

问题：

子元素都浮动，父元素不设置高度，父元素高度不会被撑开
- 给父元素设置高度
- 给父元素添加overflow:hidden;
- 给父元素的最后一个元素添加清除浮动
```
ul::after{
    content:"";
    display:block;
    clear:both;
}
```

标签分类：

分类	特性	代表元素
块标签	可以设置宽高，会独占一行；不设置宽度默认父元素的宽度	div，ul，li，ol，p，h1~h6
行标签	不能设置宽高，不会独占一行；margin只有左右，没有上下	a，span，strong，b，em，i，u，s
行内块标签	可以设置宽高，不会独占一行	img，表单

改变盒子类型：

display:block;	转变为块标签
display:inline;	转变为行内标签
display:inline-block;	转变为行内块标签
display:none;	让元素隐藏

定位：

定位元素方便我们将元素固定值页面的任意位置，需要调整top , bottom , left , right等四个方向值。定位的元素会脱离文档流。

固定定位：fixed

相对于窗口去定位元素；使用固定定位的元素，不随着页面的移动而移动。

.box{
    position:fixed;
    top:30px;
    left:30px;
}

相对定位：relative

相对于元素原来的位置进行移动，一般不单独使用。

.box{
    position:relative;
    top:0;
    left:0;
}

绝对定位：absolute

子元素相对于具有定位属性的父元素的定位，配合相对定位一起使用。

.parent{
    position:relative;
}
.son{
    position:absolute;
    top:0;
    left:0;
}

//定位中的垂直水平居中
{
    position:absolute;
    //水平居中
    left:0;
    right:0;
    top: 0;
    bottom: 0;
    margin: auto;
}

层级：z-index

通过层级z-index的设置可以调整元素的叠放层次，值越大越在上面层。具有定位属性的元素才可以通过z-index调整层级。

层级默认为0。
取值-1到正无穷的正整数。
层级为-1会出现在文档流元素的下方。

文件路径：

绝对路径：

从根目录开始一级一级往下找，直到找到目标文件。文件，互联网网址。

     <img src="D:\My_dir\computer_dir\壁纸库\ (1).jpg" alt="">  
     <a href="http://www.baidu.com/"></a>

相对路径：

参考物：相对于当前文件说的。

当前文件夹：./
上一级目录：../

背景：

背景色：

透明色，opacity 里面文字也透明

背景图：

引入图片background-image
重复 background-repeat: no-repeat / repeat-x / repeat-y
位置 background-position:center / 百分比 / 像素
大小 background-size:百分比 / cover / contain
- cover 按照宽高中的较小值等比缩放
- contain 按照宽高中的较大值等比缩放

// 通常使用的一种：
background: url(图片路径) no-repeat center/cover

Sprite，图片精灵技术：

一次引入，多次使用，使得下载速度加快。核心技术： background-position

background: url(../img/suningimg.png) -37px 0;

CSS3:

选择器：

新增属性选择器
结构伪类选择器
UI伪类选择器

box-sizing:

content-box
border-box

border-radius：圆角

box-shadow：阴影

transition：过渡

控制动画的运动过程，时间，属性，方式，延迟

transition-property 动画的属性，all，属性
transition-duration 动画的时间
transition-delay 动画的延迟
transition-timing-function 动画的方式（贝塞尔曲线）

2D转换：transform

可以实现平移，缩放，旋转，拉伸。

平移： translate(x,y) translateX()正值向右，负值向左 translateY(30px)正值向下，负值向上
缩放（倍数）：scale(x,y) scaleX(2) scaleY()
旋转（度数）： rotate(50deg)
拉伸 / 斜切（度数）： skew(X,Y) skewX(30deg) skewY()

transform:translate() rotate()

3D转换

媒体查询：@media

滤镜：filter

线性渐变：

从一侧到另一侧的渐变。

background-image: linear-gradient(方向， 颜色1， 颜色2， ...)   浏览器不识别加内核
//方向：单词left, top, right, bottom; 角度
//颜色：透明色
//不均匀的渐变

径向渐变：

从中间到四周的渐变。

background-image: radial-gradient(形状, 颜色1, 颜色2, ...)
//形状：circle：圆形；ellipse：椭圆；
//不均匀渐变
//重复渐变
background-image:repeating-radial-gradient(形状, 颜色1, 颜色2, ...)

字体图标：@font-face

动画：animation

定义动画 @keyframes

@keyframes 动画名称{
    from{
        选择器{
            属性:属性值
        }
        20%{}
        to{}
    }
}
@keyframes 动画名称{
    0%{
        选择器{
            属性:属性值
        }
    }
    20%{}
    100%{}
}

将定义好的动画绑定到相应的选择器上 animation
- animation-name 动画名称
- animation-duration 持续时间
- animation-timing-function 动画方式
- animation-delay 延迟
- animation-iteration-count 动画次数 1, n, infinite (无数次)
- animation-direction 动画是否在下一周期逆向播放 normal 正常播放； alternate 逆向播放
- animation-fill-mode 规定动画对象时间之外的状态 forwards 让动画停止在最终状态
- animation-play-state 动画是否暂停 pause 暂停

移动端开发

移动端开发模式：

web App：手机浏览器中浏览的网页应用。实现跨平台开发；开发效率快。
native App（原生App）：用户体验良好。
Hybrid App（混合App）：外层是native App，内层是web App。在用户体验良好的情况下实现跨平台开发。

视图 viewport：

手机硬件像素为750px，软件为375px

layout viewport默认布局视图

手机出厂硬件决定
visual viewport视觉视口

手机界面看到的视口

ideal viewport理想视口

视觉视口与默认布局视口一致

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
// 前三个1.0，后一个0，代表着不允许缩放

移动端适配方案：

固定布局：

使用固定像素做布局，大屏出现留白。（非主流）
流式布局：

使用百分比布局，计算复杂。（非主流）
响应式布局：

一个页面可以适应各个终端，而不是为每个终端做不同的页面。（跨终端）
rem布局：

根据不同设备的宽度，计算每种设备下面html标签font-size的大小，实现等比例缩放，实现自适应的布局。（移动端适配）
- 添加meta标签，从而进行一个理想视口的设置
- 引入u-reset.css使用rem单位并且清楚浏览器的默认样式
- 在html标签上写rem='750'
- 使用的时候要遵循100px=1rem
flex布局：

弹性盒模型。（移动端适配）

Flex弹性布局

基本概念：

容器：添加了display:flex;属性的父元素叫做容器。
项目：容器的子元素叫做项目。
主轴：容器的水平方向的轴叫做主轴，默认方向从左到右。
交叉轴：容器的垂直方向的轴叫做交叉轴，默认方向从上到下。

容器的属性：

项目的排列方向：flex-direction，决定主轴的方向
- row 主轴在水平方向，从左到右
- row-reverse 主轴在水平方向，从右到左
- column 主轴在垂直方向，从上到下
- column-reverse 主轴在垂直方向，从下到上
项目的包裹方式：flex-wrap ，项目的换行
- nowrap 不换行（默认值）
- wrap 换行
- wrap-reverse 换行反转
项目在主轴方向的对齐方式：justify-content
- flex-start 主轴起点对齐
- flex-end 主轴终点对齐
- center 主轴居中对齐
- space-between 两端对齐
- space-around 项目两侧距离相等
项目在交叉轴方向的对齐方式：align-items 一根轴线
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 中心
- baseline 基线对齐，文字的底部
- stretch 项目没有高会默认为auto,铺满屏幕
项目在交叉轴上的对齐方式：align-content 多根轴线
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心
- space-between 交叉轴两端对齐
- space-around 交叉轴两侧距离相等

项目的属性：

项目的顺序：order ，默认值为0，数值越小越靠前，可以识别负数。
项目的放大比：flex-grow ，默认值为0，即使存在剩余空间也不放大；如果值为1，占据剩余空间。
项目的缩小比：flex-shrink，默认值为1，空间不足，项目缩小；值为0，即使空间不足也不缩小。
项目所占空间大小：flex-basis ,存在剩余空间时，项目占据的主轴空间，flex-basis:300px;。
单个项目在交叉轴上的对齐方式：align-self。
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心
- baseline 基线对齐

响应式：

概念：

一个页面可以适应多个终端，而不是为每个终端去写一个单独的页面。

特点：

优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
根据不同的显示器调整设计最适合用户浏览习惯的页面

缺点：

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性

技术支持：媒体查询@media CSS3

兼容性：ie8及以下不支持

语法：

@media screen and (){
	选择器{
		属性：属性值;
	}
}
//设备名称， 操作符， 条件

两种使用方式：
1. 直接嵌入到样式表@media
2. 在link 中使用media 属性
阀值：
1. 1200px (1170px)
2. 992px (970px)
3. 768px (750px) （auto）

网页性能优化：

减少http请求次数
- 合并文件
- 合并图标
  - 图片精灵
  - 采用iconfont矢量图标 Sprite
  - 采用base64图片转换 http://tool.chinaz.com/tools/imgtobase/
减少网页内容
- 压缩js，css文件
  
  http://tool.oschina.net/jscompress
- 内容优化
- 图片压缩
  
  https://www.picdiet.com/zh-cn picdiet在线压缩 https://zhitu.isux.us/ 智图

浏览器内核：

Trident (-ms-) 微软开发， IE浏览器
Gecko (-moz-) 火狐开发，火狐浏览器
Webkit (-webkit-) 苹果开发，Apple Safari
Blink Google和Opera Software开发，谷歌浏览器
Presto (-o-) Opera开发， Opera前内核（已废弃）

一只阮码猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础内容

本文档适用于『基础知识查缺补漏』，仅供参考。（World Wide Web Consortium，W3C），又称。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李。页面由三部分组成：结构层（html），表现层（css），行为层（js）。html就像画了一只静态的鸟，css就给他赋予了色彩，js得以让他起飞。
复制链接

扫一扫