HTML之body標簽中的相關標簽補充

一 列表標簽

　　列表標簽分為三種。

　　1、無序列表<ul>，無序列表中的每一項是<li>

　　　　英文單詞解釋如下：

　　　　　　a.ul：unordered list，“無序列表”的意思。

　　　　　　b.li：list item，“列表項”的意思。

　　　　示例：

　　　　效果：

　　　　註意：

　　　　　　a.li不能單獨存在，必須包裹在ul裡面；反過來說，ul的“兒子”不能是別的東西，只能有li。

　　　　　　b.我們這裡再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。

　　　　屬性：

　　　　　　1.type="屬性值"。屬性值可以選： disc(實心原點，預設)，square(實心方點)，circle(空心圓)。

　　　　　　　　效果如下：

　　　　　　　　列表之間是可以嵌套的。我們來舉個例子：
　　　　　　　　代碼：

　　　　　　　　效果:

　　　　　　　　聲明：ul的兒子，只能是li。但是li是一個容器級標簽，li裡面什麼都能放。甚至可以再放一個ul。

　　2、有序列表<OL>，裡面的每一項是<li>

　　　　英文單詞：Ordered List。

　　　　例如：

　　　　效果：

　　　　屬性：

　　　　　　1.type="屬性值"。屬性值可以是：1(阿拉伯數字，預設)、a、A、i、I。結合start屬性表示從幾開始。

　　　　　　效果：

　　　　　　和無序列表一樣，有序列表也是可以嵌套的哦，這裡就不舉類似的例子了。

　　　　　　ol和ul就是語義不一樣，怎麼使用都是一樣的。
　　　　　　ol裡面只能有li，li必須被ol包裹。li是容器級。

　　　　　　ol這個東西用的不多，如果想表達順序，大家一般也用ul。舉例如下：

　　3、定義列表<dl>

　　　　<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。

　　　　　　a.<dt>：definition title 列表的標題，這個標簽是必須的

　　　　　　b.<dd>：definition description 列表的列表項，如果不需要它，可以不加

　　　　備註：dt、dd只能在dl裡面；dl裡面只能有dt、dd。

　　　　代碼：

　　　　效果：

　　　　上圖可以看出，定義列表表達的語義是兩層：

　　　　　　（1）是一個列表，列出了幾個dd項目

　　　　　　（2）每一個詞兒都有自己的描述項。

　　　　備註：dd是描述dt的。

　　　　定義列表用法非常靈活，可以一個dt配很多dd：

　　　　還可以拆開，讓每一個dl裡面只有一個dt和dd，這樣子感覺清晰一些：

　　　　京東案例（京東首頁最下方）

　　　　dt、dd都是容器級標簽，想放什麼都可以。所以，現在就應該更加清晰的知道：用什麼標簽，不是根據樣子來決定，而是語義（語義本質上是結構）。

二 表格標簽

　　表格標簽用<table>表示。
　　一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
　　所以我們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
　　在以前，要想固定標簽的位置，唯一的方法就是表格。現在可以通過CSS定位的功能來實現。但是現在在做頁面的時候，表格作用還是有一些的。

　　例如，一行的單元格：

　　上面的表格中沒有加文字，所以在生成的網頁中什麼都看不到。

　　例如，3行4列的單元格：

　　效果：

　　上圖中的表格好像沒看到邊框呀，不急，接下來看看<table>標簽的屬性。

　　<table>的屬性：

• border：邊框。像素為單位。
• style="border-collapse:collapse;"：單元格的線和表格的邊框線合併
• width：寬度。像素為單位。
• height：高度。像素為單位。
• bordercolor：表格的邊框顏色。
• align：表格的水平對齊方式。屬性值可以填：left right center。
  註意：這裡不是設置表格裡內容的對齊方式，如果想設置內容的對齊方式，要對單元格標簽<td>進行設置）
• cellpadding：單元格內容到邊的距離，像素為單位。預設情況下，文字是緊挨著左邊那條線的，即預設情況下的值為0。
  註意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，預設是與左邊那條線的距離。如果設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
• cellspacing：單元格和單元格之間的距離（外邊距），像素為單位。預設情況下的值為0
• bgcolor="#99cc66"：表格的背景顏色。
• background="路徑src/..."：背景圖片。
  背景圖片的優先順序大於背景顏色。

　　單元格帶邊框的效果：

　　備註：表格中很細表格邊線的製作：
　　CSS的寫法：

