zoukankan      html  css  js  c++  java
  • H5新标签

    1. H5新标签

    语义标签:

    <article>定义文章</article>
    <aside>定义文章侧边栏</aside>


    <figure>定义一组媒体对象以及文字内容</figure>
    <figcaption>定义figure的标题</figcaption>

    布局页面时用的语义标签:
    <nav>定义导航</nav>
    <header>头部</header>
    <section>定义文档中的区段 区域</section>
    <footer>尾部</footer>


    input其他的类型:
    1. text 文本输入框
    2. password 密码
    3. button 按钮
    4. checkbox 复选
    5. radio 单选
    6. submit 提交
    7. reset 重置
    8. file 文件
    9. email 输入邮箱地址 检测@
    10. url URL地址
    11. number 只能输入数字 还有e
    12. range 范围 默认0~100
    required 必须填写
    placeholder 占位符


    功能标签:
    <video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>
    <audio src="">定义音频</audio>
    <mark>标记</mark>
    <iframe src="" frameborder="0">内嵌网页框架</iframe>
    <canvas>定义图形提供画布</canvas>


    2.流式布局
    即百分比布局。(宽度, 高度,边距,rem,定位值)
    尺寸百分比 = 目标元素的宽度(高度)/ 父级的宽高
    定位值百分比 = 目标元素的定位值 / 父级的宽高
    margin和padding / 父级的宽度


    em rem
    em: 针对父级来设置自身
    rem: 针对html


    3.媒体查询
    可以根据不同屏幕尺寸,动态的修改网页布局以及样式,是响应式网站不可缺少的一部分
    only 可以省略 多个条件用and相连
    @media only screen and (min-500px) and (max-700px){......}
    link:
    <link rel="stylesheet" href="" media="screen and (min-500px) and (max-700px)">


    响应式网站:由两种办法完成响应式网站, 流式布局和媒体查询,通常情况下相辅相成共同完成响应式网站。


    4.前缀
    腾讯:国内唯一有自己内核的公司,X5。(X5的浏览器内核是基于早起的webkit内核开发出来的,而后自己优化。QQ浏览器 微信)
    -webkit-: 谷歌前缀,谷歌内核(猎豹 360 safari)
    -o-: 欧朋 (已经摒弃自己的内核,转战谷歌的阵营)
    -ms-: 微软 ie 斯巴达
    -moz-: 火狐 ff

    https://www.tongbiao.xyz/
  • 相关阅读:
    [DB] 数据库的连接
    JS leetcode 翻转字符串里的单词 题解分析
    JS leetcode 拥有最多糖果的孩子 题解分析,六一快乐。
    JS leetcode 搜索插入位置 题解分析
    JS leetcode 杨辉三角Ⅱ 题解分析
    JS leetcode 寻找数组的中心索引 题解分析
    JS leetcode 移除元素 题解分析
    JS leetcode 最大连续1的个数 题解分析
    JS leetcode 两数之和 II
    JS leetcode 反转字符串 题解分析
  • 原文地址:https://www.cnblogs.com/tongbiao/p/6626055.html
Copyright © 2011-2022 走看看