個人學習總結輸出,持續更新。Day day study!Day day up!
這里的元素大多數是普通元素。此處的普通指的是:幾乎沒有自己特殊的屬性,只指定通用屬性和各種事件屬性。
基本元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> <p> <span> 其后無br </span> <span> 其后有br </span> <br> <span> 其后有hr </span> <hr> <span> 其后有div </span> <div id=""> 一般p內不包含div,div內可包含一切,所以以往大量使用,造成了語義化不明確。 </div> </p> </body> </html>
文本格式相關元素
? <p> <b>b加粗</b><strong>strong加粗</strong>正常 <small>縮小</small>2<sup>2</sup>a<sub>2</sub> <hr > <bdo dir="ltr">左向右</bdo> <hr > <bdo dir="rtl">左向右</bdo> </p>
舊的語義相關元素
? <p> <abbr title="中華人民共和國">中國</abbr> <address>西安市雁塔區幸福小區3單元403室</address> <cite>作品標題</cite> <blockquote cite="www.baidu.com">表示長文本引用。通常帶有`cite`屬性指定出處(可以使url)</blockquote> <q>表示短文本引用。</q> <code> let tempDom=document.querrySelect('#id'); dom.hidden=true; </code> <dfn>牛頓第三定理:</dfn> <br> <del>待刪除線文本。通常帶有`cite`屬性指定原因、通常帶有`datetime`屬性標注修改時間</del> <br> <ins>表示插入的文本。常帶有`cite`屬性指定原因、通常帶有`datetime`屬性標注修改時間</ins> <pre>/\'''"""</pre> <samp>示范文本。</samp> <kbd>ctrl</kbd> <var>i</var> </p> ?
H5新增語義元素
這是一個<mark>重點</mark> <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time> <details> <summary>摘要</summary> 這是詳情、、、、 </details> <ruby> <rb>饕</rb> <rp>(</rp> <rt>tao</rt> <rp>)</rp> <rb>餮</rb> <rp>(</rp> <rt>tie</rt> <rp>)</rp> </ruby>
H5新增結構元素
沒啥好說的,見名知其意,解決以前全用div語義化缺失的問題。
看到這里了,關注吧,由淺入深,持續更新一起學習進步。如果有什么建議和補充,請積極評論。
根據css顯示分類,XHTML元素被分為 ?
三種類型:
塊狀元素,內聯元素,可變元素 ?
&& ?
三種類型: 塊狀元素,內聯元素,內聯塊元素(css2.1增加)
A:塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀就是元素顯示為矩形區域,
B:默認情況下,塊狀元素都會占據一行,通俗地說,兩個相鄰塊狀元素不會出現并列顯示的現象;默認情況下,塊狀元素會按順序自上而下排列。
C:塊狀元素都可以定義自己的寬度和高度。
D:塊狀元素一般都作為其他元素的容器,它可以容納其它內聯元素和其它塊狀元素。我們可以把這種容器比喻為一個子。
A:內聯元素的表現形式是始終以行內逐個進行顯示;
B:內聯元素沒有自己的形狀,不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定,它的最小內容單元也會呈現矩形形狀;
C:內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin,background等屬性,但個別屬性不能正確顯示;(padding-top:;margin-top/bottom:;)
需要根據上下文關系確定該元素是塊元素或者內聯元素。
div -最常用的塊級元素
dl - 和dt-dd 搭配使用的塊級元素
form - 交互表單
h1 -h6- 大標題
hr - 水平分隔線
ol – 有序列表
p - 段落
ul - 無序列表
li
fieldset - 表單字段集
colgroup-col - 表單列分組元素
table-tr-td 表格及行-單元格
a –超鏈接(錨點)
b - 粗體(不推薦)
br - 換行
i - 斜體
em - 強調
img - 圖片
input - 輸入框
label - 表單標簽
span - 常用內聯容器,定義文本內區塊
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
u - 下劃線
select - 項目選擇
盒子模型可通過display屬性來改變默認的顯示類型
A、大部分塊元素display屬性值默認為block,其中列表li的默認值為list-item。
B、大部分內聯元素的display屬性值默認為inline,其中img,input,默認為inline-block(行內塊元素)。
設置一個元素在一個容器中垂直居中,必須更改默認的display屬性值為inline-block;并加上同級元素(標尺)
(同級元素[標尺]樣式設置為vertical-align:middle;width:0;height:100%;display:inline-block;)
三個條件:
元素類型案例
一、引題
在之前的淺談HTML中的塊級元素和內聯元素中了解到了內聯元素一般是不能設置寬高的,但是也有特殊。比如img是內聯元素,但可以設置寬高,這肯定讓不少人迷惑。這樣我們就要引入HTML中置換元素的概念(非置換元素在w3c中沒有給出明確的解釋,姑且我們就把除置換元素外的元素當作非置換元素吧)。
二、置換元素與非置換元素
a) 置換元素:瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容。 例如:瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來,而如果查看(x)html代碼,則看不到圖片的實際內容;<input>標簽的type屬性來決定是顯示輸入框,還是單選按鈕等。 (x)html中的<img>、<input>、<textarea>、<select>都是置換元素。這些元素往往沒有實際的內容,即是一個空元素。
? 置換元素在其顯示中生成了框,這也就是有的內聯元素(img,input)能夠設置寬高的原因。
? b) 不可替換元素(非置換元素):(x)html 的大多數元素是不可替換元素,即其內容直接表現給用戶端(如瀏覽器)。
本文轉自知乎號:千鋒HTML5學院
號持續更新前端面試題和答案......
以下是一些HTML基礎面試題:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。