第1章 WEB01-HTML篇

阿新 • • 發佈：2018-03-28

web之html

今日任務
? 網站信息頁面案例
? 網站圖片信息頁面案例
? 網站友情鏈接頁面案例
? 網站首頁案例
? 網站註冊頁面案例
? 網站後臺頁面案例
教學導航
教學目標
了解什麽是標記語言
了解HTML主要特性,主要變化及發展趨勢
了解HTML的結構標簽
掌握HTML的主要標簽(字體,圖片,列表,鏈接,表單等標簽)
教學方法
案例驅動法
1.1 案例一：網站信息頁面的顯示：1.1.1 需求：
在網頁中顯示網站的信息的頁面：效果如下：
技術分享圖片

1.1.2 分析:1.1.2.1 技術分析：
【HTML的概述】
? 什麽是HTML
HTML:Hyper Text Markup Language --- 超文本標記語言.

標記語言：指的是通過一組標簽的形式描述事物的一門語言.

超文本：比普通的文本更強大.

? HTML的作用
HTML是用來制作頁面(靜態頁面).

? HTML在那些地方使用
在設計網站的頁面的時候都要使用到HTML.

【HTML的使用】
? HTML的文件的創建
一個HTML文件,擴展名是.html或者.htm結尾

01.html

? HTML的結構標簽

跟標簽:<html></html>
- <head> -- html的頭標簽
- <body> -- html的體標簽

【HTML的字體標簽】
? <font>標簽:HTML中的字體標簽.
使用：<font>文字</font>

<font>標簽的屬性:
- <標簽屬性名=”屬性值” 屬性名=”屬性值”></標簽>
- 屬性:
  - color屬性:字體顏色
    - 英文單詞設置:black,red,green,blue...
    - 使用16進制數設置:#FFFFFF , #FFF
  - size屬性:字體的大小
  - face屬性:字體
基本使用：
<font>我是HTML!</font> <br/>
<font color="red">我是HTML！</font><br/>
<font color="#FF0000" size="1">我是小紅！</font><br/>

<font color="#00FF00" size="7">我是小綠！</font><br/>
<font color="#0000FF" size="100">我是小藍！</font><br/>

【HTML的排版標簽】
? 標題標簽：h標簽<h1>...<h6>

一級標題

二級標題

三級標題

? 段落標簽：p標簽

一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容

一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容一段內容內容

? 字體加粗標簽：b標簽 黑馬訓練營 ? 字體斜體標簽：i標簽 黑馬訓練營 ? 字體下劃線：u標簽黑馬訓練營 ? 居中標簽：標簽內容 1.1.2.2 步驟分析: 【步驟一】創建一個HTML的文檔【步驟二】設置標題【步驟三】設置四個段落【步驟四】使用字體標簽將第一個段落中的某個部分的內容變為紅色. 1.1.3 代碼實現: ``` 網站信息頁面

公司簡介

``` ```

“中關村黑馬程序員訓練營”是由傳智播客聯合中關村軟件園、CSDN，並委托傳智播客進行教學實施的軟件開發高端培訓機構，致力於服務各大軟件企業，解決當前軟件開發技術飛速發展，而企業招不到優秀人才的困擾。目前，“中關村黑馬程序員訓練營”已成長為行業“學員質量好、課程內容深、企業滿意”的移動開發高端訓練基地，並被評為中關村軟件園重點扶持人才企業。

黑馬程序員的學員多為大學畢業後，有理想、有夢想，想從事IT行業，而沒有環境和機遇改變自己命運的年輕人。黑馬程序員的學員篩選制度，遠比現在90%以上的企業招聘流程更為嚴格。任何一名學員想成功入學“黑馬程序員”，必須經歷長達2個月的面試流程，這些流程中不僅包括嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、品德測試等等測試。毫不誇張地說，黑馬程序員訓練營所有學員都是精挑細選出來的。百裏挑一的殘酷篩選制度確保學員質量，並降低企業的用人風險。

中關村黑馬程序員訓練營不僅著重培養學員的基礎理論知識，更註重培養項目實施管理能力，並密切關註技術革新，不斷引入先進的技術，研發更新技術課程，確保學員進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。

一直以來，黑馬程序員以技術視角關註IT產業發展，以深度分享推進產業技術成長，致力於弘揚技術創新，倡導分享、開放和協作，努力打造高質量的IT人才服務平臺。

``` 1.1.4 總結: HTML有標準: * HTML4 * * HTML5:支持視頻播放,支持CSS3,支持定位,擴展標簽... *

標簽：原生標簽.

