html基礎(chǔ)

html標(biāo)簽

標(biāo)簽 == 標(biāo)記

 1.標(biāo)簽語法
 雙標(biāo)簽(常規(guī)標(biāo)簽): <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2...> 標(biāo)簽內(nèi)容 </標(biāo)簽名>
 單標(biāo)簽: <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2.../> 或者  <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2...> 
 
 說明:
 標(biāo)簽名 - 是html中已有的標(biāo)簽倦挂,不能自己隨便命名鳖谈。標(biāo)簽名和<以及標(biāo)簽名和/之間都不能有空隙
 屬性 - 屬性和屬性值之間用:連接斗锭,多個屬性之間用空格隔開爪膊。所有的屬性沒有位置要求
 標(biāo)簽內(nèi)容 - 在開始標(biāo)簽和結(jié)束標(biāo)簽之間爹耗,標(biāo)簽的內(nèi)容可以是任意的(可以文本也可以是其他標(biāo)簽)
 
 
 2.head標(biāo)簽中的內(nèi)容
 head中的標(biāo)簽有:title,mate, base, link, style, script
 title - 設(shè)置網(wǎng)頁標(biāo)題
 meta - 設(shè)置網(wǎng)頁元數(shù)據(jù)(單標(biāo)簽)
 
 3.body
 body中的標(biāo)簽主要用來在網(wǎng)頁的內(nèi)容中添加顯示信息的

文本標(biāo)簽

2.段落標(biāo)簽 p
    一個段落使用一個p標(biāo)簽幔烛,p標(biāo)簽會換行
     -->
     <p> JSON是一種取代XML的數(shù)據(jù)結(jié)構(gòu),和xml相比,它更小巧但描述能力卻不差,由于它的小巧所以網(wǎng)絡(luò)傳輸數(shù)據(jù)將減少更多流量從而加快速度,</p>
     <p>那么,JSON到底是什么?</p>
     
     
     
    
     3.特殊功能和符號
     html中文本中的換行,空格,tab等都是無效的
     換行:<br>
     空格:&nbsp;
    
       <p>
           &nbsp;&nbsp;忽如一夜春風(fēng)來,<br>
           &nbsp;千樹萬樹梨花開.<br>
                  
       </p>
    
    
    
     4.字體相關(guān)標(biāo)簽
     加粗:<b></b>本冲,<strong></strong>
     b標(biāo)簽只是單純的文字效果加粗,strong標(biāo)簽有強(qiáng)調(diào)的意思
     
     傾斜: i標(biāo)簽/em標(biāo)簽
     i標(biāo)簽只是單純的文字效果傾斜,em標(biāo)簽有強(qiáng)調(diào)的意思
     <hr>水平線
    

列表標(biāo)簽

列表標(biāo)簽分為有序列表,無序標(biāo)簽,自定義列表
1.有序列表:
        ol標(biāo)簽  --代表整個列表
        li標(biāo)簽  -- 代表列表中的元素
2.無序列表:
        ul標(biāo)簽  --代表整個列表
        li標(biāo)簽  -- 代表列表中的元素

3.自定義列表
        dl標(biāo)簽 -代表整個列表
        dt標(biāo)簽 -分組名
        dd標(biāo)簽 -分組的內(nèi)容

圖片和超鏈接

 1.圖片標(biāo)簽:img
        單標(biāo)簽
        
        a.src屬性 - 圖片地址(可以本地圖片路徑也可以說是網(wǎng)絡(luò)圖片url)
        本地圖片:地址可以是絕對路徑也可以是相對路徑,一般吧圖片放在img文件夾中,然后寫相對路徑
        
        b.title - 設(shè)置圖片標(biāo)題(鼠標(biāo)停留在圖片上,顯示的內(nèi)容)
        c.alt  設(shè)置圖片加載失敗的提示信息

  2.超鏈接標(biāo)簽:a標(biāo)簽
          a.內(nèi)容 -文字/圖片
          b.href -跳轉(zhuǎn)的目標(biāo)地址
          c.target - 跳轉(zhuǎn)方式
可以是文字超鏈接和圖片超鏈接

href跳轉(zhuǎn)到的目標(biāo)地址
        1.href可以跳轉(zhuǎn)到網(wǎng)絡(luò)地址 
        2.也可以跳到本地html文件地址
        3.不寫href可以刷新網(wǎng)頁
        4.可以選擇器,跳轉(zhuǎn)到指定的位置

target 跳轉(zhuǎn)方式
        _self - 默認(rèn)值,在當(dāng)前頁面加載新的網(wǎng)頁
        _blank 創(chuàng)建一個新的窗口打開網(wǎng)頁

數(shù)據(jù)表格

