HTML5部分基礎知識

時間 2019-11-08

標籤 html5 html 部分基礎知識欄目 HTML5 简体版

原文原文鏈接

web前端開發css

一個XML的簡單應用html

代碼以下：前端

 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
 4 <!---->
 5     <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2"/>
 6 <!--    -->
 7     <path d="M0,300 S150,100 200,200 S400,400 500,0" fill="none" stroke="red" stroke-width="2"/>
 8 <!---->
 9     <g stroke-width="5" stroke="black">
10 <!--    -->
11         <circle cx="0" cy="-45" r="10" fill="black"/> 
12         <line x1="-20" y1="-30" x2="0" y2="-25"/>
13         <line x1="20" y1="-30" x2="0" y2="-25"/>
14         <line x1="-20" y1="0" x2="0" y2="-10"/>
15         <line x1="20" y1="0" x2="0" y2="-10"/>
16         <line x1="0" y1="-10" x2="0" y2="-45"/>
17         
18     <circle cx="-30" cy="-45" r="10" fill="black"/> 
19         <line x1="-50" y1="-30" x2="-30" y2="-25"/>
20         <line x1="-10" y1="-30" x2="-30" y2="-25"/>
21         <line x1="-50" y1="0" x2="-30" y2="-10"/>
22         <line x1="-10" y1="0" x2="-30" y2="-10"/>
23         <line x1="-30" y1="-10" x2="-30" y2="-45"/>
24 <!---->
25         <animateMotion path="M0,300 S150,100 200,200 S400,400 500,0" dur="8s" repeatCount="indefinite" rotate="auto"/>
26 </g>
27     
28 </svg>

具體請看效果圖web

　　HTML5新增經常使用結構性元素chrome

新增的結構性元素

　　section：定義文檔中的節。好比章節、頁眉、頁腳或文檔中的其餘部分。通常用於成節的內容，會在文檔流中開始一個新的節。瀏覽器

　　article：它是一個特殊的section標籤，它比section具備更明確的語義，它表明一個獨立的、完整的相關內容塊，可獨立於頁面其餘內容使用。ruby

　　nav：此標籤表明頁面的一個部分，表示頁面中導航連接的部分app

　　aside：它用來裝載非正文的內容，被視爲頁面裏面一個單獨的部分。它包含的內容與頁面的主要內容事分開的，能夠被刪除，而不會影響到網頁的內容、章節或是頁面所要傳達的信息。框架

　　hgroup：hgroup標籤是堆網頁或區段section的標題元素（h1-h6）進行組合。ide

　　footer：它定義section或文檔的頁腳，包含了頁面、文章或是部份內容有關的信息。

　　header：定義文檔的頁眉，一般是一些引導和導航信息。它不侷限於寫在網頁頭部，也能夠寫在網頁內容裏面。

　　figure：用於對元素進行組合。多用於圖片與圖片描述組合。

在以前的HTML頁面中，你們基本上都是用了Div+CSS定義的佈局方式

在以前的HTML頁面中，你們基本上都是用了Div+CSS佈局方式，而這個則精簡了許多

新增的經常使用語義性元素

　　mark：定義帶有標記的文本，須要突出顯示文本時使用<mark>標籤。

　　progress：標籤訂義運行中的任務進度（進程）.

　　time：表示時間日期值。

　　datalis：此標籤規定了用戶可見的或隱藏的需求的補充細節。

　　datalist：定義選項列表。請與input元素配合使用你該元素，來定義input可能的值。

　　ruby：此標籤訂義ruby註釋，每每與<rt>和<rp>標籤一塊兒配合使用。

　　menu：表示菜單列表。

　　command：commend標籤能夠定義用戶可能調用的命令（好比單選按鈕、複選按鈕或按鈕）。

2語義性元素示例

代碼以下：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>2語義性元素示例</title>
 6 </head>
 7 
 8 <body>
 9     <p>I <mark>love</mark> you</p>
10     downloading progress:<progress value="22" max="100"></progress>
11     <p>we open at <time>10:00</time> every morning</p>
12     <p>I have a date on<time datetime="2019-9-10">教師的節日</time></p>
13     <details open>
14         <summary>
15             Copyright 1999-2011.
16         </summary>
17         <p>-by refsnes data.all rights reserved</p>
18         <p>All contedt and graphics on this web site are the property</p>
19     </details>
20     <input list="browers">
21     <datalist id="browers">
22         <option value="ie"></option>
23         <option value="opera"></option>
24         <option value="chrome"></option>
25     </datalist>
26     <ruby>漢
27     <rt>han</rt><rp>漢</rp>
28     </ruby>
29 </body>
30 </html>