html5和css3笔记

最新推荐文章于 2024-07-13 11:46:18 发布

糕手糕糕

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量1.4k

点赞数 25

分类专栏：前端笔记文章标签： html5 css3 笔记

本文链接：https://blog.csdn.net/Guard_56/article/details/135859379

版权

前端笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

HTML

小标签

加粗标签：b 或者 strong

倾斜标签：i 或者 em

删除线标签：s 或者 del

下划线标签：u 或者 ins

图片

替换文本：alt=“ ”

提示文本：title=“ ”

链接打开方式

默认当前窗口 target=“_self ”

新窗口打开：target=“_blank ”

在当前页面的一个盒子里打开另一个页面的内容 iframe标签

把index.html网页打开到 iframe盒子中
<div class="layui-body">
    <!-- 内容主体区域 -->
    <iframe name="fm" src="" frameborder="0"></iframe>
</div>

<!-- 导航栏 -->
<a href="index.html" target="fm">首页</a>

点击a 要跳转的网页渲染到 div盒子里的iframe标签中
iframe标签中的name名要和 a标签的页面打开方式相同

# 快速定位网页到中的模块

<a href="#title">标题</a>

<div id="title">
    <!-- 标题区域 -->   // 点击a 立即跳转到标题模块
</div>

表格标签

表格标签：table

表格中的头（第一行）：th *里面文字会加粗显示

表格中的行：tr

每行中的格：td

表格结构标签：收纳作用

用于表格的头部：thead

用于表格的主体：tbody

用于表格的底部：tfoot

表格行内样式

对齐方式：align=“ ”

单元格边框厚度：border=“1”

单元格边框与其内容之间的距离：cellpadding=“ ”

单元格之间的距离：cellspacing=“ ”

宽度：width=“ ”

高度：height=“ ”

合并相邻边框：border-collapse：collapse ； *css样式

input

进度条：range

搜索框：search

手机号码框：tel

颜色选择框：color

邮箱框：email

网页地址框：url

日期框：date

时间框：time

文本框：text

密码框：password

单选按钮框：radio

多选按钮框：checkbox

隐藏域：hidden

文件域：file

提交按钮：submit

重置按钮：reset

普通按钮：button *双标签

大文本框：textarea *双标签

包裹标签：

<label > <input type="radio"> 男</label>

下拉表单：

 <select> <option>1</option>               
          <option selected="selected">2</option>  </select>

selected=“selected” 默认显示这个

表单域： form

* 用户信息的收集和传递一般注册页面都写在表单域里

<form action="服务器程序的url地址" method="数据的提交方式" target='打开链接的方式' name="名称"> 

数据的提交方式: get  不安全 会把账户密码显示在地址栏
数据的提交方式: post  安全

</form>

input 行内属性

提示文本：placeholder=“ “

默认选中：checked=“checked”

元素名字：name=“ ” *必须有相同的name名字才能实现多选一

数值信息：value=“ ”

最大输入几个字符：maxlength=“ ”

上传多个文件：multiple=“multiple” *配合文件域使用

文本只读不能修改：readonly

不记录输入过的内容：autocomplete=“off”

input框不可编辑： disabled=“disabled”

input进度条属性：min、max、value、step(步长)

视频音频标签

音频标签：audio

视频标签：video

行内样式：

无限循环：loop=“loop”

视频自动播放：autoplay=“autoplay“

静音播放：muted=“muted“

显示播放控件：controls=“controls“

语义化标签

头部：header

导航栏：nav

左侧盒子：article

左侧内容：section

右侧盒子：aside

底部：footer

css

禁止选中文字

user-select :none;

input css样式

input框垂直：input[type=“”] {appearance:slider-vertical}

提示文本的颜色：input::placeholder { color：颜色 }

输入框边框隐藏：input{ outline：none；}

改输入框的背景颜色或字体颜色：input:focus { } *只在鼠标点中时生效

background-color ：背景颜色， color：字体颜色

文本域可以拉大的去处方法:textarea{ resize：none； }

textarea文本框更改选中时的边框颜色

textarea{outline: none;} // 先去掉默认的显示边框
textarea:focus {  // 再添加显示边框
    border:1px solid #559afe;
}

文字样式

字体倾斜或正当：font-style

倾斜：italic

正当：normal

加下划线或去掉线：text-decoration

下划线：underline

去掉钱：none

删除线：line-through

文本开头缩进：text-indent *1em = 16px = 1格

