HTML之颗粒归仓
????
? ? HTML全稱為HypertextMarkupLanguage，超文本鏈接標記語言，是一種簡單通用的用來描述網站頁面的標記式語言，用來描述網頁中的各種圖片、表格、文本等各種元素。用戶在瀏覽網站時，瀏覽器解釋和編譯這種語言，生成用戶可以看得懂的網頁。
??? HTML本身是一個純文本文件，可以用任何一個文本編輯器來進行編輯，只要最終存儲文件時把擴展名存為．html或者．htm就可以了。
一、基本格式
HTML格式：
?
標簽格式：
4種形式
小結：
（1）直接寫一個html，寫上helloword也可
（2）標簽、屬性大小寫無關
（3）屬性賦值時可加雙引號也可不加
（4）Title:在歷史列表中也出現
一、段落標簽
<p align="#" >：創建一個段????
?align：對齊方式
<br>：換行
<hr>:插入一條水平線
?
注意：
（1）html中存在連續多個空白字符（空格、制表符、回車、換行等），瀏覽器顯示時只解析為一個空格字符
（2）顏色值設置時，IE不需要添加#，但為支持多瀏覽器應都添加?
<html> <head><title>靜夜思</title></head> <body><!--標題和作者居中--><p align="center">靜夜思<br>作者：李白<!--內容居中，水平線為藍色--><hr color=blue><p align="center">窗前明月光，疑是地下霜。<br>舉頭望明月，低頭思故鄉。 </body> </html><span style="font-size: 14pt; font-family: 楷體;">?</span>
二、文本標簽
<center>：文本居中顯示
<hn>：用于指出文檔標題等級
<font>：字體（size、color）
<b>：粗體
<i>：斜體
注意：hn使用時，會將標題單獨放在一行，不需要br標簽
空行<p>
<html> <head><title>靜夜思</title></head> <body> <!--center全部居中--> <center><h2><fontcolor="red">靜夜思</font></h2><b>作者：李白</b><hr color=blue><p><b><i><font color="green"size="3">窗前明月光，疑是地下霜。<br>舉頭望明月，低頭思故鄉。</font></i></b></center> </body> </html>
輸入特殊字符
兩種類型：
都是以和號（&）開始之后加上一個井號（#）
字符引用：&后加上“#”
實體引用：&后加上助記符
常用字符實體
方一：特殊字符
?
方2：圓角空格
<html> <head><title>靜夜思</title></head> <body> <!--center全部居中--> <center><h2><fontcolor="red">靜夜思</font></h2><b>作者：李白</b><hr color=blue><p><b><i><font color="green"size="3">窗前明月光，疑是地下霜。<br>舉頭望明月，低頭思故鄉。</font></i></b></center> </body> </html>
實例：
?
一個間斷空格的符號占6個字符，一個字符占一個字節，所以用了60個字節
考慮額外增加60字節的代價？
換為5個全角空格（1個全角空格2個字節）
注意：
全角空格不支持中文集的瀏覽器總表現為亂碼
html標簽大小寫無關
實體引用區分大小寫
?
注釋
格式：<!---->
實例：<!--This is a? cat-->
?
三、列表
1、數字符號
<ol>和<li>創建帶數字標號列表
<ol>中start屬性，設置起始序號
<li>中value屬性，該表列表內標號順序?
<ol><li>《高等數學》<li>《高等數學》<li>《高等數學》<li>《高等數學》<li>《高等數學》 </ol>2、指定標號
<ol>和<li>中使用type指定編號系統類型
<oltype="a"><li>《高等數學》<li>《高等數學》<li>《高等數學》<livalue="10">《高等數學》<li>《高等數學》 </ol><oltype="I"><li>《高等數學》<li>《高等數學》<li>《高等數學》<livalue="10">《高等數學》<li>《高等數學》 </ol>?
?
?
3、項目符號
<ul>和<li>的type屬性指定符號樣式
?
4、無符號列表
<dl>與<dt>標簽
<dl><dt>《高等數學》<dt>《高等數學》<dt>《高等數學》<dt>《高等數學》 </ol>
5、縮進列表
<dd>標簽替換<dt>
?
6、術語列表
在<dl>元素中同時使用<dt>和<dd>
<dl><dt> HTML<dd>超文本標記語言<dt>HTTP<dd>超文本傳輸協議</ol>
三、表格
不僅顯示數據，而且可布局，可沒有標頭
1、定義一個表格
<caption>：表格標題
<tr>：新添加行
<th>：定義表頭
<td>：單元格
border：表格寬度
align：水平對齊
valign：垂直對齊
bgcolor：背景色
四、表單?
1、創建表單
數據量小：get；
數據量大：post
2、input元素
注：如果只有一個單行文本控件，可以直接通過回車提交表單
<html><head><title>表單例子</title></head><body><formmethod="get" action="reg.jsp"><table><tr><!--單行文本輸入控件--><td>用戶名:</td><td><input type="text" name="user"value="游客"size="30"><br></td></tr> <td>密碼:</td><td><inputtype="password" name="pwd"><br></td<tr></tr> <!--單選框--><td>性別:</td><td><inputtype="radio" name="sex" value="1" checked>男<input type="radio" name="sex"value="2">女</td><tr> <!--復選框--><td>興趣愛好：</td><td><inputtype="checkbox" name="interest"value="footable">足球<input type="checkbox" name="interest"value="basketball">籃球 <input type="checkbox" name="interest"value="volleyball">排球<br></td></tr> <tr><!--下拉框--><td >最高學歷：</td><td><select><option value="" selected>…</option><option value="告終">高中</option><option value="大學">大學</option><option value="碩士">碩士</option></select></td></tr> <tr><!--多行文本--><td valign="top">個人簡歷：</td><td><textarea name="personal" rows="5"cols="30">個人簡歷</textarea><br><inputtype="hidden" name="id"value="001"> </td></tr> <!--重置和注冊--> <input type="reset" value="重置"><input type="submit" value="注冊"></table></form></body></html> ?五、擴充
1、超鏈接
URL組成：協議、主機名稱、文件目錄和文件名
?
2、嵌入圖像
src：指定圖像資源
width、height：圖片尺寸
?
注：
網站LOGO，圖標：GIF格式
品質要求較高：照片和風景畫
指定圖片高度不匹配：拉伸的現象
<html><head><title>超鏈接例子</title></head><body><!--超鏈接--><a href="http://www.baidu.com">百度</a><!--嵌入圖像--><ahref="http://www.baidu.com"><imgsrc="logo.gif" width="197"height="81"></q></a></body>?
六、總結
??用一天的的時間學習了HTML并實踐了實例，雖然不是很深入，但相信在以后的學習中會得到很好的補充。簡單的2時視頻，囊括了HTML的方方面面，繼續加油！
總結
- 上一篇： Matlab 斜率和曲率,曲率_与闪电共
- 下一篇： 浏览器无法启动百度网盘应用的解决办法