前端之HTML標籤等相關內容-51

阿新 • • 發佈：2020-09-16

1.列表標籤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    ul {
      list-style: none;
     }
  </style>
</head>
<body>
<!--無序列表-->
<ul>
  <li>
    <h2>標題欄</h2>
  </li>
  <li>1.秒殺</li>
 
  <li>2.優惠券</li>
  <li>3.PLUS會員</li>
</ul>
<!--無序列表-->

<!--有序列表-->
<ol>
  <li>秒殺</li>
  <li>優惠券</li>
  <li>PLUS會員</li>
</ol>
<!--有序列表-->

<!--自定義列表-->
<dl>
  <dt>智商排名</dt>
  <dd>1、egon</dd>
  <dd>2、lxx</dd>
 
  <dd>3、alex</dd>
  <dd>4、hxx</dd>

  <dt>顏值排名</dt>
  <dd>egon</dd>
  <dd>lxx</dd>
  <dd>hxx</dd>
  <dd>alex</dd>
</dl>
<!--自定義列表-->

<!--練習題-->
<dl>
  <dt>購物流程</dt>
  <dd>1111</dd>
  <dd>1111</dd>
 
  <dd>1111</dd>

  <dt>配送方式</dt>
  <dd>1111</dd>
  <dd>1111</dd>
  <dd>1111</dd>

  <dt>支付方式</dt>
  <dd>1111</dd>
  <dd>1111</dd>
  <dd>1111</dd>
</dl>

<hr>
<h1>物品清單</h1>
<ul>
  <li>
    <h2>蔬菜</h2>
    <ul>
      <li>黃瓜</li>
      <li>茄子</li>
      <li>蘿蔔</li>
    </ul>
  </li>
  <li>
    <h2>水果</h2>
    <ul>
      <li>西紅柿</li>
      <li>香蕉</li>
      <li>蘋果</li>
    </ul>
  </li>
</ul>

</body>
</html>

2.table標籤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
<table border="1px" width="300px" height="300px">
  <tr>
    <td width="500px" height="500px">名字</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr>
    <td>egon</td>
    <td>18</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon2</td>
    <td>28</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon3</td>
    <td>38</td>
    <td>male</td>
  </tr>
</table>


<table border="1px" align="center" width="500px" height="500px">
  <tr align="center" valign="top">
    <td align="left" valign="bottom">名字</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr align="center" valign="bottom">
    <td>egon</td>
    <td>18</td>
    <td>male</td>
  </tr>
  <tr align="right" valign="center">
    <td>egon2</td>
    <td>28</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon3</td>
    <td>38</td>
    <td>male</td>
  </tr>
</table>

<table border="1px" align="center" width="500px" height="500px" cellspacing="20px" cellpadding="20px">
  <tr >
    <td >名字</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr >
    <td>egon</td>
    <td>18</td>
    <td>male</td>
  </tr>
  <tr >
    <td>egon2</td>
    <td>28</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon3</td>
    <td>38</td>
    <td>male</td>
  </tr>
</table>
-->

<!--細線表格的實現方式一-->
<table border="1px" align="center" width="500px" height="500px" cellspacing="0px">
  <tr>
    <td>名字</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr>
    <td>egon</td>
    <td>18</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon2</td>
    <td>28</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon3</td>
    <td>38</td>
    <td>male</td>
  </tr>
</table>
<hr>
<!--細線表格的實現方式二-->
<table bgcolor="red" border="0px" align="center" width="500px" height="500px" cellspacing="1px">
  <tr bgcolor="white">
    <td>名字</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr bgcolor="white">
    <td>egon</td>
    <td>18</td>
    <td>male</td>
  </tr>
  <tr bgcolor="white">
    <td>egon2</td>
    <td>28</td>
    <td>male</td>
  </tr>
  <tr bgcolor="white">
    <td>egon3</td>
    <td>38</td>
    <td>male</td>
  </tr>
