首页 › HTML论坛 › html5

七暮雨 發表於 2020-10-9 15:55:00

html5

<div>&nbsp;&lt;!--&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;H5不是新语言，而是html第五次重大修改的第五个版本。</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;首页主流的浏览器都支持H5，（谷歌，火狐，苹果）&nbsp;IE9以上支持H5</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;改变了用户与文档的交互方式，多媒体，video，audio&nbsp;canvas</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.&nbsp;增加了其他的新特性，语义特性，本地存储特性，网页多媒体，二维三维，特效（过度，动画）</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.&nbsp;相对于h4</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;进步：抛弃的一些不常用的标记的属性。</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;新增了一些标记和属性--表单&nbsp;视频&nbsp;音频等···</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;从代码结构而言，h5的网页结构更简洁。</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&gt;</div>
<div>&nbsp;</div>
<div>&nbsp;html5 简单布局</div>
<div>
<div>
<div>&nbsp;</div>
<div>&lt;style&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;.container&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>



<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;header&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;50px;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;red;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>



<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;nav&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;36px;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;black;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#fff;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>



<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;main&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;500px;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;rebeccapurple;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>



<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;main&gt;article&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;70%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;salmon;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>



<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;main&gt;aside&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;30%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;green;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>



<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;footer&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;hotpink;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;40px;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&lt;/style&gt;</div>



<br>
<div>&lt;body&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;头部&lt;/header&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;导航&lt;/nav&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;article&gt;左边&lt;/article&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aside&gt;右边&lt;/aside&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/main&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;底部&lt;/footer&gt;</div>
<div>&lt;/body&gt;</div>
<div>&nbsp;</div>
<div>表单type属性</div>
<div>
<div>
<div>&lt;form&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名:&nbsp;&lt;input&nbsp;type="text"&nbsp;placeholder="用户名"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:&nbsp;&lt;input&nbsp;type="password"&nbsp;placeholder="密码"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱:&nbsp;&lt;input&nbsp;type="email"&nbsp;placeholder="邮箱"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间:&nbsp;&lt;input&nbsp;type="date"&nbsp;placeholder="时间"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话:&nbsp;&lt;input&nbsp;type="tel"&nbsp;placeholder="电话"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网址:&nbsp;&lt;input&nbsp;type="url"&nbsp;placeholder="网址"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入商品:&nbsp;&lt;input&nbsp;type="search"&nbsp;placeholder="商品"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数字:&nbsp;&lt;input&nbsp;max="10"&nbsp;min="5"&nbsp;value="8"&nbsp;type="number"&nbsp;placeholder="数字"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;范围:&nbsp;&lt;input&nbsp;type="range"&nbsp;max="100"&nbsp;min="1"&nbsp;value="1"&nbsp;placeholder="范围"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颜色:&nbsp;&lt;input&nbsp;type="color"&nbsp;placeholder="颜色"&gt;&lt;br&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;提交&nbsp;--&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="submit"&nbsp;value="提交"&gt;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;</div>
</div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>



</div>


</div><br><br>
来源：https://www.cnblogs.com/cheng520/p/13786204.html

查看完整版本: html5