html你可能還不知道的一些知識(shí)點(diǎn)總結(jié)_第1頁
html你可能還不知道的一些知識(shí)點(diǎn)總結(jié)_第2頁
html你可能還不知道的一些知識(shí)點(diǎn)總結(jié)_第3頁
html你可能還不知道的一些知識(shí)點(diǎn)總結(jié)_第4頁
html你可能還不知道的一些知識(shí)點(diǎn)總結(jié)_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論