B站pink老师HTML+CSS笔记

阿胜不会秃

已于 2023-01-01 15:28:48 修改

阅读量3k

点赞数 18

文章标签： html 前端 css

于 2022-07-20 20:26:09 首次发布

本文链接：https://blog.csdn.net/m0_56428225/article/details/125385994

版权

HTML部分

浏览器内核

web标准

vscode的一些插件推荐

标题标签

记住h1标题最大就行

段落和换行标签

<br />不会有垂直间距

文本格式化标签

图片标签及路径

<img src ="" alt="" title="" width="" />

如果出现多个上一级可以这样写
<img src = "../../.."/>

超链接标签

内部链接，需要注意所写的网页与你要跳转的网页的路径问题。
下载链接，<img src = "img.zip">,或者是可执行文件.exe

锚点链接，里面只能加ID，用类选择器不行的！

注释

单行注释 Ctrl+/
多行注释 Ctrl + shirt +/

特殊字符

表格

合并单元格

无序列表

去掉里面的小圆点，后面会用到
list-style：none

有序列表

自定义列表

表单

input

<input type = "file" />用来上传文件

在单选按钮<input type = "radio" name = ""/>,必须带有name，否则可以多选

label

select下拉元素

textarea标签

注册页面代码

<!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>注册页面</title>
</head>

<body>
    <form action="xx.php" name="注册" method="post">
        <h4>青春不常在，抓紧谈恋爱</h4>
        <table width="600px">
            <tr>
                <td>性别</td>
                <td><input type="radio" name="sex" id="man" checked="checked"><label for="man"><img src="../images/man.jpg"
                            alt="" >男</label>
                    <input type="radio" name="sex" id="woman"><label for="woman"><img src="../images/women.jpg"
                            alt="">女</label>
                </td>
            </tr>

            <tr>
                <td>生日</td>
                <td><select name="year" id="">
                        <option value="">--请选择年--</option>
                        <option value="">1999</option>
                        <option value="">2000</option>
                        <option value="">2000</option>
                        <option value="">2001</option>
                    </select>
                    <select name="month" id="">
                        <option value="">--请选择月--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                    </select>
                    <select name="day" id="">
                        <option value="">--请选择日--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                    </select>
                </td>
            </tr>
            <!-- 所在地区 -->
            <tr>
                <td>所在地区</td>
                <td><input type="text" value="北京思密达"></td>
            </tr>
            <!-- 婚姻状况 -->
            <tr>
                <td>婚姻状况 </td>
                <td><input type="radio" name="merry" checked>未婚<input type="radio" name="merry">已婚<input type="radio"
                        name="merry">离婚</td>
            </tr>
            <!-- 学历 -->
            <tr>
                <td>学历</td>
                <td><input type="text" value="小学"></td>
            </tr>
            <!-- 喜欢类型 -->
            <tr>
                <td>喜欢的类型</td>
                <td><input type="checkbox">妩媚的
                    <input type="checkbox">可爱的<input type="checkbox">小鲜肉<input type="checkbox">老腊肉<input
                        type="checkbox">都喜欢
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td> <textarea name="information" id="" cols="30" rows="4">自我介绍</textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="免费注册"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#">我是会员，立即登录</a></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>我承诺</h3>
                    <ul>
                        <li>年满18岁，单身</li>
                        <li>抱着严谨的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>


        </table>
    </form>
</body>

</html>

用来查阅知识（菜鸟教程也可以的）

CSS部分

css是层叠样式表（Cascading Style Sheets）的简称，有时我们称为css样式表或级联样式表。css也是一种标记语言

css语法规范

选择器的分类

标签名称 ：{
    标签属性  ：属性值；
    标签属性  ：属性值；
    标签属性  ：属性值；
}

作用：将某一类标签全部选择出来，比如所有的<div>标签。

优点：可以快速为页面的同类型标签设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器

相同的属性写在一个类中，不同的属性写在不同的类中

id选择器

通配符选择器

font字体

让倾斜的文字不倾斜 font-style : normal

如果遇到 font: 12px/28px  'Microsoft YaHei'；
这个说明 12px是字体大小，28px是行高

文本样式

css的引入方式

Emmet语法

例如： div{hello} 就会生成 <div>hello</div>
我个人感觉这个没啥用

自动格式化代码

复合选择器

后代选择器

子选择器(亲儿子)

（1） <style>
        ul>li {
            color: blue;
        }
 </style>
<body>
    <ul>
        <li>1231</li>
        <li>1231</li>
        <li>1231</li>
    </ul>
