web前端(4)—— 常用標簽1

来源:https://www.cnblogs.com/yangva/archive/2018/11/11/9942441.html
-Advertisement-
Play Games

標題標簽h1~h6 顧名思義,這些就是把字體設置為大字體的,就如博客園的這個編輯器里的格式: 不信的話我們自己設置看看:好的,從本篇文章開始,我們需要動手了 ...


標題標簽h1~h6

顧名思義,這些就是把字體設置為大字體的,就如博客園的這個編輯器里的格式:

 

不信的話我們自己設置看看:好的,從本篇文章開始,我們需要動手了

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>標題</h1>
    <h2>標題</h2>
    <h3>標題</h3>
    <h4>標題</h4>
    <h5>標題</h5>
    <h6>標題</h6>
</body>
</html>

  

打開網頁看看:

文本樣式標簽:

 

<b></b>:加粗
<i></i>:斜體
<u></u>:下劃線
<s></s>:刪除線
<sup></sup>:上標 
<sub></sub>:下標
<em>或<strong>:特別強調某幾個字

 

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<b>b標簽</b>
<i>i標簽</i>
<u>u標簽</u>
<s>s標簽</s>
test<sub>sub標簽</sub>
test<sup>sup標簽</sup>
test<em>em標簽</em><strong>strong標簽</strong>test
</body>
</html>

  

測試:

 

 

 

段落標簽P 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p>asdjfasjdfjaweijfowjefojwaojfioawjefoijwefweafawefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwfafew</p>
<p>adfdsaf</p>
<p>
12312414
</p>
</body>
</html>

  

測試:

 

 

有朋友可能發現,p標簽就是一個p標簽就是一個段落,自動換行,並且如果沒滿一行也會自動換行,為什麼會這樣呢?像前面的就不會這樣

這就是塊級標簽(又叫行級標簽)的特點,不管內容有沒有占一行,它都會預設把一行占滿,而像前面的em,i,之類的這種內容多少就占多少,而且不會預設沾滿一行的就是內聯標簽

這個後期還有用到,不過太在意

 

超鏈接標簽a

 

超鏈接就是可以點擊並跳轉的標簽

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <a>去百度</a>
</body>
</html>

  測試:

 

發現沒有任何特殊的啊,就是文字。目前,這裡必須加上a標簽的屬性href才行:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <a href="www.baidu.com">去百度</a>
</body>
</html>

  

測試:

 

 終於變色了,點擊看下呢:

 

 然後發現居然報錯404了,這個404是狀態碼,服務端返回來的狀態碼,關於狀態碼,詳見鄙人的另一篇博文:洗禮靈魂,修煉python(55)--爬蟲篇—知識補充—RFC 2616 http狀態碼

 

而且您可以看到網頁地址欄上面的地址變了,這明顯不對對吧?那麼是哪裡出了問題呢?

 

註意了,這是很多初學者容易犯的錯,給a標簽加href屬性時,一定要帶上協議,常見的協議有:ftp,http,https,file

所以這裡必須要帶上http,或者https:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <a href="http://www.baidu.com">去百度</a>
</body>
</html>

  

測試:

發現確實可以調整到百度網站了,這個不太好展示效果,只能各位自己測試了。我這裡截了個圖:

 

 

 當我把游標放上去還未點擊時,瀏覽器左下角會預載入即將訪問的鏈接,這個現象我希望各位以後可以多多註意下

 

當然a標簽還有其他的屬性:

target

  _blank 在新的網站打開鏈接的資源地址

  _self 在當前網站打開鏈接的資源地址 title: 表示滑鼠懸停時顯示的標題

 

比如 <a href="http://www.baidu.com" target="_blank">去百度</a>

 

 這個就自己試了

 

其他鏈接方式:(以後會用到)

  • 目標文檔為下載資源 例如:href屬性值,指定的文件名稱,就是下載操作(rar、zip等)
  • 電子郵件鏈接 前提:電腦中必須安裝郵件客戶端,並且配置好了郵件相關信息。 例如:<a href="mailto:[email protected]">聯繫我們</a>
  • 返回頁面頂部的空鏈接或具體id值的標簽 例如:<a href="#">內容</a><a href="#id值">內容</a>
  • javascript:是表示在觸發<a>預設動作時,執行一段JavaScript代碼。 例如:<a href="javascript:alert()">內容</a>
  • javascript:;:表示什麼都不執行,這樣點擊<a>時就沒有任何反應 例如:<a href="javascrip:;">內容</a>

 

列表標簽 ul,ol,li

