初試HTML之淺談CSS

一何荚、列表

列表是有三種形式

1.1無序列表

無序列表猪杭,用來表示一個列表語義,并且每個項目與項目之間是不分先后順序的

ul的英文unordered list “無序列表”

li的英文list item“列表項”

你會發(fā)現(xiàn)戒傻,我們學習的“組標簽”需纳,就是要么不寫艺挪,要寫就寫一組


    北京

    上海

    深圳

    廣州

    也就是,當前的這個列表項li不能單獨的存在口蝠,必須包裹在ul標簽里面津坑,反過來說ul的“兒子”就是li

    錯誤演示:沒有被ul標簽包裹疆瑰,默認沒有ul的語義,所以直接沒有排版


    Ul標簽并不是給文字添加小圓點的寸五,而是給無序列表增加“語義”

    Ul標簽實際應用的場景:導航條播歼,排版文章掰读,標題欄(ul放li,li是個容器級標簽烁试,什么都可以放)


    ul的層級結(jié)構(gòu)(嵌套結(jié)構(gòu))


    1.2有序列表

    ordered list有序列表减响,用ol表示


    瀏覽器會自動添加阿拉伯序號:


    總結(jié):

    ol與ul的定義是不同的:

    1.有序和無序

    2.當前都是列表項(li)被包裹

    3.一般來說很少使用有序列表支示,基本都是使用無序列表

    1.3定義列表

    定義列表實際上一個組標簽,不過比較復雜促绵,出現(xiàn)三個標簽

    dl表示definition? list定義列表

    dt表示definition title定義標題

    dd表示definition ?description定義表述次


    表示的語義兩層:

    1.是一個列表败晴,列出北京栽渴、上海,廣州

    2.每個專有名詞都有自己的描述項



    一個dt可以對應多個dd

    京東最下方的列表


    京東的下拉欄


    二佛致、DIV和SPAN

    2.1、DIV

    DIV和span是非常重要的標簽感昼,div的語義是division“分割”罐脊;span的語義是“范圍、跨度”

    Css課程中你將會知道宵溅,這二個標簽都是盒子模型最重要的標簽之一


    中國主要的城市

    Div在瀏覽器中上炎,默認是不會增加任何的效果改變的藕施,但是語義變了。

    總結(jié):div中的所有元素是一個小區(qū)域裳食,div是一個容器級標簽诲祸,里面什么都可以存放而昨,甚至可以放div自己

    2.2找田、SPAN

    span表達“小區(qū)域、小跨度”的標簽躺孝,是一個文本級的標簽

    Span里面只能存放圖片,文字惧眠,表單元素氛魁。Span不能存放p、h捶码、ul或链、dl、ol祈纯、div叼耙。

    2.3div+css布局

    詳情參見代碼示例

    2.4表單元素

    表單就是收集數(shù)據(jù)的筛婉,就是讓用戶添加當前的數(shù)據(jù)

    Form標簽

    Form標簽里面action和method屬性,

    在ajax課程:

    action屬性表示的就是“表單提交到那里去”

    method屬性表示是用什么HTTP(get入蛆、post)方式提交

    Input表示“輸入”匆浙,指的是輸入一個小部件

    Type表示:“類型”

    Text表示“文本”首尼,指的是一個文本框的小部件

    Password表示的是一個密碼框的小部件

    Radio表示的是一個單選按鈕

    Checkbox表示的是一個復選框

    Button表示的一個按鈕

    Submit表示一個提交按鈕言秸,默認沒有value屬性

    Reset表示是一個重置按鈕

    Selected表示是一個下拉框

    Label表示的是綁定input里面的id迎捺,使input和label進行綁定

    最后編輯于
    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
    • 序言:七十年代末凳枝,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子叛买,更是在濱河造成了極大的恐慌蹋订,老刑警劉巖,帶你破解...
      沈念sama閱讀 217,084評論 6 503
    • 序言:濱河連續(xù)發(fā)生了三起死亡事件椒功,死亡現(xiàn)場離奇詭異动漾,居然都是意外死亡荠锭,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
      沈念sama閱讀 92,623評論 3 392
    • 文/潘曉璐 我一進店門键思,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吼鳞,“玉大人叫搁,你說我怎么就攤上這事〖驳常” “怎么了惨奕?”我有些...
      開封第一講書人閱讀 163,450評論 0 353
    • 文/不壞的土叔 我叫張陵梨撞,是天一觀的道長香罐。 經(jīng)常有香客問我时肿,道長,這世上最難降的妖魔是什么旦签? 我笑而不...
      開封第一講書人閱讀 58,322評論 1 293
    • 正文 為了忘掉前任宁炫,我火速辦了婚禮击吱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己永脓,他們只是感情好鞋仍,可當我...
      茶點故事閱讀 67,370評論 6 390
    • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著落午,像睡著了一般肚豺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上梗劫,一...
      開封第一講書人閱讀 51,274評論 1 300
    • 那天梳侨,我揣著相機與錄音日丹,去河邊找鬼。 笑死丙躏,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的对妄。 我是一名探鬼主播敢朱,決...
      沈念sama閱讀 40,126評論 3 418
    • 文/蒼蘭香墨 我猛地睜開眼拴签,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蚓哩?” 一聲冷哼從身側(cè)響起岸梨,我...
      開封第一講書人閱讀 38,980評論 0 275
    • 序言:老撾萬榮一對情侶失蹤曹阔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后赃份,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
      沈念sama閱讀 45,414評論 1 313
    • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
      茶點故事閱讀 37,599評論 3 334
    • 正文 我和宋清朗相戀三年尝江,在試婚紗的時候發(fā)現(xiàn)自己被綠了彪薛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
      茶點故事閱讀 39,773評論 1 348
    • 序言:一個原本活蹦亂跳的男人離奇死亡少态,死狀恐怖彼妻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情侨歉,我是刑警寧澤幽邓,帶...
      沈念sama閱讀 35,470評論 5 344
    • 正文 年R本政府宣布,位于F島的核電站柒啤,受9級特大地震影響畸颅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涛癌,卻給世界環(huán)境...
      茶點故事閱讀 41,080評論 3 327
    • 文/蒙蒙 一拳话、第九天 我趴在偏房一處隱蔽的房頂上張望种吸。 院中可真熱鬧,春花似錦、人聲如沸姜钳。這莊子的主人今日做“春日...
      開封第一講書人閱讀 31,713評論 0 22
    • 文/蒼蘭香墨 我抬頭看了看天上的太陽判呕。三九已至送滞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間边涕,已是汗流浹背。 一陣腳步聲響...
      開封第一講書人閱讀 32,852評論 1 269
    • 我被黑心中介騙來泰國打工园爷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留式撼,地道東北人。 一個月前我還...
      沈念sama閱讀 47,865評論 2 370
    • 正文 我出身青樓扰楼,卻偏偏與公主長得像灭抑,于是被迫代替她去往敵國和親抵代。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
      茶點故事閱讀 44,689評論 2 354

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

    • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
      程序員poetry閱讀 16,552評論 32 459
    • 一、學習目標 主要是學習web開發(fā)中的一些基本性的概念劈榨,例如b/s架構(gòu)晦嵌,web服務器,dns等等旱函。同時還要學習HT...
      我愛開發(fā)閱讀 741評論 0 7
    • 一,有序列表描滔、無序列表棒妨、自定義列表如何使用?寫個簡單的例子含长。三者在語義上有什么區(qū)別券腔?在哪些情況下使用哪種(重要)?...
      kingBirds閱讀 824評論 0 0
    • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途拘泞。 HTML5 HTML介紹 H...
      PYLON閱讀 3,223評論 0 5
    • 1纷纫、HTML介紹 1 2、Html和CSS的關(guān)系 HTML是網(wǎng)頁內(nèi)容的載體田弥。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶...
      夏沫xx閱讀 1,375評論 0 8