HTML學(xué)習(xí)筆記(一)

windows系統(tǒng)下學(xué)習(xí)html開發(fā)的工具:記事本贡茅、WebStorm

若使用記事本開發(fā)爪瓜,編碼格式要改為UTF-8,后綴為.html宗挥。

學(xué)習(xí)html的網(wǎng)站:

html參考手冊(cè):中文

http://www.w3school.com.cn/

http://www.runoob.com/

html reference: English and/or Chinese

https://developer.mozilla.org/zh-CN/docs/Web

http://docs.webplatform.org/wiki/Main_Pagezzzz


html標(biāo)題

<head>看起來(lái)指代的是標(biāo)題掰派,其實(shí)并不是从诲,它定義的是網(wǎng)頁(yè)的一些屬性。

那么html的標(biāo)題指的是什么呢靡羡?我接觸到的是這樣幾個(gè):

<h1><h2><h3><h4><h5><h6>

一級(jí)~六級(jí)標(biāo)題

code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>html學(xué)習(xí)筆記1</title>

</head>

<body>

<h1>一級(jí)標(biāo)題</h1>

<h2>二級(jí)標(biāo)題</h2>

<h3>三級(jí)標(biāo)題</h3>

<h4>四級(jí)標(biāo)題</h4>

<h5>五級(jí)標(biāo)題</h5>

<h6>六級(jí)標(biāo)題</h6>

</body>

</html>

*注明*

<!DOCTYPE html>聲明為 HTML5 文檔

<html>元素是 HTML 頁(yè)面的根元素

<head>元素包含了文檔的元(meta)數(shù)據(jù)

<title>元素描述了文檔的標(biāo)題

<body>元素包含了可見的頁(yè)面內(nèi)容


html段落

<p>這是一個(gè)段落</p>


html空格

html是空白不敏感的語(yǔ)言系洛,任意多個(gè)空格會(huì)被認(rèn)作一個(gè),任意多個(gè)換行也會(huì)被認(rèn)作一個(gè)空格略步。

東亞雙寬的字符若是寫的時(shí)候不同行描扯,在顯示的時(shí)候會(huì)被放在同行,中間加上一個(gè)空格纳像。



要使得文字換行顯示荆烈,就要用到<br>

如:<h1>一級(jí)<br>標(biāo)題</h1>


要使文字中間有多個(gè)空格,使用轉(zhuǎn)義符&nbsp; (nbsp: non-breakable space)

如:<h1>一級(jí)&nbsp;&nbsp;&nbsp;標(biāo)題</h1>



html轉(zhuǎn)義符

既然講到html轉(zhuǎn)義符了就再舉一些常見的轉(zhuǎn)義符的例子:

在html中竟趾,被尖括號(hào)< >括起來(lái)的內(nèi)容一般都是有一定屬性涵義的憔购,并且html有一定的容錯(cuò)率,如果我們?cè)诩饫ㄌ?hào)里加上一段不知所云的英文岔帽,html雖然識(shí)別不了玫鸟,但是它會(huì)盡可能地理解你,用它博大的胸懷包容你犀勒,顯示出它認(rèn)為你可能想要的內(nèi)容屎飘。

比如


充滿人文關(guān)懷
那么如果我們就是想要顯示尖括號(hào)內(nèi)的那一坨內(nèi)容要怎么辦呢,豈不是會(huì)被人道毀滅贾费?

因此這個(gè)時(shí)候钦购,轉(zhuǎn)義符就上場(chǎng)了。

< : &lt; ?(less than)

>: ?&gt; ?(greater than)

<br>&lt;Hello World&gt;

&: &amp;


html字體

<u>下劃線</u>

<i>斜體</i>

<b>加粗</b>


html高亮

<mark>Hello World</mark>

<mark>中的默認(rèn)屬性是字體背景變?yōu)榱咙S色褂萧,但是這個(gè)屬性是可以改的押桃。

<mark style="color:red>content</mark> ?字體顏色變?yōu)榧t色,背景色仍為黃色

