整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網頁設計HTML零基礎入門

          、Html概述

          Html是Hyper Text Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標簽,是一種用來制作網頁的語言,這種語言由一個個的標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm,一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容文件渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另一個網頁。
          

          二、Html標簽語法

          Html中標簽分為 :成對標簽和自閉合標簽【空標簽】

          1、成對標簽

          成對出現,有開始標簽必須有結束標簽,內容包裹在兩個標簽中,而且開始標簽名和結束標簽名一致,并且結束標簽必須以斜杠/開頭

          語法:

          <font>內容</font>
          

          2、自閉合標簽

          只有一個標簽,用斜杠結束,斜杠也可以省略

          語法:

          <br/>
          

          注意事項:

          • 成對標簽中,結束標簽必須以斜杠開頭
          • 成對標簽與成對標簽可以嵌套不能交叉
          • 標簽名不區分大小寫,但是我們都必須小寫

          三、Html基本架構

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title></title>
          </head>
          <body>
              
          </body>
          </html>
          

          1、!DOCTYPE

          !DOCTYPE html是文檔聲明,定義文檔類型為html,并且告訴不同的瀏覽器用標準方式進行解析html語言,如果不寫的話,會產生怪異模式,所謂怪異模式,就是瀏覽器會用自己的方式進行解析,不同的瀏覽器有各自的解析方式,從而會出現無效果、不兼容等問題。

          注意,html中有兩種聲明類型,一種叫做xhtml,即html,另一種叫做html5,html5是xhtml的升級版,所以我們建議使用html5的聲明方式

          xhtml聲明方式:

          <htmlxmlns="http://www.w3.org/1999/xhtml">

          html5聲明方式:

          <!DOCTYPE html>

          2、html

          html是html文檔的整體,也就是表示一個網頁。

          html中的lang="en"是定義該文件語言是英文

          3、head

          head是html的第一層子元素【子標簽】,負責對網頁進行一些設置以及定義標題,設置包括定義網頁的編碼格式,外鏈css樣式文件和JavaScript文件等。設置的內容不會顯示在網頁上,標題的內容會顯示在標題欄中。即title標簽。

          4、meta

          meta是html語言head標簽中的一個輔助性標簽,該標簽不包含任何內容,但是該標簽的屬性定義了與文檔相關聯的名稱,比如:編碼

          <meta charset="utf-8"></meta>
          

          5、body

          body也是html的第一層子元素,我們頁面中顯示的所有內容全部都是編寫在該標簽體中。

          四、Html文檔規范

          html制定了文檔的編寫規范,必須遵守。

          所有的標簽必須小寫

          所有的屬性必須用雙引號括起來

          五、Html注釋

          html文檔代碼中可以插入注釋,注釋是對代碼的說明和解釋,注釋的內容不會顯示在頁面上。

          注釋的語法:

          <!-- 注釋的內容 -->

          六、html基本屬性

          注:屬性是標簽的輔助作用。

          屬性 描述 bgcolor 設置網頁的背景顏色 background 設置網頁的背景圖片

          1.bgcolor

          設置網頁的背景顏色

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title>html的屬性</title>
          </head>
          <body bacolor="pink">
              
          </body>
          </html>
          

          2.路徑

          我們在開發網頁時,需要經常的插入圖片、視頻、文件等一些操作,但是我們需要指定文件所在的位置,這個位置就是所謂的路徑

          路徑分為:

          1. 相對路徑 指目標相對于當前文件的路徑,網頁結構設計中多采用這種方式來表示目標的路徑。相對路徑有多種表示方法,其表示的意義不盡相同。表示方法如下: ./ :代表文件所在的目錄(可以省略不寫)../ :代表文件所在的父級目錄../../ :代表文件所在的父級目錄的父級目錄/ :代表文件所在的根目錄【/ : 可以理解為目標文件的絕對路徑】
          2. 絕對路徑 指目標文件的完整路徑,從盤符開始。

          3.background

          設置網頁的背景圖片

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title>html的屬性</title>
          </head>
          <body background="../images/10.jpg">
              
          </body>
          </html>
          

          注意事項:

          bgcolor和background不能同時使用

          background不能指定絕對路徑

          七、Html標簽

          1.網頁的組成

          網頁的組成:文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

          2、文本段落標簽

          標簽 描述 hn 設置文字標題【n:取值范圍 1~6】 center 居中對齊 hr 水平線 屬性(width:寬度 color:顏色 size:粗細) br 換行 p 段落

          3、文本控制標簽

          標簽 描述 font 設置字體,需要借助屬性設置

          屬性 描述 color 設置字體顏色 size 設置字體大小,不需要帶單位,取值范圍:1~7【瀏覽器默認值:3】 face 設置字體風格

          <font size="2" color="red" face="黑體"></font>
          

          4、文本格式化標簽

          標簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號字 strong 定義加重語氣 sub 定義下標字 sup 定義上標字 ins 定義插入字 del 定義刪除字

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html文本格式化標簽</title>
          </head>
          <body>
          
              <b>粗體文本</b>
              <i>傾斜文本</i>
              <em>著重文本</em>
              <small>小號字</small>
              <strong>加重語氣</strong>
              <sub>上標</sub>
              <sup>下標</sup>
              <ins>插入字</ins>
              <del>刪除字</del>
              
          </body>
          </html>
          

          5、圖片標簽

          在Html中,圖像由

          標簽定義。

          是空標簽,意思是說,它只包含屬性。

          要在頁面上顯示圖像,你需要使用源屬性(src)。src指"source"。源屬性的值是圖像的URL地址。

          標簽 描述 img 圖片標簽

          屬性 描述 src 指定圖片的地址 width 設置圖片的寬度 height 設置圖片的高度 alt 設置圖片的預備文本

          注意事項:不建議設置圖片大小,容易失真

          6、audio

          在Html中,聲音由標簽定義。

          標簽 描述 audio 聲音標簽

          屬性 描述 src 指定聲音地址

          <audio src="nice.mp3">對不起,您的瀏覽器不支持</audio>
          

          7、video

          在Html中,視頻由video標簽定義

          標簽 描述 video 視頻標簽

          屬性 描述 src 指定視頻地址

          <video src="美女.mp4">對不起,您的瀏覽器不支持</video>
          

          8、超鏈接

          a標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。

          a標簽最重要的屬性是href,它指定鏈接的目標。

          在所有瀏覽器中,鏈接的默認外觀如下:

          未被訪問的鏈接帶有下劃線而且是藍色的

          已被訪問的鏈接帶有下劃線而且是紫色的

          活動鏈接帶有下劃線而且是紅色的

          語法:

          <a href="鏈接目標">點擊內容</a>
          

          屬性 描述 href 指定鏈接目標 name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉方式 屬性值 描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認,在當前窗口打開【了解】 _top 在當前窗體打開鏈接,并替換當前的整個窗體【了解】 framename 到 iframe 在講【常用】

          超鏈接分類:

          • 內部鏈接 鏈接目標:本地頁面 <a href="demo.html">點擊內容</a>
          • 外部鏈接 鏈接目標:外部頁面 <a href="http://www.baidu.com">點擊內容</a>
          • 多媒體鏈接 鏈接目標:圖片、視頻等 <a href="images/美女.jpg">點擊內容</a>
          • 電子郵件鏈接 鏈接目標:電子郵件【系統自帶的電子郵件】 <a href="mailto:12345@qq.com">點擊內容</a>
          • 錨鏈接 鏈接目標:錨點 1.建立錨點
            <
            a name="錨點名"></a>

            2.跳轉
            <a href="#錨點名">點擊內容</a>

          9、列表

          列表的使用與word等軟件的列表概念相似,只不過是應用在網頁展示中。

          1.有序列表

          有序列表是指有數字編號或字母的列表項,可以使用css定義更多樣式。

          <!-- 有序列表 -->
              <ol type="a">
                  <li>新聞一</li>
                  <li>新聞二</li>
                  <li>新聞三</li>
              </ol>
          

          屬性 描述 type 設置符號類型 值:1 a A I i 默認數字 start 從第幾個開始【用于ol標簽中】 value 從第幾個開始【用于li標簽中】

          <!-- 有序列表 -->
              <ol type="a" start="4">
                  <li>新聞一</li>
                  <li type="1" value="1">新聞二</li>
                  <li>新聞三</li>
              </ol>
          

          2、無序列表

          無序列表是指沒有數字編號或字母的列表項,可以使用css定義更多樣式。

          <!-- 無序列表 -->
          <ul>
              <li>童裝</li>
              <li>男裝</li>
              <li>女裝</li>
          </ul>
          

          屬性 描述 type 用于設置符號類型,默認:實心圓 值:空心圓、正方形 【用于ul、li】

          <!-- 無序列表 -->
          <ul type="square">
                  <li>童裝</li>
                  <li type="circle">男裝</li>
                  <li>女裝</li>
              </ul>
          

          3、描述列表

          描述列表指每個列表項有單獨的標題。

          <!-- 描述列表 -->
              <dl>
                  <dt>開源產品</dt>
                  <dd>Java封裝庫</dd>
                  <dd>Web組件庫</dd>
                  
                  <dt>網站導航</dt>
                  <dd>mrliujava.com</dd>
                  <dd>mrliuweb.com</dd>
              </dl>
          

          10、表格

          表格在網頁開發中使用頻率非常高,尤其是數據展示的時候。

          10.1 基本使用

          標簽 描述 table 代表表格標簽 caption 表格標題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

          屬性 描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設置背景顏色 background 設置背景圖片 align 對齊方式

          <!-- 表格 -->
              <table border="1" cellspacing="0" width="600px" height="200px">
                  <caption>員工薪資統計表</caption>
                  <thead>
                      <tr>
                          <th>序號</th>
                          <th>姓名</th>
                          <th>性別</th>
                          <th>職位</th>
                          <th>薪資</th>
                      </tr>
                  </thead>
          
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>狗蛋</td>
                          <td>男</td>
                          <td>JavaEe工程師</td>
                          <td>8780</td>
                      </tr>
          
                      <tr>
                          <td>2</td>
                          <td>黑妞</td>
                          <td>女</td>
                          <td>Web前端工程師</td>
                          <td>9750</td>
                      </tr>
          
                      <tr>
                          <td>3</td>
                          <td>傻蛋</td>
                          <td>妖</td>
                          <td>測試工程師</td>
                          <td>996</td>
                      </tr>
                  </tbody>
          
                  <tfoot>
                      <tr>
                          <td>當前頁:1 頁</td>
                          <td>上一頁</td>
                          <td>下一頁</td>
                          <td>尾頁</td>
                          <td>共 3 頁</td>
                      </tr>
                  </tfoot>
              </table>
          

          10.2 單元格合并

          屬性 說明 rowspan 行合并 colspan 列合并

          下面是行合并:

          <!-- 表格 -->
              <table border="1" cellspacing="0" width="600px" height="200px">
                  <caption>員工薪資統計表</caption>
                  <thead>
                      <tr>
                          <th>序號</th>
                          <th>姓名</th>
                          <th>性別</th>
                          <th>職位</th>
                          <th>薪資</th>
                      </tr>
                  </thead>
          
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>狗蛋</td>
                          <td>男</td>
                          <td rowspan="2">JavaEe工程師</td>
                          <td>8780</td>
                      </tr>
          
                      <tr>
                          <td>2</td>
                          <td>黑妞</td>
                          <td>女</td>
                          <td>9750</td>
                      </tr>
          
                      <tr>
                          <td>3</td>
                          <td>傻蛋</td>
                          <td>妖</td>
                          <td>測試工程師</td>
                          <td>996</td>
                      </tr>
                  </tbody>
          
                  <tfoot>
                      <tr>
                          <td>當前頁:1 頁</td>
                          <td>上一頁</td>
                          <td>下一頁</td>
                          <td>尾頁</td>
                          <td>共 3 頁</td>
                      </tr>
                  </tfoot>
              </table>
          

          下面是列合并:

          <!-- 表格 -->
              <table border="1" cellspacing="0" width="600px" height="200px">
                  <caption>員工薪資統計表</caption>
                  <thead>
                      <tr>
                          <th>序號</th>
                          <th>姓名</th>
                          <th>性別</th>
                          <th>職位</th>
                          <th>薪資</th>
                      </tr>
                  </thead>
          
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>狗蛋</td>
                          <td>男</td>
                          <td>JavaEe工程師</td>
                          <td>8780</td>
                      </tr>
          
                      <tr>
                          <td>2</td>
                          <td>黑妞</td>
                          <td>女</td>
                          <td>Web前端工程師</td>
                          <td>9750</td>
                      </tr>
          
                      <tr>
                          <td>3</td>
                          <td colspan="2">傻蛋</td>
                          <td>測試工程師</td>
                          <td>996</td>
                      </tr>
                  </tbody>
          
                  <tfoot>
                      <tr>
                          <td>當前頁:1 頁</td>
                          <td>上一頁</td>
                          <td>下一頁</td>
                          <td>尾頁</td>
                          <td>共 3 頁</td>
                      </tr>
                  </tfoot>
              </table>
          

          11、表單

          表單是一個包含表單元素的區域。

          表單元素是允許用戶在表單中輸入內容,比如:文本域(textarea)、下拉列表(select)、單選框(radio)、復選框(checkbox)等等。

          11.1 基本使用

          表單需要使用表單標簽來設置:

          <!-- 表單 -->
          <form>
          input元素
          </form>

          11.2 GET&POST

          屬性 說明 action 后臺地址 method 提交方式GET或POST

          GET和POST區別:

          1.GET

          • 數據會顯示在地址欄中,數據不安全
          • 數據大小有限制
          • 數據通過請求頭傳遞

          2.POST

          • 數據不會顯示在地址欄中,數據安全
          • 數據對大小無限制
          • 數據通過實體內容傳遞
          <form action="后端接口" method="POST">
                  <input type="text">
                  <input type="password">
          </form>
          

          11.3 LABEL

          使用label用于描述表單標題,當點擊標題后文本框會獲得焦點,需要保證使用的ID在頁面中是唯一的。

          <form action="后端接口" method="POST">
                  <label for="username">用戶名</label>
                  <input type="text" id="username">
          
                  <label for="password">密碼</label>
                  <input type="password" id="password">
          </form>
          

          也可以將文本框放在label標簽內部,這樣就不需要設置id與for屬性了。

          11.4 INPUT

          文本框用于輸入單行文本使用,下面是常用屬性與示例。

          屬性 說明 type 表單類型,默認為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內容 value 默認指 maxlength 允許最大輸入字符數 size 表單長度,一般用css來控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設置選中類型 比如:.jpg capture 使用麥克風\視頻或攝像頭哪種方式獲取手機上傳文件,支持的值有microphone , video , camera

          11.4.1 基本示例

          <form action="后端接口" method="POST">
                  <label for="username">用戶名</label>
                  <input type="text" name="username" id="username" placeholder="請輸入用戶名" maxlength="5" size="50" required>
          </form>
          

          11.4.2 調用攝像頭

          當input類型為file時手機會讓用戶選擇圖片或者拍照,如果想直接調取攝像頭使用以下代碼.

          <form action="后端接口" method="POST">
                  <label for="file">上傳文件</label>
                  <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
          </form>
          

          11.4.3 其他類型

          通過設置表單的type字段可以指定不同的輸入內容.

          類型 說明 email 輸入內容為郵箱 url 輸入內容為URL地址 password 輸入內容為密碼項 tel 電話號,移動端會調出數字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

          11.4.4 HIDDEN

          隱藏表單用于提交后臺數據,但在前臺內容不顯示所以在其上做用樣式定義也沒有意義.

          <input type="hidden" name="id" value="1">
          

          11.4.5 SUBMIT

          創建提交按鈕可以將表單數據提交到后臺,有多種方式可以提交數據,比如:AJAX,或者Html的表單按鈕.

          a.使用input構建提交按鈕,如果設置了name值,那么按鈕數據也會提交到后臺,如果有多個表單項可以通過這些進行判斷是哪個表單提交的.

          <input type="submit" name="submit" value="提交表單">
          

          b.使用button也可以提交,設置type屬性為submit或不設置都可以提交表單.

          <button type="submit">提交表單</button>
          

          11.4.6 禁用表單

          通過為表單設置disabled或readonly都可以禁止表單,單readonly表單的數據可以提交到后端

          <input type="text" value="數據" readonly>
          

          11.4.7 PATTERN

          表單可以通過設置pattern屬性指定正則驗證.

          屬性 說明 pattern 正則表達式驗證規則 oninvalid 輸入錯誤時觸發的事件

          <form action="">
                  <label for="username">用戶名</label>
                  <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請輸入5~20位字母的用戶名')">
                  <button>提交表單</button>
              </form>
          
              <script>
                  function validate(message){
                      alert(message);
                  }
              </script>
          

          11.4.8 TEXTAREA

          文本域指可以輸入多行文本的表單,當然更復雜的情況可以使用編輯器如ueditor , ckeditor等.

          屬性 說明 cols 列字符數(一般使用css控制更好) rows 行數(一般使用css控制更好)

          <textarea cols="30" rows="3">請踩踩我......</textarea>
          

          11.4.9 SELECT

          下拉列表項可用于多個值中的選擇.

          屬性 說明 multiple 支持多選 size 列表框高度 optgroup 選項組 selected 選中狀態 option 選項值

          <form action="">
                  <select multiple size="10">
                      <option value="">選擇課程</option>
                      <optgroup label="后端">
                          <option value="">JAVA</option>
                          <option value="">PHP</option>
                          <option value="">LINUX</option>
                      </optgroup>
          
                      <optgroup label="前端">
                          <option value="">HTML</option>
                          <option value="">CSS</option>
                          <option value="">JAVASCRIPT</option>
                      </optgroup>
                  </select>
              </form>
          

          11.4.10 RADIO

          單選框指只能選擇一個選項的表單,如性別的選擇:男 , 女 , 保密 只能選擇一個.

          屬性 說明 checked 選中狀態

          <form action="">
                  <input type="radio" name="" id="boy" checked>
                  <label for="boy">男</label>
          
                  <input type="radio" name="" id="girl">
                  <label for="girl">女</label>
              </form>
          

          11.4.11 CHECKBOX

          復選框指允許選擇多個值的表單

          屬性 說明 checked 選中狀態

          <form action="">
                  <input type="checkbox" name="JAVA" id="java">
                  <label for="java">JAVA</label>
          
                  <input type="checkbox" name="WEB" id="web">
                  <label for="web">WEB</label>
              </form>
          

          11.4.12 FILE

          文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認的上傳功能,只是上傳效果并不是很美觀.

          屬性 說明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif

          <form action="" enctype="multipart/form-data">
                  <input type="file">
                  <input type="submit" value="上傳">
              </form>
          

          11.4.13 日期時間

          屬性 說明 min 最小時間 max 最大時間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

          a.日期選擇

          <h1>日期選擇</h1>
              <form action="">
                  <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
              </form>
          

          b.周選擇

          <h1>周選擇</h1>
              <input type="week" name="" id="">
          

          c.月份選擇

          <h1>月選擇</h1>
              <input type="month" name="" id="">
          

          d.日期與時間

          <h1>日期與時間</h1>
              <input type="datetime-local" name="" id="">
          

          11.4.14 DATALIST

          input表單的輸入值選項列表

          <form action="">
                  <label for="username">用戶名</label>
                  <input type="text" name="" id="usernmae" list="less">
                  <datalist id="less">
                      <option value="JAVA">后臺管理語言</option>
                      <option value="CSS">美化網站頁面</option>
                      <option value="MYSQL">掌握數據庫使用</option>
                  </datalist>
              </form>
          

          12、框架集

          frameset元素可定義一個框架集。它被用來組織多個窗口(框架),每個框架存有獨立的文檔,在其最簡單的應用中,frameset元素僅僅會規定在框架集中存在多少列或多少行,您必須使用cols或rows屬性。

          注意事項:由于是分割原網頁,所以我們不能在body中進行編寫,在head中進行分割。

          標簽 說明 frameset 框架集 frame 框架

          屬性 說明 cols 定義框架集中列的數目和尺寸 rows 定義框架集中行的數目和尺寸 frame border 去除框架邊框 scrolling 去除滾動條

          12.1 垂直框架

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html垂直框架</title>
          
              <frameset cols="50%,*" >
                  <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
              </frameset>
          </head>
          <body>
              
          </body>
          </html>
          

          12.2 水平框架

          <!DOCTYPE html>
          <html lang="en">
          	<head>
          		<meta charset="UTF-8">
          		<title>Html水平框架</title>
          		<frameset rows="50%,*" >
          				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
          		</frameset>
          	</head>
          <body>
          </body>
          </html>

          12.3 混合框架

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html混合框架</title>
          
              <frameset rows="20%,*" >
                  <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frameset cols="20%,*">
                      <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
                      <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
                  </frameset>
                  
              </frameset>
          </head>
          <body>
              
          </body>
          </html>
          

          12.4 導航框架

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html美女</title>
          </head>
          <body>
              
              <img src="../images/10.jpg" alt="">
          
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html野獸</title>
          </head>
          <body>
              
          
              <img src="../images/timg.gif" alt="">
          
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html動物</title>
          </head>
          <body>
              
              <img src="../images/4.jpg" alt="">
          
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html鏈接</title>
          </head>
          <body>
          
              <a href="Html美女.html" target="view">美女圖片</a>
              <a href="Html野獸.html" target="view">野獸圖片</a>
              <a href="Html動物.html" target="view">動物圖片</a>
              
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html垂直框架</title>
          
              <frameset rows="20%,*" >
                  <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frameset cols="20%,*">
                      <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
                      <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
                  </frameset>
                  
              </frameset>
          </head>
          <body>
              
          </body>
          </html>
          

          13、內聯框架

          iframe元素會創建包含另外一個文檔的內聯框架。

          屬性 說明 align 對齊方式,后期采用css的方式進行設置 width 設置寬度 height 設置高度 src 設置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動條 frameborder 設置iframe的邊框

          SS也是我們常叫的樣式表、通俗叫切圖和靜態網頁布局。我們知道HTML網頁是由若干標簽和內容組成。標簽包括了div標簽、span標簽、a錨文本標簽、strong加粗標簽、b加粗標簽、p段落標簽、br換行標簽等組成。而好看的網頁樣式卻是CSS控制得出。一個完整漂亮網頁,就是由html標簽與控制這些標簽布局和美化功能CSS組成。

          注釋標簽:對代碼進行說明

          <!-- 單行注釋,也可以對多行文字進行注釋 -->

          常用格式標簽

          <b>加粗</b>

          <i>斜體</i>

          <p>段落標簽</p>

          <hr>:分割線

          <br>:換行

          <strong>(粗字體)強調文本</strong>

          標題標簽

          <h1>一級標題標簽</h1>

          <h2>二級標題標簽</h2>

          <h3>三級標題標簽</h3>

          <h4>四級標題標簽</h4>

          <h5>五級標題標簽</h5>

          <h6>六級標題標簽</h6>

          列表標簽

          <ul type="disc">

          <li>列表項1</li>

          <li>列表項2</li>

          <li>列表項3</li>

          </ul>

          有序列表:

          <ol type="1">

          <li>列表項1</li>

          <li>列表項2</li>

          <li>列表項3</li>

          </ol>

          CSS樣式

          內嵌樣式:放在<head>標簽之間

          <style type="text/css">

          選擇器名 { 屬性名:屬性值;

          }

          </style>

          所有標簽(*)

          * {

          padding:0px; /*清除默認內邊距*/

          margin:0px; /*清除默認外邊距*

          }

          超鏈接:

          <a href="網頁的網址" target="_blank">超鏈接文字或圖片</a>

          _blank:在新窗口打開網頁

          _self:在當前自身窗口打開網頁

          錨點鏈接

          <a href="#錨點名">錨點鏈接:跳轉鏈接</a>

          <a name="錨點名">錨點名:要跳轉到的位置</a>

          大家在學習CSS的過程中,css標簽屬性是一定要了解的,希望本篇能給大家帶來幫助。

          天刷到了一個這樣的短視頻,我尋思我是不是也可以寫一個類似的上課點名程序,想法經不起等待,說寫就寫~

          一.準備工作

          私信小編01即可獲取大量Python學習資源

          1.Tkinter

          Tkinter 是 python 內置的 TK GUI 工具集。TK 是 Tcl 語言的原生 GUI 庫。作為 python 的圖形設計工具,它所使用的 Tcl 語言環境已經完全嵌入到了 python 解釋器中。

          我們使用Tkinter開發GUI界面。

          2.PIL

          PIL(Python Image Library)庫是Python語言的第三方庫,需要通過pip工具安裝。安裝PIL庫的方法如下,需要注意,安裝庫的名字是pillow。

          PIL庫支持圖像儲存、顯示和處理,他能夠處理幾乎所有圖片格式,可以完成對圖像的縮放、剪裁、疊加以及向圖像添加線條、圖像和文字等操作。

          使用PIL中的Image,ImageTk處理、引入一張圖片,可以使用下面代碼安裝一下。

          pip install pillow

          二.預覽

          1.啟動

          雙擊打開后,進入軟件主界面,所有功能一目了然。程序會自動識別軟件目錄下的names.txt,將里面的名字導入。

          2.開始點名-順序點名

          選擇順序點名后,點擊開始,屏幕上就開始滾動出現人名,人名出現的概率是相同的,點擊停止,人名就停止滾動,點名結束。

          3.開始點名-隨機點名

          點擊隨機點名,程序就會進行隨機點名,人名出現的概率是隨機的。

          4.手動加載人名單

          可以自己手動選擇人名單,前提是人名單格式為txt,且每個名字占一行。

          5.開始點名-順序點名-Pyqt5版本

          用Pyqt5也寫了一個版本,實現邏輯與TK版本相同,界面可能更好看了一些,但是文件大了許多,大家可以在后面總結部分自取。

          三.思路

          1.整體實現思路

          2.點名實現思路

          四.源代碼

          point_names-GUI.py(主程序GUI)


          import random
          import re
          import time
          import threading
          from tkinter import *
          from tkinter import ttk
          from base64 import b64decode
          from PIL import Image,ImageTk
          from tkinter import messagebox
          from tkinter.filedialog import askopenfilename
          
          
          
          
          """"
          2021-11-10點名/抽獎程序
          主要亮點:
          1.兩種模式:
          ①順序點名
          ②隨機點名
          2.自動識別人名單
          3.支持手動導入人名單
          4.人名單導入校驗
          5.人名顯示位置自動矯正
          6.最多顯示五個大字
          """
          
          
          imgs=['./point_name.png']
          class APP:
              def __init__(self):
                  self.root = Tk()
                  self.running_flag=False #開始標志
                  self.time_span=0.05 #名字顯示間隔
                  self.root.title('Point_name-V1.0')
                  width = 680
                  height = 350
                  left = (self.root.winfo_screenwidth() - width) / 2
                  top = (self.root.winfo_screenheight() - height) / 2
                  self.root.geometry("%dx%d+%d+%d" % (width, height, left, top))
                  self.root.resizable(0,0)
                  self.create_widget()
                  self.set_widget()
                  self.place_widget()
                  self.root.mainloop()
          
          
              def create_widget(self):
                  self.label_show_name_var=StringVar()
                  self.label_show_name=ttk.Label(self.root,textvariable=self.label_show_name_var,font=('Arial', 100,"bold"),foreground = '#1E90FF')
                  self.btn_start=ttk.Button(self.root,text="開始",)
                  self.btn_load_names=ttk.Button(self.root,text="手動加載人名單",)
                  self.lf1=ttk.LabelFrame(self.root,text="點名方式")
                  self.radioBtn_var=IntVar()
                  self.radioBtn_var.set(1)
                  self.radioBtn_sequence=ttk.Radiobutton(self.lf1,text="順序點名",variable=self.radioBtn_var, value=1)
                  self.radioBtn_random=ttk.Radiobutton(self.lf1,text="隨機點名",variable=self.radioBtn_var, value=2)
                  self.label_show_name_num=ttk.Label(self.root,font=('Arial', 20),foreground = '#FF7F50')
                  paned = PanedWindow(self.root)
                  self.img = imgs
                  img_=b'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'
                  the_img = b64decode(img_)#將圖片硬編碼到GUI
                  paned.image = ImageTk.PhotoImage(data=the_img)
                  self._img = Label(self.root, image=paned.image,background='black')
          
          
              def set_widget(self):
                  default_name_="會是誰?"
                  self.label_show_name_var.set(default_name_)
                  self.label_show_name_adjust(default_name_)
                  self.btn_start.config(command=lambda :self.thread_it(self.start_point_name))
                  self.btn_load_names.config(command=self.load_names)
                  init_names=self.load_names_txt("./names.txt")
                  self.root.protocol('WM_DELETE_WINDOW',self.quit_window)
                  self.root.bind('<Escape>',self.quit_window)
                  if init_names:
                      self.default_names=init_names   #1.文件存在但是無內容。2.文件不存在
                      self.label_show_name_num.config(text=f"一共加載了{len(self.default_names)}個姓名")
                  else:
                      self.btn_start.config(state=DISABLED)
                      self.label_show_name_num.config(text=f"請先手動導入人名單!")
          
          
              def place_widget(self):
                  self.lf1.place(x=300,y=160,width=250,height=50)
                  self.radioBtn_sequence.place(x=20,y=0)
                  self.radioBtn_random.place(x=150,y=0)
                  self.btn_start.place(x=300,y=220,width=100,height=30)
                  self.btn_load_names.place(x=450,y=220,width=100,height=30)
                  self._img.place(x=90, y=165, height=120, width=180)
                  self.label_show_name_num.place(x=300,y=260)
          
          
              def label_show_name_adjust(self,the_name):
                  if len (the_name)==1:
                      self.label_show_name.place(x=280, y=10)
                  elif len(the_name) == 2:
                      self.label_show_name.place(x=180, y=10)
                  elif len(the_name) == 3:
                      self.label_show_name.place(x=120, y=10)
                  elif len(the_name) == 4:
                      self.label_show_name.place(x=80, y=10)
                  else:
                      self.label_show_name.place(x=0, y=10)
          
          
              def start_point_name(self):
                  """
                  啟動之前進行判斷,獲取點名模式
                  :return:
                  """
                  if len(self.default_names)==1:
                      messagebox.showinfo("提示",'人名單就一個人,不用選了!')
                      self.label_show_name_var.set(self.default_names[0])
                      self.label_show_name_adjust(self.default_names[0])
                      return
                  if self.btn_start["text"]=="開始":
                      self.btn_load_names.config(state=DISABLED)
                      self.running_flag=True
                      if isinstance(self.default_names,list):
                          self.btn_start.config(text="就你了")
                          if self.radioBtn_var.get()==1:
                              mode="sequence"
                          elif self.radioBtn_var.get()==2:
                              mode="random"
                          else:
                              pass
                          self.thread_it(self.point_name_begin(mode))
          
          
                      else:
                          messagebox.showwarning("警告","請先導入人名單!")
                  else:
                      self.running_flag=False
                      self.btn_load_names.config(state=NORMAL)
                      self.btn_start.config(text="開始")
          
          
              def point_name_begin(self,mode):
                  """
                  開始點名,點名主函數
                  :param mode:
                  :return:
                  """
                  if mode == "sequence":
                      if self.running_flag:
                          self.always_ergodic()
                  elif mode=="random":
                      while True:
                              if self.running_flag:
                                  random_choice_name=random.choice(self.default_names)
                                  self.label_show_name_var.set(random_choice_name)
                                  self.label_show_name_adjust(random_choice_name)
                                  time.sleep(self.time_span)
                              else:
                                  break
          
          
              def always_ergodic(self):
                  """
                  一直遍歷此列表,使用死循環會造成線程阻塞
                  :return:
                  """
                  for i in self.default_names:
                      if self.running_flag:
                          self.label_show_name_var.set(i)
                          self.label_show_name_adjust(i)
                          time.sleep(self.time_span)
                          if i==self.default_names[-1]:
                              self.always_ergodic()
                      else:
                          break
              def load_names(self):
                  """
                  手動加載txt格式人名單
                  :return:
                  """
                  filename = askopenfilename(
                          filetypes = [('文本文件', '.TXT'), ],
                          title = "選擇一個文本文件",
                      initialdir="./"
                          )
                  if filename:
                      names=self.load_names_txt(filename)
                      if names:
                          self.default_names=names
                          no_Chinese_name_num=len([n for n in names if not self.load_name_check(n)])
                          if no_Chinese_name_num==0:
                              pass
                          else:
                              messagebox.showwarning("請注意",f'導入名單有{no_Chinese_name_num}個不是中文名字')
                          self.label_show_name_num.config(text=f"一共加載了{len(self.default_names)}個姓名")
                          default_name_ = "會是誰?"
                          self.label_show_name_var.set(default_name_)
                          self.label_show_name_adjust(default_name_)
                          self.btn_start.config(state=NORMAL)
                      else:
                          messagebox.showwarning("警告","導入失敗,請檢查!")
          
          
              def load_names_txt(self,txt_file):
                  """
                  讀取txt格式的人名單
                  :param txt_file:
                  :return:
                  """
                  try:
                      with open(txt_file,'r',encoding="utf-8")as f:
                          names=[name.strip() for name in f.readlines()]
                          if len(names)==0:
                              return False
                          else:
                              return names
                  except:
                      return False
          
          
              def load_name_check(self,name):
                  """
                  對txt文本中的人名進行校驗
                  中文漢字->True
                  非中文漢字->False
                  :param name:
                  :return:
                  """
                  regex = r'[\u4e00-\u9fa5]+'
                  if re.match(regex,name):
                      return True
                  else:
                      return False
          
          
              def thread_it(self,func,*args):
                  t=threading.Thread(target=func,args=args)
                  t.setDaemon(True)
                  t.start()
          
          
              def quit_window(self,*args):
                  """
                  程序退出觸發此函數
                  :param args:
                  :return:
                  """
                  ret=messagebox.askyesno('退出','確定要退出?')
                  if ret:
                      self.root.destroy()
          
          
          if __name__ == '__main__':
              a=APP()


          五.總結

          本次使用Tkinter開發了一款上課點名程序,此程序可以用于點名、抽獎…代碼不到200行,程序簡單又實用,主要有以下六個亮點:

          1.兩種模式:

          • 順序點名
          • 隨機點名

          2.自動識別人名單

          3.支持手動導入人名單

          4.人名單導入校驗

          5.人名顯示位置自動矯正

          6.最多顯示五個大字


          主站蜘蛛池模板: 亚洲一区综合在线播放| 国产乱人伦精品一区二区在线观看| 精品人妻少妇一区二区三区不卡| 精品不卡一区二区| 亚洲一区二区三区无码中文字幕| 国产主播福利一区二区| 国产福利视频一区二区| 成人精品一区久久久久| 无码国产精品一区二区免费式直播 | 国产乱码精品一区二区三区四川人| 免费一区二区无码东京热| 痴汉中文字幕视频一区| 国产一区二区三区不卡在线观看| 国产午夜精品一区二区三区极品| 韩国一区二区视频| 精品视频一区二区三区四区| 国产日韩精品视频一区二区三区| 一区二区三区精品| 精品日韩亚洲AV无码一区二区三区 | 无码一区二区波多野结衣播放搜索 | 黑人一区二区三区中文字幕| 日韩精品免费一区二区三区| 久久久久人妻精品一区三寸| 97人妻无码一区二区精品免费| 亚洲国产日韩在线一区| 交换国产精品视频一区| 国产成人亚洲综合一区| 狠狠综合久久av一区二区| 精品无码成人片一区二区| 日韩国产一区二区| 亚洲日韩精品一区二区三区 | 亚洲中文字幕无码一区二区三区| 国产综合一区二区在线观看| 精品人妻一区二区三区四区 | 影院成人区精品一区二区婷婷丽春院影视| 国产精品久久一区二区三区| 国产精品亚洲一区二区三区 | 日韩精品一区二区亚洲AV观看| 久久久久人妻精品一区二区三区| 亚洲日韩AV无码一区二区三区人| 在线视频国产一区|