有序列表蜀备、無(wú)序列表雀扶、自定義列表如何使用杖小?寫(xiě)個(gè)簡(jiǎn)單的例子。三者在語(yǔ)義上有什么區(qū)別愚墓?在哪些情況下使用哪種(重要)予权? 如何嵌套?
- 有序列表(ordered list) 跟做事情的操作步驟一樣浪册,有邏輯上的先后順序扫腺,一般用數(shù)字來(lái)表示。
<ol>
<li>打開(kāi)冰箱門(mén)
</li>
<li>把大象放進(jìn)去
</li>
<li>關(guān)上冰箱門(mén)
</li>
</ol>
- 無(wú)序列表(unordered list)內(nèi)容的羅列议经,無(wú)需考慮先后順序。默認(rèn)格式:每項(xiàng)前有個(gè)小黑點(diǎn)谴返。
<ul>
<li>看書(shū)
</li>
<li>看電影
</li>
<li>聽(tīng)歌
</li>
</ul>
- 自定義列表(definationg list)表示項(xiàng)目和其注釋的列表煞肾。以<dl>標(biāo)簽開(kāi)始,列表項(xiàng)</dt>,列表項(xiàng)注釋</dd>嗓袱。* 注: *列表項(xiàng)和注釋無(wú)需一一對(duì)應(yīng)籍救。
<dl>
<dt>html常見(jiàn)表單標(biāo)簽
</dt>
<dd>有序列表
</dd>
<dd>無(wú)序列表
</dd>
<dd>自定義列表
</dd>
</dl>
三者語(yǔ)義區(qū)別:ol有邏輯上的先后順序,改變順序就改變了整個(gè)列表的意義渠抹。ul可隨意改變li的前后順序蝙昙。dl標(biāo)簽中闪萄, dd "在語(yǔ)義上", 應(yīng)該是對(duì) dt的注釋說(shuō)明, 而不應(yīng)該是跟它無(wú)關(guān)的東西。
-
有序列表嵌套
-
無(wú)序列表嵌套
-
自定義列表嵌套
-
混合嵌套
如何去除列表前面的點(diǎn)或者數(shù)字奇颠?
<style>
ul,ol {
list-style:none
}
</style>
class 和 id 有什么區(qū)別败去?什么時(shí)候用 class 什么時(shí)候用 id?
class是表示一類(lèi)元素使用同一style的選擇器烈拒。
id是全文檔中唯一元素的選擇器圆裕,用于布局。
也就是說(shuō)荆几,id是先找到結(jié)構(gòu)/內(nèi)容吓妆,再給它定義樣式;class是先定義好一種樣式吨铸,再套給多個(gè)結(jié)構(gòu)/內(nèi)容行拢。
塊級(jí)元素、行內(nèi)元素是什么诞吱?有什么區(qū)別舟奠?分別對(duì)應(yīng)哪些常用標(biāo)簽?
塊級(jí)元素一般都從新行開(kāi)始狐胎,它可以容納內(nèi)聯(lián)元素和其他塊元素鸭栖。“form"這個(gè)塊元素比較特殊握巢,它只能用來(lái)容納其他塊元素晕鹊。
常見(jiàn)標(biāo)簽:p/div/ol/ul/dl/form/table/h1/h2/h3/h4/h5/h6。
行內(nèi)元素/內(nèi)聯(lián)元素(inline element)一般都是基于語(yǔ)義級(jí)(semantic)的基本元素暴浦。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素溅话。
常見(jiàn)標(biāo)簽:a/b/em/i/strong/font/img/input/select/span/textarea。
區(qū)別:
- 塊級(jí)元素垂直方向排列歌焦,行內(nèi)元素水平方向排列飞几。
-
塊級(jí)元素默認(rèn)會(huì)撐滿整個(gè)寬度,行內(nèi)元素只占本身大小的空間独撇,background-color會(huì)因?yàn)閜adding顏色的改變而占據(jù)空間屑墨,但是不影響布局。
- 盒模型不同纷铣。
行內(nèi)元素width卵史,height設(shè)置無(wú)效,margin,padding上下無(wú)效搜立∫郧可以設(shè)置line-height屬性。 - 塊級(jí)元素內(nèi)可以包含塊級(jí)元素和行內(nèi)元素,行內(nèi)元素內(nèi)只能包含行內(nèi)元素忧设。
display: block刁标、display: inline、display: inline-block分別有什么作用?
事實(shí)上址晕,網(wǎng)頁(yè)上所有元素都有display屬性膀懈。一些元素display屬性為block,比如div/li/p等斩箫,一些元素display屬性默認(rèn)為inline,比如a/img等吏砂。display屬性可以被強(qiáng)制更改。
- display: block 元素會(huì)具有塊級(jí)元素的屬性乘客,獨(dú)立占據(jù)一行狐血,可以設(shè)置寬高。
- display: inline 元素具有行內(nèi)元素屬性易核。
-
display: inline-block 行內(nèi)塊元素匈织。含有這個(gè)屬性的元素內(nèi)部具有塊級(jí)元素的一些屬性,可以設(shè)置寬高等牡直,同時(shí)這個(gè)元素外部可以與其他元素同行缀匕,表現(xiàn)為行內(nèi)元素的一些屬性。
下面代碼是做什么的碰逸?抄寫(xiě)一遍下面的代碼乡小,注意class和id的使用及命名方式。
id用于布局和頁(yè)面獨(dú)一無(wú)二的元素饵史。class用于樣式相似的元素满钟。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a id="logo" href="#"><img src="" alt=""></a>
<ul class="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="wrap">
<div class="aside">側(cè)邊欄</div>
<div class="main">中心區(qū)塊</div>
</div>
</div>
<div id="footer">
<div class="wrap">這里是footer</div>
</div>
</body>
</html>
如何理解 HTML CSS 語(yǔ)義化? 在平時(shí)寫(xiě)代碼的過(guò)程中要注意哪些細(xì)節(jié)。
htm css語(yǔ)義化有三個(gè)好處:一是方便搜索引擎或類(lèi)似機(jī)器爬蟲(chóng)抓取網(wǎng)頁(yè)信息胳喷;二方便開(kāi)發(fā)者審查代碼湃番,降低維護(hù)成本;三為網(wǎng)頁(yè)瀏覽者提供一個(gè)好的瀏覽體驗(yàn)吭露,比如alt標(biāo)簽等吠撮。
html css語(yǔ)義化主要考慮從網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容考慮,選擇語(yǔ)義化的標(biāo)簽及定義有意義的id讲竿、class的名稱(chēng)等泥兰。
一些細(xì)節(jié)問(wèn)題:
- 把css獨(dú)立出來(lái)寫(xiě),讓html很好地展示頁(yè)面結(jié)構(gòu)和內(nèi)容题禀。
- 少用div鞋诗、span、br等無(wú)意義標(biāo)簽投剥,用div的時(shí)候多考慮列表师脂。
- 在考慮瀏覽器兼容的情況下担孔,多使用html 5這類(lèi)語(yǔ)義化的標(biāo)簽江锨。
html 5 新增語(yǔ)義化標(biāo)簽可以點(diǎn)擊前輩博客HTML 5的革新——語(yǔ)義化標(biāo)簽
form表單有什么作用吃警?有哪些常用的input 標(biāo)簽,分別有什么作用啄育?
form表單主要用于用戶與web服務(wù)器提交信息酌心。
常用Input標(biāo)簽有:text輸入文本、password輸入密碼挑豌、radio單選安券、checkbox多選、 select下拉列表氓英、 button按鈕侯勉、 submit提交。
post 和 get 方式的區(qū)別铝阐?
get主要用于獲取信息址貌,獲取的數(shù)據(jù)數(shù)量少但是速度快,相關(guān)信息會(huì)在地址欄有所顯示徘键,瀏覽器歷史記錄也可以查詢到密碼练对,安全系數(shù)低。
post主要用于向服務(wù)器傳輸數(shù)據(jù)吹害,數(shù)據(jù)的傳輸主要取決于服務(wù)器螟凭,安全系數(shù)比較高。
在input里它呀,name 有什么作用螺男?
name規(guī)定了Input元素的屬性名稱(chēng),沒(méi)有name屬性頁(yè)面就無(wú)法向后臺(tái)相關(guān)傳輸數(shù)據(jù)钟些。
比如:html元素Input type='radio'分組烟号,radio button控件在同一個(gè)分組類(lèi),同一時(shí)間只能選中一個(gè)radio政恍,這個(gè)分組就是根據(jù)相同的Name屬性來(lái)實(shí)現(xiàn)的汪拥。
<button>提交</button>、<a class="btn" href="#">提交</a>篙耗、<input type="submit" value="提交">三者有什么區(qū)別迫筑?
submit默認(rèn)為form提交,自動(dòng)提交表單數(shù)據(jù)宗弯。
button則響應(yīng)用戶自定義的事件,如果不指定onclick等事件處理函數(shù)脯燃,它是不做任何事情。當(dāng)然蒙保,button也可以完成表單提交的工作辕棚。
submit是一種特殊的button,一個(gè)表單只能有一個(gè)submit,卻可以有多個(gè)button逝嚎。
<a class="btn" href="#">提交</a>可以通過(guò)css做成button的樣式扁瓢,也不會(huì)提交數(shù)據(jù)。
radio 如何分組?
通過(guò)name补君,詳見(jiàn)上上題目引几。
placeholder 屬性有什么作用?
在未輸入任何信息時(shí),提示用戶挽铁。
type=hidden隱藏域有什么作用? 舉例說(shuō)明伟桅。
type=hidden 隱藏域是用于收集和發(fā)送信息用的∵淳颍客戶端不顯示楣铁,但提交后,服務(wù)器能夠接收更扁,可以做表單驗(yàn)證值民褂,拒絕來(lái)源不明的表單提交。
<input type="hidden" name="..." value="...">
本教程版權(quán)歸本人和饑人谷所有疯潭,轉(zhuǎn)載須說(shuō)明來(lái)源