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/
  • 相关阅读:
    android创建自定义对话框
    激光裁剪的商务名片
    60个响应式的Web设计教程–能够手机访问!
    前端性能优化:使用Data URI代替图片SRC
    40个最好的Tumblr主题
    40个超酷的jQuery动画效果教程
    15个最好的jQuery timeline插件
    60+富有创意的宣传册设计
    Eclipse安装SVN
    EXPLAIN 关键字可以 查看 sql执行 的详细过程
  • 原文地址:https://www.cnblogs.com/tongbiao/p/6626055.html
Copyright © 2011-2022 走看看