二階段001day html

1.什么是html(結構標準)

html是超文本標記語言

超文本 - 除了文字以外藻懒,還可以對圖片豪墅、視頻昧辽、音頻、超鏈接楷兽、按鈕绪囱、輸入框等進行標記
標記語言 - 不是編程語言,和MacDown語法一樣另假,只是通過不同的標記讓內(nèi)容以不一樣的形式顯示出來。
          如果語法出錯不會影響其他正確的標記的效果  
          
2.什么是html文件
文件后綴.html的文件资铡;可以直接通過瀏覽器打開电禀。一般情況下,html代碼就寫在html文件中  

3.html版本
狹義的h5 - html第5個大版本(支持移動網(wǎng)頁開發(fā))
廣義的h5 - html5+css3+js

4.網(wǎng)頁結構 - 樹
整個網(wǎng)頁是一個html標簽笤休,html中直接包含head標簽和body標簽尖飞。

5.標簽(標記)
html就是通過不同的標簽對網(wǎng)頁中的內(nèi)容進行標記的
a.結構
雙標簽: <標簽名 屬性名1=屬性值1 屬性名2=屬性值2 ...>標簽內(nèi)容</標簽名>
單標簽: <標簽名 屬性名1=屬性值1 屬性名2=屬性值2 ...> 或 <標簽名 屬性名1=屬性值1 屬性名2=屬性值2 .../>
b.說明
標簽名 - 只能寫html提供的標簽,不能隨便命名; 標簽名前不能加空格
屬性 - 屬性放在單標簽或者雙標簽的開始標簽中店雅,以‘屬性名=值’的形式出現(xiàn)政基,多個屬性之間用空格隔開;
       屬性順序隨意,不會影響最終的效果闹啦;
標簽內(nèi)容 - 雙標簽的開始標簽和結束標簽之間是標簽內(nèi)容沮明;標簽內(nèi)容可以是任何內(nèi)容(可以寫文字,也可以放其他的標簽)
       
6.head標簽
head標簽中主要包含以下內(nèi)容:
meta標簽 - 元標簽(單標簽)  charset="UTF-8" -設置編碼方式
title標簽 - 設置網(wǎng)頁標題
link標簽 - 導入外部文件(設置圖標窍奋,導入css文件)
style標簽 - 導入css代碼
script標簽 - 導入js文件和導入js代碼
base標簽 - 設置網(wǎng)頁中的基本url


注意:html語法中不區(qū)分大小寫珊擂, html == HTML == HtmL

-->

<!DOCTYPE html>


<html>

<head>

<meta charset="UTF-8">

<title>千鋒教育-做真實的自己,用良心做教育</title>
</head>

<!--網(wǎng)頁內(nèi)容部分(可見的)-->
<body>
    python
</body>

</html>

2.文本標簽

1.標題標簽(h1~h6)
雙標簽
網(wǎng)頁中標題的部分使用標題標簽

2.段落標簽(p)
雙標簽
網(wǎng)頁中一段文字就用一個p標簽费变;一個p標簽的內(nèi)容在一個段落顯示摧扇,如果有多個段落需要多個p標簽

        注意:html中,在文本內(nèi)容中輸入回車挚歧,換行無效(在網(wǎng)頁上顯示的時候)

3.文本符號和強制換行標簽
a.空格符號:
? - 空一個像素
? - 一個空格

        b.換行標簽(br)
        單標簽

4.文字效果標簽
a.文字加粗
b標簽 - 單純的對文字進行加粗
strong標簽 - 除了對文字進行加粗扛稽,還有強調(diào)的意思

        b.文字傾斜
        i標簽 - 單純的對文字進行傾斜
        em標簽 - 除了對文字進行傾斜,還有強調(diào)的意思
        
        c.水平線(hr)
        單標簽
        hr標簽 - hr所在的位置設置一個水平線

5.文字標簽(font)
單純的顯示一段文字滑负,多個font標簽之間不會自動換行(多個p標簽之間會自動換行)

3.列表標簽

列表標簽
如果網(wǎng)頁中的多個內(nèi)容在张,他們屬于具有相同意義的內(nèi)容用含,就可以用一個列表標簽將他們放在一起

1.無序列表(ul-li)
ul標簽 - 代表整個列表
li - 表示列表中的元素

-2.有序列表(ol-li)
ol標簽 - 代表整個列表
li - 表示列表中的元素

3.自定義列表(dl-dt-dd)
dl - 代表整個列表
dt - 列表中的分組
dd - 每個分組下面的元素

4.圖片標簽

圖片標簽(img) - 單標簽
網(wǎng)頁上幾乎所有的圖片都是使用img標簽直接或者間接的顯示的

        1.src屬性 - 設置圖片地址
        a.本地圖片 - 值為本地圖片的路徑(可以是相對路徑,也可以是絕對路徑;一般使用相對路徑)
        b.網(wǎng)絡圖片 - 值為網(wǎng)絡圖片的url  
        
        2.title屬性 - 設置圖片標題
        當鼠標停留在圖片上才會顯示出來
        
        3.alt屬性 - 設置圖片加載失敗的提示信息
        只有在圖片加載失敗的時候才會顯示

5.超鏈接

