第1章 Html介紹

1.Html和CSS的關系

學習web前端開發(fā)基礎技術需要掌握:HTML床牧、CSS艰垂、JavaScript語言桑寨。下面我們就來了解下這三門技術都是用來實現(xiàn)什么的:

  1. HTML是網(wǎng)頁內(nèi)容的載體揍庄。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字久窟、圖片秩冈、視頻等。
  2. CSS樣式是表現(xiàn)斥扛。就像網(wǎng)頁的外衣入问。比如,標題字體稀颁、顏色變化芬失,或為標題加入背景圖片、邊框等匾灶。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)棱烂。
  3. JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如:鼠標滑過彈出下拉菜單阶女〖彰樱或鼠標滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換秃踩〕挠悖可以這么理解,有動畫的吞瞪,有交互的一般都是用JavaScript來實現(xiàn)的馁启。
    下面給大家布置一個任務驾孔,在完成任務的時候芍秆,每輸入一行代碼,代碼窗口就會立即顯示出效果翠勉。

任務

我也來試試:為Hello World添加樣式
1.在右邊編輯器的第8行妖啥,輸入font-size:50px;
(注意結(jié)果窗口的文字大小的變化)。
2.在右邊編輯器的第9行对碌,輸入color:#930;
(注意結(jié)果窗口的文字顏色的變化)荆虱。
3.在右邊編輯器的第10行,輸入text-align:center;
(注意結(jié)果窗口的文字居中的變化)朽们。

屏幕快照 2016-11-01 下午4.44.43.png

2.認識html標簽

讓我們通過一個網(wǎng)頁的學習怀读,來對html標簽有一個初步理解。平常大家說的上網(wǎng)就是瀏覽各種各式各樣的網(wǎng)頁骑脱,這些網(wǎng)頁都是由html標簽組成的菜枷。下面就是一個簡單的網(wǎng)頁。效果圖如下:


我們來分析一下叁丧,這個網(wǎng)頁由哪些html標簽組成:
“勇氣”是網(wǎng)頁內(nèi)容文章的標題啤誊,<h1></h1>
就是標題標簽岳瞭,它在網(wǎng)頁上的代碼寫成<h1>勇氣</h1>
“三年級時...我也沒勇氣參加蚊锹⊥ぃ” 是網(wǎng)頁中文章的段落,<p></p>段落標簽牡昆。它在網(wǎng)頁上的代碼寫成<p>三年級時...我也沒勇氣參加姚炕。</p>

網(wǎng)頁上那張小女生的圖片,由img
標簽來完成的丢烘,它在網(wǎng)頁上的代碼寫成<img src="1.jpg">

網(wǎng)頁的完整代碼如下圖:



總結(jié)一下钻心,可以這么說,網(wǎng)頁中每一個內(nèi)容在瀏覽器中的顯示铅协,都要存放到各種標簽中捷沸。

屏幕快照 2016-11-01 下午4.51.13.png

3.標簽的語法

1.標簽由英文尖括號 <> 括起來,如<html>就是一個標簽狐史。
2.html中的標簽一般都是成對出現(xiàn)的痒给,分開始標簽結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/骏全。
如:

(1) <p></p>
(2)<div></div>
(3)<span></span>


3.標簽與標簽之間是可以嵌套的苍柏,但先后順序必須保持一致,如:<div>里嵌套<p>姜贡,那么</p>必須放在</div>的前面试吁。如下圖所示。

4.HTML標簽不區(qū)分大小寫楼咳,<h1><H1>是一樣的熄捍,但建議小寫,因為大部分程序員都以小寫為準母怜。

4.認識html文件基本結(jié)構(gòu)

這一節(jié)中我們來學習html文件的結(jié)構(gòu):一個HTML文件是有自己固定的結(jié)構(gòu)的余耽。

<html>
    <head>...</head>
    <body>...</body>
</html>

