html学习
HTML(HyperText Markup Language)
前言
軟件架構
B/S
? Browser/Server 網站
C/S
? Client/Server QQ
HTML的簡介、發展史：
萬維網聯盟（W3C）維護。包含HTML內容的文件最常用的擴展名是.html，但是像DOS這樣的舊操作系統限制擴展名為最多3個字符，所以.htm擴展名也被使用。雖然現在使用的比較少一些了，但是.htm擴展名仍舊普遍被支持。
相關歷程：
-
超文本標記語言(第一版) – 在1993年6月發為互聯網工程工作小組(IETF)工作草案發布(并非標準)
-
HTML 2.0 – 1995年11月作為RFC 1866發布,在RFC 2854于2000年6月發布之后被宣布已經過時
-
HTML 3.2 – 1996年1月14日,W3C推薦標準
-
HTML 4.0 – 1997年12月18日,W3C推薦標準
-
HTML 4.01(微小改進) – 1999年12月24日,W3C推薦標準
-
ISO/IEC 15445:2000(“ISO HTML”)–2000年5月15日發布,基于嚴格的HTML4.01語法,是國際標準化組織和國際電工委員會的標準
-
XHTML 1.0 – 發布于2000年1月26日,是W3C推薦標準,后來經過修訂于2002年8月1日重新發布
-
XHTML 1.1 – 于2001年5月31日發布
-
XHTML 2.0
- XHTML 1.0 – 發布于2000年1月26日,是W3C推薦標準,后來經過修訂于2002年8月1日重新發布
-
XHTML – W3C工作草案
網站：
把所有的網站資源文件（HTML,CSS,JS,圖片,視頻等）整合到一起(的一個文件夾)
編程語言：解釋型和編譯型
解釋型：HTML、PHP、Javascript，Python
編譯型語言：C、C++、Java
WEB前端：HTML+CSS+JavaScript
HTML5:
HTML5+CSS3+Api+JavaScript
一 什么是HTML？
超文本標記語言
? (1) 標簽 也叫做 標記
? (2) html是由標簽/標記 和內容組成的
? (3) 標簽 是由 標簽名稱 和屬性組成的
實例：
<人 膚色=“黃色” 眼鏡=“很大”></人>
擴展：
使用協議為 http超文本傳輸協議
普通文本：文字內容
超文本：視頻、音頻、圖片、文字…
二 HTML的主體標簽
實例
<!DOCTYPE html> #H5的頭 聲明文檔類型 為html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd"> #之前的頭文件 現在不用 <html> <head><title>標題內容</title><meta charset="UTF-8"> #設置字符集 </head> <body>放html的主體標簽 </body> </html>- html:文件是網頁，瀏覽器加載網頁，就可以瀏覽
- head:頭部分，網頁總體信息
- title:網頁標題
- meta：網頁主體信息，會根據name(author/description/keywords)或者httq-equiv(content-type/expires/refresh)屬性的不同，而設置網頁的不同屬性
- link:引入外部文件和C#中的using異曲同工
- style：寫入CSS
- script：寫入JS
- body:身體部分，網頁內容
三 HTML的標簽
標簽分為：單標簽/單標記
如：<br /> /<br >
雙標簽/雙標記
如: <p></p>
(1) 文本標簽
<p></p> 段落標簽 自成一段 會將上下的文字 和它保持一定的距離
<br /> 單標記 自閉合 換行
<i></i> /<em></em> 斜體/強調斜體
<b></b>/<strong></strong>加粗/強調加粗
<h1>-</h6>標題標簽 字體加粗 自占一行
注意： 建議一個頁面h1只能出現一次
<sub></sub>/<sup></sup> 下標/上標
<hr />水平分割線
<u></u>下劃線
<del></del>刪除線
<font size="1-7" color="顏色" face="字體"></font> 設置字得大小 顏色 字體
<span></span> 無意義得行級標簽
行級：可以和我們的內容在一行來顯示 不能設置寬高
塊級：自占一行 可以設置寬高
(2) 圖片標簽
<img /> 在網頁中插入一張圖片
屬性：
- src： 圖片名及url地址 (必須屬性)
- alt: 圖片加載失敗時的提示信息
- title：文字提示屬性
- width：圖片寬度
- height：圖片高度
- border：邊框線粗細
實例:
<img src="圖片地址" title="文字提示" alt="圖片加載失敗顯示得信息" width="寬" height="高" border="邊框" />注意：
如果寬和高 只給一個 那么為等比縮放 如果倆個都給 那么會按照 你所給的寬和高來顯示
(3) 路徑
- ./ 當前
- …/ 上一級
-
一個固定得鏈接地址(如域名)
-
從根磁盤 一直到你的文件得路徑
file協議 打開本地磁盤文件得協議（試一下火狐）
(4) 超鏈接
<a href=“鏈接地址” title=“提示信息” target=“打開方式”>點擊顯示得內容</a>
屬性：
href必須，指的是鏈接跳轉地址
target:
? _blank 新建窗口得形式來打開
? _self 本窗口來打開
? _parent 父窗口來打開
? _top 頂級窗口來打開
? framename 分幀名來打開
**title：**文字提示屬性（詳情）
錨點
(5) 列表
無序列表*
<ul><li></li> </ul> <!-- 屬性：type 顯示得類型square 方形顯示disc 默認圓點circle 空心圓 -->有序列表
<ol><li></li> </ol> <!-- 屬性 type i a A 1 start 起始值-->自定義列表
<dl><dt>列表頭</dt><dd>列表內容</dd> </dl>(6) HTML注釋
多行注釋：
注釋的作用：
(7) 常用實體化符號標簽
HTML 中有用的字符實體
注釋：實體名稱對大小寫敏感！
| 空格 | | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和號 | & |
| " | 引號 | " |
| ’ | 撇號 | ' (IE不支持) |
| ￠ | 分（cent） | ￠ |
| ￡ | 鎊（pound） | ￡ |
| ￥ | 元（yen） | ￥ |
| € | 歐元（euro） | € |
| § | 小節 | § |
| ? | 版權（copyright） | ? |
| ? | 注冊商標 | ? |
| ? | 商標 | ? |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
四 分幀
frameset
定義和用法
frameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。
可選的屬性
| cols | pixels % * | 定義框架集中列的數目和尺寸 |
| rows | pixels % * | 定義框架集中行的數目和尺寸 |
| frameborder | 1/0 | 是否顯示邊框 |
| name | 給當前分幀窗口起名稱 | |
| src | 連接的頁面名稱 | |
| noresize | noresize | 頁面不會被拖拽 |
實例
<frameset rows="20%,*,20%" frameborder="1/0"><frame src="" name="分幀名1"><frameset cols="20%,*" frameborder="1/0"><frame src="" name="分幀名1"><frame src="" name="分幀名2"></frameset><frame src="" name="分幀名3"> </frameset>注意：
不可以和body在一起 需要將body刪掉
五 TABLE表格
table表格
屬性：
- width 寬
- height 高
- border 邊框
- cellpadding/cellspacing 內邊距/外邊距
- background 背景圖片
- bgcolor顏色
- align位置 center/left/right
- valign規定單元格內容的垂直排列方式。
- top 對內容進行上對齊。
- middle 對內容進行居中對齊（默認值）。
- bottom 對內容進行下對齊。
- baseline 與基線對齊。
- rowspan合并行
- colspan合并列
標簽：
caption 表格標題
*tr 行標簽
*th 列頭標簽
*td 列標簽
實例：
<table> <caption>我是表格的標題</caption> <tr><th>我是表頭</th><th>我是表頭</th><th>我是表頭</th> </tr> <tr><td>我是單元格</td><td>我是單元格</td><td>我是單元格</td> </tr> </table>細線表格實例：
<table border="0" cellspacing="1" bgcolor="red" width="80%"><tr bgcolor="#ffffff"><td>1.1</td><td>1.2</td></tr><tr bgcolor="#ffffff"><td>2.1</td><td>2.2</td></tr> </table>六 FORM表單
標簽： <form></form>
(1) form屬性
action 提交的地址 method 提交的方式get(1) 默認不寫 為get傳參 url地址欄可見(2) 長度受限制 （IE瀏覽器2k火狐8k）(3) 相對不安全post(1) url地址欄不可見 長度默認不受限制(2) 相對安全 enctype 提交的類型enctype屬性 在表單有文件上傳的時候 需要設置值 值為multipart/form-data(2) input 標簽
<input> 表單項標簽input定義輸入字段，用戶可在其中輸入數據。在 HTML 5 中，type 屬性有很多新的值。
具體在下面有詳解：
如：
<input type="text" name="username">
(3) select 標簽創建下拉列表。
屬性：
- *name屬性:定義名稱,用于存儲下拉值的
- size：定義菜單中可見項目的數目，html5不支持
- disabled 當該屬性為 true 時，會禁用該菜單。
- multiple 多選
內嵌標簽：
*<option> 下拉選擇項標簽,用于嵌入到標簽中使用的;
屬性：
-
*value屬性:下拉項的值
-
*selected屬性:默認下拉指定項.
(4) *textarea 多行的文本輸入區域
屬性：
-
* name :定義名稱,用于存儲文本區域中的值。
-
*cols ：規定文本區內可見的列數。hlc
-
*rows ：規定文本區內可見的行數。
-
disabled： 是否禁用
-
readonly： 只讀
-
placeholder 提示信息
注意：
默認值是在兩個標簽之間
(5) *button 標簽定義按鈕。
您可以在 button 元素中放置內容，比如文檔或圖像。這是該元素與由 input 元素創建的按鈕的不同之處。
type:
- submit 默認為submit
- button 點擊
- reset 重置
(6) fieldset html5標簽–fieldset 元素可將表單內的相關元素分組。
**disabled屬性：**定義 fieldset 是否可見。
form屬性： 定義該 fieldset 所屬的一個或多個表單。
(7) legend html5標簽
html5標簽-- 標簽為 b 以及 元素定義標題。實例：
<form> <fieldset><legend>健康信息：</legend>身高：<input type="text" /><br/>體重：<input type="text" /><br/> </fieldset> </form>(8) optgroup html5標簽
html5標簽-- 標簽定義選項組。此元素允許您組合選項實例：
<select><optgroup label="Swedish Cars"><option vanlue="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup> </select>(9) datalist html5標簽
html5標簽– 標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。
實例：
(10) input 標簽
搭配label標簽使用
label 可以使標簽內的區域指向label標簽for屬性指代的對象的事件。
實例：
<label for="male">Male</label> <input type="radio" name="sex" id="male" />*type屬性:表示表單項的類型:
值如下:
-
text:單行文本框
-
password:密碼輸入框
-
checkbox:多選框 注意要提供value值
-
radio:單選框 注意要提供value值
-
file:文件上傳選擇框
-
button:普通按鈕
-
submit:提交按鈕
-
image:圖片提交按鈕
<input type=“image” width=“100” height=“100”border=“2”src=“上傳圖片”/>
-
reset:重置按鈕, 還原到開始(第一次打開時)的效果
-
hidden:表單隱藏域,是要和表單一塊提交的信息,但是不需要用戶修改
***name屬性: ** 表單項名,用于存儲內容值的
***value屬性: ** 輸入的值(默認指定值)
**size屬性: ** 輸入框的寬度值
maxlength屬性: 輸入框的輸入內容的最大長度
minlength屬性： 輸入框的輸入內容的最小長度
**readonly屬性: ** 對輸入框只讀屬性
***disabled屬性: **禁用屬性
readonly 數據還是會提交給服務器端 disabled 將數據作廢掉 不會再傳遞給服務器端
***checked屬性: ** 對選擇框指定默認選項
placeholder 提示信息
*required 必填屬性
src和alt是為圖片按鈕設置的
注意：reset重置按鈕是將表單數據恢復到第一次打開時的狀態，并不是清空
image圖片按鈕，默認具有提交表單功能。
(11) 作為了解的input h5的新屬性
type屬性：
- time 時間
- date 日期
- range 區間
- email 郵箱
- url url地址
- color 顏色
- number 數值
- search 搜索
七、HTML中HEAD頭部設置
設置網頁編碼：
<meta charset="utf-8"/>
自動刷新：
<meta http-equiv="refresh" content="時間;url=網址" />
關鍵字：
<meta name="Keywords" content="關鍵字" />
描述：
<meta name="Description" content="簡介、描述" />
站點作者:
<meta name="author" content="root,root@xxxx.com">告訴搜索引擎你的站點的制作的作者；
網頁標題：
<title>本網頁標題</title>
導入CSS文件：
<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代碼：
<style type="text/css">嵌入css樣式代碼</style>
JS文件或代碼：
<script >。。。</script>
設置網頁小圖標:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
注意：
頭標簽中的內容不會顯示在瀏覽器中
八、 HTML5多媒體標簽（熟悉）
(1) audio 音頻
HTML5 中的新屬性。
| autoplay | autoplay | 如果出現該屬性，則音頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| loop | loop | 如果出現該屬性，則每當音頻結束時重新開始播放。 |
| muted | muted | 規定視頻輸出應該被靜音。 |
| preload | preload | 如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。 |
| src | url | 要播放的音頻的 URL。 |
方式一
實例：
<audio src="./images/beidahuang.mp3" controls="controls">你的瀏覽器不支持播放 </audio>方式二
實例:
<audio controls="controls"><source src="./images/beidahuang.mp3" type="audio/mpeg" />你的瀏覽器不支持播放 </audio>(2) video 視頻
HTML5 中的新屬性。
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| muted | muted | 規定視頻的音頻輸出應該被靜音。 |
| poster | URL | 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。 |
| preload | preload | 如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。 |
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |
方式一
實例：
<video src="res/happy.mp4" controls poster="res/glnz.jpeg" width="200" height="300" loop>您的瀏覽器不支持播放 請更換瀏覽器在此播放 </video>方式二
實例:
<video controls loop poster="tiao.jpg"><source src="movie.webm" type="video/webm"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">您的破瀏覽器該扔了，不支持視頻標簽 </video>總結
- 上一篇： 标定学习笔记（四）-- 手眼标定详解
- 下一篇： 电工基础知识入门必背的知识