一、html簡(jiǎn)介
1.1 什么是Html
W3C組織研發(fā).
Html是用來描述網(wǎng)頁的一種語言。
Html指的是超文本標(biāo)記語言(HyperText Markup Language)(在html中標(biāo)簽都是w3c組織定義好的,定義好了許多標(biāo)簽,每個(gè)標(biāo)簽都有具體的含義,超文本是(超出了文本的范圍)
Html不是一種編程語言，而是一種標(biāo)記語言(markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽(markup tag)
Html使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
html設(shè)計(jì)的宗旨是用來展示數(shù)據(jù)的. 具體如何展示數(shù)據(jù)呢,html中定義了一些標(biāo)簽,這些標(biāo)簽都有具體的含義
搭建環(huán)境. dreamweaver(夢(mèng)想的編織者) .hbuilder.(綠色版本 直接解壓就可以用)
1.2 Html的作用
Web瀏覽器的作用是讀取html文檔，并以網(wǎng)頁的形式顯示它們。瀏覽器不會(huì)顯示html標(biāo)簽，而是使用標(biāo)簽來解釋頁面上的內(nèi)容。簡(jiǎn)單說，html就是用于展示信息的。
1.3 Html程序遵循的規(guī)范
(1) html程序以<html>開始，同時(shí)</html>結(jié)束；
(2) html程序包含兩部分內(nèi)容：head和body；
<html>
<head>設(shè)置頁面信息</head>
<body>顯示到頁面上的內(nèi)容</body>
</html>
(3) html的標(biāo)簽有開始標(biāo)簽，同時(shí)也要結(jié)束標(biāo)簽，標(biāo)簽通常是成對(duì)出現(xiàn)的，比如<b>和</b>；
(4) html的代碼不區(qū)分大小寫的；
(5) 有些標(biāo)簽沒有結(jié)束標(biāo)簽，需要在標(biāo)簽內(nèi)結(jié)束
，實(shí)現(xiàn)換行的操作，使用標(biāo)簽實(shí)現(xiàn)的
，沒有</br>；
(6) 絕大多數(shù)的標(biāo)簽都具有屬性，建議屬性值使用引號(hào)引起。例如:<body text=”red”>；
(7) 大多數(shù)標(biāo)簽是可以嵌套的。
1.4 Html的操作思想
在網(wǎng)頁中可能有很多的數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同的顯示效果，這個(gè)時(shí)候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來（封裝），通過修改標(biāo)簽的屬性值來實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化。標(biāo)簽相當(dāng)于一個(gè)容器，通過修改容器的屬性值，實(shí)現(xiàn)容器內(nèi)數(shù)據(jù)樣式的變化。
二、Html標(biāo)簽
2.1. 字體標(biāo)簽
2.1.1. <font>文字標(biāo)簽font字體，大小，顏色
(1) font字體，大小，顏色
<font>標(biāo)簽用于規(guī)定文字的字體，大小，顏色。
<font color="設(shè)置文字顏色" size="文字的大小">要操作的文字的內(nèi)容</font>
常用屬性：
屬性 作用
face 規(guī)定文本的字體
size 規(guī)定文本的大小，文字大小值范圍：1-7，如果值超過了7，使用還是7的效果
color 規(guī)定文本的顏色
顏色有三種表示方式：
顏色由紅色、綠色、藍(lán)色混合而成
第一種：直接使用英文單詞進(jìn)行表示 red green yellow
第二種：使用十六進(jìn)制數(shù)字進(jìn)行表示 #ffffff
第三種：使用RGB顏色值配置 rgb(255,0,0)
2.1.2. <title>標(biāo)題標(biāo)簽
<head>
<meta charset="utf-8" />
<title>html基本標(biāo)簽學(xué)習(xí)</title>
</head>
title 表示當(dāng)前網(wǎng)頁的標(biāo)題
<h1>-<h6>標(biāo)簽用于定義標(biāo)題。<h1>最大標(biāo)題，<h6>最小標(biāo)題。
標(biāo)題標(biāo)簽可以自動(dòng)換行，從h1到h6字體的大小依次變小的。
<h1>這是標(biāo)題h1</h1>
<h2>這是標(biāo)題h2</h2>
<h3>這是標(biāo)題h3</h3>
<h4>這是標(biāo)題h4</h4>
<h5>這是標(biāo)題h5</h5>
<h6>這是標(biāo)題h6</h6>
2.2 排版標(biāo)簽
2.2.1 < hr/>水平線標(biāo)簽
常用屬性：
屬性 作用
align 設(shè)置水平線對(duì)齊方式 可選值 left right center
size 設(shè)置水平線的粗細(xì)，范圍1-7
width 設(shè)置水平線長(zhǎng)度，可以是絕對(duì)值或相對(duì)值。默認(rèn)為100%
color 設(shè)置水平線顏色，默認(rèn)為黑色
2.2.2 <!- - 注釋的內(nèi)容 -->注釋標(biāo)簽
在Java里面有三類注釋：?jiǎn)涡凶⑨?，多行注釋，文檔注釋。
在html中注釋 <! -- 注釋的內(nèi)容 -->，使內(nèi)容不在html頁面中進(jìn)行顯示。
2.2.3. <p>段落標(biāo)簽
<p>標(biāo)簽是段落標(biāo)簽，可以將html文檔分割為若干段落。瀏覽器會(huì)自動(dòng)在段落前后添加空格。
<p>標(biāo)簽常用屬性：
align：用于設(shè)定對(duì)齊方式，可選值 left right center，默認(rèn)值是left。
2.2.4. < br/>換行標(biāo)簽
< br/>標(biāo)簽是換行標(biāo)簽。
因?yàn)闉g覽器會(huì)自動(dòng)忽略空白和換行，因此
標(biāo)簽成為了我們最常用的標(biāo)簽之一。
2.2.5.  特殊字符標(biāo)簽(空格)
 