字与字间距:letter-spacing

文字溢出

white-space：nowrap； *文字强制一行

overflow：hidden； *溢出的部分隐藏

text-overflow：ellipsis； *溢出的部分用…省略号显示

文字两行的话：去掉强制一行加：

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

行内块图片和文字对齐方式：

vertical-align：middle ；图片和文字垂直居中对齐

vertical-align：bottom ；底部对齐可让图片底部无缝隙

链接样式

链接没访问过显示的样式：a : link { }

访问过的链接显示的样式：a : visited { }

鼠标放在链接上显示的样式：a : hover { }

鼠标点下还没抬起时显示的样式：a : active { }

隐藏显示

溢出隐藏：owerflow：hidden；

文字框里加滚动条：owerflow：scroll；

文字溢出自动显示滚动条：owerflow：auto；

隐藏元素：visibility：hidden； *但保留原来位置

显示元素：visibility：visible；

透明度：opacity: ;

隐藏元素：display：none； *不占位置

显示元素：display：block；

盒子转换

转为块：display：block；

转为行内块：display：inline-block；

转为行内：display：inline；

背景样式：图片颜色大小

插入图片：background-image：url（）

背景图片不铺满：background-repeat：no-repeat

横着铺满：background-repeat：repeat-x

竖着铺满：background-repeat：repeat-y

图片调整位置：background-position：px px;

背景图像固定：background-attachment：；

固定：fixed

滚动：scroll

背景连写样式：background：颜色 url（） no-repeat 位置

背景色透明度：background：rgba（0，0，0，0到1）；

背景大小: background-size: ; 如果只写宽高度默认auto

background-size: cover;

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

边框样式

合并相邻边框：border-collapse：collapse ；

边框样式：border-style: ；

实线边框：solid

虚线边框：dashed

点线边框： dotted

边框弧度：border-radius: ;

边框图片：裁剪

border-image-source: url("images/border.jpg"); // 边框图片的路径
border-image-slice: 50 60 70 80; //裁剪的尺寸 上右下左 不加单位
border-image-width: 50px 60px 70px 80px; // 图片边框的宽度  *加单位
border-image-repeat: round; // 图片边框样式  平铺 拉伸 环绕

// 组合写法
border-image: url("images/border.jpg") 167/20px round;

stretch 拉伸（默认）

repeat 平铺 // 从边框的中心向两侧开始平铺，会出现不完整的图片。

round 环绕 // 是完整的使用切割后的图片进行平铺。

阴影

文字加阴影：text-shadow：

盒子加阴影： box-shadow

inset 阴影类型为内阴影（盒子阴影）

outset 阴影类型为外阴影不添加默认为这个（盒子阴影）

阴影横着多长：h-shadow

阴影竖着多长：v-shadow

阴影模糊度：blur

阴影尺寸：spread

阴影颜色：color

连写顺序：阴影类型横px 竖px 模糊px 尺寸px 颜色 *模糊度可省略

box-shadow: 0 0 40px #21ebff; *40px 为尺寸，模糊度省略不写

// 可实现一个月亮
div {
       height: 24px;
       width: 24px;
       border-radius: 20px;
       background: #303136;
       box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -5px 0 0 #a3dafb;
 }

定位

定位：position：

静态定位：static

相对定位：relative

绝对定位：absolute

固定定位：fixed

其他样式

li 去掉小圆点：li {list-style: none;}

透明：transparent

选第一个：:first-child { }

选最后一个：:last-child { }

选第二个：:nth-child(2){ }

括号里写even是选偶数的 odd是奇数 n是全部

2n 是偶数 2n+1是奇数 5n是5的倍数 n+5从第五个开始选到最后 -n+5 是前5个

透明度：opacity: ;

取消样式：unset

flex: unset;

页面变成灰色：filter：grayscale(1) 灰度滤镜

* {
  margin:0;
  padding:0;
  filter:grayscale(1);
  // 兼容多种浏览器
  -webkit-filter:grayscale(1);
  -moz-filter:grayscale(1);
  -ms-filter:grayscale(1);
}

鼠标样式

鼠标样式：cursor: ；

小手样式：pointer

移动十字架样式：move

文本样式：text

禁止样式：not-allowed

制作小三角

直角三角形：

<div>
width: 0;
height: 0;
border-color: transparent blue transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;</div>

倒三角:

<div>
width: 0;
height: 0;
border：10px solid transparent
border-top-color：想要的颜色
margin：想要的位置;</div>

