|
一、 HTML介紹: --------------------------------------- 1. 什么是HTML？ 超文本標記語言, <標簽名>--標記（標簽、節點） 2. HTML是由：標簽和內容構成 3. 程序語言有兩種：解釋性語言（HTML、PHP、Javascript）和編譯型語言（C、C++、Java 4. HTML的標簽組成部分、屬性、實體 HTML的實體： <:< >:> 空格: 5. HTML中注釋： <!-- .... --> 注釋的目的：1. 輔助說明 2.代碼調試 6. HTML標簽（標記）的語法： 標簽是由"<"和">"括起來 雙標簽：<標簽名>....</標簽名> 單標簽：<標簽名/> 7. HTML中的顏色：可以是顏色單詞：red/blue/green/yellow... 還可以是：#000000 --- #ffffff 十六進制：0123456789abcdef 其中前兩位表示紅色，中間兩位綠色，后兩位表示藍色。 二、 HTML中HEAD頭部設置 ---------------------------------------- 設置網頁編碼：<meta charset="utf-8"/> 關鍵字：<meta name="Keywords" content="關鍵字" /> 描述： <meta name="Description" content="簡介、描述" /> 網頁標題：<title>本網頁標題</title> 導入CSS文件：<link type="text/css" rel="stylesheet" href="**.css"/> CSS代碼：<style type="text/css">嵌入css樣式代碼</style> JS文件或代碼： <script >。。。</script> ... ... 三、 HTML中的文本標簽、格式化標簽 ---------------------------------------- 文本標簽： 1. *<br/> 換行 2. *<p>...</p> 換段 3. <i>...</i> 斜體 4. <em>...</em> 強調斜體 5. <b>...</b> 加粗 6. *<strong>...</strong> 強調加粗 7. *<hn>...</hn> 其中n為1--6的值。 標題標簽（加粗、獨立行） 8. <cite></cite> 引用 9. <sub>... </sub> <sup>...</sup> 10.*<del></del> 刪除線 .... 格式化標簽： 1. *<br/> 換行 2. *<p>...</p> 換段 3. 列表： <ul> 無序列表 <ol> 有序列表 其中type類型值：A a I i 1 start屬性表示起始值 <li> 列表項 <dl> 自定義列表 <dt> 自定義列表頭 <dd> 自定義列表內容 4. <div> <span> 四、*HTML中中的超級鏈接A ------------------------------------------------ *<a href=""></a> 超級鏈接標簽 屬性：href必須，指的是鏈接跳轉地址 target: 表示鏈接的打開方式： _blank 新窗口 _parent 父窗口 _self 本窗口（默認） _top 頂級窗口 framename 窗口名 title：文字提示屬性（詳情） 錨點鏈接： 定義一個錨點：<a id="a1"></a> 以前使用的是 <a name="a1"></a> 使用錨點： <a href="#a1">跳到a1處</a> 五、圖片標簽img --------------------------------------- <img /> 在網頁中插入一張圖片 屬性：src： 圖片名及url地址 alt: 圖片加載失敗時的提示信息 title：文字提示屬性 width：圖片寬度 height：圖片高度 border：邊框線粗細 六、 多媒體標簽（熟悉） ------------------------------------ <audio src="./images/beidahuang.mp3" controls="controls"> 你的瀏覽器不支持播放 </audio> <br/> <audio controls="controls"> <source src="./images/beidahuang.mp3" type="audio/mpeg" /> 你的瀏覽器不支持播放 </audio> <br/><br/> <video controls="controls" width="400" height="400"> <source src="./images/fun.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm"> 你的瀏覽器不支持視頻播放 </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> <br/><br/> <embed src="./images/haowan.swf" width="300" height="300" /> 七、表格標簽 ------------------------------------ table 表格標簽 caption 表格標題 tr 行標簽 th 列頭標簽 td 列標簽 thead 表頭 tbody 表體 tfoot 表尾 八、form表單標簽 --------------------------------------------------------- 1. <form></form> --表單標簽 form標簽常用屬性： *action屬性:提交的目標地址(URL) *method屬性:提交方式:get(默認)和post get方式是URL地址欄可見,長度受限制(IE2k 火狐8k),相對不安全. post方式是URL地址不可見,長度不受限制,相對安全. enctype:提交類型 target: 在何處打開目標 URL。 name:屬性為表單起個名字.HTML5不支持。用 id 代替。 2. <input> 表單項標簽input定義輸入字段，用戶可在其中輸入數據。 在 HTML 5 中，type 屬性有很多新的值。 具體在下面有詳解： 如：<input type="text" name="username"> 3. <select> 標簽創建下拉列表。 *name屬性:定義名稱,用于存儲下拉值的 size：定義菜單中可見項目的數目，html5不支持 disabled 當該屬性為 true 時，會禁用該菜單。 multiple 多選 *<option> 下拉選擇項標簽,用于嵌入到<select>標簽中使用的; *value屬性:下拉項的值 *selected屬性:默認下拉指定項. 4. *<textarea> 多行的文本輸入區域 *name :定義名稱,用于存儲文本區域中的值。 *cols ：規定文本區內可見的列數。 *rows ：規定文本區內可見的行數。 disabled： 是否禁用 readonly： 只讀 ... 默認值是在兩個標簽之間 5. *<button> 標簽定義按鈕 可以在 button 元素中放置內容，比如文檔或圖像。這是該元素與由 input 元素創建的按鈕的不同之處。 6. <fieldset> html5標簽--fieldset 元素可將表單內的相關元素分組。 disabled屬性：定義 fieldset 是否可見。 form屬性： 定義該 fieldset 所屬的一個或多個表單。 7. <legend> html5標簽--<legend> 標簽為 <fieldset>、<figure> 以及 <details> 元素定義標題。 <form> <fieldset> <legend>健康信息：</legend> 身高：<input type="text" /><br/> 體重：<input type="text" /><br/> </fieldset> </form> 8. <optgroup> html5標簽--<optgroup> 標簽定義選項組。此元素允許您組合選項 樣例： <select> <optgroup label="Swedish Cars"> <option value="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標簽--<datalist> 標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。 樣例： <form action="demo_form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> 10. **<input/> 表單項中的屬性，可以提供 *type屬性:表示表單項的類型:值如下: text:單行文本框 password:密碼輸入框 checkbox:多選框 注意要提供value值 radio:單選框 注意要提供value值 file:文件上傳選擇框 button:普通按鈕 submit:提交按鈕 image:圖片提交按鈕 reset:重置按鈕, 還原到開始(第一次打開時)的效果 hidden:主表單隱藏域,要是和表單一塊提交的信息,但是不需要用戶修改 *name屬性:表單項名,用于存儲內容值的 *value屬性:輸入的值(默認指定值) size屬性:輸入框的寬度值 maxlength屬性:輸入框的輸入內容的最大長度 readonly屬性:對輸入框只讀屬性 *disabled屬性:禁用屬性 *checked屬性:對選擇框指定默認選項 accesskey屬性:指定快捷鍵(不常用) (IE:alt+鍵 火狐:alt+shift+鍵) tabindex屬性:通過數字指定tab鍵的切換順序(不常用) src和alt是為圖片按鈕設置的 注意：reset重置按鈕是將表單數據恢復到第一次打開時的狀態，并不是清空 image圖片按鈕，默認具有提交表單功能。 11.分幀 HTML 框架是劃分窗口的技術 就是把一個窗口分隔成多個窗口 每個窗口顯示不同的網頁內容多用于后臺，也叫 做分幀。 Frameset 注意 如果你在頁面上寫frameset 了那么就不能出現body。 <frameset></frameset> 常用屬性: Cols 分列單位可以寫像素也可以寫百分比 之后除上面內容外還可以寫*(*代表剩余所有) Rows 分行單位可以寫像素也可以寫百分比 之后除上面內容外還可以寫*(*代表剩余所有) Frameborder 分幀邊框 0/1 Border 邊框粗細 Frame 把窗口分成幾份就要有對應的幾個frame標簽出現 <frame /> 常用屬性： Name 給設置的區域一個名字 用作跳轉使用 Src 默認的顯示頁面鏈接 Noresize 不允許調整邊框 Scrolling 滾動條 Auto|yes 出現滾動條|no 不出現滾動條
|
|
|