</table>
<hr>
<table border="1px" align="center" width="500px" height="500px"
    style="border-collapse: collapse;border: 1px solid green">
  <tr>
    <td>名字</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr>
    <td>egon</td>
    <td>18</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon2</td>
    <td>28</td>
    <td>male</td>
  </tr>
  <tr>
    <td>egon3</td>
    <td>38</td>
    <td>male</td>
  </tr>
</table>


</body>
</html>

3.table表格合併

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<table border="1px" align="center" width="500px" height="500px"
    style="border-collapse: collapse;border: 1px solid green">
  <caption>老爺們培訓學員資訊統計</caption>
  <thead>
  <th>姓名</th>
  <th>年齡</th>
  <th>智商</th>
  </thead>

  <tbody>
  <tr>
    <td>艾莉克斯</td>
    <td>73</td>
    <td>70</td>
  </tr>
  <tr>
    <td>egon</td>
    <td>18</td>
    <td>70</td>
  </tr>

  <tr>
    <td>艾莉克斯</td>
    <td>73</td>
    <td>70</td>
  </tr>


  </tbody>

  <tfoot>
  <td>統計</td>
  <td>43.6</td>
  <td>90</td>
  </tfoot>
</table>


</body>
</html>

4.form表單

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080/" method="post">
  <p>
    <label for="inp1">使用者名稱：</label>
    <input id="inp1" type="text" name="username" placeholder="請輸入使用者名稱">
  </p>

  <p>
    <label for="inp2">密碼：</label>
    <input id="inp2" type="password" name="password" placeholder="請輸入密碼">
  </p>

  <p>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female" checked>女
    <input type="radio" name="gender" value="null">保密
  </p>

  <p>
    <input type="checkbox" name="hobbies" value="打籃球">打籃球
    <input type="checkbox" name="hobbies" value="female" checked value="踢足球">踢足球
    <input type="checkbox" name="hobbies" value="null" value="羽毛球" checked>羽毛球
  </p>

  <p>
    <input type="text" disabled name="k" value="1111">
  </p>


  <p>
    <textarea name="comment" id="" cols="30" rows="30" style="resize: none">
     這是評論資訊
    </textarea>
  </p>

  <p>
    <select name="籍貫" size="2">
      <option value="北京111">北京</option>
      <option value="上海222">上海</option>
      <option value="深圳333" selected>深圳</option>
    </select>
  </p>

  <p>
    <select name="籍貫">
      <optgroup label="一線城市">
        <option value="北京111">北京</option>
        <option value="上海222">上海</option>
        <option value="深圳333" selected>深圳</option>
      </optgroup>
      <optgroup label="二線城市">
        <option value="杭州">杭州</option>
        <option value="煙臺">煙臺</option>
        <option value="德州" selected>德州</option>
      </optgroup>
    </select>
  </p>
  <p>
    <input type="submit" value="登入">
  </p>
</form>

</body>
</html>

前端之HTML標籤等相關內容-51

1.列表標籤 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>ul {list-style: none;}</style></head><bo

前端之HTML基礎等相關內容-50

1.基礎 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\"

面向物件之異常處理等相關內容-28

1.異常處理 \"\"\"1、什麼是異常異常是錯誤發生的訊號，一旦程式出錯就會產生一個異常如果該異常沒有被處理，該異常就會被丟擲來，程式的執行隨即終止異常是由三部分組成1、具體哪一行程式碼丟擲的異常2、異常的種

django之檢視層等相關內容-64

1 檢視層之請求物件 def index(request):\'\'\'request:django封裝的物件,它的類是WSGIRequest，它裡面包含了所有http請求的東西\'\'\'print(request)print(type(request))# from django.core.handlers.wsgi import

django之auth元件等相關內容-76

1 auth元件介紹我們需要實現包括使用者註冊、使用者登入、使用者認證、登出、修改密碼等功能,內建了強大的使用者認證系統--auth，是一個app

django框架之目錄介紹等相關內容-60

1 django目錄介紹 -day60專案名-app01app的名字-migrations資料庫變更相關記錄（你不要刪，也不要改）-admin.py後臺管理（建立專案如果沒有選，就沒有）-apps.pyapp的相關配置，不用管-models.py資料庫相關（重點）

