HTML-知識點總結

来源:https://www.cnblogs.com/lw14589/archive/2022/06/19/16389254.html
-Advertisement-
Play Games

HTML各知識點總結: 基本標簽 標題標簽、段落標簽、換行標簽、水平線標簽、字體樣式標簽、註釋和特殊符號 網頁插入 圖像、超鏈接,視頻、音頻、列表、表格、表單、內聯框架等 超鏈接 錨鏈接、功能性鏈接 列表 有序列表、無序列表、自定義列表 表格 行、列、跨行、跨列 表單 提交格式、文本框、密碼框、單選 ...


HTML各知識點總結:

基本標簽 標題標簽、段落標簽、換行標簽、水平線標簽、字體樣式標簽、註釋和特殊符號
網頁插入 圖像、超鏈接,視頻、音頻、列表、表格、表單、內聯框架等
超鏈接 錨鏈接、功能性鏈接
列表 有序列表、無序列表、自定義列表
表格 行、列、跨行、跨列
表單 提交格式、文本框、密碼框、單選框、多選框、下拉框 滑塊等
表單設置功能 隱藏區域、只讀模式、禁用模式
格式驗證 用戶提示(placehoder)、必填選項(required)、正則表達式(pattern)

註:圖片或者音、視頻的路徑:
1、相對路徑:相對於代碼所在的路徑,返回上級目錄用“../”
2、絕對路徑:不考慮所寫代碼的路徑,直接複製圖片或者音、視頻的在盤符里的路徑

一、基本標簽:

註:標簽中的各個屬性是用 空格 隔開!

1、標題標簽:

給網頁中的正文設置標題,同時可選擇標簽大小。

用法說明:

一級標題h1,二級標題則h2,後者同理。

例如:一級標簽:
  格式: <h1>標題名字</h1>
2、段落標簽:

給網頁中的內容分段,但是不具有空格和換行功能。

用法說明:

段落標簽用字元p表示

例如:
  格式: <p>段落內容</p>
3、換行標簽:

給網頁中內容進行換行,不具有分段和空格功能,且與段落標簽相比,內容較顯的緊湊。

用法說明:

換行標簽用br表示,並且是單標簽

  格式: 選擇換行內容<br/>(自閉合、建議使用)
   或者  選擇換行內容<br>
4、水平線標簽:

給網頁中內容進行水平線分隔開。

用法說明:

水平線標簽用Hr表示,也是單標簽

  格式: 選擇換行內容<hr/>(自閉合、建議使用)
   或者  選擇換行內容<hr>
5、字體樣式標簽:

設置字體樣式,如粗體、斜體。

用法說明:

粗體:strong
斜體:em

  格式: <strong> 內容 </strong>
         <em> 內容 </em>
6、註釋和特殊符號:

網頁中所表示實際上的中、英或者數字等註釋和符號。

  格式: 空格:內容1 &nbsp; 內容2  大於號:內容1 &gt; 內容2 
        小於號:內容1 &lt; 內容2   版權符號:&copy; 內容

二、網頁插入:

1、圖像:

在網頁中插入圖片。

   格式  <img src="path" alt="text" title="text" width="x" height="y" />
         其中 src: 圖像地址 alt: 圖像的替代文字(當圖片不存在或者找不到時,就會用alt中內容來表示這個圖片)
         title: 懸停在圖片上的文字 width和height:設置圖片大小
2、超鏈接

在網頁中加入超鏈接,可以實現跳轉功能。

錨鏈接:

1、需要一個錨標記
錨標記可以在本頁面標記,在其他頁面實現跳轉; 也可以在其他頁面標記,在本頁面跳到標記的那個頁面。
2、知道要跳轉的頁面的網頁鏈接

  格式: 錨標記: <a name="內容"></a>	 有的版本用的是這個: <a id="內容"> </a>
        錨鏈接: <a href="#內容(與錨標記中的內容是相同的)">回到錨標記對應的內容中</a>
功能性鏈接:

如郵件鏈接:mailto

  格式: 郵件鏈接: <a href="mailto:此處輸入要跳轉的電子郵箱"> 點擊跳轉 </a>	
3、列表:

用來列舉各種可能的事件或者種類等等。

有序列表:ol
無序列表:ul
自定義列表:dl
    `<!--有序列表--> <ol>
                        <li> 內容 </li> 
                    </ol>

     <!--無序列表--> <ul>
                        <li> 內容 </li> 
                    </ul>

   <!--自定義列表--> <dl> <!--自定義列表-->
                        <dt>  <!-- 列表名稱-->
                            <dd> 內容 </dd>
                        </dt>
                    </dl>`
4、表格:

用表格來顯示各個事物的各種屬性,簡單明瞭。
使用:
表格:table
行:tr
列:td
跨行:rowspan
跨列:colspan

  `<table>   <!--表格-->
       <tr> 內容  <!--行-->
         <td> 內容
              <!--列-->
         </td>
       </tr>
  </table>`

多行多列則在表格裡多寫幾個tr、td。具體事例如下代碼:

點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格學習</title>
</head>
<body>
<!--表格標簽
tr:行標簽
td:列標簽


-->
<table>
    <tr>
<!-- colspan 跨列-->
        <td colspan="4">1-1</td>



    </tr>
    <!--rowspan 垮行-->
    <tr>
        <td rowspan="2">2-1
        </td>
        <td>2-2
        </td>
        <td>2-3
        </td>

    </tr>
    <tr>
        <td>3-1
        </td>
        <td>3-2
        </td>
        <td>3-3
        </td>
        <td>3-4
        </td>
    </tr>
<!--    小練習-->
    <tr>
        <td colspan="3">學生成績</td>
    </tr>
    <tr>
        <td rowspan="2">哈哈</td>
        <td> 語文</td>
        <td> 100</td>

    </tr>
    <tr>

        <td> 數學</td>
        <td> 100</td>
    </tr>
    <tr>
        <td rowspan="2">嘻嘻</td>
        <td> 語文</td>
        <td> 100</td>

    </tr>
    <tr>

        <td> 數學</td>
        <td> 100</td>
    </tr>
</table>
<table>   <!--表格-->
    <tr>  <!--行-->
        <td>
          <!--列-->
        </td>
    </tr>
</table>
</body>
</html>

三、表單:

1、提交表單的形式:常用get/post (get方式提交,可以在url中看到用戶提交的信息,不安全,但是這種方式高效;post相對較安全,但是要想信息不被泄露仍需後期加密)
  格式: <form method="get/post" action="發送地址"> 表單內容</form>
2、輸入框:

輸入框:input

比如輸入框、密碼框等等都用input標簽 ,標簽中的“type”的值決定了是輸入框還是其他標簽元素等等。並且儘量用“name”命名元素

type:

text(文本框),password(密碼框),checkbox(多選框),radio(單選框),submit(提交),reset (重置),file(上傳文件),hidden(隱藏區域),image(圖片,點擊該圖片也可以提交表單),button(按鈕)等

value:

表單組件的初始值。當type為radio或者checkbox時,必須指定一個值。

size:

指定表單組件的初始寬度。當type為text或password時,表單元素的大小以字元為單位。而其他組件類型,寬度以像素為單位。

maxlength:

type為text或password時,輸入的最大字元數

checked:

type為radio或者checkbox時,表示指定按鈕已被選中,不可更改。

註:同一類型的單選框,name名稱必須一樣,不一樣則不為單選。
    格式:     文本框:<input type="text" name="名字" >  密碼框:input type="password" name="名字" >
               多選框:<input type="checkbox" name="名字">  單選框:<input type="radio" name="名字">
               提交:<input type="submit" name="名字">  重置<input type="reset" name="名字">
               上傳文件:<input type="file" name="名字">  隱藏區域:<input type="hidden" name="名字">
               圖片:<input type="image" name="名字">  按鈕:<input type="button" name="名字">
3、下拉框:

