前端html是什么？html5、css3是什么？

最新推荐文章于 2022-05-05 09:46:58 发布

置顶

孙德海

最新推荐文章于 2022-05-05 09:46:58 发布

阅读量923

点赞数 1

分类专栏： html5+css3 文章标签： html css 3d html5 css3

本文链接：https://blog.csdn.net/sdh19981202/article/details/108888625

版权

本文介绍了网页的基本构成，重点讲解了HTML的语法和作用，以及CSS的层叠性、定位和BFC概念。深入探讨了HTML5的新特性，如语义化标签和FLEX布局，以及CSS3的2D/3D转换、动画和兼容性问题。

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

网页的构成

网页由结构（html）、表现（css）、行为（javascript）组成。

什么是html？

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

html的语法：

常规标记(双标记)：

<标记名称属性1名=“属性1值” 属性2名=“属性2值” ………… ></标记名>

空标记（单标记）：<标记名属性1名=“属性1值” />

书写结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

post/get、link/@import区别：

post/get区别：
post：
1、隐藏提交方式
2、提交数据大小不受限制
3、用来添加、修改、删除数据
get：
1、显示提交方式，不安全，容易暴露个人信息
2、提交数据大小不超过2k
3、用于查询数据

link/@import区别：

1、语法上：link是html提供的，import是css提供的
2、加载顺序：link当页面结构加载时，css样式同时加载，import当页面结构加载完成后在加载css样式
3、兼容：link不存在兼容问题，import存在兼容问题（IE5以上）
4、操控dom：link可以操控dom，import不可以操控dom

css层叠性：

当一个元素被多个选择器选中时，添加相同的css样式，优先执行的样式是css层叠性

盒子用法：

padding用法：
1、padding：10px(上) 10px（右） 10px（下） 10px（左）
2、用来调整盒子的内容（图片、元素、文本）的位置
3、不会影响背景图位置
    margin用法：
1、margin：10px(上) 10px（右） 10px（下） 10px（左）
2、用来调整自身的位置
3、正数向右下移动，负数向左上移动

文本溢出变省略号设置：

1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;

元素规则：

block规则：可设宽高，独占一行，自上而下
inline规则：不可设宽高，在一行上逐个显示，padding、margin值部分不能正常显示
inline-block：可加宽高，在一行上显示

元素垂直：

1、设置一个兄弟元素（span“任何标签都行”）
2、给兄弟元素添加与父元素同样的高
3、把兄弟元素变成inline-block（内联块元素）
4、给兄弟元素和该元素同时添加vertical-align:middle

定位、锚点：

定位：
absolute特征：脱离文档流且不占位，相对于最近的父元素定位（position：relative），没有则现对于根元素（html）
relative特征：不脱离文档流且站位，相对于自身定位
fixed特征：固定始终相对于浏览器可视定位，脱离文档流且不占位
    锚点：
1)给元素定义命名锚记名
语法：<标签   id="命名锚记名"></标签>
2)命名锚记连接
语法：< a href=" "></ a>
    包含块
现对于有定位的父元素进行定位（为添加绝对定位的元素提供坐标，偏移显示范围的参照物）
    元素在浏览器居中的方法：
1、div{width:200px;height:200px;background:#f00;
    position:fixed;
    left:0;right:0;top:0;bottom:0;margin:auto;}
2、div{width:200px;height:200px;background:#f00;
    position:fixed;
    left:50%;top:50%;margin:-100px 0 0 -100px;}
    透明度：
1、Opacity:0-1（常规）；
2、filter：alpha（opacity=1-100）IE；
3、  background：rgba（0,0,0,0-1）；

高度自适应、坍塌、伪对象：

高度坍塌解决方法：
1、万能清除法：
：after{
content:"";
height:0;
display:block;
clear:both;
overflow:hidden;
visibility:hidden;
}
zoom:none(IE兼容)
2、给父元素声明overflow:hidden;（触发一个BFC）
3、在浮动元素下方添加一个空div，并给钙元素添加声明：div{clear:both; height:0; overflow:hidden;}
    最小高度自适应：
min-height:最小高度
1、min-height:value;
     _height:value;
2、min-height:value;
     height:auto !important;
     height:value;
    伪对象选择符：
1、::after与content属性一起使用，定义在对象后的内容
    语法：选择符：:after{content:"文字"（url（图片
2、::before：:与content属性一起用，定义在对象前的内容
    div::before{content:"在其前放内容";}
3、::first-letter 定义对象内第一个字符的样式。 *(该伪元素只能用于块级元素