vue框架之基礎語法等相關內容-111

1 條件渲染 1.1 通過v-if和v-for實現購物車 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><script src=\"./js/vue.js\"></script><style>.red {back

前端之HTML標籤

一、簡介 1.超文字標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。

前端之css選擇器等相關內容-52

1.css介紹一什麼是CSSCSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。樣式指的是HTML標籤的顯示效果，比如換行、寬高、顏色等等層疊屬於CSS的三大特性之一，我們將在後續內容中介紹

前端之css屬性設定等相關內容-53

CSS屬性設定 1.字型屬性 1.1 font-weight：文字粗細取值描述 normal 預設值，標準粗細

前端之css網頁佈局及JavaScript引入等相關內容-55

CSS網頁佈局及JavaScript引入 1.定位流 1、相對定位就是相對於自己以前在標準流中的位置來移動

前端之JavaScript函式以及BOM、DOM操作等相關內容-57

函式與BOM、DOM操作 1.函式 1.javascript中的變數提升和函式提升 1、在js中只有兩種作用域

django框架之自定義標籤和過濾器、模板的匯入和繼承、靜態檔案以及單表查詢等相關內容-66

1 自定義標籤和過濾器 1 自定義過濾器-第一步：在settings中的INSTALLED_APPS配置當前app，不然django無法找到自定義的simple_tag-第二步：在app中建立templatetags包(包名只能是templatetags，不能改)-第三步：在包

vue框架前後端分離專案之課程頁面前端、課程表分析、編寫及資料錄入等相關內容-126

1 課程頁面前端 <script>import Header from \"@/components/Header\"// import Footer from \"@/components/Footer\"export default {name: \"Course\",data() {return {category: 0,}},components: {Heade

面向物件之繼承等相關內容-26

day26 1.繼承介紹 \"\"\"1 什麼是繼承繼承是一種新建類的方式，新建的類稱之為子類，被繼承的類稱之為父類、基類、超類python支援多繼承2 為何要繼承子類會遺傳父類的屬性，所以繼承是用來解決類與類之間程式碼冗

面向物件之組合、多型、以及內建函式及方法等相關內容-27

1.在子類派生的新方法中重用父類功能的方式二 # 1\\在子類派生的新方法中重用父類的功能# 方式一：指名道姓地呼叫某一個類的函式# 特點：不依賴於繼承關係## class OldboyPeople:#school = \"oldboy\"##空物件,\"艾利

網路程式設計（套接字）之UDP協議通訊以及基於socketserver模組實現併發效果等相關內容-33

1.基於udp協議的套接字通訊 # server.py# TCPVSUDP協議# 1、可靠性# tcp協議是可靠協議：#對方必須回覆一個ack確認資訊，才會將自己這端的資料從記憶體中刪除# udp協議不可靠：#傳送一條訊息就會立即刪除，不管對

補充知識之猴子補丁、內建函式以及垃圾回收機制等相關內容-35

1.猴子補丁 import jsonimport ujson # pip3 install ujsondef monkey_patch():json.__name__ = ujson.__name__json.dumps = ujson.dumpsjson.loads = ujson.loads# 用一個新的方法替代之前的方法

併發程式設計之程序理論及應用等相關內容-36

1.程序理論 #1、什麼是程序程序是一個程式執行的過程#2、什麼是程式程式就是一堆程式碼檔案#3、序列、併發、並行序列：多個任務依次執行，一個執行完畢再執行下一個並行：多個任務是真的在同時執行，只有多個cpu

併發程式設計之守護程序、互斥鎖以及佇列等相關內容-37

1.回顧 ···建立程序的兩種方式····第一種from multiprocessing import Processimport timedef task(n):print(\'我是子程序\')time.sleep(n)print(\'子程序結

前端之HTML標籤等相關內容-51

1.列表標籤

2.table標籤

3.table表格合併

4.form表單

相關推薦