html你可能還不知道的一些知識點總結_第1頁
html你可能還不知道的一些知識點總結_第2頁
html你可能還不知道的一些知識點總結_第3頁
html你可能還不知道的一些知識點總結_第4頁
html你可能還不知道的一些知識點總結_第5頁
已閱讀5頁，還剩11頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

html你可能還不知道的一些學問點一、標簽語義化html標簽語義化是讓大家直觀的相識標簽和屬性的用途和作用，好處最主要的是對搜尋引擎友好。Eg:1、假如你想在頁面中突出〃奧巴馬〃這三個字，讓搜尋引擎重視它，假如你這么寫：＜div＞奧巴馬＜/div＞對于搜尋引擎來說，它也只是一個一般得不能再一般的三個字而已，盡管它是指代美國總統。那么應當怎樣才能讓搜尋引擎知道它的重要性呢？來看看語義化的寫法吧：＜hl＞奧巴馬＜/hl＞奧巴馬看了后，樂了，哥原來就應當備受關注的！2、假如文字要加粗顯示，＜em＞是用作強調的，strong是用作重點強調的。3、對于標簽＜s＞只是表示一個一般的刪除線，而＜del＞標簽更具語義化，它表示刪除一個內容，并且del還帶有cite和datetime來表明刪除的緣由以及刪除的時間。3、非主體結構標簽1<datalist>標簽定義選項列表。電<inputtype二〃text“list二〃taglist”/><datalistid=〃taglist〃>〈option〉蘋果〈/option〉〈option〉橘子〈/option〉〈option》西紅柿〈/option〉</datalist>電3.2details標簽定義文檔微小環節<details><summary>Copyright2023.</summary><p>AllpagesandgraphicsonthiswebsitearethepropertyofW3School.</p></details>3.3menu標簽定義列表<menu><li>home</li><li>home</li><li>home</li></menu>4address地址標簽<address>Writtenby<ahref=，/mailto:webmaster@example〃>DonaldDuck</a>.<br>Visitusat:<br>Example<br>Box564,Disneyland<br>USA</address>5progress進度條標簽下載進度：<progress></progress>6mark高亮顯示<mark>中國</mark>人民最宏大標簽定義日期或時間，或者兩者<P>我們在每天早上〈time>9:00</tinie>起先營業。</p>新增的表單元素<inputtype=〃email”/><inputtype二〃url〃/><inputtype二〃tel〃/><inputtype二〃number"min=〃1〃max=〃20〃step=〃4〃/><inputtype=//range/zmin=〃1〃max=〃20〃step=〃4〃/><inputtype=〃search”/><inputtype=〃color”/><inputtype二〃date”/><inputtype二〃month”/><inputtype=〃week〃/><inputtype=〃time”/>電3.9新增的input屬性3.9.1用戶輸入自動完成功能電<formautocompelete=z/onz/><inputtype二〃text“list=〃citylist”/><datalistid=〃citylist〃><option>BeiJing</option><option>QingDao</option><option>QingZhou</option><option>QingHai</option></datalist></form>3.9.2頁面加載的時候獲得焦點<inputtype=〃text"autofocus=〃autofocus”/>3.9.3form外也可以做數據提交<formaction=〃〃method=〃get"id=/，forml//></form><inputtype=〃text“name=〃address1〃fonn=〃forml〃/>3.9.4form內的內容也可以改action地址<formaction=〃1.aspx〃><inputtype=〃submit"value=〃提交〃fonnaction=〃2.aspx〃/></form>9.5file可以支持多文件上傳了<inputtype=〃file“name二〃img〃multiple二〃multiple”/>9.6支持自定義驗證功能了<formaction=〃1.aspx〃>請輸入郵政編碼：<inputtype=〃text"pattern=〃[0-9]{6}〃title二〃請6 /><inputtype="submit”/></form>新增默認內容提示了<inputtype二〃text"placeholder=”請輸入用戶名〃/》3.9.5新增不能為空屬性<formaction=，，l.aspx"〉請輸入郵政編碼：〈inputtype="text"required二〃required”/><inputtype="submit”/></form>10新增全局屬性10.1contenteditable屬性規定是否可編輯元素的內容。<pcontenteditable="true〃>這是一段可編輯的段落。請試著編輯該文本。</p>10.2hidden屬性規定對元素進行隱藏。<phidden-hidden"）這是一段隱藏的段落。</p><P>這是一段可見的段落。</p>3.10.3tabindex屬性規定當運用"tab”鍵進行導航時元素的依次。ahref=〃〃tabindex=〃2〃〉W3School〈/aXbr/>ahref=〃〃tabindex=〃l〃>Google〈/a〉〈br/>ahref=〃〃tabindex=〃3〃>Microsoft〈/a>3.11其他屬性3.11.1ol的reversed屬性對列表依次進行降序<olreversedstart=〃5〃><1i>SHUFFLE"三界戀曲</1i><li>撲殺天使</li>Gi>零之使魔</li>■<li〉不要撒嬌哦/極樂天師/純情和尚俏尼姑</li><li>tolove/出包王女</li></ol>電3.11.2js的async屬性規定一旦腳本可用，則會異步執行。<pid=//pl/，>HelloWorld!</p><scripttype="text/javascript”src=z//example/html5/demo_async.js〃async二〃async〃>〈/script>3.11.3js的defer屬性規定當頁面已完成加載后，才會執行腳本。<scripttype="text/javascript”src=///example/html5/demodefer.js〃defer=z/deferz/></script>〈p>上面的腳本從下面的段落請求信息。通常，這是不行能的，因為腳本在段落加載之前已經執行了。</p><pid=〃pl〃>HelloWorld!</p><p>不過，defer屬性規定腳本稍后執行。這樣腳本就可以從段落中請求信息了。〈/p>視，讓你想表達的東西，tobegirlfriend,nottobefriendo二、HTML標簽補充1、縮寫說明<abbrtitle-HypertextMarkupLanguage，，>HTML</abbr>2、定義列表（一般用于內容說明）<dl><dt〉子曰：“巧言令色，鮮矣仁！"</dt〉<dd〉孔子說：“巧語花言，裝出看法溫柔的樣子，這種人的仁心就很少了。"〈/dd>〈dt>季</dt>■<dd〉l、兄弟排行次序最小的：季弟（小弟）,季父（小叔叔）”dd><dd〉2、三個月為一季，一年分春夏秋冬四季</（］€1〉</dl>3、預格式文本標簽被包圍在pre元素中的文本通常會保留空格和換行符<pre>1、這是一溝無望的死水2、清風吹不起半點漪淪不如多扔些破銅爛鐵4、爽性潑它的剩菜殘羹</pre>電4、版權符©5、對html進行轉義<body>三、H5新增標簽1、多媒體標簽：video、audio、canvas1.1音頻標簽video不同閱讀器對于html5audio標簽和音頻格式的兼容性（一般供應ogg和mp3格式，就可以支持全部主流閱讀器了。）音頻格式ChromeFirefoxIE9OperaSafariOGG支持支持支持支持不支持MP3支持不支持支持不支持支持WAV不支持支持不支持支持不支持<audiosrc=〃l.mp3〃controls=〃controls”〉<audiocontrols=〃controls"autoplayloop><sourcesrc=〃l.mp3〃type二〃audio/mpeg〃/><sourcesrc=〃Logg〃type=〃audio/ogg〃/></audio>編解碼工具：FFmpeg(下載地址：)C：\Users\Adninistrator>h：：\>E：\ffnpeg\bin\ffnpeg-inanshannan.mp3-acodeclibuorbisnanshannan.oggmp4轉ogg方法同上。1.2視頻標簽video<videosrc=〃l.mp3〃controls=，，controlszzautoplay><videocontrols=//controlsz，><sourcesrc=〃l.nip4〃type二〃video/mpeg〃/><sourcesrc=〃l.mp4〃type二〃video/ogg〃/></video>音視頻播放、暫停、停止方法：電varaudio=document.getElementByldmusicT);audio,play();〃播放audio,pause();〃暫停audio,pause();audio.currentTime=O;//停止1.3畫布標簽:Canvas（須要協作js來做效果，后續再總結）2、主體結構標簽<header><aside><nav><aside><article><section><footer>nav元素代表頁面的導航鏈接區域。用于定義頁面的主要導航部分。<li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul></nav>article元素展示網頁中獨立的一塊內容，譬如論壇的帖子、博客的文章、一篇用戶評論。〈article〉〈hl〉一篇文章〈/hl><P〉文章內容..</p><footer>〈pXsmall）版權:html5jscss網所屬,作者：小北〈/smallX/p></footer></article>〈article〉<header><hl>一篇文章</hl><p><timepubdatedatetime=//2023-10-03//>2023/10/03</time></p></header><article><h2>評論</h2><article><header>〈h3〉評論者：XXX</h3><p><timepubdatedatetime=z/2023-10-03T19:10-08:00，z>"lhourago</time></p></header><p>哈哈哈</p></article><article><header>〈h3〉評論者：XXX</h3><p><timepubdatedatetime=〃2023To-03T19:10-08:00〃>?1hourago</time></p></header>〈p>哈？哈？哈？</p></article></article></article>2.3section元素代表文檔中的“節”或“段”，“段”可以是指一篇文章里依據主題的分段；“節”可以是指一個頁面里的分組。〈article〉<hl〉前端技術</hl>■Q前端技術有那些</p〉<section><h2>CSS</h2><p>樣式..</p></section><section><h2>JS</h2>〈p〉腳本</p></section></article>電4aside元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是及當前文章有關的相關資料、標簽、名次說明等、電<article><p>內容</p><aside>〈hl〉作者簡介〈/hl>〈p>小北，前端一枚</p></aside></article>2.5header元素展示一個區域的頭部分2.6footer元素展示一個區域的尾部分7hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將hl到h6元素放在其內，譬如文章的主標題和副標題的組合<hgroup>■<hl>這是一篇介紹HTML5語義化標簽和更簡潔的結構</hl〉<h2>HTML5<

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論