　　<tr>：行

　　　　一個表格就是一行一行組成的嘛。
　　屬性：

• dir：公有屬性，設置這一行單元格內容的排列方式。可以取值：ltr：從左到右（left to right，預設），rtl：從右到左（right to left）
• bgcolor：設置這一行的單元格的背景色。
  註：沒有background屬性，即：無法設置這一行的背景圖片，如果非要設置，可以用css實現。
• height：一行的高度
• align="center"：一行的內容水平居中顯示，取值：left、center、right
• valign="center"：一行的內容垂直居中，取值：top、middle、bottom

　　<td>：單元格

　　屬性：

• align：內容的橫向對齊方式。屬性值可以填：left right center。
  如果想讓每個單元格的內容都居中，這個屬性太麻煩了，以後用css來解決。
• valign：內容的縱向對齊方式。屬性值可以填：top middle bottom
• width：絕對值或者相對值(%)
• height：單元格的高度
• bgcolor：設置這個單元格的背景色。
• background：設置這個單元格的背景圖片。

　　單元格的合併

　　　　如果要將兩個單元格合併，那肯定就要刪掉一個單元格。
　　　　單元格的屬性：

• colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要占據兩個單元格的位置。
• rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上

　　　　效果：（橫向合併）

　　　　效果舉例：（縱向合併）

　　<th>：加粗的單元格。相當於<td> + <b>

　　　　a.屬性同<td>標簽

　　<caption>：表格的標題。使用時和tr標簽併列

　　　　效果：

　　表格的<thead>標簽、<tbody>標簽、<tfoot>標簽

　　　　這三個標簽有與沒有的區別：

　　　　　　1、如果寫了，那麼這三個部分的代碼順序可以任意，瀏覽器顯示的時候還是按照thead、tbody、tfoot的順序依次來顯示內容。如果不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示表格內容的時候是從按照代碼的從上到下的順序來顯示。

　　　　　　2、當表格非常大內容非常多的時候，如果用thead、tbody、tfoot標簽的話，那麼數據可以邊獲取邊顯示。如果不寫，則必須等表格的內容全部從伺服器獲取完成才能顯示出來。

例子：

　　　　效果：

三 表單標簽

　　表單標簽用<form>表示，用於與伺服器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

　　屬性：

　　　　a.name：表單的名稱，用於JS來操作或控製表單時使用；

　　　　b.id：表單的名稱，用於JS來操作或控製表單時使用；

　　　　c.action：指定表單數據的處理程式，一般是PHP，如：action=“login.php”

　　　　d.method：表單數據的提交方式，一般取值：get(預設)和post

　　form標簽裡面的action屬性和method屬性，在後面課程給大家講解。稍微說一下：action屬性就是表示，表單將提交到哪裡。 method屬性表示用什麼HTTP方法提交，有get、post兩種。 

　　get提交和post提交的區別：
　　　　GET方式：
　　　　　　將表單數據，以"name=value"形式追加到action指定的處理程式的後面，兩者間用"?"隔開，每一個表單的"name=value"間用"&"號隔開。
　　　　　　特點：只適合提交少量信息，並且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字元。

　　　　POST方式：
　　　　　　將表單數據直接發送(隱藏)到action指定的處理程式。POST發送的數據不可見。Action指定的處理程式可以獲取到表單數據。
　　　　　　特點：可以提交海量信息，相對來說安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

　　Enctype：
　　　　表單數據的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

　　　　　　a.Application/x-www-form-urlencoded：預設加密方式，除了上傳文件之外的數據都可以

　　　　　　b.Multipart/form-data：上傳附件時，必須使用這種編碼方式。

　　<input>：輸入標簽（文本框）

　　　　用於接收用戶輸入。

　　　　屬性：

• type="屬性值"：文本類型。屬性值可以是：
  • text（預設）
  • password：密碼類型
  • radio：單選按鈕，名字相同的按鈕作為一組進行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
    ）。非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。
  • checkbox：多選按鈕，名字相同的按鈕作為一組進行選擇。
  • checked：將單選按鈕或多選按鈕預設處於選中狀態。當<input>標簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略。
  • hidden：隱藏框，在表單中包含不希望用戶看見的信息
  • button：普通按鈕，結合js代碼進行使用。
  • submit：提交按鈕，傳送當前表單的數據給伺服器或其他程式處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。
  • reset：重置按鈕，清空當前表單的內容，並設置為最初的預設值
  • image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。
  • file：文件選擇框。
    提示：如果要限制上傳文件的類型，需要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