超鏈接標簽(a)
點擊可以跳轉(zhuǎn)到其他頁面的內(nèi)容就是超鏈接

        1.內(nèi)容
        超鏈接在網(wǎng)頁中可見并且可點擊的部分帮匾;可以是文字啄骇,也可以是圖片
    -->
    <!--文字超鏈接-->
    <a href="">百度一下</a>
    <!--圖片超鏈接-->
    <a href="">
        <img src="img/luffy2.png"/>
    </a>
    <hr />

2.href屬性 - 超鏈接點擊后跳轉(zhuǎn)的目標地址
a.設置另外一個網(wǎng)頁的地址 - 跳轉(zhuǎn)到指定網(wǎng)頁
b.設置成另一個本地html文件路徑 - 跳轉(zhuǎn)到本地網(wǎng)頁中
c.設置成當前頁面的標簽對應的選擇器 - 讓當前網(wǎng)頁滾動到指定的位置
d.設置為空 - 刷新網(wǎng)頁(會重新請求數(shù)據(jù))
3.target屬性
_self(默認值) - 在當前頁面中顯示新的網(wǎng)頁
_blank - 在新的頁面中顯示新的網(wǎng)頁

6.表格標簽

表格標簽(table-tr-td)
table標簽 - 代表整個表格
tr標簽 - 代表表格中的每一行
td - 代表表格中的每一個單元格

        1.border - 設置邊框?qū)挾?單位是像素)
        設置整個表格的邊框?qū)挾葹閎order,同時設置每個單元的邊框?qū)挾葹?
        
        2.bordercolor - 設置邊框顏色
        html中的顏色值:a.顏色的英語單詞瘟斜,例如:red, yellow, green, pink
                       b.rgb對應的16進制值,前加#, 例如:#ff0000(紅色)  #00ff00(綠色)  #0000ff(藍色)
        
        3.cellspacing - 設置表格中單元格和單元格之間缸夹,以及單元格和邊框之間的間距
        
        4.cellpadding - 設置表格中的內(nèi)容到單元格邊框之間的間距
        默認情況下,單元格的大小跟內(nèi)容的大小有關
        
        5.bgcolor - 設置背景顏色
        作為table屬性 - 設置整個表格的背景顏色
        作為tr屬性 - 設置一行的背景顏色
        作為td屬性 - 設置一個單元格的背景顏色
        
        6.width - 設置寬度
        作為table屬性 - 設置整個列表的寬度
        作為td屬性 - 設置當前td所在的列的寬度
        
        7.height - 設置高度
        作為table屬性 - 設置整個列表的高度
        作為tr屬性 - 設置一行的高度
        
        8.align - 設置水平對齊方式
        letf(默認) - 左對齊
        right - 右對齊
        center - 居中
        作為table屬性 - 讓整個表格在網(wǎng)頁中左對齊、右對齊、居中
        作為tr屬性 - 讓一行中所有的單元格中的內(nèi)容候衍,在單元格中左對齊、右對齊芽唇、居中
        作為td屬性 - 讓一個單元格中的內(nèi)容,在單元格中左對齊取劫、右對齊匆笤、居中
        
        
        注意:html中所有的屬性值都是寫在雙引號里面

7.合并

colspan - 列合并
rowspan - 行合并

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市谱邪,隨后出現(xiàn)的幾起案子炮捧,更是在濱河造成了極大的恐慌,老刑警劉巖虾标,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寓盗,死亡現(xiàn)場離奇詭異灌砖,居然都是意外死亡璧函,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門基显,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蘸吓,“玉大人,你說我怎么就攤上這事撩幽】饧蹋” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵窜醉,是天一觀的道長宪萄。 經(jīng)常有香客問我,道長榨惰,這世上最難降的妖魔是什么拜英? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮琅催,結果婚禮上居凶,老公的妹妹穿的比我還像新娘虫给。我一直安慰自己,他們只是感情好侠碧,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布抹估。 她就那樣靜靜地躺著,像睡著了一般弄兜。 火紅的嫁衣襯著肌膚如雪药蜻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天挨队,我揣著相機與錄音谷暮,去河邊找鬼。 笑死盛垦,一個胖子當著我的面吹牛湿弦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播腾夯,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼颊埃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蝶俱?” 一聲冷哼從身側響起班利,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎榨呆,沒想到半個月后罗标,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡积蜻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年闯割,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片竿拆。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡宙拉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出丙笋,到底是詐尸還是另有隱情谢澈,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布御板,位于F島的核電站锥忿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏怠肋。R本人自食惡果不足惜敬鬓,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧列林,春花似錦瑞你、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至砌创,卻和暖如春虏缸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嫩实。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工刽辙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人甲献。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓宰缤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親晃洒。 傳聞我的和親對象是個殘疾皇子慨灭,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

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

  • 瀏覽器與服務器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看。 ②讓用戶通...
    云還灬閱讀 1,123評論 0 0
  • HTML需要掌握標簽 標簽(空格分隔): H5+CSS [TOC] 常用標簽 img 注意點 和H系列標簽/p標簽...
    袁俊亮技術博客閱讀 2,051評論 1 8
  • 瀏覽器請求數(shù)據(jù)過程 1.URL http://127.0.0.1/index.html(瀏覽器會自動添加80) h...
    菜鳥白澤閱讀 743評論 0 0
  • 概述 在網(wǎng)易云課堂學習李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時球及,所整理的筆記氧骤。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,340評論 0 7
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS吃引、java...
    廖少少閱讀 2,086評論 2 21