任務(wù)7-HTML4

有序列表蜀备、無(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>
dl標(biāo)簽

三者語(yǔ)義區(qū)別:ol有邏輯上的先后順序,改變順序就改變了整個(gè)列表的意義渠抹。ul可隨意改變li的前后順序蝙昙。dl標(biāo)簽中闪萄, dd "在語(yǔ)義上", 應(yīng)該是對(duì) dt的注釋說(shuō)明, 而不應(yīng)該是跟它無(wú)關(guān)的東西。

  • 有序列表嵌套


    有序列表嵌套
  • 無(wú)序列表嵌套


    無(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ū)別:

  1. 塊級(jí)元素垂直方向排列歌焦,行內(nèi)元素水平方向排列飞几。
  2. 塊級(jí)元素默認(rèn)會(huì)撐滿整個(gè)寬度,行內(nèi)元素只占本身大小的空間独撇,background-color會(huì)因?yàn)閜adding顏色的改變而占據(jù)空間屑墨,但是不影響布局。


    行內(nèi)padding設(shè)置影響background-color
  3. 盒模型不同纷铣。
    行內(nèi)元素width卵史,height設(shè)置無(wú)效,margin,padding上下無(wú)效搜立∫郧可以設(shè)置line-height屬性。
  4. 塊級(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)元素的一些屬性。


    display

下面代碼是做什么的碰逸?抄寫(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)的汪拥。


name相同時(shí)

name不同時(shí)

<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í),提示用戶挽铁。


Paste_Image.png

type=hidden隱藏域有什么作用? 舉例說(shuō)明伟桅。

type=hidden 隱藏域是用于收集和發(fā)送信息用的∵淳颍客戶端不顯示楣铁,但提交后,服務(wù)器能夠接收更扁,可以做表單驗(yàn)證值民褂,拒絕來(lái)源不明的表單提交。

<input type="hidden" name="..." value="...">

本教程版權(quán)歸本人和饑人谷所有疯潭,轉(zhuǎn)載須說(shuō)明來(lái)源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末赊堪,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子竖哩,更是在濱河造成了極大的恐慌哭廉,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件相叁,死亡現(xiàn)場(chǎng)離奇詭異遵绰,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)增淹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)椿访,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人虑润,你說(shuō)我怎么就攤上這事成玫。” “怎么了拳喻?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵哭当,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我钦勘,道長(zhǎng),這世上最難降的妖魔是什么亚亲? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任彻采,我火速辦了婚禮腐缤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肛响。我一直安慰自己柴梆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布终惑。 她就那樣靜靜地躺著,像睡著了一般门扇。 火紅的嫁衣襯著肌膚如雪雹有。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,764評(píng)論 1 290
  • 那天臼寄,我揣著相機(jī)與錄音霸奕,去河邊找鬼。 笑死吉拳,一個(gè)胖子當(dāng)著我的面吹牛质帅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播留攒,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼煤惩,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了炼邀?” 一聲冷哼從身側(cè)響起魄揉,我...
    開(kāi)封第一講書(shū)人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拭宁,沒(méi)想到半個(gè)月后洛退,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡杰标,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年兵怯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片腔剂。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡媒区,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掸犬,到底是詐尸還是另有隱情驻仅,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布登渣,位于F島的核電站噪服,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏胜茧。R本人自食惡果不足惜粘优,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一仇味、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧雹顺,春花似錦丹墨、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至没酣,卻和暖如春王财,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背裕便。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工绒净, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人偿衰。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓挂疆,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親下翎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子缤言,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1.有序列表、無(wú)序列表视事、自定義列表如何使用墨闲?寫(xiě)個(gè)簡(jiǎn)單的例子。三者在語(yǔ)義上有什么區(qū)別郑口?在哪些情況下使用哪種(重要)鸳碧?...
    墨月千樓閱讀 281評(píng)論 0 0
  • 一、有序列表犬性、無(wú)序列表瞻离、自定義列表如何使用?寫(xiě)個(gè)簡(jiǎn)單的例子乒裆。三者在語(yǔ)義上有什么區(qū)別套利?在哪些情況下使用哪種(重要)?...
    鴻鵠飛天閱讀 687評(píng)論 0 0
  • 一鹤耍、有序列表肉迫、無(wú)序列表、自定義列表如何使用稿黄?寫(xiě)個(gè)簡(jiǎn)單的例子喊衫。三者在語(yǔ)義上有什么區(qū)別?在哪些情況下使用哪種(重要)杆怕?...
    咩咩咩1024閱讀 501評(píng)論 0 0
  • 1 . 有序列表族购、無(wú)序列表壳贪、自定義列表如何使用?寫(xiě)個(gè)簡(jiǎn)單的例子寝杖。三者在語(yǔ)義上有什么區(qū)別违施?在哪些情況下使用哪種(重要...
    osborne閱讀 546評(píng)論 0 0
  • 哽淚裝歡 徘徊在生與死的邊緣 獨(dú)語(yǔ)斜欄 顛覆在愛(ài)與恨的泥潭 落紅化塵香猶未盡 雨歇黃昏愁緒更新 霧戀紅塵真情難浸 ...
    青春被忘路閱讀 309評(píng)論 1 3