伪元素添加盒子

div::before { content:’ ’ } *添加在最前

div::after { content:’ ’ } *添加在最后

css3新特性

单独选取方便使用
input[type=text] { color }

div[class=] { } 同上
div[class^=c] { } 就是有好几个div class=c1 c2 c3的这种c开头全部选中
div[class$=a ] { } 这种是以class=xxx-a 的这种a结尾的全部选中

过渡

过渡：transition

延时：transition-delay: .5s;

transition：宽 0.5s ，高 0.5s ，颜色；

transition：all .5s ;

引入

引入css

网站说明

关键字

2D转换

2D转换之移动： *不会影响其他盒子

以自身位置移动值 px 或% %是以自身的宽度高度
transform：translate（x值, y值）

2D转换之旋转：值度

transform：rotate( 值deg)

2D转换之中心点：值%或px 或方位名词都可

transform-origin：x y;

2D转换之缩放: 值倍数

transform：scale( )

可连写位移需放在最前
transform: translate(100px,50px) rotate(360deg) scale(1.5);

3D转换

3D空间：给父盒子加，里面的子盒子所设置的3d效果都生效*不加的话子盒子3d效果失效

transform-style:preserve-3d;

3D旋转：

transform：rotateX( 值deg)
transform：rotateY( 值deg)
transform：rotateZ( 值deg)

动画

@keyframes 名称 { }

动画的使用：

animation-name: 名称;

动画的持续时间：

animation-duration: 5s;

速度曲线：匀速

animation-timing-function: linear;

动画播放次数： infinite 无限重复

animation-iteration-count: 5;

动画进行完后的保持100%当时的位置：

animation-fill-mode: forwards;

动画简写：

animation：名称持续时间运动曲线何时开始播放次数是否逆向播放结束后状态；

结束后状态，名称；可第二个动画

播放状态：鼠标经过时动画停止

：hover{
animation-play-state: paused;
}

视距：给对象的父盒子加

perspective: px;

渐变

线性渐变：linear-gradient

径向渐变：radial-gradient

背景渐变：

background-image: linear-gradient(
transparent , rgba(0,0,0, 0.6));

*transparent 为透明与rgba 可随意更改颜色

渐变可旋转

background-image: linear-gradient(78deg, rgb(86, 94, 214), rgb(89, 150, 255));

文字渐变

.box {
    background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);  // 盒子渐变背景色
    -webkit-background-clip: text; // 裁剪盒子 只留文字区域
    background-clip: text;  // 裁剪盒子 只留文字区域
    color: transparent; // 文字透明
  }

视口标签

------ ### 弹性布局

display:flex;

主轴对齐方式：justify-content：；

1.flex-start 从头开始排序

2.flex-end 从尾部开始排序

3.center 居中

4.space-between 使子盒子的间距相同（平均分配父盒子剩余的空白长度）

5.space-around 给每个子盒子相同的外间距（相当于每个子盒子都有相同的外边距）

6.space-evenly 使盒子内的间距全部相同（父盒子到子的间距和子到子的间距都相同）

侧轴对齐方式：align-items：；

1.flex-start 从头开始排序

2.flex-end 从尾部开始排序

3.center 居中

单独控制某个盒子：控制谁就给谁写

align-self：；

改变主轴方向：

flex-direction：column；(垂直方向)

主轴换行：

flex-wrap：wrap；可以让主轴的盒子父盒子长度不够装不下了自动换行

align-content：；调整换行后每行的对齐方式

1.flex-start 从头开始排序

2.flex-end 从尾部开始排序

3.center 居中

4.space-between 使子盒子的间距相同（平均分配父盒子剩余的空白长度）

5.space-around 给每个子盒子相同的外间距（相当于每个子盒子都有相同的外边距）

6.space-evenly 使盒子内的间距全部相同（父盒子到子的间距和子到子的间距都相同）

弹性伸缩比：

flex: 整数数字; 就是在给子盒子设了flex:2；后会将这个子盒子的宽度加上父盒子剩余的空白部分的宽度平均分成2份给这个盒子，有多个盒子设了flex 就把设flex的盒子的宽度加上父盒子剩余宽度按每个盒子设的flex 的总和等比例给这些盒子

flex-grow:整数数字; 就是把父盒子剩余宽度按多个盒子的flex-grow 值得总和等比例给那些盒子（与flex不同的是不会把子盒子自身的宽度计算在内，只把父盒子剩余宽度等比例发放）

