html、css

最新推荐文章于 2024-09-12 15:09:42 发布

人如风俊入江林

最新推荐文章于 2024-09-12 15:09:42 发布

阅读量770

点赞数

分类专栏：程序人生文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_63196986/article/details/127095189

版权

程序人生专栏收录该内容

22 篇文章 1 订阅

订阅专栏

前端：

一、web标准

1.什么是web标准

简单理解为网页设计标准,有HTML、css、JavaScript脚本组成。

在这里插入图片描述

作用

统一网页显示

市面上面浏然器众多，有一个标准大家都能运行

二、HTML语言

1.HTML语言

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

超文本：一种文本，但是超越了文本的格式，例如不知可以包括文本，还可以包括图片、音/视频、表格、列表、按钮、输入框等信息
标记语言：不能用于编程，只能通过不同的标签来标记不同的内容格式来实现网页的基本结构骨架

2.HTML语言骨架

<!-- 文档声明：使用的html5 -->
<!DOCTYPE html>
<!-- 当前文档使用的是html实现  lang="en"  -->
<html lang="en">
<!-- 页面头部区域 -->

<head>
    <!-- 字符集编码格式设置--- UTF-8 （万国码）--防止页面中文乱码 -->
    <meta charset="UTF-8">
    <!-- IE浏览器兼容处理 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端视口适配设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>页面标题</title>
</head>
<!-- 页面的显示区域 -->

<body>
    网页基本结构快捷键
    <!-- 
    网页基本结构快捷键 
  （1） ！
  （2）html5
  （3）doc

  html的注释快捷键  

 -->
</body>

</html>

3.网页的基础标签

在这里插入图片描述

标签	语法
标题标签	这是一个标题
段落标签	这是一个段落
图片标签
超链接标签

标题

<h1>这是一个标题</h1>

(1)双标签

(2)大小随着标签序列增大而减小（1-6）

(3)加粗效果

(4)单独成行

段落标签

<p>这是一个段落。</p>

(1)段落之间有间隙

(2)单独成行

图片（img或images文件夹）

<img src="/images/logo.png" width="258" height="39" alt=""/>

单标签

scr放的文件路径

alt替换文本，当图片加载失败时，才显示的文字

width：宽度属性，设置图片的大小时一般只设置宽度或者高度的一种，不建议同时设置宽度和高度

注意事项，路径分类

1）绝对路径：相对于根盘符的路径

2）相对路径：相对于当前页面的路径

超链接

<a href="http://www.bing.com" target="_parent">必应</a>

双标签

页面跳转

跨域传参

注意：

本项目之间的页面跳转

不同项目之间的页面跳转（需要加协议名，比如http）
<a href="http://www.bing.com" >这是一个链接</a>
target=“_parent”：页面在新窗口打开

4.网页常用布局

在这里插入图片描述

三、css基础

1.css的作用是什么

网页美化效果

css层叠样式效果

2.css样式的引入方式

引入方式	使用方式
行内引入	在标签内引入
内部引入	在头部style中引入
外部引入	在外部css文件中引入

（1）行内引入

在这里插入图片描述

（2）内部引入

在这里插入图片描述

（3）外部引入

在这里插入图片描述

注意：在项目开发中，多用外部引入

3.css的基础选择器

选择器的作用是定位到你要改变样式的标签，然后使用css对这个标签的样式进行更改

选择器	用法	作用范围
标签选择器	html标签名{样式属性}	对同类型标签有效
类选择器	.类名{样式属性}	对类名一致的标签有效
id选择器	#id名{样式属性}	对指定id名称的标签有效
通用选择器	*{样式属性}	对当前页面的所有标签元素有效

在这里插入图片描述

4.复合选择器

子类选择器

父类 子类{}

后代选择器

父类>子类{}

伪类选择器

类:hover{}

见名知其意，伪类选择器是创建一个伪类。

即，当鼠标放到你创建了伪类选择器的标签时，该标签的样式就会变为你伪类里的样式

并集选择器