1.表格標(biāo)簽 
        table標(biāo)簽  -整個表格
        tr - 行
        td - 單元格(列)
        
        2.邊框相關(guān)屬性
        border - 邊框的寬度設(shè)置的是最大的外面邊框和里面的小邊框
        bordercolor - 背景顏色  傳的可以是英語單詞,也可以是RGB對應(yīng)的16進(jìn)制值
        cellspacing - 單元格和單元格之間的間隙
        cellpadding -  設(shè)置內(nèi)容和單元格邊框之間的間距
        
        3.背景顏色屬性
        bgcolor - 背景顏色
        a.作為table屬性 - 設(shè)置整個表格的背景顏色
        b.作為tr屬性  - 設(shè)置一行的背景顏色
        c.作為td屬性 - 設(shè)置一個單元格的背景顏色

                4.寬度和高度 
        width 和 height
        a.作用與table - 設(shè)置整個表格的寬度和高度(會按比例分配每)
        b.分別設(shè)置每一行的高度和寬度
        
        
        5.對齊方式
        align -center/left/right
        a.作用于table,讓整個表格在父標(biāo)簽中居中/左對齊/右對齊
        b.作用于tr ,讓整行的內(nèi)容居中/左對齊/右對齊
        c.作用于td,讓指定的單元居中/左對齊/右對齊

             應(yīng)用:細(xì)線表格
         第一步:設(shè)置整個表格的背景顏色(邊框顏色) 和每個單元格的背景顏色(表格內(nèi)容的顏色)不一樣
         第二步:設(shè)置cellspacing的值為邊框的寬度

不規(guī)則表格

 1.制作復(fù)雜表格的方法:
         a.確定表格的最大行數(shù)用tr表示出來
         b.確定每一行有多少個單元格(共用的單元格只算一次)
         c.確定每一個單元格是否有合并現(xiàn)象,如果是行合并就設(shè)置rowspan的值,
         如果是列合并就設(shè)置colspan的值
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末邪媳,一起剝皮案震驚了整個濱河市捐顷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雨效,老刑警劉巖套菜,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異设易,居然都是意外死亡逗柴,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進(jìn)店門顿肺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戏溺,“玉大人渣蜗,你說我怎么就攤上這事】趸觯” “怎么了耕拷?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長托享。 經(jīng)常有香客問我骚烧,道長,這世上最難降的妖魔是什么闰围? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任赃绊,我火速辦了婚禮,結(jié)果婚禮上羡榴,老公的妹妹穿的比我還像新娘碧查。我一直安慰自己,他們只是感情好校仑,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布忠售。 她就那樣靜靜地躺著,像睡著了一般迄沫。 火紅的嫁衣襯著肌膚如雪稻扬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天羊瘩,我揣著相機(jī)與錄音腐螟,去河邊找鬼。 笑死困后,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的衬廷。 我是一名探鬼主播摇予,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼吗跋!你這毒婦竟也來了侧戴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤跌宛,失蹤者是張志新(化名)和其女友劉穎酗宋,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體疆拘,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蜕猫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哎迄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片回右。...
    茶點(diǎn)故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡隆圆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出翔烁,到底是詐尸還是另有隱情渺氧,我是刑警寧澤,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布蹬屹,位于F島的核電站侣背,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏慨默。R本人自食惡果不足惜贩耐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望业筏。 院中可真熱鬧憔杨,春花似錦、人聲如沸蒜胖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽台谢。三九已至寻狂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間朋沮,已是汗流浹背蛇券。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留樊拓,地道東北人纠亚。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像筋夏,于是被迫代替她去往敵國和親蒂胞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評論 2 361

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

  • 前言 本系列文章主要是基于W3school這個學(xué)習(xí)網(wǎng)站來總結(jié)的条篷,之所以會自己總結(jié)一番骗随,一來是因?yàn)榫W(wǎng)站中的實(shí)例效果,...
    AR7_閱讀 4,059評論 4 70
  • 瀏覽器請求數(shù)據(jù)過程 1.URL http://127.0.0.1/index.html(瀏覽器會自動添加80) h...
    菜鳥白澤閱讀 745評論 0 0
  • 學(xué)習(xí)目標(biāo): 了解常用瀏覽器 掌握WEB標(biāo)準(zhǔn) 理解標(biāo)簽語義化 掌握常用的排版標(biāo)簽 掌握常用的文本格式化圖像鏈接等標(biāo)簽...
    淡淡瘋閱讀 1,269評論 0 3
  • 學(xué)習(xí)目標(biāo): 了解常用瀏覽器 掌握WEB標(biāo)準(zhǔn) 理解標(biāo)簽語義化 掌握常用的排版標(biāo)簽 掌握常用的文本格式化圖像鏈接等標(biāo)簽...
    Mr大喵喵閱讀 1,396評論 0 4
  • HTML基礎(chǔ) 本文包括 HTML基本知識與結(jié)構(gòu) HTML常見標(biāo)簽 標(biāo)簽寫法與嵌套的討論 HTML赴叹、CSS鸿染、java...
    廖少少閱讀 2,088評論 2 21