前端(八):HTML、CSS相关

简介: HTML、CSS相关

H5 新特性

  1. 语义化标签
    header footer section nav aside article
  2. 增强型表单
    input 的多个 type
  3. 新增表单元素
    datalist keygen output
  4. 新增表单属性
    placehoder required min max
  5. 音频视频
    audio video
  6. 其他
    canvas 地理定位 拖拽
  7. 本地存储
    • localStorage
      • 数据上限5MB左右(根据浏览器不同会有所区别)
      • 无论打开还是关闭标签浏览器数据均保留
    • sessionStorage
      • 数据上限5MB左右(根据浏览器不同会有所区别)
      • 打开同源页面或刷新页面数据保留
      • 关闭浏览器数据清空
      • 打开或关闭新的浏览器窗口数据会被删除
    • cookie
      • 数据上限4KB左右(根据浏览器不同会有所区别)
      • 打开同源页面或刷新页面数据保留
      • 关闭浏览器数据清空
      • 打开或关闭新的浏览器窗口数据会被保留
  8. 新事件
    onresize ondrag onscroll onmousewheel onerror onplay onpause
  9. WebSocket
    单个 TCP 连接上进行全双工通讯的协议

    CSS权重 256进制

    | 属性 | 权重 |
    |:--------:| -------------|
    | !important | 无穷 |
    | 行间样式 | 1000 |
    | id | 100 |
    | class/属性选择器/伪类:hover | 10 |
    | 标签选择器/伪元素:after | 1 |
    | 通配符 | 0 |

    CSS 兼容内核

    -moz- 代表FireFox浏览器私有属性
    -ms- 代表IE浏览器私有属性
    -webkit- 代表safari、chrome浏览器私有属性
    -o- 代表opera浏览器私有属性

    CSS3 新特性

  10. 选择器 - 伪类和伪元素
    a:link {
         color: #FF0000} /* 未访问的链接 */
    a:visited {
         color: #00FF00} /* 已访问的链接 */
    a:hover {
         color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {
         color: #0000FF} /* 选定的链接 */
    ::before {
         } /* 选择器在被选元素的前面插入内容和定义css,使用 content 属性来指定要插入的内容。 */
    ::after {
         } /* 选择器在被选元素的后面插入内容和定义css,使用 content 属性来指定要插入的内容。 */
    :first-letter /* 选择该元素内容的首字母 */
    :first-line /* 选择该元素内容的首行 */
    ::selection /* 选择被用户选取的元素部分 */
    
    AI 代码解读
  11. 背景和边框
    背景:
    background-size:规定背景图片的尺寸(cover:填充;100% 100%:拉伸)
    background-origin:规定背景图片的定位区域
    对于 background-origin 属性,有如下属性:
    背景图片可以放置于 `content-box`、`padding-box` 或 `border-box` 区域
    
    AI 代码解读
    边框:
    border-radius:圆角
    box-shadow / text-shadow:阴影
    border-image:边框图片
  12. 文本效果
    text-shadow 向文本添加阴影
    text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
    text-outline 规定文本的轮廓
    text-overflow 规定当文本溢出包含元素时发生的事情
    text-wrap 规定文本的换行规则
    word-break 规定非中日韩文本的换行规则
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
    text-decoration 文本修饰符:overline、line-through、underline 分别是上划线、中划线、下划线
    @font-face 自定义字体
    渐变 CSS3新增了渐变效果,包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)
  13. 2D/3D 转换
    2D 转换(transform)
    | 属性 | 描述|
    |--------:| :-------------|
    | translate() | 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。 transform: translate(50px, 100px); |
    | rotate() | 元素顺时针旋转给定的角度。若为负值,元素将逆时针旋转。transform: rotate(30deg); |
    | scale() | 元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数,也可以一个值(宽高)。transform: scale(2,4); |
    | skew() | 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。transform: skew(30deg, 20deg); |
    | matrix() | 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0); |
    3D 转换
    | 属性 | 描述|
    |--------:| :-------------|
    | rotateX() | 元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); |
    | rotateY() | 元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg); |
    | perspective | 规定 3D 元素的透视效果 |
  14. 动画、过渡
    过渡效果(transition)

    使页面变化更平滑,以下参数可直接写在 transition 后面

    | 属性 | 描述|
    |--------:| :-------------|
    | transition-property | 执行动画对应的属性,例如 color,background 等,可以使用 all 来指定所有的属性。 |
    | transition-duration | 过渡动画的一个持续时间 |
    | transition-timing-function | 在延续时间段,动画变化的速率,常见的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier |
    | transition-delay | 延迟多久后开始动画 |
    动画(animation)

    先定义 @keyframes 规则(0%,100% | from,to)
    然后定义 animation,以下参数可直接写在 animation 后面

    | 属性 | 描述|
    |--------:| :-------------|
    | animation-name | 定义动画名称 |
    | animation-duration | 指定元素播放动画所持续的时间长 |
    | animation-timing-function | ease linear ease-in ease-out ease-in-out cubic-bezier(, , , ): 指元素根据时间的推进来改变属性值的变换速率,即动画的播放方式 |
    | animation-delay | 指定元素动画开始时间 |
    | animation-iteration-count | infinite number指定元素播放动画的循环次数 |
    | animation-direction | normal alternate: 指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为 normal 时,动画的每次循环都是向前播放;另一个值是 alternate,规定动画在下一周期逆向地播放(来去播放) |
    | animation-play-state | running paused :控制元素动画的播放状态 |

  15. 多列布局
    | 属性 | 描述|
    |--------:| :-------------|
    | column-count | 规定元素应该被分隔的列数 |
    | column-gap | 规定列之间的间隔 |
    | column-rule | 设置列之间的宽度、样式和颜色规则 |

  16. 用户界面

    新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

    | 属性 | 描述|
    |--------:| :-------------|
    | resize | both none both horizontal vertical |
    | box-sizing | 属性可设置的值有 content-box、border-box 和 inherit |
    | content-box | 是W3C的标准盒模型,元素宽度 = 内容宽度 + padding + border:意思是 padding 和 border 会增加元素的宽度,以至于实际上的 width 大于原始设定的 width |
    | border-box | 是ie的怪异盒模型,元素宽度 = 设定的宽度,已经将 padding 和 border 包括进去了,比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破,但是使用 border-box 就可以轻松完成 |
    | inherit | 规定应从父元素继承 box-sizing 属性的值 |
    | outline-offset | 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓 |

  17. 清除浮动方法 如何解决margin垂直塌陷问题(触发父节点的bfc)

    额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐

    <div class="box">
       <div class="box01">box01</div>
       <div class="box02">box02</div>
       <div class="clear">额外标签法</div>
    </div>
    .clear{
       clear:both;
    }
    
    AI 代码解读
    优点:通俗易懂,方便
    缺点:添加无意义标签,语义化差
    
    AI 代码解读

    父级添加overflow属性(父元素添加overflow:hidden)(不推荐
    通过触发BFC方式,实现清除浮动

    .box{
          
      overflow: hidden;
    }
    
    AI 代码解读
    优点:代码简洁
    缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
    
    AI 代码解读

    使用after伪元素清除浮动(推荐使用

    .clearfix:after{
          /*伪元素是行内元素 正常浏览器清除浮动方法*/
       content: "";
         display: block;
         clear:both;
     }
     .clearfix{
          
         *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
     }
    
    AI 代码解读
    优点:符合闭合浮动思想,结构语义化正确
    缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.
    
    AI 代码解读

    使用before和after双伪元素清除浮动

    .clearfix:after,
    .clearfix:before{
          
         content: "";
         display: block;
     }
     .clearfix:after{
          
         clear: both;
     }
     .clearfix{
          
         *zoom: 1;
     }
    
    AI 代码解读
    优点:代码更简洁
    缺点:用zoom:1触发hasLayout.
    
    AI 代码解读
  18. haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性,有两种状态:true或false。

    当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。

    默认触发hasLayout的有如下HTML标签:

            html,body,table,tr,th,td,img,hr,input,button,select,textarea,fieldset,frameset,frame,iframe
    
    AI 代码解读

    可以触发hasLayout的有如下CSS属性:

            display:inline-block
            height/width:除了auto
            float:left/right
            position:absolute
            writing-mode(IE专有属性,设置文本的垂直显示):tb-rl
            zoom(IE专有属性,设置或检索对象的缩放比例):除了normal
    
    AI 代码解读

    IE7专有的触发hasLayout的CSS属性

            min-height/max-height/min-width/max-width:除none
            overflow\overflow-x\overflow-y:除visible
            position:fixed
    
    AI 代码解读

    bfc解决margin塌陷

    .box01 {
          
    width: 200px;
    height: 200px;
    margin-top: 60px;
    background-color: #000;
    /* position: absolute; */
    /* overflow: hidden; */
    /* display: inline-block; */
    /* float: left; */
    }
    
    AI 代码解读
目录
打赏
0
0
0
0
25
分享
相关文章
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问