</body>
里面所有li都会变色
（2）
    <style>
        ul>div {
            color: blue;
        }
    </style>

<body>
    <ul>
        <li><div>123</div></li>
        <li>1231</li>
        <li>1231</li>
    </ul>
</body>
div不会变色，因为div不是亲儿子

并集选择器

伪类选择器

不一定都是a标签，需要添加伪类选择器的标签都可以
例如，div：hover（就是当鼠标经过div时就会触发style）
   <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div:hover {
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>

我是这样记得，买了lv包后，人HAHA大笑

元素类型块元素

p标签里面放块级元素，会多生成一个p标签

行内元素

行内块元素

img、input、td都是行内块

元素转换

转换为块级元素：display：block
转换成行内元素： display：inline
转换成行内块： display：inline-block

元素垂直居中

如何让元素垂直居中，设置行高与高度一致
line-height等于height，就可以实现文字垂直居中
如果行高大于盒子高度，文字偏下。若行高小于盒子高度，文字偏上。

背景颜色

背景图片

背景平铺

图片位置

背景图片滚动

背景半透明

前面三个决定颜色，最后一个决定透明
取到0就是全透明，1就是不透明

CSS三大特性

CSS三大特性：层叠性，继承性，优先级

层叠性

就近原则，谁离结构近就选谁

继承性

优先级

注意：权重没有进位！！！

就算给父级指定样式加上！important，子元素权重继承的也是0

盒子模型

边框

border-style 边框的样式 solid实线边框 dashed虚线边框 dotted点线边框

边框会影响盒子大小

内边距padding

（1）在我们给盒子指定padding值之后，会撑大盒子。
解决方案：用width/height减去多出来的padding就保持盒子大小不变
（2）当我们没有给盒子指定width/height属性时，此时的padding就不会撑开盒子大小

外边距margin

通过外边距让盒子水平居中

外边距margin合并

重点记住给父元素添加 overflow：hidden
这样可以保证盒子大小不变

浮动的盒子不存在外边距合并

清除浏览器的内外边距

ps的一些基本操作

pink老师总结：
（1）布局要用不同的盒子：标签都是有语义的，合理的地方用合理的标签。比如，产品标题用h，文字段落用p
（2）给每个盒子起类名，可以更好地找到这个盒子，也便于后期维修
（3）margin和padding在大多情况下可以混用，两个各有优缺点，根据实际情况选择

CSS3新增属性

圆角边框

border-radius：长度
(通过测试发现，radius和盒子的高height有关，当长度到达高的一半就不再变化)

盒子阴影

文字阴影

浮动

网页的三种排列方式：1、标准流 2、浮动 3、 定位

浮动

浮动除了不占位置外，两个相邻元素之间没有空隙。
如果用行内块的话，两个元素存在空隙，消除不了

浮动注意事项

前面的标准流已经占了位置，后面的元素浮动，只会让后面的元素占浮动元素的位置

清除浮动

为什么要清除浮动呢？
在一些情况，比如商品栏这种，不方便给高度，但是子盒子浮动后不占有位置，最后导致父盒子高度为0，就会影响下面的标准流盒子。

额外标签法

清除浮动的方法有：
1、额外便签法，也称隔墙法，是W3C推荐的做法（！！！）
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素

额外标签法
<style>
    .clear {
        clear: both;
    }
</style>
<div class="box">
    <div class="damao">打毛</div>
    <div class="ermao">二毛</div>
    <div class="clear"></div>
    
</div>

父级添加overflow

父级添加：after伪元素

父级添加双伪元素

常见的图片格式

ps切图方式

css样式顺序（建议）

定位

静态定位

相对定位

注意：相对定位不脱标，他原来的位置继续保留
见下图

绝对定位

子绝父相

固定定位

以浏览器为参照点

粘性定位（了解）

定位叠放

绝对定位居中

定位特性

元素的显示与隐藏

display

/* 当鼠标经过大盒子，里面的.top就显示 */
        .bigbox:hover .top {
            display: block;
        }

visibility

overflow

css高级

精灵图

为什么需要精灵图？
为了有效的减少服务器接收和发送请求的次数，提高网页的加载速度，于是就出现了CSS精灵图
原理：将网页中很多小的图片整合到一张大的图片之中，这样向服务器请求一次就行

background:url() no-repeat x y;
或者单独拿出来 background-position: x y

ps用f8就可以查看所写区域的XY坐标

字体图标

字体图标网站

字体图标的使用

所谓的根目录就是你写的网页的目录，其实不放也行，不过在应用的时候，需要改路径，比较麻烦

将这些代码引入css里面

将你要用到的字体图标引入HTML中，然后在css中给所用到的标签引入字体样式，就完成了

CSS三角

三角的做法：
让盒子的高度和宽度都变为0，任意一个边框给大小和颜色，其他transparent透明

CSS用户界面样式

鼠标样式cursor

轮廓线outline

防止文本域拖动

img与文本的位置

溢出文字省略

margin负值运用

文字围绕图片（浮动元素）

在做文字在右，图片在左的样式，可以巧妙运用浮动，浮动本身产生的起源就是围绕文字，所以图片不会压住文字

行内块的巧妙运用

像这样的，可以给外面盒子添加text-align：center,直接就可以居中

css三角巧妙运用

和之前的三角形差不多，只不过这个需要设置两个边的长度，需要另一个来压
.box {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 30px 10px 0 0;

        }

HTML5新特性（ie9+）

新增语义化标签

多媒体标签

使用<video>元素。尽量使用MP4格式；谷歌还需要添加muted=“muted”
<video src= "" controls="controls"></video>

新增input表单

必须添加form表单域

CSS3新特性（ie9+）

属性选择器

结构伪类选择器

结构伪类选择器前面的标签是你要选择的标签，不是他的父级

nth-child和nth-of-type基本用法差不多，但是执行的顺序不同

伪元素选择器

CSS3盒子模型

CSS3图片模糊

CSS3过渡

谁做过渡就给谁加！！！
如果要使用多个属性，用逗号隔开，
transition：过渡属性 花费时间 运动曲线 何时开始 ，过渡属性 花费时间 运动曲线 何时开始

网站favicon图标

制作网站图标的三个步骤：
（1）先选取你要用的图标，可以是png,jpeg,jpg,gif
（2）登录http://www.bitbug.net，将你所选取的图片转换成ico格式，然后下载下来
（3）在HTML<head></head>标签内引入<link rel="shortcut icon" href="图标的路径" type="image/x-icon">

TDK三大标签SEO优化（了解）

常见模块命名

logoSEO优化

网站上传服务器

http://free.3v.do（这个网站现在需要付费，10块）
1、去可以注册网站账号的地方注册
2、一定要记住自己的主机名，用户名。密码和域名
3、利用相关的ftp软件，将自己的网站上传到远程服务器（这个里面就要用到你的主机名用户、密码啥的）
4、可以在浏览器上通过你的域名访问你的网站了

CSS3 2D转换

translate移动

rotate旋转

旋转中心点transform-origin

缩放scale

scale不会影响下面的盒子！！

transform注意事项

动画animation

动画分为两步；先定义再调用
定义：
@keyframes 动画名 {
       0%{
    width:100px        
    }
    100% {
        width:200px
    }
  }
（里面的0%、100%可以用from和to来代替）
然后在你需要用到的地方调用

透明度opacity

3D转换

translate3d

注意：里面不能省略任意一个属性值，没有就写0
transform:translate3d(0,0,100px)
translateZ一般都是跟px

perspective透视

要想出现效果，必须给父盒子添加perspective

rotate3d

rotateX

totateY

rotateZ

和我们的2d旋转差不多，也可以用左手定则来想一下

3d呈现transform-style

注意这个和perspective一样，都是写给父级元素
如果不加transform-style：preserve-3d就不会呈现3d效果（给父级）

浏览器私有前缀

移动web开发

meta视口标签

物理像素比

我们PC端的1px不一定等于移动端的1px,这之间存在着物理像素比

以上数据来自https://material.io/devices/

多倍图

由于存在着物理像素比，当我们把PC的页面拿到移动端，图片会被放大多倍，导致模糊，所以这儿要用到多倍图

background-size

单位如果写%，而且只写一个，那么另一个等比例缩放（注意：里面的百分比是相对父盒子来说）
cover是完全把盒子覆盖住。不会留白，但是图片可能显示不全；
contain是把宽度或者高度任一一个弄到最大，可能盒子会留白

移动端初始化css

box-sizing

特殊样式

流式布局（百分比布局）

flex布局

flex-direction

justify-content

flex-wrap

flex-wrap默认不换行，如果子盒子宽度大于父盒子，他就会缩小子盒子的宽度

align-items（单行）

align-content（多行）

flex-flow

背景色渐变（带前缀）

rem适配布局

rem

媒体查询

宽度最好从小到大写

响应式布局

Less

less导入另一个less

cssrem

安装完后，打开设置搜cssrem往下滑看到root font size，就可以设置1rem等于多少px了