<mark style="ground-color:red">content</mark> ?字體顏色不變导犹,背景色變?yōu)榧t色


<strong> & <em>

通常唱凯,我們使用<strong>代替<b>羡忘,用<em>代替<i>。

因?yàn)?lt;b>和<i>只是將某段內(nèi)容進(jìn)行格式上的改動(dòng)磕昼,卻沒有賦予內(nèi)容一定的語(yǔ)義內(nèi)涵(semantic)卷雕。


html鏈接<a>

<a href="網(wǎng)址/地址">標(biāo)簽文字</a> ? href: hyper-reference

目標(biāo)打開方式:

<a href="target.html" target="...">

target:

_blank: 在新窗口中打開被鏈接文檔

_self: default。在相同框架下打開被鏈接文檔

_parent: 和父框架集的打開形式一樣

_top: 在整個(gè)窗口中打開

framename: 在指定框架中打開


html圖片img

引用與html文件在同一文件夾下的圖片文件:

<img src="文件名.jpg" alt="alt是圖片無(wú)法正常加載時(shí)顯示的內(nèi)容" width="30%"(or width=100px票从,在不指定height的情況下圖片等比例縮放)>

引用與html文件不在同一文件下的圖片文件:

<img src="相對(duì)路徑/文件名"/>

相對(duì)路徑:相對(duì)于引用此文件的html的路徑的路徑

<img src="img/01/Koala.jpg"/>

將一張圖片作為打開超鏈接的媒介:

<a href="target.html" target="_blank">

<img src="Koala.jpg" alt="圖片無(wú)法正常加載">

</a>


html列表

<ol> ordered list

<ul> ?un-ordered list

<li> ?listitem


可多層嵌套

html定義列表

<dl> ?define list

<dt> ?define term

<dd> ?define description



寫法不同漫雕,效果一樣


html引用

.. ?父級(jí)別

. ?同級(jí)別


兩個(gè)比較特別的標(biāo)簽

<div></div> 塊狀內(nèi)容block

<span></span>行內(nèi)內(nèi)容in-line

用它們?cè)谶壿嬌蟻?lái)組織網(wǎng)頁(yè)內(nèi)容

<div id="heading">

通知

</div>

<div id="content">

<p>第一段</p>

<p>第二段</p>

</div>

<div id="footer">

<span>署名</span>

</div>



<style>

$Title$

#heading{

color:palevioletred;

}

#content{

font-size:200%;

}

</style>


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市纫骑,隨后出現(xiàn)的幾起案子蝎亚,更是在濱河造成了極大的恐慌,老刑警劉巖先馆,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異躺彬,居然都是意外死亡煤墙,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門宪拥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)仿野,“玉大人,你說(shuō)我怎么就攤上這事她君〗抛鳎” “怎么了?”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵缔刹,是天一觀的道長(zhǎng)球涛。 經(jīng)常有香客問我,道長(zhǎng)校镐,這世上最難降的妖魔是什么亿扁? 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮鸟廓,結(jié)果婚禮上从祝,老公的妹妹穿的比我還像新娘。我一直安慰自己引谜,他們只是感情好回怜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著虱疏,像睡著了一般力试。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上骏融,一...
    開封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天链嘀,我揣著相機(jī)與錄音萌狂,去河邊找鬼。 笑死怀泊,一個(gè)胖子當(dāng)著我的面吹牛茫藏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播霹琼,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼务傲,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了枣申?” 一聲冷哼從身側(cè)響起售葡,我...
    開封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎忠藤,沒想到半個(gè)月后挟伙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡模孩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年尖阔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榨咐。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡介却,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出块茁,到底是詐尸還是另有隱情齿坷,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布数焊,位于F島的核電站永淌,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏昌跌。R本人自食惡果不足惜仰禀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蚕愤。 院中可真熱鬧答恶,春花似錦、人聲如沸萍诱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)裕坊。三九已至包竹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背周瞎。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工苗缩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人声诸。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓酱讶,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親彼乌。 傳聞我的和親對(duì)象是個(gè)殘疾皇子泻肯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

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