css3中一些标签和控件的扩展学习

最新推荐文章于 2022-03-09 22:24:27 发布

咩有猫腻.

最新推荐文章于 2022-03-09 22:24:27 发布

阅读量190

点赞数 1

分类专栏： html、css 文章标签： css3 css html 前端 html5

本文链接：https://blog.csdn.net/DcTbnk/article/details/104644443

版权

html、css 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

一、音频与视频
audio ：音频，双标签

controls : 显示控件
loop : 循环播放
autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题 )
muted : 静音

video : 视频，双标签

    object-fit: cover; 可以让视频覆盖整个父容器。

注：音频和视频的默认控件是隐藏的。
注：如果想做出跟QQ音乐一样的效果：audio标签 + 隐藏控件（默认的，控件的样式用HTML+CSS模拟）+ JavaScript来实现交互功能。
注：在视频中，可以通过 autoplay + muted 可以在静音的情况下进行自动播放。
注：默认情况下，视频是不能进行拉伸的，必须成比例。
注：为了能够支持多个备选文件的兼容支持，可以配合source标签。

二、新的表单控件
以下几个是写在的type里

email  :  电子邮件地址输入框
url  :  网址输入框
number  :  数值输入框
range  :  滑动条
date / month / week  :  日期控件	
search  :  搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
color  :  颜色控件
tel  :  电话号码输入框 ( 跟普通框的区别，在移动端，会调起带数字的软键盘 )
time  :  时间控件

扩展属性

**表单怎么把值传给后端的？**
    name -> 卡
    value -> 钱
    后端根据 name 拿到 value

**传输方式**
     method  :  数据传输方式
                    GET （ 默认的 ）
                    POST 
**传输类型**
     enctype  :  数据传输类型
              application/x-www-form-urlencoded   默认传输的是文本
              multipart/form-data    传输的是文件

**表单的新属性？**
     autocomplete="off" 关闭表单的默认提示信息
     autofocus  :  自动获取焦点
     required : 值不能为空
     pattern : 正则验证 ( JS的内容了 )

三、分栏布局

column-count : 分栏的个数
column-width : 分栏的宽度
    注：column-count column-width 不要一起去写。
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏     取值：num | all

四、伪类与伪元素

#elem:after{}
#elem:hover{}

在 CSS2.1的时候 : #elem:after{} √
在 CSS3的时候 : #elem:after{} ×  #elem::after{} √
                #elem:hover{} √  #elem::hover{} ×
写法区别：
    伪类：  单冒号 -> :hover :active :visited :link ...
    伪元素： 双冒号 -> ::after ::before ...
功能区别：
    伪类只会对操作的元素起作用，相当于样式添加到了元素身上
    而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。

五、link标签的扩展学习

<link rel="dns-prefetch" href="//static.360buyimg.com">
提前去进行域名的dns解析

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
给头标签页添加小图标

六、扩展meta标签 -元信息（辅助信息）

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

注：网页的描述信息，有助于搜索引擎搜索。

<meta name="renderer" content="webkit">
    已哪个引擎去渲染页面。有的浏览器可能有多个引擎，chrome : webkit blink ..
<meta http-equiv="X-UA-Compatible" content="ie=edge">
    ie浏览器已什么方式渲染edge最新版进行渲染，ie9 ie10 -> edge
<meta http-equiv="refresh" content="3" url="">
    每个多长时间可以对浏览器进行刷新
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 
     在指定的时间内，请求资源会走缓存。

七、CSS Hack

我们一直用的就是chrome浏览器，但是还有很多其他浏览器，当然这些浏览器都可以称为高级浏览器。

CSS Hack 解决那些古老的浏览器兼容性问题。

Hack分类
    下载：ieTester工具 , 测试在服务器环境下。

1. CSS属性前缀法
    _ + * \9 \0 ...

2. 选择器前缀法
    *html

3. IE条件注释法

    <!--[if IE]>…<![endif]-->

IE6 BUG 非常多：
    1. IE6高度的最小值是19px ,解决 overflow:hidden;
    2. IE6双边距问题margin和float，解决 display:inline;