標簽：橫線. 1.2 案例二：網站圖片頁面顯示： 1.2.1 需求：在一個頁面中往往圖文並茂.想在HTML中引入一個圖片如何處理? 效果如下: ![](http://i2.51cto.com/images/blog/201803/28/f8f28d00229cefe51fd4fa214c60888a.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 1.2.2 分析: 1.2.2.1 技術分析: 【HTML的圖片標簽】圖片標簽: 技術分享圖片

* 屬性: * src :圖片的來源. * width :圖片的寬度. * height:圖片的高度. * alt :圖片找不到顯示的內容. 圖片的引入的路徑問題: * 路徑：相對路徑. * 如果引入的圖片和html文件在同一級路徑。 * 直接寫文件名或者./文件名技術分享圖片

* 如果引入的圖片在html文件的上一級路徑。 * 技術分享圖片

* 如果引入的圖片在html文件的下一級路徑。 * 技術分享圖片

1.2.2.2 步驟分析: 【步驟一】創建一個html的文檔【步驟二】引入兩張圖片顯示到頁面 1.2.3 代碼實現： ``` 技術分享圖片

``` 1.3 案例三：網站列表頁面的顯示 1.3.1 需求：在網站的友情鏈接頁面顯示網站的所有的友情鏈接. ![](http://i2.51cto.com/images/blog/201803/28/2eb2400dc9e71e7b08f2ebfc6a286c97.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 1.3.2 分析： 1.3.2.1 技術分析：【HTML的列表標簽】 l 有序列表

l 無序列表

【HTML的超鏈接標簽】 HTML的超鏈接標簽： * 屬性: * href :鏈接的路徑 * target :打開的方式 * _self :在自身頁面打開 * _blank :新打開一個窗口 1.3.2.2 步驟分析：【步驟一】創建一個html的文檔【步驟二】創建一個無序列表【步驟三】在無序列表中添加超鏈接標簽. 1.3.3 代碼實現： ```

傳智播客
百度
網易
百合

``` 1.3.4 總結：無序列表的屬性: * type屬性 * disc ：實心點. * circle ：空心圓 * square ：方塊. 有序列表的屬性: * type屬性: * 1 ：數字類型 * a ：英文類型 * i ：羅馬字符 * start屬性:從哪開始超鏈接的target屬性: * _self * _blank * _parent 1.4 案例四：網站的首頁的顯示： 1.4.1 需求：網站的首頁的設計： file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps5794.tmp.jpg 1.4.2 分析： 1.4.2.1 技術分析：【HTML的表格標簽】

屬性: width :表格寬度 height :表格高度 border :邊框 align :表格水平位置: * left * center * right 的屬性: * colspan=”列數” * rowspan=”行數” 1.4.2.2 步驟分析：【步驟一】創建一個html的頁面【步驟二】創建一個8行1列的表格【步驟三】為每行內容填充數據. 1.4.3 代碼實現: 1.5 案例五：網站的註冊頁面的顯示： 1.5.1 需求：使用HTML完成註冊頁面的設計： 1.5.2 分析： 1.5.2.1 技術分析【HTML的表單標簽（*****）】 HTML的表單標簽：

* 常用屬性: * action屬性:提交的路徑.默認提交到當前頁面 * method屬性:請求的方式.GET和POST.默認是GET. ***** GET方式和POST方式的區別? * GET :數據會顯示到地址欄中.GET方式提交是有大小的限制. * POST :數據不會顯示到地址欄中.POST方式提交的是沒有大小限制. HTML中表單元素： * :文本框. * 常用屬性: * name :表單元素的名稱.必須有name屬性，然後後臺才可以接收數據. * value :文本框的默認值. * size :文本框的長度. * maxlength:文本框輸入的最大長度. * readonly:只讀文本框. * :密碼框. * 常用屬性: * name :表單元素的名稱.必須有name屬性，然後後臺才可以接收數據. * value :密碼框的默認值. * size :密碼框的長度. * maxlength:密碼框輸入的最大長度. * :單選按鈕. * 常用的屬性: * name :表單元素的名稱.必須有name屬性，然後後臺才可以接收數據. * value :單選按鈕的默認值. * checked:單選按鈕默認被選中. * :復選按鈕. * 常用的屬性: * name :表單元素的名稱.必須有name屬性，然後後臺才可以接收數據. * value :單選按鈕的默認值. * checked:單選按鈕默認被選中. * :普通按鈕.沒有任何功能的按鈕. * :提交按鈕. * :重置按鈕. * :文件上傳的表單項. * :隱藏字段. * :圖片按鈕 *

:文本域.
1.5.2.2 步驟分析：
【步驟一】創建一個html的文檔
【步驟二】使用表格布局頁面
【步驟三】在頁面中使用表單標簽完成註冊頁面
1.5.3 代碼實現
```
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <table border="1" width="90%" align="center">
                        <tr>
                                <td>
                                
                                        <table width="100%" border="1">
                                                <tr>
                                                        <td>
                                                                <img alt="技術分享圖片" src="img/logo2.png" />
                                                        </td>
                                                        <td>
                                                                <img alt="技術分享圖片" src="img/header.png" />
                                                        </td>
                                                        <td>
                                                                登錄
                                                                註冊
                                                                購物車
                                                        </td>
                                                </tr>
                                        </table>      
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <table width="100%" border="1" bgcolor="black" height="100%">
                                                <tr>
                                                        <td>
                                                                首頁 
                                                                手機數碼  
                                                                電腦辦公  
                                                                煙酒糖茶  
                                                                鞋靴箱包  
                                                        </td>
                                                </tr>
                                        </table>
                                </td>
                        </tr>
                        <tr height="400" background="img/regist_bg.jpg">
                                <td>
                                <form action="../案例四：網站的首頁的顯示/案例四：網站首頁.html" method="post">
                                        <table border="5" width="60%" align="center" bgcolor="white">
                                                <tr>
                                                        <td>
                                                                用戶名
                                                        </td>
                                                        <td>
                                                                <input type="text" name="username" value="" size="20" maxlength="6" >
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                密碼
                                                        </td>
                                                        <td>
                                                                <input type="password" name="password"/>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                確認密碼
                                                        </td>
                                                        <td>
                                                                <input type="password" name="repassword"/>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                郵箱
                                                        </td>
                                                        <td>
                                                                <input type="text" name="email"/>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                姓名
                                                        </td>
                                                        <td>
                                                                <input type="text" name="name"/>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                性別
                                                        </td>
                                                        <td>
                                                                <input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                愛好
                                                        </td>
                                                        <td>
                                                                <input type="checkbox" name="hobby" value="籃球" checked>籃球
                                                                <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="province">
                                                                        <option>--請選擇--</option>
                                                                        <option value="北京" selected>北京</option>
                                                                        <option value="上海">上海</option>
                                                                        <option value="廣州">廣州</option>
                                                                </select>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                頭像
                                                        </td>
                                                        <td>
                                                                <input type="file" name="upload">
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td>
                                                                簡介
                                                        </td>
                                                        <td>
                                                                <textarea cols="20" rows="4" name="info">我是：

生日

關於我們聯系我們招賢納士法律聲明友情鏈接支付方式配送方式服務聲明廣告聲明
Copyright ? 2005-2016 傳智商城版權所有 ``` 1.5.4 總結： 1.5.4.1 HTML5擴展的表單標簽.(*****h5不是所有瀏覽器都支持) 1.6 案例六：網站的後臺頁面的顯示： 1.6.1 需求：一個網站需要有後臺頁面,後臺頁面設計： file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps57A6.tmp.jpg 1.6.2 分析： 1.6.2.1 技術分析：【HTML的框架標簽】框架標簽:,標簽與body標簽是沖突,有frameset就可以沒有body. * 屬性: * rows * cols 使用標簽，frame代表切分的每個部分. 1.6.2.2 步驟分析: 【步驟一】創建一個html的頁面【步驟二】將整個頁面分成上下兩個部分. 【步驟三】將頁面的下半部分分成左右兩個部分. 【步驟四】在左側頁面中添加一些鏈接. 【步驟五】點擊左側鏈接,將頁面的內容顯示到右側. 1.6.3 代碼實現： ``` [/align] ``` 1.6.4 總結： 1.6.4.1 特殊字符的標簽：空格 : < :< > :>

第1章 WEB01-HTML篇

web之html今日任務? 網站信息頁面案例? 網站圖片信息頁面案例? 網站友情鏈接頁面案例? 網站首頁案例? 網站註冊頁面案例? 網站後臺頁面案例教學導航教學目標了解什麽是標記語言了解HTML主要特性,主要變化及發展趨勢了解HTML的結構標簽掌握HTML的主要標簽(字體,圖片,列表,鏈接,表單等標簽)教學方

第1章 WEB01-HTML篇

一級標題

二級標題

三級標題

公司簡介

第1章 WEB01-HTML篇

Java應用基礎微專業-入門篇-第1章用程序來做計算

第1章 HTML基礎

《嵌入式-STM32開發指南》第二部分基礎篇 -第1章 GPIO

轉載----編寫高質量代碼:改善Java程序的151個建議(第1章:JAVA開發中通用的方法和準則___建議1~5)

第1章第2講常見編譯錯誤與調試

《跟菜鳥學Cisco UC部署實戰》-第 1 章規劃(免費視頻)

第1章第2節練習題3 刪除最小值結點

【HTTP權威指南】第1 章　HTTP 概述

第1章數據結構緒論

accp8.0轉換教材第1章多線程理解與練習

第1章第2節練習題2 非遞歸刪除指定結點

R in action -- 第1章

第1章python基礎

第1章第1節練習題10 查找中位數

XSS的原理分析與解剖：第三章（技巧篇）未看***

Java開發工程師(Web方向) - 03.數據庫開發 - 第1章.JDBC

《Java從小白到大牛精簡版》——第1章開篇綜述

130292015014 周雨佳第1章作業

130292015053+李徐恬+第1章作業

第1章 WEB01-HTML篇

一級標題

二級標題

三級標題

公司簡介

相關推薦