美文网首页我爱编程程序员菜鸟前端工程师
html+css学习笔记014-H5新标签0浏览器兼容

html+css学习笔记014-H5新标签0浏览器兼容

作者: Mr柳上原 | 来源:发表于2018-06-01 22:52 被阅读3次

    Author:Mr.柳上原

    • 付出不亚于任何的努力
    • 愿我们所有的努力,都不会被生活辜负
    • 不忘初心,方得始终

    看到这个标题

    突然想起以前在前端群里和一位大佬的对话

    我说:
    ‘ 如果能够统一浏览器多好,那样就不用再考虑兼容性问题了 ’

    大佬回复:
    ‘ 如果不需要做兼容性开发,前端的价值不到现在的一半 ’

    <!DOCTYPE html> <!-- 文档类型:标准html文档 -->
    
    <html lang='en'> <!-- html根标签 翻译文字:英文 -->
    
    <head> <!-- 网页头部 -->
    
    <meat charset='UTF-8'/> <!-- 网页字符编码 -->
    
    <meat name='Keywords' content='关键词1,关键词2'/>
    
    <meat name='Description' content='网站说明'/>
    
    <meat name='Author' content='作者'/>
    
    <title>前端59期学员作业</title> <!-- 网页标题 -->
    
    <link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
    
    <style type='text/css'> /*内部样式表*/
    
    /* 浏览器兼容 */
    box-shadow:0px 2px 10px #CCC;
    -webkit-box-shadow:0px 2px 10px #CCC; /* 谷歌内核 */
    -moz-box-shadow:0px 2px 10px #CCC; /* 火狐内核 */
    -ms-box-shadow:0px 2px 10px #CCC; /* ie内核 */
    
    </style>
    
    </head>
    
    <body> <!-- 网页主干:可视化区域 -->
    
    <!-- 
    H5新标签:标签语义
    1.使页面结构更加清晰,增强可读性
    2.有利于爬虫获取有效信息,有利于seo优化
    3.有利于传递信息
     -->
    <header> </header> <!-- 网页头部标签 -->
    
    <nav> </nav> <!-- 网页导航栏 -->
    
    <section> </section> <!-- 网页模块 -->
    
    <article> </article> <!-- 网页中结构完整的模块 -->
    
    <aside> </aside> <!-- 网页侧边栏 -->
    
    <footer> </footer> <!-- 网页尾部 -->
    
    <hgroup>
    <h1> </h1>
    <h2> </h2>
    </hgroup> <!-- 网页标题组合 -->
    
    <figure>
    <figcaption>
    图片标题
    </figcaption>
    <img src=' ' alt=' '/>
    </figure> <!-- 网页图片组合 -->
    
    <meter min='0' max='100' low='30'  high='80' optimum='20' value='50'> </meter> <!-- 网页数据条:low最低值 high最高值 optimum最优值 -->
    
    <input type='text' list='vallist'> 
    <datalist id='vallist'>
    <option value='u1'> </option>
    <option value='u2'> </option>
    </datalist> <!-- 网页选项表单列表 -->
    
    <details>
    <summary> </summary>
    <p> </p>
    </details> <!-- 网页中某个文档部分的引用 属性值:open打开 -->
    
    <dialog open> </dialog> <!-- 网页对话栏 open必须要写 自带绝对定位 -->
    
    <progress max='100' value='20'> </progress> <!-- 网页进度条 -->
    
    <address> </address> <!-- 网页地址栏 -->
    
    <p> <time>12:00</time> </p> <!-- 网页时间标签 -->
    
    <p> <mark>做</mark> </p> <!-- 网页重点标注标签 -->
    
    </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:html+css学习笔记014-H5新标签0浏览器兼容

        本文链接:https://www.haomeiwen.com/subject/viklsftx.html