html常見元素和理解
阿新 • • 發佈：2019-01-12
html常見元素分為兩類，一類是header區的元素，一類是body區的元素
header區元素：
meta title style link scipt base裡面包括像meta,title,style,link,scipt,base這些元素。這些元素之所以在header中，是因為不會在頁面上留下直接的內容，主要是頁面相關的一些資源和資訊描述
<meta charset="utf-8">charset表示頁面使用都是什麼樣的字符集，使用哪種編碼，utf-8是包含非常非常多的字符集，基本上可以攬括所有的英文＋中文，當然還包括一些其他國家的文字，一般第一行都加上utf-8，保證頁面不會出現編碼上的問題
<name叫做viewport，viewport什麼意思呢，就是view檢視，port口，檢視口，一般我們認為是視口，視口什麼意思呢，就是一般我們的手機螢幕，電腦螢幕，這個螢幕有多大。width=device-width，表示寬度等於裝置寬度。initial-scale=1,表示初始化的縮放比例是1。maximum-scale=1.0，最大縮放是1。user-scalable=no，使用者不能縮放meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<指定基礎路徑，後面所有路徑是以這個路徑為基礎base href="/">
div/section/article/aside/header/footer
p
span/em/strong
table/thead/tbody/tr/td // 表格相關
ul/ol/li/dl/dt/dd // 列表類
a // 連結
form/input/select/textarea/button // 表單
body跟header區不一樣，是直接呈現在頁面上，所以元素會多一些，首先是div,這是一個萬能元素，只要搞不定，就上div，所以他語義並不明確，section/article/aside/header/footer及後面都有自己都語義
<這個label裡面的for就是跟radio相關聯，不然點選文字，並不能選中按鈕p> input type="radio" name="radio1" id="radio1-1"> <label for="radio1-1">選項一</label> <input type="radio" name="radio1" id="radio1-2"> <label for="radio1-2">選項一</label> </p>
<body> <section> <h1>Forest elephants</h1>section是區域，發現雖然這是個html，但跟我們的文件是非常像的，我們抽取一下， 這個文件的大綱大概是這個樣子
<section> <h1>Introduction</h1> <p>in this section, we discuss the lesser known forest elephants</p> </section> <section> <h1>Habitat</h1> <p>forest elephants do not live in trees but among them.</p> </section> <aside> <p>adertising block</p> </aside> </section> <footer> <p>(c) 2010 the example company</p> </footer> </body>
1.Forest elephants
1.1 Introduction
1.2 Habitat
1.3 Section(aside)
我們能知道頁面的大概結構，html5增加了這麼多語義化的標籤，就是為了讓html的結構更清晰，語義更明顯，那麼同時他也推出了一份大綱的演算法，規定了哪些元素是列入大綱的，用了什麼樣的方式去做這個大綱
http://h5o.github.io/這個是html5的大綱演算法工具，他有幾種使用方式
1、chrome外掛
2、書籤，只要把 H5O v0.12.4 拖到書籤欄上就可以用了
這樣一個大綱讓我們html的結構變得非常清晰，那麼增這個有什麼用呢，我又不會天天去看這個大綱，對，可能對使用者來說，沒有那麼大的用處，但是你的網頁是由百度去看的，是由google去看的，是由爬蟲去看，這個時候發現，這個大綱其實非常有意義，他能更好的讓機器或者其他的閱讀器瞭解你這個頁面的結構，
當機器，搜尋引擎，蜘蛛等等都能很好的瞭解你的html結構的時候，你自己理解起來也會非常容易，那麼就說這個html文件是非常合理，所以要關注我們html的語義，這是我們要避免的事情