网格布局

display:grid;

对齐方式同flex

grid-template-columns: 1fr 1fr 2fr; 改成几列布局（多少列就多少个数值，fr 标识占几份）

grid-template-columns: repeat（12 , 50px）; 就是12列每列50px宽

grid-template-rows : 50px 100px 200px; 每行的高度

grid-auto-rows : 100px; 所有未指定高度的行设置高度

column-gap: 10px; 每列的间距

row-gap: 24px; 每行的间距

gap: 24px; 每列和每行的间距

grid-column: span 2; 跨列（相当于1，2个盒子合并需要把2盒子删掉）跟谁合并就删谁，谁要合并这个样式就写给谁

grid-row: span 2; 跨行

grid-area: span 2 / span 2; 跨行跨列

rem 适配

rem：相对单位，相对于HTML标签字号计算尺寸
1rem=html的字体大小添加了适配rem后字体大小=页面宽度的1/10

引入js文件就可根据视口大小自动调整为1rem=视口宽度的1/10 px

媒体查询：
@media (width:320px;) {
heml{
font-size：32px
} }

vw/vh

vw : 相对单位，根据当前视口宽度计算尺寸

1vw = 1/100视口宽度

变量：

定义变量： @变量名：值；例如 @vw:17.07vw;

使用变量： width: (100 / @vw);

less

导入：

引入其他less文件引入到谁里面就写到谁里面
@import：‘ 文件路径’；

禁止导出：

禁止less文件导出css文件
less文件第一行添加：// out：false

手机端nav导航栏可滑动：

子盒子比父盒子宽给父盒子加
overflow: auto;
&::-webkit-scrollbar {
display: none;
}

兄弟选择器

相邻兄弟选择器 +

<style>
      h2 + h1 {
         color: yellow;
     }
 </style>

<h2>1111</h2>
<h1>2222</h1>   // 黄色

通用兄弟选择器 ~

<style>
     h2 ~ p {  // 选择的是所有的兄弟p
        color: orange;
     }
</style>

<h2>1111</h2>
<h1>2222</h1>
<p>3333</p>   // 橙色
<p>4444</p>   // 橙色

input:checked 配合兄弟选择器可实现点击事件

div {
    width: 20px;
    height: 20px;
 }
input:checked+div {
     background-color: orange;
}

<label>
    <input type="checkbox">
    <div></div>
</label>

图标渐渐描边效果

1.下载svg图片
2.用vscode打开图片
3.复制svg图标的 svg标签代码 相当于一个图片标签

<svg t="1679535949336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4708" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
         /* 这里起个类名 */
        <path class="icon1"
            d="M598.354747 67.542626c-48.148687 0-90.130101 32.905051-98.960808 79.437576 0 0-14.312727 72.882424-21.798787 99.090101-12.308687 43.196768-55.363232 90.944646-86.522829 106.188283-23.531313 11.636364-110.99798 11.765657-116.350707 11.765656H155.707475c-32.762828 0-59.384242 26.479192-59.384243 59.384243v475.022222c0 32.762828 26.479192 59.384242 59.384243 59.384242h548.033939c88.126061 0 163.025455-64.452525 176.135758-151.647676l45.873131-305.713132c10.834747-71.809293-44.8-136.274747-117.423838-136.274747H673.254141s20.066263-66.469495 30.228687-178.669899c5.081212-56.837172-35.167677-110.99798-94.280404-117.152323-3.620202-0.54303-7.227475-0.814545-10.847677-0.814546zM333.705051 898.288485V421.533737c38.917172-2.534141 66.999596-8.016162 83.574949-16.316767 43.726869-21.669495 99.633131-81.040808 117.281616-143.088485 7.899798-27.681616 21.39798-96.155152 23.001212-104.184243 3.47798-17.92 20.596364-31.159596 40.649697-31.159596 1.603232 0 3.206465 0.129293 4.822627 0.271516 28.211717 2.947879 43.326061 29.698586 41.32202 52.686868-9.360808 103.912727-27.823838 166.503434-28.082425 166.904243l-23.130505 76.489697h215.182223c17.519192 0 33.564444 7.356768 45.071515 20.596363 11.507071 13.239596 16.316768 30.228687 13.640404 47.618586L821.294545 797.052121c-8.830707 58.569697-58.181818 101.094141-117.423838 101.094142h-370.165656v0.142222z m-177.997576 0v-475.022222h118.626262v475.022222H155.707475z m0 0"
            p-id="4709"></path>
    </svg>

