HTML5部分基礎知識

来源:https://www.cnblogs.com/biaobiao88/archive/2019/11/08/11820313.html

web前端開發 一個XML的簡單應用 代碼如下: 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 ...


web前端開發

一個XML的簡單應用

 代碼如下:

 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>

具體請看效果圖

 

  HTML5新增常用結構性元素

 

  •  新增的結構性元素

  section:定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其他部分。一般用於成節的內容,會在文檔流中開始一個新的節。

  article:它是一個特殊的section標簽,它比section具有更明確的語義,它代表一個獨立的、完整的相關內容塊,可獨立於頁面其他內容使用。

  nav:此標簽代表頁面的一個部分,表示頁面中導航鏈接的部分

  aside:它用來裝載非正文的內容,被視為頁面裡面一個單獨的部分。它包含的內容與頁面的主要內容事分開的,可以被刪除,而不會影響到網頁的內容、章節或是頁面所要傳達的信息。

  hgroup:hgroup標簽是堆網頁或區段section的標題元素(h1-h6)進行組合。

  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>

運行效果如下:

 

  •  HTML5廢除的相關元素

能用css代替的元素,比如:basefont、big、center、font、是、strike、tt、u。

不能再使用frame框架,frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架。

只有部分瀏覽器支持的元素,applet、bgsound、blink、marquee等標簽。

其他被廢除的元素,比如:廢除rb使用ruby替代、廢除acronym使用abbr替代、廢除dir使用ul替代、廢除listing使用pre替代等。

 


您的分享是我們最大的動力!

更多相關文章
  • 1 <template> 2 <div class="artcle"> 4 <el-form 5 label-width="100px" 6 :model="testForm"> 7 <el-form-item 8 v-for="(vtem, index) in testForm.version" ...
  • 眾所周知,JavaScript核心包含Data()構造函數,用來創建表示時間和日期的對象。 今天主要跟大家梳理一下,常用的時間、日期處理方法,方便大家使用和理解 格式化時間 老生常談,大概會這麼寫 1234567891011 var format = function (time) { var y ...
  • 代碼: <img src="images/001.jpg" alt="pic" onmouseover="this.src='images/001.jpg';" onmouseout="this.src='images/002.jpg';"/> ...
  • 作者:Dmitri Pavlutin 譯者:小維FE 原文:dmitripavlutin.com 國外文章,筆者採用意譯的方式,以保證文章的可讀性。 當執行像數據獲取這樣的I/O操作時,你必鬚髮起獲取請求,等待響應,將響應數據保存到組件的狀態中,最後渲染。非同步的數據獲取會要求額外的工作來適應Reac ...
  • 塊級作用域: ES6允許你使用塊級作用域,不過目前大多數的ES6語法只允許在嚴格模式下使用("use strict” )。 1 let關鍵字 作用:聲明變數,一個花括弧就是一個作用域(每個花括弧內就是全新變數). 特點:不在進行聲明提升,在塊作用域外無法訪問變數,和const一樣只能聲明一次. 關鍵 ...
一周排行
  • 1. 運行效果 在 "使用GetAlphaMask和ContainerVisual製作長陰影(Long Shadow)" 這篇文章里我介紹了一個包含長陰影的番茄鐘,這個番茄鐘在狀態切換時用到了翻轉動畫,效果如上所示,還用到了彈簧動畫,可以看到翻轉後有點回彈。本來打算自己這個動畫效果寫的,但火火已經寫 ...
  • 接上一篇,es部署很簡單,很快就弄好了。 但是還是有很多不玩美。 比如說:主機是本地的IP或機器名,埠是固定的9200. 而且是只有一個節點,我要在一臺機器上部署多個節點呢。 經過一段時間的摸索,做起來也很簡單,但過程切實很痛苦。 具體做法是:你想部署多少個節點,你就重覆多少次上一步的做法。啟動就 ...
  • 在項目中,需要為所有的Button、TextBox設置一個預設的全局樣式,一個個的為多個控制項設置相同的樣式顯然是不明智的。在WPF中可以通過資源設置全局樣式,主要有倆種方法: 1.第一種就是先寫好按鈕的樣式,不寫Key,然後在App.xaml中引用。 <ResourceDictionary xmln ...
  • 說明:該篇隨筆的代碼內容並非出自本人,是在其他網站搜尋的,出處已經不記得了,本次隨筆只為記錄,目的幫助自己,幫助他人。 實現的原理也不做多的贅述,直接上代碼。 第一個類是需要用到的Windows API public class Win32Api { [StructLayout(LayoutKind ...
  • 前言 在ASP.Net Core2.X調用的CreateWebHostBuilder和3.X的主要區別在於WebHost的調用,CreateDefaultBuilder被Host替換,另一個區別是對ConfigureWebHostDefaults()的調用; 由於新的主機生成器是通用主機生成器,因此 ...
  • 對於開發人員來說,常常需要在不藉助任何Microsoft Office及其他第三方軟體的情況下,打開、創建、修改、轉換、列印、瀏覽(Word、Excel、PowerPoint和PDF等)文檔,以及將數據從數據源轉換為常用的文檔格式,甚至一些其他的文檔操作。 在這裡,小編調查了業內許多開發人員,為大家 ...
  • 這次的目標是實現通過標註Attribute實現緩存的功能,精簡代碼,減少緩存的代碼侵入業務代碼。 緩存內容即為Service查詢彙總的內容,不做其他高大上的功能,提升短時間多次查詢的響應速度,適當減輕資料庫壓力。 在做之前,也去看了EasyCaching的源碼,這次的想法也是源於這裡,AOP的方式讓 ...
  • 例如想獲取尾碼名為.txt的文件 第一種方法獲取到的是對應的文件路徑 第二種方法可以獲取到文件的一些詳細信息 類似於"*.txt" 要與路徑中的文件名匹配的搜索字元串。這個參數可以包含有效的文本路徑和通配符(*和?)的組合人物,但它不支持正則表達式。 我是參照此路徑編寫的博客,用於自己查詢快速 ht ...
  • 我們在開發中Json傳輸數據日益普遍,有很多關於Json字元串的序列化和反序列化的文章大多都告訴你怎麼用,但是卻不會告訴你用什麼更高效。因為有太多選擇,人們往往會陷入選擇難題。 相比.NET Framework有三種選擇而.net core下已經沒有JavaScriptSerializer,但是大家 ...
  • c#微信公眾號開發 基本設置 參考微信官方文檔 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html 開發→基本配置 公眾號開發信息 註:1.記錄好開發者密碼,會在程式中驗證過程 ...
x