實(shí)現(xiàn)空格的操作
2.2.6. pre，s，u，b，i標(biāo)簽(斜體,加粗,下劃線,刪除線)
標(biāo)簽 作用
pre 原樣輸出
s 刪除線
u 下劃線
b 加粗
i 斜體
2.2.7. div和span
div：展示數(shù)據(jù)會(huì)自動(dòng)換行,+CSS
span：在一行進(jìn)行顯示(組合后也不會(huì)換行)
2.3 列表標(biāo)簽
2.3.1. <dl><dt><dd>自定義列表標(biāo)簽
首先需要使用 <dl></dl>: 定義列表的范圍
之后在dl標(biāo)簽里面 <dt></dt>: 定義上層內(nèi)容
在dl標(biāo)簽里面 <dd></dd>: 定義下層內(nèi)容
<dl>
<dt>技術(shù)部</dt>
<dd>Java</dd>
<dd>Android</dd>
<dd>ios</dd>
</dl>
2.3.2. <ol><li>有序列表標(biāo)簽
使用 <ol></ol>: 定義有序列表的范圍
ol標(biāo)簽上面有屬性 type：排序的方式，type屬性里面的值 1 a i
之后在ol標(biāo)簽里面：<li></li>: 封裝具體的內(nèi)容。
<ol type=”a”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ol>
<ol type=”i”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ol>
2.3.3. <ul><li>無序列表標(biāo)簽
首先使用標(biāo)簽 <ul></ul>: 定義無序列表的范圍
ul標(biāo)簽上面有屬性 type：設(shè)置特殊符號(hào)
type屬性里面的值 disc circle square
之后在ul標(biāo)簽里面： <li></li>: 封裝具體的內(nèi)容
<ul >
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
<ul type =”square”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
<ul type =”circle”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
2.4 <img>圖形標(biāo)簽
<img>是一個(gè)圖片標(biāo)簽，用于在頁面上引入圖片。
常用屬性：
屬性 作用
src 用于設(shè)定要引入的圖片的url
alt 用于設(shè)定圖像的替代文字
*鼠標(biāo)移動(dòng)到圖片上面，稍等片刻出現(xiàn)文字
*如果圖片找不到，顯示alt的內(nèi)容
*這個(gè)屬性在某些瀏覽器不能顯示的
width 用于設(shè)定圖片的寬度
height 用于設(shè)定圖片的高度
border 圖片邊框厚度
align 用于設(shè)定圖片的對(duì)齊方式
2.4 <a>超鏈接標(biāo)簽
<a>標(biāo)簽用于定義超連接，用于從一個(gè)頁面鏈接到另一個(gè)頁面。
<a href="鏈接到的地址">顯示在頁面上的內(nèi)容</a>
常用屬性：
屬性 作用
href 用于設(shè)定鏈接指向頁面的url
name 用于設(shè)定錨的名稱
target 用于設(shè)定在何處打開鏈接頁面。在默認(rèn)的情況下，打開方式在當(dāng)前的頁面打開。
target里面的值：
_self，當(dāng)前頁面打開；
_blank，在新標(biāo)簽頁打開。
想要一個(gè)超鏈接沒有效果，在href屬性值寫成#
2.5 <table><tr>th或td表格標(biāo)簽
操作技巧：
首先數(shù)表格里面有多少行，數(shù)每行里面有多少個(gè)單元格。
首先定義表格的范圍：<table></table>
<table>中的屬性：
屬性 作用
border 設(shè)置表格線
bordercolor 設(shè)置表格線的顏色
cellspacing 設(shè)置單元格之間的距離
cellpadding 設(shè)置文字和單元格之間的距離
width 設(shè)置表格的寬度
height 設(shè)置表格的高度
align 設(shè)置表格的對(duì)齊方式
bgcolor 設(shè)置表格的背景顏色
在table標(biāo)簽里面表示行： <tr></tr> 包含一個(gè)或多個(gè)th或td元素
屬性 作用
align 設(shè)置對(duì)齊方式：left center right
bgcolor 設(shè)置表格中行的背景顏色
在tr標(biāo)簽里面表示列： <td></td> 定義表格單元
屬性 作用
align 用于設(shè)定單元格內(nèi)容的對(duì)齊方式
bgcolor 用于設(shè)定單元格背景顏色
height 用于設(shè)定單元格的高度
width 用于設(shè)定單元格的寬度
colspan 用于設(shè)定列合并
rowspan 用于設(shè)定行合并
在tr標(biāo)簽里面也可以表示單元格：<th></th>用于定義表格的表頭
- 實(shí)現(xiàn)居中和加粗的效果
合并單元格
是在td標(biāo)簽上面進(jìn)行的操作，使用兩個(gè)屬性。
rowspan：跨行
代碼 <th rowspan="4">人員信息3人</th>
colspan：跨列
代碼 <td colspan="3">統(tǒng)計(jì)信息3人</td>
標(biāo)題標(biāo)簽 用于定義表格標(biāo)題
<caption>標(biāo)題內(nèi)容</caption>
<caption>標(biāo)簽必須緊隨<table>標(biāo)簽之后，一個(gè)表格只能有一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。
2.6 <form>表單標(biāo)簽
<form>標(biāo)簽代表一個(gè)表單，表單用于向服務(wù)器傳輸數(shù)據(jù)。
<form>標(biāo)簽?zāi)軌虬?lt;input>，可以是文本字段，復(fù)選框，單選框或提交按鈕等。還可以包含<textarea> <select>等。(大多數(shù)由input構(gòu)成)
<form>常用屬性:
屬性 作用
name 用于定義表單的名稱
action 用于規(guī)定提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)
method：用于規(guī)定提交的方式。一般取值 POST或GET，在默認(rèn)情況下，提交方式是get提交。
get提交方式會(huì)在地址欄攜帶數(shù)據(jù)，安全性很差
post提交方式地址欄不會(huì)攜帶數(shù)據(jù)，安全性比較高，數(shù)據(jù)在請(qǐng)求體里面
2.6.1 輸入項(xiàng)<input>
可以輸入內(nèi)容或者選擇內(nèi)容的地方。
要求1：輸入項(xiàng)里面必須要有name屬性
要求2：在單選輸入項(xiàng)和復(fù)選輸入項(xiàng)以及下拉選擇輸入項(xiàng)里面都需要有屬性value，設(shè)置的值。
輸入項(xiàng)需要寫到form標(biāo)簽里面
text普通輸入項(xiàng) <input type="text"/>
password密碼輸入項(xiàng) <input type="password"/>
radio單選輸入項(xiàng) <input type="radio"/>
要求：?jiǎn)芜x輸入項(xiàng)里面必須有name屬性，同時(shí)name的屬性值必須要相同
設(shè)置默認(rèn)選中，使用屬性 checked="checked"
checkbox復(fù)選輸入項(xiàng)
<input type="checkbox"/>
要求：?jiǎn)芜x輸入項(xiàng)里面必須有name屬性，同時(shí)name的屬性值必須要相同
設(shè)置默認(rèn)選中，使用屬性 checked="checked"
file文件輸入項(xiàng)
上傳文件的。<input type="file"/>
hidden隱藏項(xiàng)
，這個(gè)值不會(huì)顯示在頁面上，但是提交表單也可以提交到服務(wù)器上
<input type="hidden"/>
普通按鈕 <input type="button"/>
<submit>提交
<input type=”submit”> 定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。
常用屬性：
name：定義標(biāo)簽名稱
value：按鈕顯示名稱1
若要提交到百度,在form上加入action=”http://www.baidu.com”
<reset>重置
<input type=”reset”> 定義重置按鈕。當(dāng)點(diǎn)擊表單的重置按鈕不是清空數(shù)據(jù),是恢復(fù)到默認(rèn)狀態(tài)
常用屬性：
? name：定義標(biāo)簽名稱
? value：按鈕顯示名稱
服務(wù)器會(huì)根據(jù)name屬性來獲取我們提交的值,所以我們?cè)趯慖nput標(biāo)簽的時(shí)候都要加上一個(gè)name屬性,這樣才可以把數(shù)據(jù)提交到服務(wù)器
提交數(shù)據(jù)的2種方式 默認(rèn)get提交 和post提交
<image>定義圖像形式的提交按鈕
<input type=”image”> 定義圖像形式的提交按鈕。這個(gè)標(biāo)簽主要是用了替換 submit按鈕，因?yàn)槟J(rèn)產(chǎn)生的提交按鈕并不漂亮，這個(gè)標(biāo)簽允許你采用指定 的圖片做為提交按鈕。
常用屬性：
? name：定義標(biāo)簽名稱
? src：定義作為提交按鈕顯示的圖像的url
? alt：定義作用圖像的替代文本
下面兩個(gè)輸入項(xiàng)不是用2標(biāo)簽進(jìn)行封裝的
2.6.2. <select><option>下拉選擇輸入項(xiàng)
<select >
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
使用屬性 selected="selected" 默認(rèn)選中
2.6.3. </textarea>文本域
<textarea cols="10" rows="5"></textarea>