类1,类2,类3,类4...{}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 后代选择器  */
        .box .p1{
            color: aqua;
        }
        
        /* 子代选择器  */
        .box>.p2{
            color: rgb(12, 9, 238);
        }
        
        /* 伪类选择器  */
        .box .p3:hover{
            color: brown;
        }

        /* 并集选择器 */
        .box .p1,.p2,.p3,.p4{
            background-color:thistle;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">这是第一个段落！！！</p>
        <p class="p2">这是第二个段落！！！</p>
        <p class="p3">这是第三个段落！！！</p>


    </div>

</body>
</html>

注意：

①子类选择和后代选择器的不同：

后代选择器可以选择父类标签下的隔代子类，就行它不必从爷爷->爸爸->重孙子，而可以直接爷爷->重孙子

子代选择器是指向直接子代的

5.文本样式属性

css里文本样式属性可细化分字体的样式和文本的样式

在这里插入图片描述

6.显示模式转换

html根据显示模划分，可以分为块元素、行元素、行内块元素

块元素：

独占一行

宽度默认为父元素的宽度，高度有内容撑开

可以设置宽高

例如div、p、h

行元素：

多个行内可以同行显示，当父元素宽度不够时，会自动换行

不能设置宽高，由内容撑开

例如a、span

行内块元素：

一行可以显示多个

并且可以设置宽高

例如input、button

而元素的显示模式转换就是改变元素的默认显示特点，让元素更符合布局要求

属性	效果	使用频率
`display:block`	转换成块级元素	较多
`display:inline-block`	转换成行内块元素	较多
`display:inline`	转换成行内元素	极少

7.盒子模型

css盒子模型就是指，我们写的所有元素都可以看做是被一个盒子包裹

盒子有内容部分，有内容到边框的内边距padding，有边框border，还有外边距

内容body

盒子主题的内容部分，我们写的元素都在这里

内边距padding

内容到边框的距离

边框

注意变宽也可以有宽度

外边距

在两个盒子相邻的时候，他们之间的距离就是两个盒子外边距之和

在这里插入图片描述

调整盒子模型的边距等可以优化网页布局结构

8.浮动模型

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

我们常用来使块元素并排显示或让图片并排显示。

float left;		//左浮动
float right;	//右浮动

在这里插入图片描述

元素浮动了之后会紧贴辅元素的边框，他的兄弟元素浮动的话会紧贴上一个浮动的元素，一旦一行容不下也会换行

在这里插入图片描述

最初浮动效果的发明知识为了让文字能够环绕图片------>字围效果

在这里插入图片描述

浮动布局典型的一种布局方式就是圣杯布局

正常情况下，同为块级元素的left、center、right会自上到下排列，但通过对left设置左浮动

在这里插入图片描述

9.定位position

position属性用来指定一个元素在网页上的位置。

常用的定位方式有三种

1.相对定位

依据原本的位置进行定位，参考点：本身的位置，

然后通过top, left, bottom, right设置值偏移量

 div{
      position: relative;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
    }

2.绝对定位

绝对定位：格式：position:absolute。

参考点，需要我们自己去设置，写一行代码来设置：position:relative（一般写给父元素）

如果没写就会一层一层的往上找，知道body为止

也是通过top、left, right, bottom来设置偏移量

div{
    position: relative;		//给父元素设置相对定位作为p标签绝对定位的参考点
}

div p{
      position: absolute;	//p标签设置绝对定位，参考点为辅元素的位置
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
    }

注意：绝对定位是完全脱离了文档流的

即只与参考点有关，其他任何元素都不会影响它（包括它可以脱离父元素对它的束缚）

多个元素使用绝对定位可能造成元素重叠现象，后面的元素会显示在前面的元素智商

3.静态定位

就是不定位，默认的

10.延时

一般情况下CSS属性的变化是瞬时变化的，但是CSS延时过渡可以控制变化效果，让变化平滑发生。

transition-delay: 2s;

11.平移

可以利用transform属性来设置元素的平移变换

translate(x,y)沿x轴和y轴平移的距离

translateX()沿X轴方向平移

translateY()沿Y轴方向平移

translateZ()沿Z轴方向平移

注意：一个元素只能有一个transform，要把所有的轴的变形写入一个transform,不然下边的样式会覆盖上边的样式。

下面的例子是平移配合伪类实现了一个平移动画效果

box{
            width: 220px;
            height: 300px;
            background-color: #ffffff;
            float: left;
            margin: 0 10px;
            transition: all .3s;
        }
        .box:hover{
            transform: translateY(-10px);	//y轴方向向下平移10px
            px
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        }