html5新增语义化标签详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ padding-bottom:100px ; } header{ width: 980px; height: 130px; border: 2px solid dodgerblue; margin: 0 auto; } nav{ width: 980px; height: 40px; border: 5px solid green; margin: 0 auto; } nav a{ display: block; float: left; text-decoration: none; font-size: 20px; text-align: center; line-height: 40px; color: blue; width: 100px; } /*大区域开始*/ #myur{ width: 980px; height: 400px; border: 3px solid blue; margin: 0 auto; } #myur aside{ width: 220px; height: 400px; background: blueviolet; float: left; } #myur article{ width: 750px; height: 400px; background: palegreen; float: right; } footer{ width: 980px; height: 100px; border: 5px solid green; margin: 0 auto; } </style> </head> <body> <!--头部--> <header> 头部用 header 标签 </header> <!--头部结束--> <!--导航条--> <nav> <a href="">首页</a> <a href="">Html/Css</a> <a href="">JavaScript</a> <a href="">jQuery</a> <a href="">PHP</a> <a href="">相关其它</a> </nav> <!--导航条结束--> <!--大区域开始--> <div id="myur"> <!--侧边栏开始--> <!--侧边栏用aside--> <aside> 下拉列表: <br /> <select> <!--用optgroup对下拉列表分组 label标签; 标记--> <optgroup label="云浮"> <option>云城区</option> <option>云安区</option> <option>郁南县</option> <option>新兴县</option> <option>罗定市</option> </optgroup> <optgroup label="肇庆市"> <option>肇庆市</option> <option>端州区</option> <option>鼎湖区</option> <option>广宁县</option> <option>怀集县</option> </optgroup> </select> <!--<progress> 标签标示任务的进度（进程）。 prograss 进步; 前进意思; --> <!--简单理解 prograss 进度条--> <!--max最大值100,value当前值33--> <progress max="100" value="33"></progress> <!--min最小0 max最大100 low小于多少的意思 成度轻的 high大于80 类列一般用来衡量密码强度的那种效果--> <!--value="55"取值是中度的：小于30是轻的，30到80是中的，大于80是大的--> <!--meter计量器; 计量仪 也是进度条，进度条一般用得很少--> <meter min="0" max="100" low="30" high="80" value="55"></meter> </aside> <!--侧边栏结束--> <!--article 表示显示文章内容区域标签--> <article> <h1>丈夫在家打游戏不管任何事, 说是为了教好孩</h1> <!--time这个标签用来指定发表文章内容的日期--> <!--属性pubdate：指示<time>元素中的日期/时间是文档（或最近的前辈<article>元素）的发布日期--> 发表时间:<time pubdate="2018.04.27">2018.04.27</time> <!--属性datetime: 规定日期、时间，否则，由元素的内容给定日期、时间。--> <!--非当前时间用datetime声明--> <!--<time datetime="2020.06.06">2020.06.06</time> 2020年大家看奥运会呀 --> <!--section 字面上理解为“块” 、“部分”。在html5网页中表现的意思跟字面理解差不多，即部分、块、模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。--> <section> <h2>在家打游戏</h2> <p>不能这样打游戏的......《永恒之塔》从一月末开始便逐步回升，通过春节版本、春季活动等不断推出的内容重获玩家好感。据悉，4月末该游戏将推出樱花庆典，这将让其市场占有率进一步上涨。</p> </section> <section> <h2>对于理解他们作为玩家乃至消费者的角色至关重要</h2> <!--mark 突出显示文本，标注一下 默认是加黄色，这个是可以改的--> <!--ins：用下划线定义已经被插入文档如的文本，简单理解用下划线去强调的--> <!--del 理解为加删除线标注--> <p>中国的核心PC玩家每周<mark>花42个小时玩游戏</mark>，大部分都<ins>喜欢在高端PC上玩</ins>竞技类的游戏；与此同时，<del>核心手游玩家</del>每周玩游戏时长平均为25个小时，他们钟爱的游戏类型则是智能手机上玩法更为复杂的手游作品。</p> </section> </article> </div> <!--大区域结束--> <!--底部开始--> <!--底部专门的标签footer--> <footer> 底部专门的标签footer <!--address字面理解为“地址”，在html5中，它用于文档或者文章作者或拥有者的联系信息。注意，这里放的不是字面上理解的“地址”，而是指“联系信息”，可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。--> <address>广东云浮市郁南县什么街门牌号56号</address> <!--code表示用于标识程序代码 原样展示出来的代码 页面中放一些代码用code--> <code>arler('你好');</code> </footer> <!--底部结束--> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知