2. 程式人生 > >楊老師課堂之網頁製作HTML的學習入門-含有案例

楊老師課堂之網頁製作HTML的學習入門-含有案例

阿新 • • 發佈：2018-11-08

網頁製作入門 - Html的學習

本篇所授任務

  • 網站資訊頁面案例
  • 網站圖片資訊頁面案例
  • 網站友情連結頁面案例
  • 網站首頁案例
  • 網站註冊頁面案例
  • 網站後臺頁面案例

教學導航

教學目標 瞭解什麼是標記語言
教學目標 瞭解HTML主要特性,主要變化及發展趨勢
教學目標 瞭解HTML的結構標籤
教學目標 掌握HTML的主要標籤(字型,圖片,列表,連結,表單等標籤
教學方法 案例驅動法

1.1 網站資訊頁面顯示案例：

1.1.1 需求分析：

在網頁中顯示一個文字資訊頁面，顯示效果如下：
這裡寫圖片描述

1.1.2 分析：

1.1.2.1 技術分析

【HTML的概述】

  • 什麼是HTML

HTML：Hyper Text Markup Language 超文字標記語言

l 超文字：比文字功能更加強大

l 標記語言：通過一組標籤對內容進行描述的一門語言

  • 為什麼學習HTML

HTML是設計頁面基礎，是一個網頁最起碼的骨架內容

  • 在哪些地方可以使用HTML

設計頁面的時候都可以使用HTML，可以是網站，可以是淘寶店鋪的裝修…

  • 如何使用HTML

HTML的語法和規範

l HTML檔案的副檔名是.html或者是.htm

l HTML檔案是由頭和體組成

l HTML這組標籤是不區分大小寫

l HTML的標記通常是由開始標籤和結束標籤組成：<b>內容</b> <br/>

【HTML的字型標籤】

<font>標籤

<font 屬性名=”屬性值”>文字</font>

l size:控制字型大小.最小1 最大7

l color：控制字型顏色. 使用英文設定 ，使用16進位制數設定

l face：控制字型.

【HTML的排版標籤】

<hn>標題標籤

<h1>b標題</h1>

<p>段落標籤

<p>一段文字</p>

<br/>換行標籤

<br/>代表換行

<hr/>水平線標籤

<hr/>水平線標籤

<b>字型加粗

<b>文字</b>

<i>斜體標籤

<i>斜體</i>

1.1.2.2 步驟分析

  • 步驟一：建立一個html檔案
  • 步驟二：建立標題標籤
  • 步驟三：標題下面會有一個水平線
  • 步驟四：建立段落標籤建立四個段落
  • 步驟五：將某些文字設定為紅色

1.1.3 程式碼實現

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="utf-8">

                   <title>頁面標題</title>

         </head>

         <body>

                   <!-- 建立標題標籤 -->

                   <h2>公司簡介</h2>

                   <!--

                 作者：Mr.yang

                 時間：2018-09-01

                 描述：水平線

        -->

        <hr />

        <!--

                 作者：Mr.yang

                 時間：2018-09-01

                 描述：建立段落標籤

        -->

                   <p>

                            <font color="#FF0000"><b>“楊老師課堂”</b></font>是由Java講師<b>楊校</b>個人進行開設的公開性學習平臺、並且在CSDN的部落格進行了發表每個技術的基礎知識點，並且在CSDN及網易雲上進行了諸多實戰技術的視訊講解，致力於輔助更多年輕人學習，更快的適應企業級大開發。極大的方面解決了企業招不到優秀人才的困擾。

                   </p>



                   <p>

                            楊老師課堂的讀者多為線上大學生，一群有理想、有夢想，想從事IT行業，而因為外在環境和個人機遇問題無法改變自己命運的年輕人。

                            在楊老師的部落格中經常會有自己對該行業的個人見解和對未來發展趨勢的預想，可以讓更多的年輕人有所瞭解，更快的確立的職業生涯發展目標。

                            而且楊老師還會發表一些在面試前夕的話術剖析。

                   </p>



                   <p>

                            銘揚教育-楊老師課堂不僅著重培養學生的基礎理論知識，更注重培養專案實施管理能力，並密切關注技術革新，不斷引入先進的技術，研發更新技術課程，確保更多的學生進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。

                   </p>



                   <p>

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

                   </p>

         </body>



</html>

1.2 網站的圖片頁面顯示

1.2.1 需求分析：

在網頁中顯示帶有圖片的頁面效果如下：
這裡寫圖片描述

1.2.2 分析：

以上圖片為兩個圖片顯示，只不過是處於一行中

1.2.2.1 技術分析：

【HTML的圖片標記】

<img />

其中的可以選擇的屬性有

l— src：圖片的路徑

l— width：圖片寬度

l— height：圖片的高度

l— alt：圖片提示

圖片路徑：

l— 分成相對路徑和絕對路徑

l— 相對路徑:

|— ./ :代表當前路徑

|— ../ :代表上一級路徑

1.2.2.2 步驟分析：

  • 建立一個img標籤引入logo圖片
  • 建立一個img標籤引入header圖片

1.2.3 程式碼實現

<html>

    <head>

        <meta charset="utf-8">

        <title>網站圖片頁面</title>

    </head>

    <body>
       <img src="img/logo.png"/><img src="img/header.png" />
    </body>

</html>

1.3 網站的列表顯示頁面

1.3.1 需求分析：

在頁面中列表顯示友情連結：

1.3.2 分析：

1.3.2.1 技術分析

【HTML的列表標籤】

無序列表

    <ul>

        <li>內容1</li>

<li>內容2</li>

    </ul>

有序列表

    <ol>

        <li>內容1</li>

<li>內容2</li>

    </ol>

1.3.2.2 步驟實現

  • 建立一個無序列表顯示友情連結
  • 但是並沒有實現點選後有連線跳轉到的效果(原因是缺少a標籤)

1.3.3 程式碼實現

    ```
  • 百度
  • 安博
  • 百合網
  • 世紀佳緣
    ```

1.3.4 總結：

【超連結標籤】

<a>超連結</a>

其中可以選擇的屬性有：

l href：超連結跳轉的路徑

l target：開啟方式

n _self：在自身頁面開啟

n _blank：開啟一個新視窗

1.4 網站的首頁顯示

1.4.1 需求分析：

在瀏覽器中顯示網站的首頁效果如下：

這裡寫圖片描述

1.4.2 分析：

準備圖片素材

連結：https://pan.baidu.com/s/1kvNpaoVvoOSNYlFpcT7EOA 密碼：jfbj

1.4.2.1 技術分析

【HTML的表格標籤】

表格標籤：

    <table>

        <tr>

             <td></td>

            <td></td>

        </tr>

        <tr>

             <td></td>

            <td></td>

        </tr>

    </table>

表格的屬性：

l border ：表格邊框

l width ：表格寬度

l height ：表格高度

l align ：水平方向對齊方式 left center right

l bgcolor ：背景色

1.4.2.2 步驟分析：

  • 步驟一：建立8行表格
  • 步驟二：實現第一行，巢狀一個一行三列表格。
  • 步驟三：實現第二行，實現導航，設定背景色。
  • 步驟四：放置一張圖片
  • 步驟五：顯示熱門商品，建立一個三行七列的表格。對錶格進行跨行，跨列的操作。
  • 步驟六：引入一張廣告圖片。
  • 步驟七：顯示最新商品，建立一個三行七列的表格。對錶格進行跨行，跨列的操作。
  • 步驟八：廣告資訊
  • 步驟九：連結版權資訊。

1.4.3 程式碼實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網站首頁</title>
    </head>
    <body>
        <table width="1400" border="0" align="center">
            <tr>
                <td>
                    <!-- LOGO部分 -->
                    <table width="100%">
                        <tr height="40">
                            <td>
                                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
                                <img src="img/logo.png"/>
                            </td>
                            <td>
                                <img src="img/header.png"/>
                            </td>
                            <td>
                                <a href="#">登入</a>
                                <a href="#">註冊</a>
                                <a href="#">購物車</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
                    <!--導航部分-->
            <tr height="30" bgcolor="#75AA24">
                <td>
                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
                    <a href="#"><font color="white">首頁</font></a>
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;  
                    <a href="#"><font color="white">精品女裝</font></a>&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; 
                    <a href="#"><font color="white">酷帥男裝</font></a>&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;       
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; 
                    <a href="#"><font color="white">時尚鞋靴</font></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; 
                    <a href="#"><font color="white">真皮箱包</font></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

                </td>
            </tr>
            <!--輪播圖-->
            <tr>
                <td>
                    <img src="products/1/banner1.jpg" width="100%"/>
                </td>
            </tr>


            <!--最新商品  展示模組-->
            <tr>
                <td>
                    <table width="100%" border="0">
                        <tr>
                            <td colspan="7"><font size="5"><b>最新商品</b></font>&nbsp;&nbsp;&nbsp;<img src="img/title2.jpg"></td>
                        </tr>
                        <tr>
                            <td rowspan="2"  width="200" height="500">
                                <img src="products/hao/big02.jpg" width="100%" height="100%"/>
                            </td>
                            <td colspan="3" width="600" height="250">
                                <img src="products/hao/middle02.jpg" width="100%" height="250"/>
                            </td>

                            <td width="200" align="center">
                                <img src="products/1/cs20001.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td width="200"  align="center">
                                <img src="products/1/cs20002.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td width="200"  align="center">
                                <img src="products/1/cs20003.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                        </tr>
                        <tr>

                            <td  align="center">
                                <img src="products/1/cs20004.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td  align="center">
                                <img src="products/1/cs20005.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td  align="center">
                            <img src="products/1/cs20006.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td align="center">
                                <img src="products/1/cs20007.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td align="center">
                                <img src="products/1/cs20008.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td align="center">
                                <img src="products/1/cs20009.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
                <!--廣告-->
            <tr>
                <td>
                    <a href="#"><img src="products/hao/ad.jpg" width="100%"></a>
                </td>
            </tr>
                <!--掌櫃推薦  展示模組-->
            <tr>
                <td>
                    <table width="100%" border="0">
                        <tr>
                            <td colspan="7"><font size="5"><b>掌櫃推薦</b></font>&nbsp;&nbsp;&nbsp;<img src="img/title2.jpg"></td>
                        </tr>
                        <tr>
                            <td rowspan="2"  width="200" height="500">
                                <img src="products/hao/big02.jpg" width="100%" height="100%"/>
                            </td>
                            <td colspan="3" width="600" height="250">
                                <img src="products/hao/middle02.jpg" width="100%" height="250"/>
                            </td>

                            <td width="200" align="center">
                                <img src="products/1/cs10007.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td width="200"  align="center">
                                <img src="products/1/cs10008.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td width="200"  align="center">
                                <img src="products/1/cs10009.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                        </tr>
                        <tr>

                            <td  align="center">
                                    <img src="products/1/cs10001.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td  align="center">
                                <img src="products/1/cs10002.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td  align="center">
                                    <img src="products/1/cs10003.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td align="center">
                                    <img src="products/1/cs10004.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td align="center">
                                    <img src="products/1/cs10005.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">上衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                            <td align="center">
                                <img src="products/1/cs10006.jpg" width="130px" height="130px" /><br/>
                                <p><font color="gray">大衣</font></p>
                                <p><font color="red">$499</font></p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!--尾部圖片展示-->
            <tr>
                <td>
                    <img src="img/footer.jpg" width="100%"/>
                </td>
            </tr>
            <!--網頁連線-->
            <tr>
                <td align="center">
                    &nbsp;&nbsp;&nbsp;
                    <a href="">關於我們</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="">聯絡我們</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="">招賢納士</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="">法律宣告</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="">友情連結</a>
                    &nbsp;&nbsp;&nbsp;
                    &l

相關推薦

楊老師課堂之網頁製作HTML的學習入門-含有案例

網頁製作入門 - Html的學習 本篇所授任務 網站資訊頁面案例 網站圖片資訊頁面案例 網站友情連結頁面案例 網站首頁案例 網站註冊頁面案例 網站後臺頁面案例 教學導航 教學目標 瞭解什麼

楊老師課堂之JavaEE三大框架Hibernate入門第一課

對象關系映射 字段名 過程 回滾 了解 property 測試 存在 .org 本篇任務 1. 使用Hibernate框架完成對客戶的增刪改查的操作 教學導航 1. 能夠說出Hibernate的執行流程 2. 能夠獨立使用Hibernate框架完成增刪改查的操作 框架和

楊老師課堂之零基礎學習JSON知識點

JSON json是什麼 它是js提供的一種資料交換格式！ json的語法 {}：是物件！ > 屬性值： > 屬性名必須使用雙引號括起來！單引不行！！！ null

楊老師課堂之JavaScript懸浮事件（滑鼠移入移出事件）

 今天給大家分享一個簡單的JavaScript事件案例： 該事件屬於懸浮事件 改程式碼邏輯非常簡單，主要是 當滑鼠移動到按鈕上顯示一個盒子，移開之後盒子隱藏 JavaScript事件中     onmouseover 代表的是滑鼠指標移動到指定的物件

楊老師課堂之Jquery的篩選,事件,效果,Ajax,javascript跨域)