• value="內容"：文本框里的預設內容（已經被填好了的）
• size="50"：表示文本框內可以顯示五十個字元。一個英文或一個中文都算一個字元。
  註意size屬性值的單位不是像素哦。
• readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。
  用了這個屬性之後，在google瀏覽器中，游標點不進去；在IE瀏覽器中，游標可以點進去，但是文字不能編輯。
• disabled：文本框只讀，不能編輯，游標點不進去。屬性值可以不寫。

　　　　例子：

　　　　效果：

　　　　四種按鈕的舉例：

1 2 3 4 5 6 7

<form>         <input type="button" value="普通按鈕"><br>         <input type="submit"  value="提交按鈕"><br>         <input type="reset" value="重置按鈕"><br>         <input type="image" src 您的分享是我們最大的動力! -Advertisement- 更多相關文章 SQL 高級查詢（層次化查詢，遞歸） SQL 高級查詢 前面我們寫了一下 SQL 的極簡入門，今天來說點高級查詢。沒看到的朋友可以點擊下麵鏈接查看。 "1 小時 SQL 極速入門（一）" "1 小時 SQL 極速入門（二）" "1 小時 SQL 極速入門（三）" 層次化查詢 層次化結構可以理解為樹狀數據結構，由節點構成。比如常見的組織結 ... 常用線上軟體獲取 1、學習工作相關 1.1 Windows "圖片壓縮Tinyjpg" ：解決應用圖片資源過大的問題，可以先將圖片進行碼轉換，可以有效降低資源占用率。 "清華大學鏡像源" "MSDN微軟系統下載" 1.2 Apple iPhone支持SDK（Xcode調製專用） 鏈接：https://pan.baid ... React顯示文件夾中SVG import React from 'react'; import _ from 'lodash'; import styles from './iconPicker.less'; const requireContext = require.context('annotation/draw/svg ... 實現簡單的信息無縫滾動(移動端) html代碼： css代碼： #demo div{ color: #3a3a3a; font-size: .34rem; line-height: .8rem; } #demo div span{ color: #f65c53; } js代碼： <script> var speed = 40 var ... 小程式生命周期 小程式生命周期 是指程式從創建、到開始、暫停、喚起、暫停、卸載的過程 小程式生命周期可以從三個方面介紹 應用生命周期 頁面Page生命周期 應用生命周期會影響Page生命周期 小程式一個路由跳轉的 API也會影響到 Page頁面的聲明周期 小程式應用生命周期 用戶首次打開小程式,會先觸發 初始化 其 ... 一個「學渣」從零開始的Web前端自學之路 從 13 年專科畢業開始，一路跌跌撞撞走了很多彎路，做過餐廳服務員，進過工廠乾過流水線，做過客服，乾過電話銷售可以說經歷相當的“豐富”。 最後的機緣巧合下，走上了前端開發之路，作為一個非電腦專業且低學歷的人來說，自學編程其實不是件容易的事情，不過慶幸的是自己堅持下來了。 目前工作還算不錯，收入在目 ... 使用jquery獲取url上的參數（筆記） 使用jquery獲取url上的參數（筆記） 一、做作業時經常要獲取url上的參數 1、當url上有多個參數時 從互聯網找到了一個方法 使用方法： 2、當url上只有一個參數 直接獲取url後面的字元，然後剪切掉不需要的部分 ... vue.js 學習筆記 [TOC] vue.js 學習筆記 前言 好！ MVVM 和 MVC 架構 MVVM：M 是模型（數據），V是視圖（界面），VM是V和M的雙向協調者。 MVC：M 是模型，V是視圖，C是控制器（業務） vue使用了MVVM架構來設計框架。架構是說邏輯分層，框架是指具體的實現。很明顯VM的實現是這個框 ... 一周排行 -Advertisement- 移動開發（一）：使用.NET MAUI開發第一個安卓APP 移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ... wpf ToggleButton選中效果和一個登錄界面 前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ... 彈幕樹洞項目功能新增篇 項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ... 第27篇 sqlserver2022詳細安裝步驟 話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ... .NET 開源高性能 MQTT 類庫 前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ... Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出 Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ... 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ... [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一) 1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ... 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ... 第28篇 如何.net中實現高效可靠數據同步api 通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ... 所有分類 NET技術 編程語言 軟件設計 WEB前端 手機開發 數據庫技術 操作系統