HTML基礎入門學習
上一篇給大家介紹了學習HTML的準備工作，本文開始帶大家步入HTML的學習
一、HTML基礎
網頁的組成：
HTML：頁面構成
css：頁面樣式表現
JavaScript：交互行為
HTML簡介：
Hyper Text Markup Language譯為“超文本標記語言”，主要通過HTML標簽對網頁的文本、圖片、聲音等內容進行描述
HTML語法：
html框架：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
html標簽以"<"開頭，如果標簽後面有屬性，加空格然後還是 屬性名=“”，如果有多個屬性，屬性間使用空格隔開，以“>”結束，如果是閉合標簽需要在結束標簽前加“/”
HTML頭部標簽：
doctype：<!DOCTYPE>聲明幫助瀏覽器正確地顯示網頁。HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。<!DOCTYPE> 不是 HTML 標簽。它為瀏覽器提供一項信息（聲明），即 HTML 是用什麽版本編寫的。
head：<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及
<style>。
title：<title> 標簽定義文檔的標題。元素在所有 HTML/XHTML 文檔中都是必需的。元素能夠：定義瀏覽器工具欄中的標題、提供頁面被添加到收藏夾時顯示的標題、顯示在搜索引擎結果中的頁面標題
link
meta：meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時 間以及其他元數據。<meta> 標簽始終位於 head 元素中。元數據可用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。針對搜索引擎的關鍵詞，一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
script：<script> 標簽用於定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。必需的 type 屬性規定腳本的 MIME 類型。
style：<style> 標簽用於為 HTML 文檔定義樣式信息。在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 "text/css"。style 元素位於 head 部分中。
URL協議：Uniform Resource Loacator，統一資源定位符是對可以從互聯網上得到資源的位置和訪問方法的一種簡介的表示，是互聯網上標準資源的地址，互聯網上的每一個資源都有一個唯一的URL，它包含的信息之處文本的位置以及瀏覽器怎麽處理它
協議規定格式：scheme://host.domain:port/path/filename
scheme：定義因特網服務的類型，常見的類型是http
host：定義域主機（http的默認主機是www）
domain：定義因特網域名
port：定義主機上的端口號（http默認80端口）
path：定義服務器上的路徑
filename：定義文檔/資源名稱
常見的協議：http、https、ftp、迅雷協議
二、 HTML標簽
標題：h1-h6;h1最大，h6最小。<h1>標題</h1>文字為標題就是要h標簽（水平線 <hr/>）段落：<p></p>標簽，一對標簽一個段落，自動換行，但是行與行之間有一定的間距。 <br/>手動換行，行與行之間在一起，中間無太大間距
格式化：
一、文本格式化：在一個HTML文件中對文本進行格式化
二、預格式文本：是要pre對空行和空格進行控制（代碼一模一樣的輸出）
三、“計算機輸出”標簽：顯示計算器編程代碼
四、地址：在HTML中寫地址
五、縮寫和首字母縮寫：<abbr title="wangxiang">wx</abbr>（縮寫）<acronym title="wang xiang">wx</acronym>(首字母縮寫)在瀏覽器中顯示wx，當鼠標移到wx處時會顯 示title中的內容
六、文字方向：改變文字的方向 <dbo></bdo>一對標簽 dir屬性 有rtl和ltr兩個值，rtl反向輸出<bdo dir="rtl">hello ! nice to meet you</bdo>反方向輸出
七、塊引用：實現長短不一的引用語<blockquote>長引用</blochquote>（自動換行，縮進）<q>短引用</q>（自動引號括起來）
八、刪除字效果和添加字效果：標記刪除文本和插入文本<del>文本中間劃線</del>，<ins>文本的底部劃線</ins>
HTML中的樣式：外部樣式表，內部樣式表，內聯樣式表。去掉連接的下劃線:style="text-decoration:none"
連接：
一、超鏈接：<a href="
二、頁面內的跳轉：<a name="頂端" href="#底端">回到頂端</a>,<a name="底端" href="#底端">回到頂端</a>
三、發送郵件：<a href="mailto":[email protected]>發送郵件</a>
圖像:<p><img src="xxxx" align="right">xxxxx</p>浮動在文本的右邊 三、表格（table）
<table> <tr> <td>xx</td> <tr> <table>
table></table>:定義表格。
<tr></tr>:行。
<td></td>：列。
屬性介紹:
border:定義邊框的粗細。
cellspacing:單元格與單元格之間的距離。
Cellpadding:單元格邊框與內容的距離。
Width：寬度。
Height:高度。
Bgcolor:背景顏色。
align：left center right 給tr和td使用時，可以設置單元格內容的水平對齊方式。如果給table使用，設置表格對齊方式。
<th></th>表格的標題標簽，用法和td一樣，會自動加粗th中文字，居中對齊。
表頭，<caption></caption>,設置表的名字。
表格的合並
Colspan:橫向合並 Colspan=“2”橫向的二合一
Rowspan:縱向合並 Rowspan=“3” 縱向的三合一了
表格的標準結構
<table> <thead></thead> 表格頭部文件 <tbody></tbody> 表格主體 <tfoot></tfoot> 表格尾部 </table>
四、列表：
1、無序列表：<ul type="circle">//type設置列表前面的小符號，circle小圓圈，disk小黑點，square矩形小方框
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
2、有序列表：
<ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>
3、自定義列表：
<dl> <dt>1</dt>//小標題 <dt>2</dt> <dt>3</dt> <dt>4</dt> <dt>5</dt> </dl>
塊：自開始自結束
布局：div和table
五、表單
表單的組成：提示信息、表單的控件、表單域
表單控件介紹
1、表單標簽
<form action="1.php" method=“”></form> Action:收集信息，將信息提交給誰。 Method:提交數據的方法，get | post get:通過瀏覽器的地址欄傳輸數據，安全性低。 post:通過提交數據的文件處理數據，安全性高。
2二、文本輸入框
<input type="text"name="ped" maxlenght="6"> maxlength:設置文本框輸入內容的長度。 readonly:將文本框設置為只讀狀態，只能讀，不能寫。 Disabled:將文本框設置為未激活狀態。 Name:輸入框的名字。 Value:輸入框的值。
3、密碼輸入框
<input type="password" name="pwd"maxlenght="6"/>
4、單選框
<input type ="radio"name="gender"checked="checked">男 <input type="radio"name="gender"checked="checked">女 當將需要單選的單選框name屬性值設置為一樣的時候，才能實現單選效果。 Checked=”checked”,設置單選按鈕的默認選項。
5、下拉列表
<select> <option muitiple=muitiple>河南省 </option> <option>北京省</option> <option>河北省 </option> <option>南京省 </option> </select> Multiple=”multiple”,設置下拉列表為多選項。
6、多選框
Checked=”checked”，可以設置多選框默認選項。 <input type="checkbox" checked="checked">
7、多行輸入文本域
<textarea name="#" cols="30" rows="10"></textarea>
8、上傳文件控件
<input type="flie" />
9、按鈕
<!-- 提交按鈕 --> <input type="submit"> <!-- 普通按鈕 --> <input type="button" value="普通按鈕"> <!-- 重置按鈕 --> <input type="reset" value="重置信息"> <!-- 圖片按鈕 --> <input type="image" src="meinv.png" /> <!--分組 --> <fieldset> <legend>用戶註冊信息<lengend> </fieldset>
10.html5表單新特征
<!-- 判斷網址 --> <input type="url"> <!-- 判斷郵箱 --> <input type="email"> <!-- 日期控件 --> <input type="date"> <!-- 時間控件 --> <input type="time"> <!-- 數字控件 --> <input type="number" step="5"> <!-- 滑塊控件 --> <input type="range" max="100" min="2" step="50">
六、框架：
內聯框架
<iframe src="xxx.htm" width="200" height="200" frameborder="0"></frame>
七、meta標簽
meta對網頁的描述
一、<meta name="description" content="這是一個很好的網站"/>//定義對網站的描述
二、<meta name="keywords" content="很好, 網站"/>//定義搜索關鍵字，用在搜索引擎搜索時
script標簽：引入JS
不常用語義標簽
<code>定義計算機代碼
<var>定義變量
<pre>定義預格式文本
<abbr>定義縮寫
<address>定義地址
<blockquote>定義長的引用
<cite>定義引用、引證
<dfn>定義一個定義項目
特殊字符標記
行內元素
行內標簽不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性。常用於控制頁面中文本的樣式
常見的行內元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>
塊元素
每個塊元素通常都會獨自占據一整行或者多整行，可以對其設置寬度、高度、對齊等屬性。常用於網頁布局和網頁結構搭建
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
HTML基礎入門學習