1 篩選[掌握]  篩選與之前“選擇器”雷同，篩選提供函式 1.1 過濾 eq(index|-index)，獲取第N個元素 •index：一個整數，指示元素基於0的位置,這個元素的位置是從0算起。 •-index：一個整數，指示元素的位置，從集合中的最後一個元素開

楊老師課堂之springAOP事務控制原始碼解析

spring AOP基於動態代理實現，想看懂原始碼必須瞭解動態代理和位元組碼增強方面的知識。 基於對spring各種配置的瞭解，首先我們先從DataSourse由誰來管理入手。瞭解AOP。 一般來講首先會配置一個datasource，至於你配置什麼連線池還是用JNDI這

楊老師課堂之JavaWeb體系的MVC與三層架構有什麼區別

首先，宣告一下，三層是三層，MVC是MVC，這倆是毫無關係的。 三層是從整個應用程式架構的角度來分的三層（如果程式需要，還可以分多層）。 三層架構通常包括表示層，業務邏輯層以及資料訪問層。雖然三層架構將系統在邏輯上分成了三層，但是它並不是物理上的分層。也就是

Vue進階課堂之《從HTML到Pug》

自己 pla 有時 文章 emp .com 比較 eid model 是啥 Pug聽起來或許比較陌生，但是如果說起她的前生，相信各位多少會有耳聞：Jade。 每當你不聽的敲打<><><><></></>