下拉框:select

   格式     <select name="下拉框的名稱"> 
               <option value="選項的值1"> </option> (可在option標簽中加入selected表示已被選擇的選項)
               <option value="選項的值2"> </option>
            </select>
4、搜索框:

在網頁中添加搜索,可快速找到網頁中某個內容。

   格式: <input type="search" name="名字">
5、滑塊:

類似音量調節的滑塊,可用來調節大小。

   格式:  <input type="range" max="滑塊所能滑的最大值" min="滑塊所能滑的最小值"> (滑塊對應的值要在表單提交後的網頁的網址上看到)
6、文件域:

上傳文件:file

   格式: <input type="file" name="名字">
7、文本域:

多行文本:textarea

   格式: <textarea name="名字" rows="行" cols="列"> 文本內容 </textarea>
表單的提交和重置:

提交:submit
重置:reset

  格式  提交:<input type="submit" name="sub" src="提交地址"> 
  或者以圖片形式提交:<input type="image" src="圖片地址" alt="圖片提交">
        重置:<input type="reset" name="res" >

四、表單初級驗證:

判斷用戶輸入是否合理或者滿足條件,驗證失敗時,給出提示信息。

1、郵箱驗證:
  格式: <input type="email" name="email">
2、URL驗證:
  格式:  <input type="url" name="url">
3、數字驗證:
  格式: <input type="number" name="num"> (可在此標簽中加入max,min,step來設置數字範圍以及步長大小)
4、表單驗證之提示:

預設提示信息:placeholder(即在文本框中預設顯示的信息)可用在所有輸入框中,在單選、多選、下拉框中無意義。
必填選項:required (設置該項必填)
正則表達式:pattern (需要的可以在網上搜索)

五、表單其他功能:

隱藏某區域:hidden
設置只讀模式:readonly
禁用模式:disabled
註:可在標簽屬性後添加這幾個功能。如隱藏一個文本框:

  格式:  <input type="text" name="text" hidden>(表示該文本框已經隱藏)

滑鼠定位:實現點擊文字就能將滑鼠定位到對應的框中。

   格式:  <label for="鎖定滑鼠的id"> 內容如(用戶名)</label>
           <input type="text" id="給這個文本框設置一個id名">