代碼講解:

  1. <html></html>稱為根標簽,所有的網(wǎng)頁標簽都在<html></html>中苹熏。

  2. <head> 標簽用于定義文檔的頭部碟贾,它是所有頭部元素的容器。頭部元素有<title>轨域、<script>袱耽、 <style>、<link>干发、 <meta>等標簽朱巨,頭部標簽在下一小節(jié)中會有詳細介紹。

  3. 在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容铐然,如<h1>蔬崩、<p>恶座、<a>、<img>等網(wǎng)頁內(nèi)容標簽沥阳,在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來跨琳。

5.認識head標簽

下面我們來了解一下<head>標簽的作用。
文檔的頭部描述了文檔的各種屬性和信息桐罕,包括文檔的標題等脉让。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標簽可用在 head 部分:

<head>
     <title>...</title> 
     <meta>
     <link>
     <style>...</style>
     <script>...</script>
</head>

<title>標簽:在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息功炮,它會出現(xiàn)在瀏覽器的標題欄中溅潜。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么,搜索引擎可以通過網(wǎng)頁標題薪伏,迅速的判斷出網(wǎng)頁的主題滚澜。每個網(wǎng)頁的內(nèi)容都是不同的,每個網(wǎng)頁都應該有一個獨一無二的title嫁怀。
例如:

<head>
     <title>hello world</title>
</head>

<title>標簽的內(nèi)容“hello world”會在瀏覽器中的標題欄上顯示出來设捐,如下圖所示:


<head>標簽中的其它標簽內(nèi)容的講解,會在以后的章節(jié)中為大家一一講解塘淑。

6.了解HTML的代碼注釋

什么是代碼注釋萝招?代碼注釋的作用是幫助程序員標注代碼的用途,過一段時間后再看你所編寫的代碼存捺,就能很快想起這段代碼的用途槐沼。代碼注釋不僅方便程序員自己回憶起以前代碼的用途,還可以幫助其他程序員很快的讀懂你的程序的功能捌治,方便多人合作開發(fā)網(wǎng)頁代碼岗钩。
語法:
****

如:右邊編輯器的代碼的第 8、12 行都是具滴,但是你會發(fā)現(xiàn)注釋代碼是不會在結(jié)果窗口中顯示出來的凹嘲。

屏幕快照 2016-11-01 下午5.06.36.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市构韵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌趋艘,老刑警劉巖疲恢,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異瓷胧,居然都是意外死亡显拳,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門搓萧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杂数,“玉大人宛畦,你說我怎么就攤上這事∽嵋疲” “怎么了次和?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長那伐。 經(jīng)常有香客問我踏施,道長,這世上最難降的妖魔是什么罕邀? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任畅形,我火速辦了婚禮,結(jié)果婚禮上诉探,老公的妹妹穿的比我還像新娘日熬。我一直安慰自己,他們只是感情好肾胯,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布碍遍。 她就那樣靜靜地躺著,像睡著了一般阳液。 火紅的嫁衣襯著肌膚如雪怕敬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天帘皿,我揣著相機與錄音东跪,去河邊找鬼。 笑死鹰溜,一個胖子當著我的面吹牛虽填,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播曹动,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼斋日,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了墓陈?” 一聲冷哼從身側(cè)響起恶守,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贡必,沒想到半個月后兔港,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡仔拟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年唯袄,在試婚紗的時候發(fā)現(xiàn)自己被綠了甚垦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片禾酱。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖载佳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情臀栈,我是刑警寧澤蔫慧,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站挂脑,受9級特大地震影響藕漱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜崭闲,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一肋联、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧刁俭,春花似錦橄仍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至如孝,卻和暖如春宪哩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背第晰。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工锁孟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人茁瘦。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓品抽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親甜熔。 傳聞我的和親對象是個殘疾皇子圆恤,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

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

  • Html和CSS的關系學習web前端開發(fā)基礎技術需要掌握:HTML、CSS腔稀、JavaScript語言盆昙。下面我們就來...
    靜默丶閱讀 1,621評論 16 69
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,762評論 1 92
  • HTML基礎 本文包括 HTML基本知識與結(jié)構(gòu) HTML常見標簽 標簽寫法與嵌套的討論 HTML烧颖、CSS弱左、java...
    廖少少閱讀 2,088評論 2 21
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)炕淮,斷路器,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 子玩兒閱讀 171評論 0 1