HTML網頁製作之DL、DD、DT標籤替代UL、LI

dl ——define list——定義列表。 dt ——define list title——用於生成定義列表中各列表項的標題，重複使用可以定義多個列表項的標題。 dd——define list define——用於生成定義列表各列表項的說明文欄位，重複使用可以定義多個說

html學習之——標簽語義化

使用 標題 網站 省略符 顯示 del class itl tle html語義化在前端學習中會經常出現，下面對html語義化做個總結 一、什麽是HTML語義化 HTML語義化總的來說就是用正確的標簽做正確的事。圍繞著一些標簽展開，如h1-h6。把適當的標簽用在合適的地方

小米商城網頁製作大全之搜尋引擎(input,Font Awesome)

導讀： 原來的自己大多時候是通過視訊和書本資料自學，很少有動手實踐，也就會有眼高手低的毛病，每次做一個小功能來練手的時候都會遇到各式各樣的問題，也正是在想方設法解決這些問題的過程中收穫是最大的，不僅是解決問題的能力，更重要的是學習這些的興趣會更濃，堅持下去的動力更足。 小米網頁的搜尋框是

Html學習之路（一）

基礎標籤 <!DOCTYPE> 定義文件型別。 <html>定義一個 HTML 文件 <title>為文件定義一個標題 <body>定義文件的主體 <h1> to <h6>定義 HTML 標題 <p> 定

