H5新标签体验

最新推荐文章于 2024-05-31 10:28:00 发布

发疯的man

最新推荐文章于 2024-05-31 10:28:00 发布

阅读量609

点赞数

分类专栏： HTML 文章标签：体验标签

本文链接：https://blog.csdn.net/lzh657083979/article/details/78418562

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

超过容器的文本用省略号代替

p{
   white-space: nowrap;  /*超过父级容器不换行*/
   overflow: hidden;     /*超过的部分隐藏*/
   text-overflow: ellipsis;/*超过的部分用...代替*/
 }
<p>一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本</p>

datalist标签让输入框出现提示栏，并有模糊匹配

    <!--
        input 的list 属性的值必须和 datalist标签的id相对应。绑定关系。
        出现下拉框的值是uption的value值。
    -->
    <input type="text" list="car"/>
    <datalist name="" id="car">
        <option value="宝马">11</option>
        <option value="奥迪">22</option>
        <option value="java">java</option>
        <option value="javascript">javascript</option>
        <option value="C">c</option>
        <option value="c++">c++</option>
        <option value="c#">c#</option>
    </datalist>

下拉框分组

<select name="" id="">
    <optgroup label="中国">
        <option value="tj">天津</option>
        <option value="2">北京</option>
        <option value="3">上海</option>
    </optgroup>
    <optgroup label="食物">
        <option value="4">北京烤鸭</option>
        <option value="5" disabled="disabled">北京烤鸭</option>
        <option value="6">北京烤鸭</option>
    </optgroup>
</select>

这里写图片描述

HTML5 中的input 类型：

1.email
2.url
3.number
4.range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。规定了范围（最大最小值），还可以设置value。
属性min 最小值max 最大值value 当前值，最大最小值规定了一个范围
5.Date
6.search
7.color

HTML5 新增语义化标签

（一）
1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域一般为文章
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details 中的标题
7.time 定义日期或时间
8.ruby 标注拼音
9.mark 标记
10.nav 导航链接
（二）
1.progress 进度标签
value 当前值max 最大值最小值默认为0，不用设置
2.section 文档当中的节或文章
3.video 定义视频

<video controls>
<source src="/i/horse.ogg" type="video/ogg">
<source src="/i/horse.mp4" type="video/mp4">
你的浏览器不支持audio 标签，即使是上面的视频都不能播也会显示个框，不支持是指浏览器不支持video 标签
</video>

目前支持的视频类型，其它格式如avi 需要转换
video/ogg
video/mp4
video/webm （webm 也是一种媒体格式）

4.audio 定义音频
定义方式同vadio
音频的可用类型：
audio/ogg
audio/mpeg

5.source 资源
6.datalist 提示可能的值

<input type="text" list="MyId"/>
<datalist id="MyId">
<option value="苹果"></option>
<option value="橙子"></option>
<option value="梨"></option>
</datalist>

7.embed 引入flash 或插件
定义嵌入的内容，比如插件、flash。它中间不要加内容，和video 不同，会显示出来。

<embed src="demo.swf" type="application/x-shockwave-flash" ></embed>

8.canvas 画布标签

flex自适应样式

注意：必须要有一个父容器，设置为display：flex，然后把子容器设置比例，flex-grow设置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .big{
            display: flex;
        }
        .item1{
            flex-grow: 1;
            background: #000;
        }
        .item2{
            flex-grow: 2;
            background: #00B83F;
        }
        .item3{
            flex-grow: 3;
            background: #316AC5;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>

浏览器内核以及其前缀

根据不同的浏览器内核，css 前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。

Gecko 内核前缀为-moz- 火狐浏览器
Webkit 内核前缀为-webkit- 也叫谷歌内核，chrome 浏览器最先开发使用，safari 浏览器也使用该内核。国内很多浏览器也使用了webkit 内核，如360 极速、世界之窗、猎豹等。
Trident 内核前缀为-ms- 也称IE 内核
Presto 内核前缀-o- 只有opera 采用，但现在opera 使用了由webkit 衍生在blink 内核

发疯的man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5新标签体验

超过容器的文本用省略号代替p{ white-space: nowrap; /*超过父级容器不换行*/ overflow: hidden; /*超过的部分隐藏*/ text-overflow: ellipsis;/*超过的部分用...代替*/ }<p>一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本一段文本</p>data
复制链接

扫一扫