h5 css3笔记

最新推荐文章于 2024-04-19 09:44:52 发布

花江夏树

最新推荐文章于 2024-04-19 09:44:52 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/onepunchmen00/article/details/76024078

版权

本文详细介绍了CSS3的一些新特性，包括input标签的list属性、summary标签、<menu>的简单用法、<rt>和<rp>标签、input在form中的使用规则、<output>的用途、required属性、链接属性、脚本属性、列表属性、margin居中原理、background-clip与background-origin的区别、background-attachment和b-position的设置、多重背景、线性渐变、径向渐变、圆角、box-shadow的使用、border-image属性、2D和3D转换、矩阵变换、过渡效果和动画等。

摘要由CSDN通过智能技术生成

0. 音视频

<video controls width="600" height="600">
    <source src="https://yys.v.netease.com/2018/0725/ebefc466c32aa2c40aede8207956aae8qt.mp4" type="video/mp4">
</video>

<audio autoplay>
    <source src="xxx" type="audio/mp3">
</audio>

1.hgroup弃用

<header>
<h1><a name="Xxx"></a>xxxxx</h1>
<p>xxxx</p>

采用如上方式代替和模拟hgroup，将程序语义化。

2.关于input标签中的list属性

表示输入字段预定义的选例如：

<input placeholder="你手机的品牌" list="phonelist">
<datalist id="phonelist">
     <option value="iphone">iphone</option>
...

3.summary 标签为detail标签的标题.

<details>
            <summary>click me！</summary>
            show something!
        </details>

4.现在所有主流浏览器都不支持的<menu>

简单用法如下

<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>

5.<rt>作用为<ruby>标签内定义字符的解释或发音

<rp>定义不能在浏览器中正确显示的内容

<!--rp为低版本浏览器显示的内容  rt标记注释或者发音等等-->
    <div><ruby>你好啊<rp>(</rp><rt>ni hao a</rt><rp>)</rp></ruby>朋友</div>

6.什么时候<input>要在<form>下面，什么时候不用？

所有向后台提交数据（包括原生和ajax提交）的input都建议用form包裹，

如果只是用来做前台交互效果则不推荐使用form包裹

7。<output>

<output>作用为执行计算然后在output中的元素中显示结果0

<oninput>实时监控

parseInt将输入的字符串解析为数字

<form oninput="totalPrice.value =parseInt(price.value)*parseInt(number.value)">
   <input type="text" id="price" value="5000" >*
   <input type="number" id="number" value="1">=
<output name="totalPrice" for="price number"> </output>
</form>

8.required=“required”属性规定在提交前必须不能为空

9.链接属性

size用法：

<link rel="icon" href="icon.gif" type="image/gif" size="16*16"><!--rel表示链接与当前文档的关系这里是图标-->

url网址 href是超链接

<base>

这是基本的HTML语言。用<base target=_××>来设置这个网页所有链接的目标窗口。也就是说，网页中只要添加<base target=_××>这句，那么所有的超链接
就无须单独设置。最好将这句写在<head>和</head>之间。例如<base target=_blank>表示网页中所有的超链接的目标地址都在新建窗口中打开

增加的超链属性
a:media="" handhelp 对手持设备支持，tv对电视设备进行支持
a:hreflang=“zh” 设置语言为中文
a：ref="external" 设置超链接为外部链接