總體內容
1泽谨、前端概述
2、html 文檔結構
3特漩、html 標題標簽、段落標簽骨杂、換行標簽 與 字符實體
4涂身、html 塊標簽行施、含樣式的標簽黍衙、語義化的標簽
5、html圖像標簽喂江、絕對路徑和相對路徑
6妒潭、html鏈接標簽
7悴能、html列表
一、前端概述
- 1.1雳灾、什么是前端開發(fā)漠酿？
答：前端開發(fā)也叫做web前端開發(fā)，它指的是基于web的互聯(lián)網(wǎng)產品的頁面(也可叫界面)開發(fā)及功能開發(fā)谎亩。 - 1.2炒嘲、什么互聯(lián)網(wǎng)產品宇姚？
答：互聯(lián)網(wǎng)產品就是指網(wǎng)站為滿足用戶需求而創(chuàng)建的用于運營的功能及服務，百度搜索夫凸、淘寶浑劳、微博、網(wǎng)易郵箱等都是互聯(lián)網(wǎng)產品夭拌。 - 1.3魔熏、前端開發(fā)需要哪些技術？
答：前端工程師參照產品的效果圖來開發(fā)頁面(也可叫界面)鸽扁，效果圖是由UI設計師用Photoshop(少量設計師用firework)來設計的蒜绽，為了方便與UI設計師對接工作，前端需要掌握一些Photoshop的技能献烦，Photoshop還可以輔助頁面開發(fā)滓窍。把效果圖布局成頁面，需要用到HTML語言和CSS語言巩那，頁面功能的開發(fā)需要用到javascript,為了快速開發(fā)和系統(tǒng)開發(fā)吏夯，還需要學習一些前端的javascript庫和框架。
二即横、html 概述和基本結構
2.1噪生、html 概述：
HTML是HyperText Mark-up Language的首字母簡寫，意思是超文本標記語言东囚，超文本指的是超鏈接跺嗽，標記指的是標簽，是一種用來制作網(wǎng)頁的語言页藻，這種語言由一個個的標簽組成桨嫁，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm份帐，一個html文件就是一個網(wǎng)頁璃吧，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它废境，如果用瀏覽器打開畜挨，瀏覽器會按照標簽描述內容將文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁噩凹。-
2.2巴元、html基本結構
-
一個html的基本結構如下：
<!DOCTYPE html> <!-- 定義網(wǎng)頁的語言 --> <html lang="en"> <head> <!-- 編碼格式 --> <meta charset="UTF-8"> <!-- 標題 --> <title>網(wǎng)頁的標題</title> </head> <body> 這是網(wǎng)頁顯示內容 </body> </html>第一行是文檔聲明，第二行
“<html>”標簽和最后一行“</html>”定義html文檔的整體驮宴，“<html>”標簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文逮刨，定義成中文是'lang="zh-CN"',不定義也沒什么影響，它一般作為分析統(tǒng)計用堵泽。“<head>”標簽和“<body>”標簽是它的第一層子元素禀忆，“<head>”標簽里面負責對網(wǎng)頁進行一些設置以及定義標題臊旭，設置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等箩退，設置的內容不會顯示在網(wǎng)頁上离熏，標題的內容會顯示在標題欄，“<body>”內編寫網(wǎng)頁上顯示的內容戴涝。
-
-
2.3滋戳、HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5-
xhtml 1.0：是html5之前的一個常用的版本，目前許多網(wǎng)站仍然使用此版本啥刻。此版本文檔用sublime text創(chuàng)建方法：
html:xt + tab,文檔示例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html> -
html5：pc端可以使用xhtml 1.0奸鸯，也可以使用html5，html5是向下兼容的,此版本文檔用sublime text創(chuàng)建方法：
html:5 + tab或者! + tab,文檔示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html> 兩種文檔的區(qū)別：1可帽、文檔聲明和編碼聲明娄涩；2、html5新增了標簽元素以及元素屬性
-
-
2.4映跟、html注釋：
html文檔代碼中可以插入注釋蓄拣，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上努隙，html代碼中插入注釋的方法是：<!-- 這是一段注釋 -->
三球恤、html 標題標簽、段落標簽荸镊、換行標簽 與 字符實體
-
3.1咽斧、html標題標簽
通過<h1>、<h2>躬存、<h3>张惹、<h4>、<h5>岭洲、<h6>,標簽可以在網(wǎng)頁上定義6種級別的標題诵叁。6種級別的標題表示文檔的6級目錄層級關系，比如說： <h1>用作主標題钦椭，其后是 <h2>，再其次是 <h3>碑诉，以此類推彪腔。搜索引擎會使用標題將網(wǎng)頁的結構和內容編制索引，所以網(wǎng)頁上使用標題是很重要的进栽。如下：<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3> -
3.2德挣、html 段落標簽：
<p>段落內容</p>
<p>標簽定義一個文本段落，一個段落含有默認的上下間距快毛，段落之間會用這種默認間距隔開格嗅，不純凈番挺，帶樣式，多個<p>標簽之間有空行屯掖，代碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html段落標簽</title> </head> <body> <p>夜玄柏，結束了一天的喧囂后安靜下來，伴隨著遠處路燈那微弱的光贴铜。風粪摘，毫無預兆地席卷整片曠野，撩動人的思緒萬千绍坝。 星徘意，遙遙地掛在天空之中，閃爍著它那微微星光轩褐，不如陽光般燦爛卻如花兒般如癡如醉椎咧。 </p> <p>欲將沉醉換悲涼，清歌莫斷腸把介。這混亂的塵世勤讽，究竟充斥了多少絕望和悲傷。你想去做一個勇敢的男子劳澄，為愛地技，為信仰，轟轟烈烈的奮斗一場秒拔。 你周身充斥著無人可比的靈氣和光芒莫矗。你有著與偉人比肩的才氣和名聲，你是那樣高傲孤潔的男子砂缩。你的一寸狂心未說作谚，已經幾度黃昏雨。 </p> </body> </html> -
3.3庵芭、html換行標簽:
<br/>
代碼中成段的文字妹懒，直接在代碼中回車換行，在渲染成網(wǎng)頁時候不認這種換行双吆，如果真想換行眨唬，可以在代碼的段落中插入<br />來強制換行，代碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html段落標簽</title> </head> <body> <p>夜好乐，結束了一天的喧囂后安靜下來匾竿，伴隨著遠處路燈那微弱的光。<br/>風蔚万，毫無預兆地席卷整片曠野岭妖，撩動人的思緒萬千。<br/> 星，遙遙地掛在天空之中昵慌，閃爍著它那微微星光假夺，不如陽光般燦爛卻如花兒般如癡如醉。 </p> <p>欲將沉醉換悲涼斋攀，清歌莫斷腸已卷。這混亂的塵世，究竟充斥了多少絕望和悲傷蜻韭。<br/>你想去做一個勇敢的男子悼尾，為愛，為信仰肖方，轟轟烈烈的奮斗一場闺魏。<br/> 你周身充斥著無人可比的靈氣和光芒。你有著與偉人比肩的才氣和名聲俯画，你是那樣高傲孤潔的男子析桥。你的一寸狂心未說，已經幾度黃昏雨艰垂。 </p> </body> </html> -
3.4泡仗、html字符實體：
代碼中成段的文字，如果文字間想空多個空格猜憎，在代碼中空多個空格娩怎，在渲染成網(wǎng)頁時只會顯示一個空格，如果想顯示多個空格胰柑，可以使用空格的字符實體,代碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html段落標簽</title> </head> <body> <p>夜截亦，結束了一天的喧囂后安靜下來，伴隨著遠處路燈那微弱的光柬讨。<br/>風崩瓤，毫無預兆地席卷整片曠野，撩動人的思緒萬千踩官。<br/> 星却桶，遙遙地掛在天空之中，閃爍著它那微微星光蔗牡，不如陽光般燦爛卻如花兒般如癡如醉颖系。 </p> </body> </html>在網(wǎng)頁上顯示
“<”和“>”會誤認為是標簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實體辩越，比如：“<” 和 “>” 的字符實體為 < 和 ><!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 9 < 8 <br> 2 > 7 </p>
四嘁扼、html 塊標簽、含樣式的標簽区匣、語義化的標簽
-
4.1、
html塊標簽-
<div></div>標簽塊元素，表示一塊內容亏钩，沒有具體的語義莲绰。純凈的，不帶樣式姑丑，可以嵌套自己蛤签，也可以嵌套其他的標簽，如：<p>標簽<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塊標簽栅哀、含樣式的標簽</title> </head> <body> <div> <div>我是div</div> <p>欲將沉醉換悲涼震肮，清歌莫斷腸。這混亂的塵世留拾，究竟充斥了多少絕望和悲傷戳晌。</p> </div> </body> </html> <span></span>標簽行內元素，表示一行中的一小段內容痴柔，沒有具體的語義沦偎。
-
-
4.2、含樣式和語義的標簽
-
<em>標簽 行內元素咳蔚，表示語氣中的強調詞<p>欲將沉醉換悲涼豪嚎，<em>清歌莫斷腸</em>。</p> -
<i>標簽 行內元素谈火，表示專業(yè)詞匯<p>欲將沉醉換悲涼侈询，<i>清歌莫斷腸</i>。</p>
<em>標簽與<i>標簽的區(qū)別是一個是強調詞糯耍，一個是專業(yè)詞匯扔字，都會使字體傾斜-
<b>標簽 行內元素，表示文檔中的關鍵字或者產品名,字體加粗<p>欲將沉醉換悲涼谍肤，<b>清歌莫斷腸</b>啦租。</p> -
<strong>標簽 行內元素，表示非常重要的內容<strong>欲將沉醉換悲涼荒揣，清歌莫斷腸篷角。</strong>
-
4.3、語義化的標簽
語義化的標簽系任，就是在布局的時候多使用有語義的標簽恳蹲，搜索引擎在爬網(wǎng)的時候能認識這些標簽，理解文檔的結構俩滥，方便網(wǎng)站的收錄嘉蕾。比如：h1標簽是表示標題，p標簽是表示段落霜旧，ul错忱、li標簽是表示列表，a標簽表示鏈接，dl以清、dt儿普、dd表示定義列表等，語義化的標簽不多掷倔。
五眉孩、html 圖像標簽、絕對路徑和相對路徑
- 5.1勒葱、html 圖像標簽
<img>標簽可以在網(wǎng)頁上插入一張圖片浪汪，它是獨立使用的標簽，它的常用屬性有：src屬性 定義圖片的引用地址-
alt屬性 定義圖片加載失敗時顯示的文字凛虽，搜索引擎會使用這個文字收錄圖片死遭、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要涩维。<img src="圖片的名字.jpg" alt="圖片">`alt` 屬性 定義圖片加載失敗時顯示的文字
- 5.2殃姓、絕對路徑 和 相對路徑
像網(wǎng)頁上插入圖片這種外部文件，需要定義文件的引用地址瓦阐，引用外部文件還包括引用外部樣式表蜗侈，javascript等等，引用地址分為絕對地址和相對地址睡蟋。- 絕對地址：相對于磁盤的位置去定位文件的地址
- 相對地址：相對于引用文件本身去定位被引用的文件地址
提示：絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件踏幻，相對路徑就沒有這個問題。相對路徑的定義技巧：
-
“ ./ ”表示當前文件所在目錄下戳杀，比如：“./pic.jpg”表示當前目錄下的pic.jpg的圖片该面，這個使用時可以省略。 -
“ ../ ”表示當前文件所在目錄下的上一級目錄信卡，比如：“../images/pic.jpg”表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片隔缀。
六、html 鏈接標簽
-
<a>標簽可以在網(wǎng)頁上定義一個鏈接地址傍菇，它的常用屬性有：-
href屬性 定義跳轉的地址<a >百度</a>表示鏈接到百度頁面猾瘸，把當前的頁面替換掉
-
title屬性 定義鼠標懸停時彈出的提示文字框<a title="跳轉到百度">百度</a>`title` 屬性 定義鼠標懸停時彈出的提示文字框 -
target屬性 定義鏈接窗口打開的位置-
target="_self"缺省值，新頁面替換原來的頁面丢习，在原來位置打開<a title="跳轉到百度" target="_self">百度</a> -
target="_blank"新頁面會在新開的一個瀏覽器窗口打開<a title="跳轉到百度" target="_blank">百度</a>
-
-
提示：
<a href="#"></a>: # 表示鏈接到頁面頂部,當一個頁面內容很多的時候牵触，你可以使用#回到頂部
七、html 列表
-
7.1咐低、有序列表
在網(wǎng)頁上定義一個有編號的內容列表可以用<ol>揽思、<li>配合使用來實現(xiàn)，代碼如下：在網(wǎng)頁上生成的列表见擦，每條項目上會按1钉汗、2羹令、3編號，有序列表在實際開發(fā)中較少使用损痰。<ol> <li>列表內容一</li> <li>列表內容二</li> <li>列表內容三</li> </ol>有序列表 -
7.2特恬、無序列表
在網(wǎng)頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現(xiàn)徐钠，代碼如下：<ul> <li><a href="#">娛樂標題一</a></li> <li><a href="#">娛樂標題二</a></li> <li><a href="#">娛樂標題三</a></li> </ul>無序列表在網(wǎng)頁上生成的列表，每條項目上會有一個小圖標役首，這個小圖標在不同瀏覽器上顯示效果不同尝丐，所以一般會用樣式去掉默認的小圖標，如果需要圖標衡奥，可以用樣式自定義圖標爹袁，從而達到在不同瀏覽器上顯示的效果相同,實際開發(fā)中一般用這種列表“蹋可以把
娛樂標題換成<img src="圖片的名字.jpg" alt="圖片">,從而點擊圖片進行跳轉 -
7.3失息、定義列表
定義列表通常用于術語的定義。<dl>標簽表示列表的整體档址。<dt>標簽定義術語的題目盹兢。<dd>標簽是術語的解釋。一個<dl>中可以有多個題目和解釋守伸，代碼如下：<h3>前端三大塊</h3> <dl> <dt>html</dt> <dd>負責頁面的結構</dd> <dt>css</dt> <dd>負責頁面的表現(xiàn)</dd> <dt>javascript</dt> <dd>負責頁面的行為</dd> </dl>定義列表
提示：<dt>標簽 與 <dd>標簽 一個等級
