html簡介
1.1 html概述javascript
html全稱:Hyper Text Markup Language(超文本標記語言) 超級文本標記語言是標準通用標記語言(SGML)下的一個應用,也是一種規範,一種標準,它經過標記符號來標記要顯示的網頁中的各個部分。 網頁文件自己是一種文本文件,經過在文本文件中添加標記符。 能夠告訴瀏覽器如何顯示其中的內容(如:文字如何處理,畫面如何安排,圖片如何顯示等)。 瀏覽器按順序閱讀網頁文件,而後根據標記符解釋和顯示其標記的內容,對書寫出錯的標記將不指出其錯誤,且不中止其解釋執行過程,編制者只能經過顯示效果來分析出錯緣由和出錯部位。但須要注意的是,對於不一樣的瀏覽器,對同一標記符可能會有不徹底相同的解釋,於是可能會有不一樣的顯示效果。css
1.2 html特色 超級文本標記語言文檔製做不是很複雜,但功能強大,支持不一樣數據格式的文件嵌入,這也是萬維網盛行的緣由之一,其主要特色以下: 1 簡易性:超級文本標記語言版本升級採用超集方式,從而更加靈活方便。 2 可擴展性:超級文本標記語言的普遍應用帶來了增強功能,增長標識符等要求,超級文本標記語言採起子類元素的方式,爲系統擴展帶來保證。 3 平臺無關性:雖然我的計算機大行其道,但使用MAC等其餘機器的大有人在,超級文本標記語言可使用在普遍的平臺上,這也是萬維網盛行的另外一個緣由。 4 通用性:另外,HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它容許網頁製做人創建文本與圖片相結合的複雜頁面,這些頁面能夠被網上任何其餘人瀏覽到,不管使用的是什麼類型的電腦或瀏覽器。html
1.3 html語法規則html5
<!DOCTYPE html> <html> <head> <!--設置頁面的字符集編碼 --> <meta charset="utf-8" /> <!--設置頁面的標題 --> <title></title> </head> <body> <!--須要展現的信息--> </body> </html>
1.html結構:包括head body 2.html標籤是以尖括號包圍的關鍵字 3.html標籤一般是成對出現的,有開始就有結束,包含成對標籤、獨立標籤 4.html一般都有屬性,格式:屬性名=「屬性值」(多個屬性之間空格隔開) 5.html標籤不區分大小寫,建議小寫java
html基本標籤
2.1 結構標籤數組
<html><html>:根標籤 <head>:頭標籤 <title></title>:頁面的標題 </head> <body></body>:主體標籤:網頁內容
屬性:
color:文本的顏色 <font color="red">內容</font> bgcolor:背景色 <body bgcolor="bisque"> </body> background:背景圖片
顏色的表示方式:
第一種方式:使用顏色名稱: red green blue
第二種方式:RGB模式 #000000 #ffffff #325687 #377405瀏覽器
2.2 排版標籤 1.註釋標籤:<!--註釋-->
2.換行標籤:<br/>
3.段落標籤:<p>文本文字</p>
特色:段與段之間有行高
屬性:align對齊方式 (left:左對齊 center:居中 right:右對齊)
4.水平線標籤:<hr/>
屬性:
width:水平線的長度(兩種:第一種:像素表示;第二種,百分比表示) size: 水平線的粗細 (像素表示,例如:10px)
color:水平線的顏色
align:水平線的對齊方式(left:左對齊 center:居中 right:右對齊)安全
2.3 容器標籤服務器
<div></div>:塊級標籤,獨佔一行,換行 <span></span>:行級標籤,全部內容都在同一行 做用: <div></div>:主要是結合css頁面分塊佈局 <span></span>:進行友好提示信息網絡
2.4 文字標籤
2.4.1 基本文字標籤
<font></font> 屬性: size:設置字體大小 color:設置字體顏色 face:設置字體
2.4.2 標題標籤
<h1></h1>—-<h6></h6> 隨着數字增大文字逐漸變小,字體是加粗的,內置字號,默認佔據一行;
2.5 列表標籤
2.5.1 無序列表
ul
無序列表標籤: <ul></ul> 屬性:type :三個值,分別爲 circle(空心圓) ,disc(默認,實心圓),square(黑色方塊) 列表項:<li></li> 示例以下: <ul type="square">無序列表 <li>蘋果</li> <li>香蕉</li> <li>橘子</li> </ul>
2.5.2 有序列表
ol
有序列表標籤:<ol></ol> 屬性:type:一、A、a、I、i(數字、字母、羅馬數字) 列表項: <li></li> 示例以下: <ol type="I">有序列表 <li>蘋果</li> <li>香蕉</li> <li>橘子</li> </ol>
2.5.3 定義列表
dl
定義列表 <dl> <dt>蘋果</dt> <dd>蘋果是一種水果,富含維生素C,美容養顏,吃了長壽....</dd> </dl>
2.5.4 列表嵌套
<ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶 <ul> <li>中國茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul>
2.6 圖片標籤
<img/>獨立標籤
屬性: src:圖片地址: 相對路徑 (同一個網站) 絕對路徑 (不一樣網站) width:寬度 height:高度 border:邊框 align:對齊方式,表明圖片與相鄰的文本的至關位置(有三個屬性值:top middle bottom) alt:圖片的文字說明 hspace 和 vspace 設定圖片邊沿上下左右空白,以避免文字或其它圖片過於貼近
2.7 連接標籤 超連接能夠是文本,也能夠是一幅圖像,您能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
<a>文本或圖片</a> 屬性: href:跳轉頁面的地址(跳轉到外網須要添加協議);
name:名稱,錨點(回到錨點: 頂部,底部,中間),在訪問錨點的書寫格式:#name的值 target:_self(本身) _blank(新頁面,以前頁面存在) _parent _top 默認_self _search相等於給頁面起一個名字,若是再次打開時,若是頁面存在,則再也不打開新的頁面。能夠是任意名字。
2.8 表格標籤 表格由<table>標籤來定義。每一個表格均有若干行(由 <tr> 標籤訂義),每行被分割爲若干單元格(由 <td> 標籤訂義)。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。
2.8.1 普通表格
(table,tr,td)
<!--border:邊框的寬度 bordercolor:邊框的顏色 cellspacing:單元格的邊距 width:寬度 height:高度--> <table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100"> <tr> <td>學號</td> <td>姓名</td> </tr> <tr> <td>1</td> <td>aa</td> </tr> </table>
2.8.2 表格的表頭
(th)
<table border="1" bordercolor="red" cellspacing="0" align="center"> <caption>學生表</caption> <tr> <th>學號</th> <th>姓名</th> </tr> <tr> <td>1</td> <td>aa</td> </tr> </table>
2.8.3 表格的列合併
colspan 屬性
<table border="1" bordercolor="red" cellspacing="0" align="center"> <tr> <td colspan="4" align="center">學生表</td> </tr> <tr> <td>學號</td> <td>姓名</td> <td colspan="2">各科成績</td> </tr> <tr> <td>1</td> <td>aa</td> <td>80</td> <td>90</td> </tr> </table>
2.8.4 表格的行合併
rowspan屬性
<table border="1" bordercolor="red" cellspacing="0" align="center"> <tr> <td colspan="4" align="center">學生表</td> </tr> <tr> <td>學號</td> <td>姓名</td> <td>語文成績</td> <td>數學成績</td> </tr> <tr> <td rowspan="2">1</td> <td rowspan="2">aa</td> <td>80</td> <td>90</td> </tr> <tr> <td>80</td> <td>90</td> </tr> </table>
2.9 文本格式化標籤
<b> 定義粗體文本。 <big> 定義大號字。 <em> 定義着重文字。 <i> 定義斜體字。 <small> 定義小號字。 <strong> 定義加劇語氣。 <sub> 定義下標字。 <sup> 定義上標字。 <ins> 定義插入字。 <del> 定義刪除字。
html表單標籤
html表單用於收集不一樣類型的用戶輸入
3.1 form標籤 經常使用屬性:action:表示動做,值爲服務器的地址,把表單的數據提交到該地址上處理 method:請求方式:get 和post enctype:表示是表單提交的類型 默認值:application/x-www-form-urlencoded 普通表單 multipart/form-data 多部分表單(通常用於文件上傳) get: 1.地址欄,請求參數都在地址後拼接 path?name="張三"&password="123456" 2.不安全 3.效率高 4.get請求大小有限制,不一樣瀏覽器有不一樣,可是大約是2KB 使用狀況:通常狀況用於查詢數據。 post: 1.地址欄:請求參數單獨處理。 2.安全可靠 3.效率低 4.post請求大小理論上無限。 使用狀況:通常用於插入修改等操做
3.1.1 input標籤
type: 如下爲type可能要取的值: 1.1 text 文本框 輸入內容 1.2 password 密碼框 密文或者掩碼 1.3 radio 表示是單選,name必須一致;value:提交給服務器的數據 表示同一組中只能選中一個( checked ="checked" 表示選中) 1.4 checkbox 表示多選 ,name必須一致, 表示同一組中能夠選多個,返回值是個數組( checked ="checked" 表示選中) 1.5 file :表示上傳控件
以上具備輸入性質的必需要有name屬性,一開始寫value表示是默認值(之後獲取輸入框的內容要根據name來取)
如下按鈕不具備輸入性質,不須要name屬性,可是按鈕上的文字提示使用value屬性 1.6 submit 提交 1.7 reset 重置 1.9 image 圖片提交按鈕 以上全部input的屬性: width 設置寬度,height 設置高度 border 設置邊框 1.10 button 普通按鈕 1.11 hidden 表示隱藏域,該框的內容服務器須要,可是不想讓用戶知道(不想清楚的顯示在界面上)
name屬性:表單元素名字,只有name屬性才能提交給服務器。
3.1.2 select 元素
(下拉列表)
<select name="city"> <!--select標籤添加該屬性multiple="multiple"表示多選--> <!--option表示下拉列表項--> <option value="北京">北京</option> <!--selected="selected"表示選中該項--> <option value="上海" selected="selected">上海</option> <option value="廣州">廣州</option> <option value="杭州">杭州</option> </select>
3.1.3 textarea元素
(文本域)
須要指定輸入的區域位置大小
<textarea cols="100" rows="5"> 表示5行100列的區域能夠輸入內容,該元素沒有value屬性
3.1.4 示例及效果圖以下
<form action="" method="get"> <table align="center"> <caption> <h1>註冊</h1></caption> <tr> <td align="right">用戶名:</td> <td><input type="text" name="username" value="bluesky" /></td> </tr> <tr> <td align="right">密碼:</td> <td><input type="password" name="password" /></td> </tr> <tr> <td align="right">確認密碼:</td> <td><input type="password" name="confirmpwd" /></td> </tr> <tr> <td align="right">性別:</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" checked="checked" />女 </td> </tr> <tr> <td align="right">愛好:</td> <td> <input type="checkbox" name="hobby" value="籃球" checked="checked" />籃球 <input type="checkbox" name="hobby" value="足球 " />足球 <input type="checkbox" name="hobby" value="乒乓球 " />乒乓球 <input type="checkbox" name="hobby" value="羽毛球 " />羽毛球 </td> </tr> </tr> <tr> <td align="right">上傳頭像:</td> <td> <input type="file" name="upload" /> </td> </tr> </tr> <tr> <td align="right">居住地:</td> <td> <select name="city"> <option value="北京">北京</option> <option value="上海" selected="selected">上海</option> <option value="廣州">廣州</option> <option value="杭州">杭州</option> </select> </td> </tr> </tr> <tr> <td align="right">我的介紹:</td> <td> <textarea cols="100" rows="5"> </textarea> </td> </tr> </tr> <tr> <td></td> <td align="center"> <input type="submit" value="註冊" /> <input type="reset" value="重置" /> </td> </tr> </table> </form>
html框架標籤
經過使用框架,你能夠在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱爲一個框架,而且每一個框架都獨立於其餘的框架。 使用框架的壞處: 開發人員必須同時跟蹤更多的HTML文檔 很難打印整張頁面
4.1 frameset
框架結構標籤
框架結構標籤(<frameset>)定義如何將窗口分割爲框架 每一個 frameset 定義了一系列行或列 rows/columns 的值規定了每行或每列佔據屏幕的面積
4.2 frame
框架標籤
frame 標籤訂義了放置在每一個框架中的 HTML 文檔。
4.3 基本的注意事項
1\. 不能將 <body></body> 標籤與 <frameset></frameset> 標籤同時使用 2\. 假如一個框架有可見邊框,用戶能夠拖動邊框來改變它的大小。爲了不這種狀況發生,能夠在 <frame> 標籤中加入:noresize="noresize"。
4.4 效果圖及源代碼示例
!--主界面-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <frameset rows="15%,*" border="1px"> <frame src="FrameTop.html" name="topFrame" noresize="noresize" /> <frameset cols="15%,*"> <frame src="FrameLift.html" name="liftFrame" noresize="noresize"/> <frame src="FrameRight.html" name="rigthFrame"/> </frameset> </frameset> </html> !--左側超連接鏈接欄-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>a{text-decoration:none}</style> </head> <body> <table width="100%" height="400px"> <tr align="center" > <td> <a href="a鏈接.html" target="rigthFrame"><font size="5">第一個鏈接</font></a> </td> </tr> <tr align="center" > <td> <a href="Table.html" target="rigthFrame"><font size="5">第二個鏈接</font></a> </td> </tr> <tr align="center" > <td> <a href="註冊.html" target="rigthFrame"><font size="5">第三個鏈接</font></a> </td> </tr> <tr align="center" > <td> <a href="綜合案例.html" target="rigthFrame"><font size="5">第四個鏈接</font></a> </td> </tr> <tr align="center" > <td> <a href="列表.html" target="rigthFrame"><font size="5">第五個鏈接</font></a> </td> </tr> </table> </body> </html> !--右側顯示頁面-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊</title> </head> <body bgcolor="aquamarine"> <div align="center"> <form action="" method="post"> <table> <tr> <th colspan="2">用戶註冊</th> </tr> <tr> <td>用戶名:</td> <td><input type="text" name="uName" /></td> </tr> <tr> <td>密碼:</td> <td> <input type="password" name="pwb" /></td> </tr> <tr> <td>確認密碼:</td> <td> <input type="password" name="qpwb" /></td> </tr> <tr> <td>性別:</td> <td> <input type="radio" name="gender" checked="checked" value="男" />男 <input type="radio" name="gender" value="女" />女 </td> </tr> <tr> <td>愛好:</td> <td> <input type="checkbox" name="hobby" value="動漫"/>動漫 <input type="checkbox" name="hobby" value="遊戲"/>遊戲 <input type="checkbox" name="hobby" value="社交"/>社交 </td> </tr> <tr> <td>所在地</td> <td> <select name="address"> <option>北京</option> <option>上海</option> <option>天津</option> <option>廣東</option> </select> </td> </tr> <tr> <td>上傳頭像</td> <td> <input type="file" name="file" /> </td> </tr> <tr> <td>自我介紹</td> <td> <textarea style="resize:none; height: 50px;" name="myself"></textarea> </td> </tr> <tr > <td colspan="2"> <input style="margin-left: 50px;" type="submit" name="submit"/> <input style="margin-left: 50px;" type="reset" name="reset"/> </td> </tr> </table> </form> </div> </body> </html> !--頂部Hello World-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body bgcolor="coral"> <p align="center"><font size="7">Hello World</font></p> </body> </html>
html的其它標籤和特殊字符
5.1 其它標籤
<!--該網頁的關鍵字--> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <!--該網頁的描述--> <meta http-equiv="description" content="this is my page"> <!--該網頁的編碼--> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01 <meta charset="UTF-8"> html5 <!-- href:引入css文件的地址--> <link rel="stylesheet" type="text/css" href="./styles.css"> <!--src:js的文件地址--> <script type="text/javascript" src=""></script>
5.2 特殊字符
< 小於號 > 大於號 & 與字符 " 引號 ® 己註冊 © 版權 ™ 商標 空格