表單相關代碼:
`

表單
<p><!--文本框-->
    用戶名:
    <input type="text" name="用戶名" >
</p>

<p><!--密碼框-->
    密碼:
    <input type="password" name="密碼">
</p>

<p><!--單選框-->

    男:
    <input type="radio" name="sex">
    女:
    <input type="radio" name="sex">
</p>

<p><!--多選框-->
    中國:
    <input type="checkbox" name="China">
    美國:
    <input type="checkbox" name="America">
    南韓:
    <input type="checkbox" name="South Korea">
    印度:
    <input type="checkbox" name="India">
</p>

<p><!--下拉框-->
    <select name="國家">
        <option value="中國" name="China">中國</option>
        <option value="美國" name="America" selected>美國</option> <!--加selected表示預設顯示美國,不加,則預設顯示中國-->
        <option value="南韓" name="South Korea">南韓</option>
        <option value="印度" name="India">印度</option>
    </select>
</p>

<P><!--搜素框-->
    搜素框:
    <input type="search" name="search">
</P>

<p><!--滑塊-->
    滑塊:
    <input type="range" name="range" max="20" min="1">
</p>
<p><!--文件域-->
    文件域:
    <input type="file" name="file">
</p>

<p><!--文本域-->
    <textarea name="textarea"> </textarea>
</p>

<!--表單初級驗證-->
<p>
    <!--1、郵箱驗證-->
    郵箱驗證:
    <input type="email" name="email">
</p>

<p>
    <!--2、UPL驗證-->
    URL驗證:
    <input type="url" name="url">
</p>

<p>
    <!--3、數字驗證-->
    數字驗證:
    <input type="number" name="num">
</p>

<p><!--隱藏:hidden-->
    此處文本框被隱藏:
    <input type="text" name="隱藏" hidden>
</p>

<p><!--只讀模式:placeholder-->
    只讀模式:
    <input type="text" name="只讀" value="12345" readonly><!--這裡的value是給文本框初始顯示的信息-->
</p>

<p><!--禁用模式:disabled-->
    禁用模式:
    <input type="text" name="禁用" disabled>
</p>

<p><!--提示用戶信息:placeholder-->
    提示用戶信息:
    <input type="text" name="提示" placeholder="請輸入用戶名">
</p>

<p><!--必填:required-->
    此處必填:
    <input type="text" name="必填" required>
</p>

<p><!--滑鼠定位-->
    滑鼠定位:
    <label for="make"> 內容如(用戶名)</label>
    <input type="text" id="make">
</p>

<p><!--提交-->
    提交:
    <input type="submit" name="sub" src="列表學習.html" >
    圖片提交:
    <input type="image" src="../resources/image/1.png" alt="圖片提交">
</p>

<p><!--重置-->
    重置:
    <input type="reset" name="res" >
</p>
`
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 痞子衡嵌入式半月刊: 第 56 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農曆年分二十四節氣,希望在每個交節之日準時發佈一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • Air105的SPI介紹和驅動MAX7219的演示. Air105 包含五組普通SPI, 可以以半/全雙工, 同步, 串列的方式通信. 可以被配置成主模式併為從設備提供時鐘(SCK), 還能以多主配置方式工作. 支持協議Motorola Serial Peripheral Interface (SP... ...
  • 目錄 一、前景回顧 二、規劃頁表 三、實現頁表 四、運行測試 一、前景回顧 前面我們已經介紹了分頁機制的運行原理,那麼如何開啟分頁機制呢,也簡單,分為如下三個步驟: 1、創建頁目錄表並初始化頁記憶體。 2、將頁目錄表地址賦值為CR3。 3、打開CR0寄存器的PG位。 可以看出頁表是分頁機制的核心,接下 ...
  • 一、CDN是什麼? CDN的全稱是Content Delivery Network,即內容分髮網絡。其目的是通過在現有的Internet中增加一層新的CACHE(緩存)層,將網站的內容發佈到最接近用戶的網路”邊緣“的節點,使用戶可以就近取得所需的內容(就近原則),提高用戶訪問網站的響應速度。從技術上 ...
  • 分享嘉賓:葉聰 騰訊 技術專家 編輯整理:張智躍 內容來源:DataFun AI Talk「智能技術前沿實踐分享」 出品社區:DataFun 導讀: 本次分享系統介紹電腦視覺的基礎知識,如何利用這些識別演算法實現一個應用,同時進行部署、推廣這一整套流程。主要包括以下六個部分: 1、朋友圈爆款活動背後 ...
  • 6月15日,由中國信通院主辦的以 “原生聚力,雲數賦能”為主題的“2022雲原生產業大會”在北京舉行。憑藉創新技術和領先實踐,騰訊云云巢榮獲“雲原生技術創新案例”獎。 騰訊云云巢是騰訊雲自主研發的一站式雲原生有狀態服務平臺,基於Kubernetes容器化架構,為各類有狀態服務提供統一的集群管理、資源 ...
  • 一、開發背景 產品出設計稿要求做一個仿原生app簡訊驗證碼組件,花了兩小時搞出來一個還可以的組件,支持屏幕自適應,可以用於彈出框,或自己封裝的vue組件里,希望可以幫助那些被產品壓榨的同學,哈哈。😄 其核心思想就是利用一個輸入框使用css3,translate屬性,每輸入一次後向右位移一個單位位置 ...
  • 認識WEB **「網頁」**主要是由文字、圖像和超鏈接等元素構成,當然除了這些元素,網頁中還可以包括音頻、視頻以及Flash等。 **「瀏覽器」**是網頁顯示、運行的平臺。 「瀏覽器內核」(排版引擎、解釋引擎、渲染引擎) 常見的瀏覽器及其內核 瀏覽器 內核 備註 IE Trident IE、獵豹安全 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...