pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

利用HTML5做網頁

利用HTML5做網頁 首先,我們要聲明并創建文檔類型,我們不再HTML 4或XHTML 1.0 那樣 PUBLIC -//W3C//DTD XHTML 1.0 Transitional.....聲明,我們可以這樣寫: !DOCTYPEhtml 看看吧,簡單而明顯,不區分大小寫

利用HTML5做網頁

首先,我們要聲明并創建文檔類型,我們不再HTML 4或XHTML 1.0 那樣 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional.....聲明,我們可以這樣寫:
 

  1. <!DOCTYPE html> 


看看吧,簡單而明顯,不區分大小寫。它可以更容易向后兼容。至少可以節省你一些打字的時間。
我們現在已經為HTML 5文檔定義了類型。到目前為止一切順利。現在,這們看看HTML5的新標簽。在我們瀏覽新標簽之前,先看看我們平常是怎么寫的:
 

  1. <html> 
  2.     <head> 
  3.     ...其他...  
  4.     </head> 
  5.     <body> 
  6.         <div id="header"> 
  7.             <h1>CSS3-HTML5之家</h1> 
  8.         </div> 
  9.         <div id="nav"> 
  10.             <ul> 
  11.                 <li>首頁</li> 
  12.                 <li>關于</li> 
  13.                 <li>聯系</li> 
  14.             </ul> 
  15.         </div> 
  16.         <div id=content> 
  17.             <h1>標題</h1> 
  18.             <p>...</p> 
  19.         </div> 
  20.         <div id="footer"> 
  21.             <p>版權信息</p> 
  22.         </div> 
  23.     </body> 
  24. </html> 

 在上面的例子中使用<div>.這是現在很普遍的做法。其目的是雙重的,第一,提供了唯一的身份ID,可以具體的應用于網頁章節。第二,標識作為一種原始的,偽語義結構。每個網站上的ID名字可能都不相同,這時我們就很難明白那些ID是什么意思了。

<header>標簽:
<header>標簽就相當于我們平常用<div id="header">定義的一樣。如果你的網站上還是<div id="header">這樣定義,那我們現在可以用<header>替換它了。

<nav>標簽:
<nav>是導航標簽,就像我們平常用:
<div id="menu"> 
    <ul>
    <li>index</li>
    <li>news</li> 
 ...
    </ul>
</div>
現在用<nav>:
 

  1. <nav> 
  2. <ul> 
  3. <li><a href="index.html">Home</a></li> 
  4. <li><a href="/about/">About</a></li> 
  5. <li><a href="/blog/">Blog</a></li> 
  6. </ul> 
  7. </nav> 

<section>標簽:
<section>標簽里面可以是一組內容或者專題分組,通常有一個起始標記和結束標記。當然了,該標簽也可以嵌套。

<article>標簽:
<article>標簽里面可以是一節內容。

<aside>

<footer>標簽:

<footer>標簽,不說大家也能明白這個是干什么用的了吧。。也可以有多個,通常都是在網站最底部.

讓我們來看看最后的代碼:
 

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.     ...stuff...  
  5.     </head> 
  6.     <body> 
  7.         <header> 
  8.             <h1>My Site</h1> 
  9.         </header> 
  10.         <nav> 
  11.             <ul> 
  12.                 <li>Home</li> 
  13.                 <li>About</li> 
  14.                 <li>Contact</li> 
  15.             </ul> 
  16.         </nav> 
  17.         <section> 
  18.             <h1>My Article</h1> 
  19.             <article> 
  20.                 <p>...</p> 
  21.             </article> 
  22.         </section> 
  23.         <footer> 
  24.             <p>...</p> 
  25.         </footer> 
  26.     </body> 
  27. </html> 

通過代碼,更簡潔更容易理解,對不對?

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 伸缩器_伸缩接头_传力接头-巩义市润达管道设备制造有限公司 | 2025世界机器人大会_IC China_半导体展_集成电路博览会_智能制造展览网 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 丝杆升降机-不锈钢丝杆升降机-非标定制丝杆升降机厂家-山东鑫光减速机有限公司 | 便民信息网_家电维修,家电清洗,开锁换锁,本地家政公司 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 冷热冲击试验箱_温度冲击试验箱价格_冷热冲击箱排名_林频厂家 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 动库网动库商城-体育用品专卖店:羽毛球,乒乓球拍,网球,户外装备,运动鞋,运动包,运动服饰专卖店-正品运动品网上商城动库商城网 - 动库商城 | 防火门|抗爆门|超大门|医疗门|隔声门-上海加汇门业生产厂家 | 越南专线物流_东莞国际物流_东南亚专线物流_行通物流 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | 法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 影视模板素材_原创专业影视实拍视频素材-8k像素素材网 | 耐火浇注料价格-高强高铝-刚玉碳化硅耐磨浇注料厂家【直销】 | 气胀轴|气涨轴|安全夹头|安全卡盘|伺服纠偏系统厂家-天机传动 | 派财经_聚焦数字经济内容服务平台 | 开业庆典_舞龙舞狮_乔迁奠基仪式_开工仪式-神挚龙狮鼓乐文化传媒 | 红酒招商加盟-葡萄酒加盟-进口红酒代理-青岛枞木酒业有限公司 | 圆盘鞋底注塑机_连帮鞋底成型注塑机-温州天钢机械有限公司 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 标准品网_标准品信息网_【中检计量】 | 电磁铁_小型推拉电磁铁_电磁阀厂家-深圳市宗泰电机有限公司 | 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 暴风影音| 河南空气能热水器-洛阳空气能采暖-洛阳太阳能热水工程-洛阳润达高科空气能商行 | 济南品牌设计-济南品牌策划-即合品牌策划设计-山东即合官网 | 铝镁锰板_铝镁锰合金板_铝镁锰板厂家_铝镁锰金属屋面板_安徽建科 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 昆山新莱洁净应用材料股份有限公司-卫生级蝶阀,无菌取样阀,不锈钢隔膜阀,换向阀,离心泵 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 厌氧工作站-通用型厌氧工作站-上海胜秋科学仪器有限公司 | 蓝鹏测控平台 - 智慧车间系统 - 车间生产数据采集与分析系统 | 杭州可当科技有限公司—流量卡_随身WiFi_AI摄像头一站式解决方案 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 南京技嘉环保科技有限公司-杀菌除臭剂|污水|垃圾|厕所|橡胶厂|化工厂|铸造厂除臭剂 |