<style>
    .icon1 {
        /* 填充颜色  none不填充 */
        fill: none;
        /* 图形外轮廓颜色 就是描边颜色 */
        stroke: #333333;
        /* 图形轮廓宽度 px */
        stroke-width: 3;
        /* 两端的形状 */
        stroke-linecap: round;
    }

    .icon:hover {
        animation: move 1s;
    }

    @keyframes move {
        0% {
            /* 线条长度和间距 */
            /* stroke-dasharray: 10px,10px; =>  - - - -  线条长度为10 之间的间距为10  */
            stroke-dasharray: 0, 600px;
        }

        100% {
            stroke-dasharray: 600px, 0;
        }
    }
</style>

滚动条隐藏

 // 隐藏滚动条
::-webkit-scrollbar {
     display: none;
}

糕手糕糕

关注

25
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
html5和css3笔记

html5和css3笔记
复制链接

扫一扫

专栏目录

html5和css3笔记

HTML

小标签

加粗标签：b 或者 strong

倾斜标签：i 或者 em

删除线标签：s 或者 del

下划线标签：u 或者 ins

图片

替换文本：alt=“ ”

提示文本：title=“ ”

链接打开方式

新窗口打开：target=“_blank ”

在当前页面的一个盒子里打开另一个页面的内容 iframe标签

# 快速定位网页到中的模块

表格标签

表格标签：table

表格中的头（第一行）：th *里面文字会加粗显示

表格中的行：tr

每行中的格：td

表格结构标签：收纳作用

用于表格的头部：thead

用于表格的主体：tbody

用于表格的底部：tfoot

表格行内样式

对齐方式：align=“ ”

单元格边框厚度：border=“1”

单元格边框与其内容之间的距离：cellpadding=“ ”

单元格之间的距离：cellspacing=“ ”

宽度：width=“ ”

高度：height=“ ”

合并相邻边框：border-collapse：collapse ； *css样式

input

进度条：range

搜索框：search

手机号码框：tel

颜色选择框：color

邮箱框：email

网页地址框：url

日期框：date

时间框：time

文本框：text

密码框：password

单选按钮框：radio

多选按钮框：checkbox

隐藏域：hidden

文件域 ：file

提交按钮：submit

重置按钮 ：reset

普通按钮：button *双标签

大文本框 ：textarea *双标签

包裹标签：

下拉表单 ：

selected=“selected” 默认显示这个

表单域： form

* 用户信息的收集和传递 一般注册页面都写在表单域里

input 行内属性

提示文本：placeholder=“ “

默认选中：checked=“checked”

元素名字：name=“ ” *必须有相同的name名字才能实现多选一

数值信息：value=“ ”

最大输入几个字符：maxlength=“ ”

上传多个文件：multiple=“multiple” *配合文件域使用

文本只读 不能修改 ：readonly

不记录输入过的内容 ：autocomplete=“off”

input框不可编辑 ： disabled=“disabled”

input进度条属性：min、max、value、step(步长)

视频 音频标签

音频标签：audio

视频标签：video

无限循环：loop=“loop”

视频自动播放：autoplay=“autoplay“

静音播放：muted=“muted“

显示播放控件：controls=“controls“

语义化标签

头部：header

导航栏：nav

左侧盒子：article

左侧内容：section

右侧盒子：aside

底部：footer

文件域：file

重置按钮：reset

大文本框：textarea *双标签

下拉表单：

* 用户信息的收集和传递一般注册页面都写在表单域里

文本只读不能修改：readonly

不记录输入过的内容：autocomplete=“off”

input框不可编辑： disabled=“disabled”

视频音频标签

提示文本的颜色：input::placeholder { color：颜色 }

background-color ：背景颜色， color：字体颜色

加下划线或去掉线：text-decoration

文字两行的话：去掉强制一行加：

vertical-align：middle ；图片和文字垂直居中对齐

vertical-align：bottom ；底部对齐可让图片底部无缝隙

隐藏显示

文字溢出自动显示滚动条：owerflow：auto；

背景样式：图片颜色大小

插入图片：background-image：url（）

图片调整位置：background-position：px px;

背景连写样式：background：颜色 url（） no-repeat 位置

背景色透明度：background：rgba（0，0，0，0到1）；

背景大小: background-size: ; 如果只写宽高度默认auto

虚线边框：dashed