HTML基礎全薈
第一講 html概述
1、認識HTML
<! DOCTYPE html>
<html>
<style></style>
<head><title></title></head>
<body>
<h1></h1>
//
<p></p>
</body>
</html>
2、圖片路徑
怎麽加載圖片 主要是寫路徑
<../ images/002.jpg>
幾層幾個../
<../../../201.gif>
這種指的是把鏈路地址跳出來
Alt 彈出框、
屬性：寬高背景 透明度 內邊距 外邊距
為了保持圖片的自然比例一般只改變寬度或者高度
不要寫屬性默認的單位
Title屬性可以表示題目可以表示鼠標放在圖片時所顯示的文本
也可以表示彈出title=”小姐姐”
圖片中的路徑問題
相對路徑：參照自身的位置定義的路徑
絕對路徑：在計算機裏面的路徑
3、行內元素、塊元素、行內塊元素的比較
塊元素：p <br/> h1~h6 li ol dl dd dt div <hr/> form
行內塊級元素 img input button
行內元素 <b></b> <strong></strong> <i></i> lable <em ></em> sup sub
第二講 標簽的使用
HTML文字排版標記
1、常見的標簽：
<p></p> 雙標記元素
<br/> 單標記標簽
<h1>~<h6> 雙標記元素
列表
<ul></ul> 無序列列表
<ol></ol> 有序列表
<li></li> 列表項
<dl></dl> 定義列表 定義列表至少有一條說明
<dt></dt> 表明術語要說明的對象
<dd></dd> 三個都是雙標記元素
2、標簽屬性
Ul 的屬性type=square可以把小圓點變成實心的方形
Ul 的屬性type=circle可以把小圓點變成空心的小圓點
Ul 的屬性type=none可以把前綴去掉
<strong></strong> <b></b> 都是加粗，但是第一個具有強調的意思
<div></div>是一個塊級元素，
3、元素之間的嵌套
標簽和標簽的嵌套：塊級元素裏面可以嵌套任何的元素
塊級元素裏可以嵌套塊級元素 <div><h3></h3></div>
塊級元素可以嵌套行內元素 <div><strong></strong></div>
塊級元素裏面可以嵌套行內塊級元素 <div><img src=””/></div>
行內元素可以嵌套任何元素，除了塊級元素。
行內元素嵌套行內元素 <b><i></i></b>
行內元素可以嵌套行內塊級元素 <a href=”#” ></a>
<hr/>是一個水平線
4、<div></div>
1. 是一個塊級元素
2. 占據一行
3. 高度、行高、外邊距和內邊距都可以控制
4. 寬度始終與瀏覽器一樣，與內容無關
5. 沒有自帶樣式
5、<span></span>
1. 行內元素
2. 與其他元素在一行上、
3. 高、行高以及外邊距內邊距都可以改變、
4.. 寬度只與內容有關
5. 沒有自帶的樣式是行內元素之容納文本或者其他行內元素
6. 表現性元素
<big ></big><small></small>
6、特殊標簽和結束標簽
< sup></sup> 上標
<sub></sub> 下標
H4被淘汰的標簽：center、 font 、 big、small\
特殊文字符號的使用
空格
< <
> >
? 版權
第三講 鏈接的使用
1、超鏈接
1）超鏈接概述
a超練級的 href屬性值是url路徑
Target 目標 在新窗口中打開用屬性值 _blank
Title(標題） 鼠標放在超鏈接上的時候 顯示的文超鏈接了；裏面沒有#的話表示刷新本頁面
任何標簽都可以有id 但是id的值是唯一的
回到哪個地方 就是#ID 錨點
2）偽類
偽類： a:link:
a:visited
a:hover:
a:active:
LOVE HATE 愛恨原則
3）href的值
Href的值
1、另一個頁面的值 相對路徑和絕對路徑
2、錨點 #ID 或者是 # name
3、值為空 刷新本頁面
4）target的屬性
Target 的屬性 目標
1、_blank 在新窗口中打開
2、_top 在窗口頂部打開
4、-self 自己窗口打開
5、 _parrent 後三種在窗口中都是吧原來的窗口覆蓋了
鼠標放在超鏈接上面顯示的文本 title
所有的標簽都可以加的屬性：id
ID 唯一的
Style 行內樣式 值是由冒號引出值是由多個屬性名和屬性值構成的，用分好個跨
使用電子郵件鏈接
<a href=”mailto”></a>
網頁中圖片的分類
1、內容圖片
2、修飾圖片
三種格式
1. Gif 動圖 支持透明 修飾類
2. Jpg jpeg ---色彩多不支持動圖也不支持透明，是網頁內容圖片的首選
3. Png 內容或者修飾 支持透明效果最好 （考點）
2、熱區的創 建<map>和<area> 難點要點
1）為圖片的特定區域建立鏈接
Shape的取值
Circle
Rect
Poly
<area shape=”circle” coords/>
<img src="2.png" usemap="#mymap"/>
<map id="mymap" name="mymap">
<area shape="circle" coords="100,100,50" href="girl.html"/>
</map>
2）Map 必須有的屬 id name
Map 必須有的屬 id name
3）Area 必須有三個屬性
確定形狀 Shape
確定位置 coords
確定鏈接 href
3、框架的使用
1）行內框架
<iframe></iframe>
在body裏面
2）框架集
只要用框架集不要再用body 或者不要在body裏面寫內容
<frameset cols / rows =” ”>
<frame src=”” name=” ”/>
<frame src= “ ”/>
</frameset>
<frameset cols =”20%, * ”> 剩多少 *就是多少
<frame src=”” name=” ”/>
<frame src= “ ”/>
</frameset>
不加邊框 不加滾動條 不可移動
<frameset rows="200px,300px,*" frameborder=0 >
<frame src= "re.html" / scrolling="no">
<frame src="girl.html" noresize/>
<frame src= "jin.html"/>
</frameset>
第四講 軟件和表格
1、Sublime軟件的安裝和快捷方法
1）快捷方法
生成html文檔 點擊純文本 選擇html 按英文的嘆號 + tab
生成單個標簽 標簽名字+Tab
生成多個標簽 標簽名*個數 + tab
註釋：選中要註釋的內容 control+/
瀏覽的話就點擊右鍵 會有在瀏覽器中打開 或者找路徑
生成id為top的元素 <div id=”top”></div> div#top + tab
生成後代元素 用父元素名>子標簽 + tab <div><a href=""></a></div>
Div*3>a tab
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
Div>a*3 tab
<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
有漢字用大括號
Div*3>a{hello}
<ul>
<li><a href="">hello</a></li>
<li><a href="">hello</a></li>
<li><a href="">hello</a></li>
</ul>
Ul>li*3>a{hello$} TAB
<ul>
<li><a href="">hello1</a></li>
<li><a href="">hello2</a></li>
<li><a href="">hello3</a></li>
</ul>
註意光標在最後面 全部是英文
倒序
Td*3>{hello$@-}
<tr>
<td>world5</td>
<td>world4</td>
<td>world3</td>
<td>world2</td>
<td>world1</td>
</tr>
Th*3>{hello$$$} tab
<th>hell0001</th>
<th>hell0002</th>
<th>hell0003</th>
<th>hell0004</th>
<th>hell0005</th>
回顧內容
超鏈接的屬性 href的三個值 相對路徑 錨點 值為空
Target的值
Title
所有的標簽都可以加屬性
嵌入式樣式
1）Sublime Text 3 快捷鍵精華版
Ctrl+X：刪除當前行
Ctrl+N：新建窗口
Ctrl+K+B：開關側欄
Ctrl+/：註釋當前行
Ctrl+Shift+/：當前位置插入註釋
F11：全屏
Shift+F11：全屏免打擾模式，只編輯當前文件
Alt+F3：選擇所有相同的詞
Ctrl+Z 撤銷。r
Ctrl+Y 恢復撤銷。
2、表格
1）表格的基本結構
<table></table>
定義表格的基本框架
<tr></tr>
定義表格的行
<td></td>
定義表格中行內的單元格
<th></th>
定義表格中行內的單元格（標題），自動將文本加粗，居中對齊
2）合並單元格
Colspan rowspan
3）完整的表格標記
<thead></thead>
定義表頭部分
<tfoot></tfoot>
定義表格腳註
<tbody></tbody>
定義表格主體
註意：<thead>和<tfoot>的內容要用<tr><td>要表示，不推薦直接表示
屬性：
表格默認沒有border 邊框 如果要有的話就border
Cellspacing 單元格與單元格之間的距離
Th默認樣式 加粗 水平居中 垂直居中
Td默認樣式是左對齊 豎直方向垂直居中
Cellpadding 內邊距
border
align
Bgcolor
<style=” 背景顏色怎麽加
Alig n left center right
Valign top/ middle/bottom
第五講 表單的的綜合使用
Class不唯一 用 .
Div 唯一 用#
如果文本居中的話用 text-align:center
如果一塊居中的話用 margin-right:auto;
Margin-left:auto;
1、表單
1）表單的概念及作用 （重難點）
表單是用來采集用戶輸入的數據，然後將數據提交給服務器
2）一個表單有三個基本組成部分：
表單標簽：這裏面包含了處理表單數據所用程序的URL以及數據提交到服務器的方法。 Action 屬性 定義明文還是密文
表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
表單按鈕：
包括提交按鈕（提交到服務器）、復位按鈕（重置）和一般按鈕 （一般是沒有東西
可以自定義）
表單標簽 <from></from>
定義采集數據的範圍
所有的標簽都寫到form表單裏面
Url一般是服務器上面的某一個接口
<form action="url" method="get" ></form>
action=“” 服務器地址
method=“” get / post
Get提交 密碼 用戶名 都是明文 不安全 大小有限制 （ajax)
Post 是密文
高都是行內塊級元素
<!-- action 是服務器上的某一個地址 表單要提交的路徑
method 表單提交的方式 值：get post
get 不安全 大小有限制
post 安全 大小無限制
placehoder 默認的提示
type="text" 表示的文本類型
maxlength="3" 限制輸入文本的長度單位是字數
size 表示大小 不用了解
form是塊級元素
其他的可以加寬和高都是行內塊級元素
name具有記憶功能
寫提交按鈕的時候 value的值最好寫上，不同的軟件顯示不一樣
關於method的不一樣 地址欄會顯示不一樣的內容 get會有顯示 post則不具有
-->
<!-- 文本框 type="text" -->
表單域對象
包含文本框 多行文本框登
文本框
文本框是一種讓訪問自己輸入內容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。
代碼格式：
＜input type="text" name="..." size="..." maxlength="..." value="..."＞
多行文本框
也是一種讓訪問者自己輸入內容的表單對象，只不過能讓訪問者填寫較長的內容。
代碼格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞
密碼框
是一種特殊的文本域，用於輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。
代碼格式：＜input type="password" name="..." size="..." maxlength="...“/＞
隱藏域
隱藏域是用來收集或發送信息的不可見元素，對於網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上。
代碼格式：＜input type="hidden" name="..." value="..."＞
復選框
復選框允許在待選項中選中一項以上的選項。每個復選框都是一個獨立的元素，都必須有一個唯一的名稱。
代碼格式：＜input type="checkbox" name="..." value="..."＞
單選框
當需要訪問者在待選項中選擇唯一的答案時，就需要用到單選框了。
代碼格式：＜input type="radio" name="..." value="..."＞
必須寫上相同的name值才能每次選中一個
文件上傳框
有時候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。
代碼格式：＜input type="file" name="..." size="15" maxlength="100"＞
下拉選擇框
下拉選擇框允許你在一個有限的空間設置多種選項。
代碼格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞
表單按鈕 表單按鈕控制表單的運作
提交按鈕 提交按鈕用來將輸入的信息提交到服務器。
代碼格式：＜input type="submit" name="..." value="..."＞
復位按鈕 復位按鈕用來重置表單。
代碼格式：＜input type="reset" name="..." value="..."＞
一般按鈕 一般按鈕用來控制其他定義了處理腳本的處理工作。
代碼格式：＜input type="button" name="..." value="..." onclick="..."＞
3）Post和get概述
Post 大小無限制 安全
Get大小有限制 不安全
HTML基礎全薈