html5_01_标签和变化

1.html5 声明

<!DOCTYPE html>

css js + H5_Api

2. 布局标签

header, footer, section, nav, article , aside , hgroup, figure, figcaption, dialog

header

footer

aside 京东左侧的雪碧图分类列表
article

nav
section

hgroup h1-h6标题统一规划
figure 定义多媒体内容视频音频画布
figcaption figure 元素的标题

dialog 对话框
-->

使用原则:

1. header / footer / section / aside / article 互相不进行嵌套

2. header/footer/section 做大块切割， div/figure 小块切割
-->

<!-- 多媒体标签

audio
video
source

audio 标签的api可以更改样式但是要使用 js
<audio src="./001.mp3" controls="controls" loop="-1">您的浏览器不支持h5</audio>

<audio autoplay="autoplay">
<source src="./hello.mp3" type="audio/mpeg"> audio/mpeg是转码格式
</audio>

video 标签
<video autoplay="autoplay" controls="controls" >
<source src="./world.mp4" type="video.mp4">
</video>

-->

canvas 标记定义图片

embed 定义外部的可交互的内容或插件
<embed src="./game.swf" width="1024" height="768"> </embed>

<!--状态更新 _ 有兼容性问题

meter 实施状态显示气压温度表 chrome opera
progress 任务过程: 安装加载 chrome firefox opera

-->

有兼容性问题 datalist details

<input type="" placeholder="请选择你的国际" name="" list="country">
<datalist id="country">
<option value="Chinese">中国</option>
<option value="English">英国</option>
<option value="American">美国</option>
</datalist> firefox opera

<details open="open" > chrome

兼容性很差的标签

注释标签
<ruby>英文<rt>yingwen</rt></ruby>
hello <br> <ruby> 英文 <rp>（<rp><rt>yingwen</rt><rp>）<rp></ruby -- rp放在rt外面

mark标记标签
所有主流没问题 ie9+
<p>nishi <mark>king</mark> nishi</p>

output 标签

keygen 表单的加密
time标签基本都不支持

h5 标签语义变化
hr 也表示段落结束不是水平线表现还是一条线
small 作为批注使用
strong 表示重要性

布局

header section footer
和搜索引擎之间的关系
语义化标签
轻量化css

li 标签不易被收录
<samp> 浅色化标签

codes:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title> html5 tags</title>
  5 
  6     <style type="text/css">
  7         
  8         footer{
  9             height:50px;
 10             line-height: 50px;
 11             text-align:center;
 12 
 13             background: #abcdef;
 14             
 15             font-size: 24px;
 16             font-weight:blod;
 17             color:#696969;
 18         }
 19 
 20     </style>
 21 
 22 </head>
 23 <body>
 24 
 25 
 26     <header>
 27 
 28             <div>logo</div>
 29             <nav>
 30                 <a href="">首页</a>
 31                 <a href="">介绍</a>
 32                 <a href="">案例</a>
 33                 <a href="">合作</a>
 34                 <a href="">联系我们</a>
 35             </nav>
 36 
 37     </header>
 38 
 39 
 40 
 41     <section>
 42             <hgroup>
 43                 <h1>笑话</h1>
 44                 <h3>author: silvercell </h3>
 45                 <h4> 有一小偷把我的国产山寨手机偷走，被我... ... </h4>
 46             </hgroup>    
 47 
 48             <aside>
 49                 <a href="">场景一</a>
 50                 <a href="">场景二</a>
 51                 <a href="">场景三</a>                
 52             </aside>
 53 
 54             <article>
 55                 有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！
 56 
 57                 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。
 58 
 59                 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他还在店里卖东西。有人奇怪地问：“老板，您不是已经把店卖给别人了吗?”店主说：“没有，是我结婚了。”
 60             </article>
 61     </section>
 62 
 63 
 64 
 65     <section>
 66         
 67             <figure>
 68                 <figcaption>笑话大全集锦</figcaption>
 69                 <div class="video"></div>
 70             </figure>
 71 
 72     </section>
 73 
 74 
 75 
 76     <section>
 77                 <dialog>
 78                     <dt>老师！</dt>
 79                     <dd>2=2=?</dd>
 80                     <dt>stu:</dt>
 81                     <dd>2 -- 答对了！</dd>
 82                 </dialog>    
 83     </section>
 84 
 85     <footer>
 86         copyright@silvercell
 87     </footer>
 88 
 89 
 90 
 91 --audio--
 92 
 93     <!-- <audio  src="./07.mp3" autoplay="autoplay" loop="-1" controls="controls">浏览器不能播放</audio> -->
 94 
 95 
 96     <!-- <audio  autoplay="autoplay" controls="controls">
 97         <source src="http://other.web.ra01.sycdn.kuwo.cn/d96c0e9c83c7f9a86ce91fff200217d3/5987eeea/resource/n2/128/29/62/3466097810.mp3" type="audio/mpeg">
 98     </audio>
 99  -->
