前端基礎入門一（HTML）
學習目標
- 瞭解經常使用瀏覽器
- 掌握WEB標準
- 理解標籤語義化
- 掌握經常使用的排版標籤
- 掌握經常使用的文本格式化圖像連接等標籤
- 掌握三種列表標籤
- 掌握表格標籤
- 掌握表格標籤
- 掌握表單標籤
HTML第一天目標
可以寫出基本的頁面（裏面包含圖片、各類標籤和連接）
開發工具
咱們主要用的開發工具備chrome、hbuilder、Photoshopjavascript
瀏覽器顯示
瀏覽器是網頁顯示、運行的平臺，經常使用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。咱們平時稱爲五大瀏覽器。css
瀏覽器內核（理解）
瀏覽器內核又能夠分紅兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 ：它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。html
最開始渲染引擎和 JS 引擎並無區分的很明確，後來 JS 引擎愈來愈獨立，內核就傾向於只指渲染引擎。有一個網頁標準計劃小組製做了一個 ACID 來測試引擎的兼容性和性能。內核的種類不少，如加上沒什麼人使用的非商業的免費內核，可能會有10多種，可是常見的瀏覽器內核能夠分這四種：Trident、Gecko、Blink、Webkit。java
瞭解一點：移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的本身的內核，基本上也是屬於webkit二次開發。web
iOS以及WP7平臺上，因爲系統緣由，系統大部分自帶瀏覽器內核，通常是Safari或者IE內核Trident的chrome
Web標準
web標準的好處
一、讓Web的發展前景更廣闊 編程
二、內容能被更普遍的設備訪問瀏覽器
三、更容易被搜尋引擎搜索服務器
四、下降網站流量費用網絡
五、使網站更易於維護
六、提升頁面瀏覽速度
web標準的結構
結構標準：結構用於對網頁元素進行整理和分類，我們主要學的是HTML。 最重要
表現標準：表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行爲標準：行爲是指網頁模型的定義及交互的編寫，我們主要學的是 Javascript
HTML初識
HTML（英文Hyper Text Markup Language的縮寫）中文譯爲「超文本標籤語言」。是用來描述網頁的一種語言。
所謂超文本，由於它能夠加入圖片、聲音、動畫、多媒體等內容，不只如此，它還能夠從一個文件跳轉到另外一個文件，與世界各地主機的文件鏈接。
<h1> 我是一個大標題 </h1>
注意： 體會 文本 標籤 語言 幾個詞語
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
總結： HTML 做用就是用標記標籤來描述網頁，把網頁內容在瀏覽器中展現出來。
HTML骨架格式
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
骨架結構解析
1 HTML標籤：
做用全部HTML中標籤的一個根節點。 最大的標籤 根標籤
2 head標籤： 文檔的頭部
文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。
注意在head標籤中咱們必需要設置的標籤是title
3.title標籤： 文檔的標題
做用：讓頁面擁有一個屬於本身的標題。
4.body標籤：文檔的主體 之後咱們的頁面內容 基本都是放到body裏面的
body 元素包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等。）
HTML標籤分類
在HTML頁面中，帶有「< >」符號的元素被稱爲HTML標籤，如上面提到的 HTML、head、body都是HTML骨架結構標籤。所謂標籤就是放在「< >」 標籤符中表示某個功能的編碼命令，也稱爲HTML標籤或 HTML元素
1.雙標籤
<標籤名> 內容 </標籤名>
該語法中「<標籤名>」表示該標籤的做用開始，通常稱爲「開始標籤（start tag）」，「</標籤名>」 表示該標籤的做用結束，通常稱爲「結束標籤（end tag）」。和開始標籤相比，結束標籤只是在前面加了一個關閉符「/」。
好比 <body>我是文字 </body>
2.單標籤
<標籤名 />
單標籤也稱空標籤，是指用一個標籤符號便可完整地描述某個功能的標籤。
好比 <br />
HTML標籤關係
標籤的相互關係就分爲兩種：
1.嵌套關係
<head> <title> </title> </head>
2.並列關係
<head></head> <body></body>
HTML經常使用標籤
首先 HTML和CSS是兩種徹底不一樣的語言，咱們學的是結構，就只寫HTML標籤，認識標籤就能夠了。 不會再給結構標籤指定樣式了。
HTML標籤有不少，這裏咱們學習最爲經常使用的，後面有些較少用的，咱們能夠查下手冊就能夠了。
排版標籤
標題標籤（熟記）
單詞縮寫： head 頭部. 標題 title 文檔標題
爲了使網頁更具備語義化，咱們常常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式以下：
<hn> 標題文本 </hn>
段落標籤（熟記）
<p> 文本內容 </p>
水平線標籤（認識）
<hr />是單標籤
換行標籤（熟記）
<br />
div span標籤(重點)
div span 是沒有語義的 是咱們網頁佈局主要的2個盒子 css+div
div 就是 division 的縮寫 分割， 分區的意思 其實有不少div 來組合網頁。
span, 跨度，跨距；範圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>
文本格式化標籤(熟記)
在網頁中，有時須要爲文字設置粗體、斜體或下劃線效果，這時就須要用到HTML中的文本格式化標籤，使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈
標籤屬性
使用HTML製做網頁時，若是想讓HTML標籤提供更多的信息，可使用HTML標籤的屬性加以設置。其基本語法格式以下：
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>
在上面的語法中，
1.標籤能夠擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。
2.屬性之間不分前後順序，標籤名與屬性、屬性與屬性之間均以空格分開。
3.任何標籤的屬性都有默認值，省略該屬性則取默認值。
採起 鍵值對 的格式 key="value" 的格式
好比:
<hr width="400" />
屬性 是 寬度
值 是 400
圖像標籤img (重點)
單詞縮寫： image 圖像
HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示圖像就須要使用圖像標籤，接下來將詳細介紹圖像標籤<img />以及和他相關的屬性。其基本語法格式以下：
該語法中src屬性用於指定圖像文件的路徑和文件名，他是img標籤的必需屬性。
<img src="圖像URL" />
連接標籤(重點)
單詞縮寫： anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋 錨, 鐵錨 的
在HTML中建立超連接很是簡單，只需用標籤環繞須要被連接的對象便可，其基本語法格式以下：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href：用於指定連接目標的url地址，當爲標籤應用href屬性時，它就具備了超連接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用於指定連接頁面的打開方式，其取值有self和blank兩種，其中self爲默認值，blank爲在新窗口中打開方式。
注意：
1.外部連接 須要添加 http:// www.baidu.com
2.內部連接 直接連接內部頁面名稱便可 好比 < a href="index.html"> 首頁
3.若是當時沒有肯定連接目標時，一般將連接標籤的href屬性值定義爲「#」(即href="#")，表示該連接暫時爲一個空連接。
4.不只能夠建立文本超連接，在網頁中各類網頁元素，如圖像、表格、音頻、視頻等均可以添加超連接。
錨點定位 （難點）
經過建立錨點連接，用戶可以快速定位到目標內容。
建立錨點連接分爲兩步：
1.使用「a href=」#id名>「連接文本"</a>建立連接文本（被點擊的） <a href="#two"> 2.使用相應的id名標註跳轉目標的位置。 <h3 id="two">第2集</h3>
base 標籤 基本的
base 能夠設置總體連接的打開狀態
base 寫到 <head> </head> 之間
把全部的鏈接 都默認添加 target="_blank"
特殊字符標籤 （理解）
註釋標籤
在HTML中還有一種特殊的標籤——註釋標籤。若是須要在HTML文檔中添加一些便於閱讀和理解但又不須要顯示在頁面中的註釋文字，就須要使用註釋標籤。其基本語法格式以下：
<!-- 註釋語句 --> ctrl + / 或者 ctrl +shift + /
註釋內容不會顯示在瀏覽器窗口中，可是做爲HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就能夠看到。
路徑(重點、難點)
實際工做中，一般新建一個文件夾專門用於存放圖像文件，這時再插入圖像，就須要採用「路徑」的方式來指定圖像文件的位置。
根目錄 當前目錄
路徑能夠分爲： 相對路徑和絕對路徑
相對路徑
以引用文件之網頁所在位置爲參考基礎，而創建出的目錄路徑。所以，當保存於不一樣目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之爲相對路徑。
- 圖像文件和HTML文件位於同一文件夾：只需輸入圖像文件的名稱便可，如img src="logo.gif" /。
- 圖像文件位於HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用「/」隔開，如img src="img/img01/logo.gif" /。
- 圖像文件位於HTML文件的上一級文件夾：在文件名以前加入「../」 ，若是是上兩級，則須要使用 「../ ../」，以此類推，如img src="../logo.gif" /。
絕對路徑
絕對路徑以Web站點根目錄爲參考基礎的目錄路徑。之因此稱爲絕對，意指當全部網頁引用同一個文件時，所使用的路徑都是同樣的
「D:webimglogo.gif」，或完整的網絡地址，例如「http://www.itcast.cn/images/l...」。
總結今天的思路貫穿線
列表標籤
無序列表 ul （重點）
無序列表的各個列表項之間沒有順序級別之分，是並列的。其基本語法格式以下：
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ul>
注意：
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標籤中輸入其餘標籤或者文字的作法是不被容許的。
- <li>與</li>之間至關於一個容器，能夠容納全部元素。
- 無序列表會帶有本身樣式屬性，放下那個樣式，一會讓CSS來！
有序列表 ol （瞭解）
有序列表即爲有排列順序的列表，其各個列表項按照必定的順序排列定義，有序列表的基本語法格式以下：
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ol>
全部特性基本與ul 一致。
可是實際工做中， 較少用 ol img src="media/1.jpg" />
自定義列表（理解）
定義列表經常使用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法以下：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl>
表格 table(會使用)
建立表格
在HTML網頁中，要想建立表格，就須要使用表格相關的標籤。建立表格的基本語法格式以下：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
在上面的語法中包含三對HTML標籤，分別爲 table</table、tr</tr、td</td，他們是建立表格的基本標籤，缺一不可，下面對他們進行具體地解釋
1.table用於定義一個表格。
2.tr 用於定義表格中的一行，必須嵌套在 table標籤中，在 table中包含幾對 tr，就有幾行表格。
3.td /td：用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。
注意：
1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標籤，他就像一個容器，能夠容納全部的元素
表格屬性
表頭標籤
表頭通常位於表格的第一行或第一列，其文本加粗居中，以下圖所示，即爲設置了表頭的表格。設置表頭很是簡單，只需用表頭標籤th</th替代相應的單元格標籤td</td便可。
表格結構（瞭解）
在使用表格進行佈局時，能夠將表格劃分爲頭部、主體和頁腳（頁腳由於有兼容性問題，咱們不在贅述），具體 以下所示：
<thead></thead>：用於定義表格的頭部。
必須位於<table></table> 標籤中，通常包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用於定義表格的主體。
位於<table></table>標籤中，通常包含網頁中除頭部和底部以外的其餘內容。
表格標題
表格的標題： caption
定義和用法
caption 元素定義表格標題。
<table> <caption>我是表格標題</caption> </table>
caption 標籤必須緊隨 table 標籤以後。您只能對每一個表格定義一個標題。一般這個標題會被居中於表格之上。
合併單元格(難點)
跨行合併：rowspan 跨列合併：colspan
合併單元格的思想：
將多個內容合併的時候，就會有多餘的東西，把它刪除。 例如 把 3個 td 合併成一個， 那就多餘了2個，須要刪除。 公式： 刪除的個數 = 合併的個數 - 1
合併的順序 先上 先左
總結表格
- 表格提供了HTML 中定義表格式數據的方法。
- 表格中由行中的單元格組成。
- 表格中沒有列元素，列的個數取決於行的單元格個數。
- 表格不要糾結於外觀，那是CSS 的做用。
表格的學習要求： 能手寫表格結構，而且能合併單元格。
表單標籤(掌握)
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中一般還須要包含一些說明性的文字，提示用戶進行填寫和操做。
表單域：
他至關於一個容器，用來容納全部的表單控件和提示信息，能夠經過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。若是不定義表單域，表單中的數據就沒法傳送到後臺服務器。
input 控件(重點)
在上面的語法中，input /標籤爲單標籤，type屬性爲其最基本的屬性，其取值有多種，用於指定不一樣的控件類型。除了type屬性以外，input /標籤還能夠定義不少其餘的屬性，其經常使用屬性以下表所示。
label標籤(理解)
label 標籤爲 input 元素定義標註（標籤）。
做用： 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會得到輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪一個表單元素綁定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
textarea控件(文本域)
若是須要輸入大量的信息，就須要用到textarea/textarea標籤。經過textarea控件能夠輕鬆地建立多行文本輸入框，其基本語法格式以下：
<textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea>
下拉菜單
使用select控件定義下拉菜單的基本語法格式以下
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
注意：
- select</select中至少應包含一對option></option。
- 在option 中定義selected =" selected "時，當前項即爲默認選中項。
表單域
在HTML中，form標籤被用於定義表單域，即建立一個表單，以實現用戶信息的收集和傳遞，form中的全部內容都會被提交給服務器。建立表單的基本語法格式以下：
<form action="url地址" method="提交方式" name="表單名稱"> 各類表單控件 </form>
經常使用屬性：
- Action
在表單收集到信息後，須要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址。 - method
用於設置表單數據的提交方式，其取值爲get或post。 - name
用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意： 每一個表單都應該有本身表單域。
查文檔
常常查閱文檔是一個很是好的學習習慣。
- 1. 前端基礎入門一（HTML）
- 2. 前端基礎——HTML（一）
- 3. HTML（前端基礎一）
- 4. 前端基礎到進階（1）：HTML基礎入門
- 5. 前端開發入門——HTML基礎標籤一
- 6. 前端簡單入門第一講 HTML基礎概念
- 7. JavaWeb前端基礎入門
- 8. 前端入門——CSS基礎
- 9. 前端零基礎入門
- 10. 零基礎入門前端
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Kotlin 基礎語法 - Kotlin 教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端基礎入門一（HTML）
- 2. 前端基礎——HTML（一）
- 3. HTML（前端基礎一）
- 4. 前端基礎到進階（1）：HTML基礎入門
- 5. 前端開發入門——HTML基礎標籤一
- 6. 前端簡單入門第一講 HTML基礎概念
- 7. JavaWeb前端基礎入門
- 8. 前端入門——CSS基礎
- 9. 前端零基礎入門
- 10. 零基礎入門前端