網站頁面上一些列表相關的內容比如說物品列表、人名列表等等都可以使用列表標簽來展示。通常後面跟<li>標簽一起用,每條li表示列表的內容

 

ul表示無序列表,ol表示有序列表。這個如果您用過辦公軟體,相信會見過這個。然後博客園這個編輯器也有這個東西:

最開始是這樣的:

 

test1

test2

test3

  

添加有序列表:

 

結果:

  1. test1
  2. test2
  3. test3

 

修改成無序列表:

 

結果:

 

  • test1
  • test2
  • test3

 

大概什麼樣子大家應該懂了吧?

 

好的,開始自己寫一個看看:

  <!-- 無序列表 type可以定義無序列表的樣式-->
    <ul type="circle">
        <li>我的賬戶</li>
        <li>我的訂單</li>
        <li>我的優惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type可以定義有序列表的樣式 -->
    <ol type="a">
        <li>我的賬戶</li>
        <li>我的訂單</li>
        <li>我的優惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

  

裡面那個type和circle即ul和ol各自的屬性,circle表示是一個圓圈,類似句號的標誌,type即表示以什麼排序方式,給一個“a”表示用字母開始排序

 測試結果:

其他相關:

ol標簽的屬性:

type:列表標識的類型

  • 1:數字
  • a:小寫字母
  • A:大寫字母
  • i:小寫羅馬字元
  • I:大寫羅馬字元

列表標識的起始編號

  • 預設為1

ul標簽的屬性: type:列表標識的類型

  • disc:實心圓(預設值)
  • circle:空心圓
  • square:實心矩形
  • none:不顯示標識

換行標簽 <br>

 

<br>標簽用來將內容換行,其在HTML網頁上的效果相當於我們平時使用word編輯文檔時使用回車換行。

 

分割線 <hr>

 

<hr>標簽用來在HTML頁面中創建水平分隔線,通常用來分隔內容

 

特殊符號

瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行。 所有連續的空格或空行都會被算作一個空格。需要註意的是,HTML代碼中的所有連續的空行(換行)也被顯示為一個空格

 

常用的特殊字元:

內容代碼
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版權 &copy;
註冊 &reg;

 

好的,常用標簽暫且到此


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 管理html的bundle依賴 html webpack plugin可以自動給html添加bundle文件 清理dist文件夾 ...
  • 載入Css webpack並不能處理js以外的靜態資源,通過loader來支持他們 載入圖片 file loader可以處理圖片資源,字體資源 載入數據 ...
  • 文章目錄 html代碼用JS動態載入進頁面 JS判斷用戶訪問的是PC還是mobile或者微信瀏覽器 判斷瀏覽器的簡單有效方法 點擊某個div區域之外,隱藏該div 如何在手機上禁止瀏覽器的網頁滾動 改變type=file預設樣式,"瀏覽"等字體 js使用console.time列印代碼執行時間 js ...
  • 1、js動態設置html的字體大小 設計稿寬度750px,設備寬度350px,此時HTML 的font-size:50px,及1rem=50px; 假設一元素在設計稿上寬度為750px,750/100=7.5rem(7.5*50=375px)。 計算方法:設計稿的尺寸 / 100 = XXX rem ...
  • 一 原型: 1 定義:原型是function對像的一個屬性,他定義了構造函數製造出的對象的公共祖先; 通過該構造函數產生的對象,可以繼承該原型的屬性和方法。 原型也是對像。prototype; Person.prototype.name = 'jams'; function Person(){ } ...
  • 屬性 HTML標簽可以設置屬性,屬性一般以鍵值對的方式寫在開始標簽中 1.HTML標簽除一些特定屬性外可以設置自定義屬性,一個標簽可以設置多個屬性用空格分隔,多個屬性不區分先後順序。 2.屬性值要用引號包裹起來,通常使用雙引號也可以單引號。 3.屬性和屬性值不區分大小寫,但是推薦使用小寫... ...
  • 主要的信息都是來自於下方所示的網站 https://webpack.docschina.org/configuration 從 webpack 4.0.0 版本開始,可以不用通過引入一個配置文件打包項目。然而,webpack 仍然還是高度可配置的 ,並且能夠很好的滿足需求。 首先總結下個人理解的,w ...
  • 最近碰到的問題,有個數組,數組元素是對象,該對象的結構就如樹的parent表示法的節點一樣。形象點講就是該數組存放了樹的所有“葉子節點”,並且葉子節點記憶體有父節點,一直到根節點為止,就如存了一條從葉子節點到根節點路徑。 現在有要求是將這個數組轉成一個children表示法的對象,即從根節點開始,每個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...