HTML學習之樣式(style)

HTML 的 style 屬性 style 屬性的作用： 提供了一種改變所有 HTML 元素的樣式的通用方法。 樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式新增到 HTML 元素，或者間接地

HTML學習2之樣式

文章目錄 樣式 樣式 在HTML裡，使用style 屬性改變 HTML 元素的樣式。 background-color屬性：定義元素的背景顏色。用法： <開始標籤 style="background-color:顏色英文名">元

HTML學習1之簡介、結構、標記、要求等

HTML學習1 什麼是 HTML？ HTML 標籤 整體結構 開始標記和結尾標記 頭部內容 主體內容 標記 型別描述 基本框架結構 內容描述 格式標誌標籤 網頁表格

製作一張簡單的網頁（HTML+CSS+JS) 【2】

在上一篇文章中，我總結了一下HTML，這一篇我把CSS簡單做一下歸納，使網頁變得富有美感。 一.CSS樣式的基本知識 1.關於註釋：/*註釋內容*/2.最常見的css樣式格式——嵌入式    例如對span裡的內容的字改為藍色：<style type=text/css

製作一張簡單的網頁（HTML+CSS+JS) 【3】

<html> <head> <style type="text/css"> div { font-weight:bold; font-family: M

製作一張簡單的網頁（HTML+CSS+JS）【1】

<img src="圖片的地址” alt="圖片下載失敗後顯示的內容" title="滑鼠滑過該圖片是顯示的提示文字"> 三.認識表單 在實際生活中，我們常常會看到一個頁面讓使用者填寫並提交，同樣，我把一些常用的表單標籤列出來。 1.所有我們要寫的單選框、複選框、文字域等等，全部要寫在&l

html-css練習題（天天生鮮靜態網頁製作）

先來看一下效果圖： 主要要求： 注：最下面有素材連結地址可以自己練習使用 /* 1.login最外側盒子設定高29 背景顏色#f7f7f7 下邊框1 */ /* 1.1 login內容部分

Django製作HTML網頁並載入樣式

1、Django製作HTML網頁 新建.html檔案存放目錄，建立顯示的.html頁面 2、建立CSS檔案和Img存放目錄 span{ color:red; } 3、HTML網頁中引用CSS和Img 1）settings.py中