HTML5中常用的结构标签
article 文章
header 头部
nav 导航
section 区域
asIDe 侧边栏
hgroup 区块的相关信息
figure 定义一组内容及标题
figcaption 定义figure元素的标题
footer 底部
dialog 对话框
使用习惯：
header/section/footer > asIDe/article/figure/hgroup/nav > div
embed可插入flash文件，但flash已经逐渐被淘汰，不建议使用
meter状态标签，可以定义电压
optimum是标准状态
low与high之间呈现绿色，其余呈现黄色
<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>
自动计算百分比
="0.75">75%</>
有步长的进度条
progress ="30" max="100"progress>
不断加载的进度条
>dataList为input定义下拉列表
<!DOCTYPE HTML>HTML lang="en"head> Meta charset="UTF-8"Title>demobodyinput placeholder="请选择手机品牌" List="phoneList"dataList ID> option ="iphone">iphoneoption="samsung">samsung="huawei">huawei="oppo">oppo="htc">htcdataListHTML>
details定义元素的详细内容，配合summary
detailssummary>HTML5p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 [1-2] >
ruby和rt进行拼音的注释
我们来ruby>夼rt>kuang一个话题>
兼容浏览器的写法：
rp>(><>Kuang>)>
mark黄色选中效果
>妈妈叫我回家的时候顺路买一盒mark>牛奶>，需要很新鲜的那种。>
output表单计算
form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)"type="number" ID="num1"* ="num2"= output name="sum" for="num1 num2"outputform>
date pickers在移动端效果比较好
week兼容性不好
datetime兼容性不好，推荐用datetime-local
time用来设置时间（小时和分钟）；
month用来设置年和月；
date用来设置年月日；
datetime用来设置年月日和时间；
email:="email" name="email"br url:="url"="url" tel:="tel"="tel" number:="number" date:="date"="date" month:="month"="month" week:="week"="week" time:="time"="time" datetime:="datetime"="datetime" datetime-local:="datetime-local"="datetime-local" range:="range" min="1"="10" search:="search"="search" color:="color"="color">>
autocomplete属性规定form或input域拥有自动完成功能，该属性适用于<form>标签和<input>标签
autofocus自动获取焦点
multiple多选，适用于email和file，email中不同邮箱用,隔开
action="lesson2_1 autocomplete.HTML" autocomplete="on"="text" autofocus="autofocus" placeholder="您好，请在这里输入您的用户名！"="off" multiple="multiple"="file"="submit">
<link>标签中，sizes属性可以规定被链接资源的尺寸的大小
link rel="icon" href="icon.gif" type="image/gif" sizes="16x16"base href="http://localhost" target="_blank">
script:
defer 页面已完成加载后再执行脚本
async 一旦脚本可用，则异步执行
script async="async"="text/JavaScript" src="async.Js"scriptdefer="defer"="defer.Js">
ol有序列表倒序
>olol start="2" reversed="reversed"li>HTML>HTML5>CSS>CSS3>JavaScriptol>
HTML页面布局demo:
demo.HTML---------------------------------------->HTML5="stylesheet"="style.CSS"> headerdiv class="container"> a ="index.HTML"img src="images/logo.png"anav> ="active">Home="#">Course>Actual>Plan>FAQ>Notesdivsection ="banner"ulli ="active"="images/banner/banner1.jpg"="left"="images/banner/banner3.jpg"="right"="images/banner/banner2.jpg"section="main"asIDeh1>Recent sampdldt>Hyper Text MarkuP Languagedd="images/Course/05_05.png">HTML is the standard markuP Language used to create web pages and its elements form the building blocks of all websites.>Cascading Style Sheets="images/Course/06_04.png">Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g.,Fonts,colors,spacing) to Web documents.="images/Course/09_07.png">JavaScript is a high-level,dynamic,untyped,and interpreted programming language.>AngularJs="images/Course/02_09.png">AngularJs is an open-source web application framework mainly maintained by Google and by a community of indivIDuals and...article>Welcome to >Massive Open Online Course!>We provIDe the latest kNowledge to help you cope with the changing world!="images/article.jpg">We hope that all the students who love the Internet can be more convenIEnt access to learning resources,using the Internet thinking to change our learning.>Focus on IT skills education MOOC,consistent with the development trend of the Internet down to earth's MOOC. We are free,we only teach useful,we concentrate on education.footer>copyright © 2019 test.com All Rights Reserved.span="images/icon/weichat.png"="images/icon/sina.png"="images/icon/qq.png">
style.CSS------------------------------------------/* All tag */* { Font-family: Arial; Font-size: 14px; margin: 0; padding: 0; border: none; }a { text-decoration: none; }ul { List-style: none; }/* header */header { position: relative; height: 80px; background: #000; }header:after { position: absolute; bottom: 0; left: 0; wIDth: 100%; height: 7px; content: ''; background: #d6d6d6; }header > .container { position: relative; z-index: 1; wIDth: 1200px; margin: 0 auto; }header > .container > a { display: block; float: left; margin: 5px 25px; }header > .container > nav { float: right; }/* nav */nav > a { Font-size: 24px; line-height: 73px; display: block; float: left; wIDth: 110px; height: 73px; text-align: center; color: #fff; }nav > a:nth-child(1) { background: #433b90; }nav > a:nth-child(2) { background: #017fcb; }nav > a:nth-child(3) { background: #78b917; }nav > a:nth-child(4) { background: #feb800; }nav > a:nth-child(5) { background: #f27c01; }nav > a:nth-child(6) { background: #d40112; }nav > a:hover,nav > a.active { padding-bottom: 7px; }/* banner */.banner { position: relative; background: #eaeaea; }.banner:after { position: absolute; bottom: 0; left: 0; wIDth: 100%; height: 6px; content: ''; background: #d6d6d6; }.banner > ul { position: relative; wIDth: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }.banner > ul > li { position: absolute; wIDth: 610px; height: 300px; overflow: hIDden; }.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; wIDth: 960px; height: 460px; margin: auto; border: 1px solID #fff; Box-shadow: 0 30px 140px 22px rgba(0,.35); }.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; Box-shadow: 0 3px 7px 0 rgba(0,.35); }.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; Box-shadow: 0 3px 7px 0 rgba(0,.35); }.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }/* main */.main { position: relative; wIDth: 1200px; height: 473px; margin: 34px auto 0; }.main h1 { Font-size: 30px; Font-weight: lighter; margin-bottom: 23px; }.main h1 > samp { Font-size: 30px; color: #7c7c7c; }.main > asIDe { float: left; wIDth: 450px; }.main > asIDe > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }.main > asIDe > dl > dt { position: absolute; top: -1px; left: 92px; Font-size: 16px; Font-weight: bold; line-height: 16px; text-decoration: underline; }.main > asIDe > dl > dd:first-of-type { position: absolute; left: 0; }.main > asIDe > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }.main > article { float: right; wIDth: 720px; overflow: hIDden; }.main > article > p,.main > article > img { margin-bottom: 20px; }/* footer */footer { position: relative; background: #000; }footer:before { position: absolute; z-index: -1; top: -6px; left: 0; wIDth: 100%; height: 6px; content: ''; background: #d6d6d6; }footer > .container { wIDth: 1200px; height: 64px; margin: 0 auto; }footer > .container > p { line-height: 64px; float: left; color: #fff; }footer > .container > span { float: right; margin: 14px 40px; }footer > .container > span > img { margin-left: 4px; opacity: .7; }footer > .container > span > img:hover { opacity: 1; cursor: pointer; }
HTML页面布局demo2:
>HTML="demo.CSS"table ="outer-table"<!-- 顶部 --> theadtrtd="img/logo.png" alt="logo" 主体 tbody> table> > 左侧 --> td wIDth="12%"> p ="left-p"> >商品管理>评价管理>咨询管理b>全部订单>已完成订单>待处理订单>今日物流>月考核>季度考核>年度考核 右侧 ="88%"="inner-table"> > 查询： 至 ="order" class="inner-table" rules="all"colspan="2">宝贝信息>订单数量>单价>买家>下单时间>实付款>订单 *** 作="img/txue.png">2019新款个性男女潮牌&暮春之行文化衫>2>120>小明>2019-2-21 21:54>240>待付款> 页脚 tfoot>2019-12-29 ©test.comdemo.CSS-----------------------------------*{margin:0;padding:0;}table{wIDth:100%;background-color: #fff;}#outer-table{background-color: #abcdef;}#outer-table tfoot td{text-align:center;height:50px;line-height: 50px;}#outer-table img{wIDth: 150px;margin-left: 10px;}.left-p{margin-left:10px;margin-top:-250px;}.left-p span{line-height:2em;}.inner-table{border:2px solID #ccc;}.inner-table tr td{padding:10px;}#order tr td{text-align:center;}#order tr td img{wIDth:50px;}总结
以上是内存溢出为你收集整理的HTML5基础-新增标签+新增属性+布局案例全部内容，希望文章能够帮你解决HTML5基础-新增标签+新增属性+布局案例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）