100 
101     <!-- <audio  src="http://other.web.ra01.sycdn.kuwo.cn/d96c0e9c83c7f9a86ce91fff200217d3/5987eeea/resource/n2/128/29/62/3466097810.mp3" autoplay="autoplay" loop="-1" controls="controls">浏览器不能播放</audio>
102  -->
103 
104 
105 
106 --video--
107 <!-- <video src="./1.mp4" autoplay="autoplay"  controls="controls"></video> -->
108 
109 
110 <!-- <video controls="controls" width=:"1024" height="768">    
111         <source src="./1.mp4" type="video/mp4">
112 </video> -->
113 
114 
115 
116 --embed--
117 
118 <!-- <embed src="./game.swf" width="1024" height="768"></embed> -->
119 
120 svg --
121     img
122     embed 引入
123 
124 
125 
126 --meter--
127 
128 <!-- <meter value="550" min="100" max="700"  low="330"  high="500" optimum="360" > -->
129 <!-- <meter value="0.2"></meter> -->
130 
131 
132 progress---
133 <!-- <progress value="303" max="900"> -->
134 <!-- <progress max="1700"> -->
135 
136 <input placeholder="选择手机" list="phonelist">
137 <datalist id="phonelist">
138     <option value="iphone">iphone8</option>
139     <option value="sanxing">sumglax9</option>
140     <option value="huawei">华为meta9</option>
141 </datalist>
142 
143 
144 
145 
146 
147 </body>
148 </html>
149 
150 
151 
152 <!-- 
153 
154     datalist
155 
156     details
157 
158  -->
159 
160 
161 <input type="" placeholder="请选择你的国际" name="" list="country">
162 <datalist id="country">
163     <option value="Chinese">中国</option>
164     <option value="English">英国</option>
165     <option value="American">美国</option>
166 </datalist>
167 
168 
169 <details open="open" >
170     
171 hello nihao !!!
172 
173 
174                 
175 有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！ 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！ 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！ 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！ 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！ 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他有一小偷把我的国产山寨手机偷走，被我发现，我就追，追的途中从小偷身上掉下一个iphone，我捡起来就往回跑，小偷发现之后又到回来追我。可惜我跑得快，他没追到！ 医科大学的朋友告诉我，早上闹钟响了，眼睛睁开要起床，可又不自觉闭上，再睁开就可能要迟到了。经过多年研究推断，他发现这是眼睛得了自闭症。 一天，古玩店的老板在店门口贴出一张告示：“本店已易主。”可是，人们依旧看见他
176 </details>
177 
178 
179 
180 
181 
182 
183 
184 
185 
186 
187 
188 
189 -------------------------------<br>
190 
191 menu
192 <!-- <menu  type="toolbar">
193     
194     <li>
195             <menu label="FILE">
196                 <button  type="button">New</button>
197                 <button  type="button">NEE</button>
198                 <button  type="button">WEE</button>
199             </menu>
200     </li> 
201 
202     <li>
203             <menu label="edit">
204                 <button  type="button">nNew</button>
205                 <button  type="button">nNEE</button>
206                 <button  type="button">nWEE</button>
207             </menu>
208     </li>
209 
210 </menu> -->
211 
212 
213 
214 mark 标签
215 <p>nishi <mark>king</mark> nishi</p>
216 
217 
218 
219 
220 <form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)"  >
221     <input type="text" id="price" value="5000">*
222     <input type="number" id="number" value="1" name="number">
223     =<output name="totalPrice"  for="price number"></output>
224 </form>

posted @ 2017-08-07 20:55 silvercell 阅读(901) 评论(0) 收藏举报

刷新页面返回顶部

FrontWay 前路

前路与后路。

html5_01_标签和变化