day21 HTML

什么是HTML?

HTML 指的是超文本標(biāo)記語言: HyperText Markup Language
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML文件后綴名:htm撰茎,html
HTML編輯器:sublime,HBuilderX

HTML使用基礎(chǔ)

HTML初識

1.標(biāo)簽 - 承載內(nèi)容
2.層疊樣式表 - 渲染頁面
3.JavaScript - 交互式行為
HTML的格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

注釋:在HTML中注釋使用

<!--  -->

HTML 簡單操作

1.標(biāo)題
HTML 標(biāo)題(Heading)是通過<h1> - <h6> 標(biāo)簽來定義的

2.段落
HTML 段落是通過標(biāo)簽 <p> 來定義的

<p>這是一個段落</p>
<p>這是另外一個段落</p>

<br>換行

3.列表
1)有序列表<ol>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

顯示結(jié)果
1.Coffee
2.Milk
2)無序列表<ul>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

顯示結(jié)果

  • Coffee
  • Milk

3)自定義列表<dl>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

顯示結(jié)果
Coffee
- black hot drink
Milk
- white cold drink
注意:列表中可以疊加

4.表格
鍵入<table<tr*>td*>后tab鍵插入表格,<caption>表格名稱</caption>
rowspan="2"為列并格2格楼入,align="center" 為居中(align=" "為對齊)
rowspan="2"為行并格2格

<!--table<tr*4>td*5 -->
        <table border="1">
            <caption>學(xué)生考試成績</caption>
            <thead>
                <tr>
                    <th width="120">姓名</th>
                    <th width="100">數(shù)學(xué)</th>
                    <th width="100">語文</th>
                    <th width="100">物理</th>
                    <th width="100">化學(xué)</th>
                </tr>
            </thead>
                <tr>
                    <td>王大錘</td>
                    <td>89</td>
                    <td colspan="2" align="center">45</td>
                    <td>56</td>
                </tr>
            <tbody>
                <tr>
                    <td rowspan="2"align="center">李四</td>
                    <td>35</td>
                    <td>78</td>
                    <td>76</td>
                    <td>89</td>
                </tr>
                <tr>
                    <td>78</td>
                    <td>66</td>
                    <td>98</td>
                    <td>56</td>
                </tr>
            </tbody>

4.字符實(shí)體
& - &amp; 空格 - &nbsp;等,見菜鳥教程

5.圖像
<img src="url" alt="some_text">祝蝠,src后面是圖片地址,可以是本地地址(相對路徑)幻碱,也可以是網(wǎng)絡(luò)地址。alt后面是地址失效后顯示的文本內(nèi)容细溅,可自定義

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

width,height分別調(diào)整圖像寬度和高度

6.超鏈接
HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連褥傍。幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面喇聊。
HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接恍风,在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。

<a >訪問菜鳥教程</a>

使用 target 屬性,你可以定義被鏈接的文檔在何處顯示朋贬。
下面的這行會在新窗口打開文檔:

<a  target="_blank">訪問菜鳥教程!</a>

6.函數(shù)
HTML中函數(shù)function 函數(shù)名() {函數(shù)體}
自帶函數(shù)window

7.按鍵
在HTML中使用<button></button>來創(chuàng)建按鍵

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末凯楔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子锦募,更是在濱河造成了極大的恐慌摆屯,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糠亩,死亡現(xiàn)場離奇詭異虐骑,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)赎线,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門廷没,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人垂寥,你說我怎么就攤上這事颠黎。” “怎么了滞项?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵狭归,是天一觀的道長。 經(jīng)常有香客問我蓖扑,道長唉铜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任律杠,我火速辦了婚禮潭流,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘柜去。我一直安慰自己灰嫉,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布嗓奢。 她就那樣靜靜地躺著讼撒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪股耽。 梳的紋絲不亂的頭發(fā)上根盒,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天,我揣著相機(jī)與錄音物蝙,去河邊找鬼炎滞。 笑死,一個胖子當(dāng)著我的面吹牛诬乞,可吹牛的內(nèi)容都是我干的册赛。 我是一名探鬼主播钠导,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼森瘪!你這毒婦竟也來了牡属?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤扼睬,失蹤者是張志新(化名)和其女友劉穎逮栅,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痰驱,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡证芭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了担映。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片废士。...
    茶點(diǎn)故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蝇完,靈堂內(nèi)的尸體忽然破棺而出官硝,到底是詐尸還是另有隱情,我是刑警寧澤短蜕,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布氢架,位于F島的核電站,受9級特大地震影響朋魔,放射性物質(zhì)發(fā)生泄漏岖研。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一警检、第九天 我趴在偏房一處隱蔽的房頂上張望孙援。 院中可真熱鬧,春花似錦扇雕、人聲如沸拓售。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽础淤。三九已至,卻和暖如春哨苛,著一層夾襖步出監(jiān)牢的瞬間鸽凶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工建峭, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吱瘩,地道東北人。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓迹缀,卻偏偏與公主長得像使碾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子祝懂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評論 2 360

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

  • 1認(rèn)識html 1.1什么是html html是超文本標(biāo)記語言超文本:除了文字以外票摇,還可以對圖片、視頻砚蓬、音頻矢门、超鏈...
    barriers閱讀 232評論 0 0
  • 1.結(jié)構(gòu)標(biāo)準(zhǔn) 1.1.什么是html(結(jié)構(gòu)標(biāo)準(zhǔn))html是超文本標(biāo)記語言超文本 - 除了文字以外,還可以對圖片灰蛙、視...
    未醒的夢_19b0閱讀 320評論 0 0
  • web基礎(chǔ): 1祟剔、web標(biāo)準(zhǔn):(萬維網(wǎng)-w3c決定)結(jié)構(gòu)標(biāo)準(zhǔn): HTML -> 決定網(wǎng)頁上有什么東西(能夠顯示什...
    七夜_174e閱讀 188評論 0 1
  • 今天開始python學(xué)習(xí)的第二階段,進(jìn)入web前端的學(xué)習(xí)摩梧; 一物延、web前端簡介 1、web標(biāo)準(zhǔn)web前端的內(nèi)容:H...
    d4lx閱讀 209評論 0 0
  • 1. web基礎(chǔ): web標(biāo)準(zhǔn)(萬維網(wǎng)-w3c):結(jié)構(gòu)標(biāo)準(zhǔn):HTML --- 決定網(wǎng)頁上有什么東西(能夠顯示什...
    奈斯凸米特閱讀 183評論 0 2