HTML標簽參考(一)

来源:https://www.cnblogs.com/pandawind/archive/2018/11/28/10029918.html
-Advertisement-
Play Games

• html中的標簽數量是很多的,據人統計大概有300個左右,並且每年都會以20-30個的速度增加著,但是這麼多的標簽我們不必都去記住,因為很多標簽都是不常用的或者可以用基礎的標簽搭配組合,實際上我們需要掌握的大概在30個左右。 • 在前端開發中我們要知道,並不是你用的技術多麼先進就顯得多麼厲害,我... ...


hi,小哥哥小姐姐們,我們今天要說的是前端的入門,卻也是十分重要的意識的培養哦!

• html中的標簽數量是很多的,據人統計大概有300個左右,並且每年都會以20-30個的速度增加著,但是這麼多的標簽我們不必都去記住,因為很多標簽都是不常用的或者可以用基礎的標簽搭配組合,實際上我們需要掌握的大概在30個左右。

• 在前端開發中我們要知道,並不是你用的技術多麼先進就顯得多麼厲害,我們要考慮到代碼的可讀性以及後期的可維護性,用常見的標簽來寫才會讓其他人都能讀懂你的代碼。

• 代碼中還有一點很重要的就是要勤寫註釋喲~ 順便一提在html中的註釋形式是<! – – your code – – >

好了前言說完了,我們正式開始介紹一些標簽吧!

(這裡的標簽都是屬於html4中的內容,html5會有新的標簽和新的內容,我在後面的文章中再介紹。)

幾個基礎的標簽

• p標簽

<p></p>是段落標簽,在<p></p>中間寫的內容會當做一個段落來處理。

p標簽的特點是獨占一行,並且段落上下都會有一定的間隔距離。

• 標題標簽 h1-h6

標題標簽的作用是著重顯示文字,一般用在標題上,它會將裡面的文字加粗放大並且獨占一行。其中h4的預設大小是正常的文字大小,不過是加粗的。

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

• strong標簽

<strong></strong>標簽的作用是將裡面的文字加粗處理。

• em標簽

<em></em>的作用是將裡面的文字變成斜體。

• del標簽

<del></del>是刪除標簽,它會在裡面的文字的中間畫一條橫線,一般在打折的時候使用。

• address 標簽

<address></address>是地址標簽,它會將裡面的內容變成斜體並且獨占一行。

這六個是很基礎很簡單的標簽,作用也是顯而易見,還有另外一種結構化標簽,它們沒有特殊的效果,而是用來當做容器來盛放其他的標簽,這有點類似於每個家庭中都會單獨分出來廚房卧室大廳等區域,然後每個區域中還有各種各樣的設備,這裡的家庭中的區域就是我們的結構化標簽的作用。

結構化標簽還有另外一個作用就是用來為裡面的子元素設置樣式。一般的元素如果某一條屬性沒有被開發者設置樣式的話,它會自動繼承父級元素的相應屬性的樣式。

比如我們現在有三個p標簽,我們想讓三個p標簽裡面的文字都變成紅色,給三個p標簽都寫上color:red 是非常麻煩的,最簡單的方法是將三個p標簽都放到一個結構化標簽裡面,給這個結構化標簽一個color:red的樣式,這樣裡面的三個p標簽就都會有這個樣式了。

這兩點作用是最常見的,因此我們在寫一個頁面之前,最先考慮的就是結構問題,因此一般先寫結構化標簽。

下麵我們就介紹最常見的兩個結構化標簽。

• div

<div></div>標簽可以說是我們在前端開發中用的最多的標簽了。

• span

<span></span>標簽裡面多數情況下盛放文字或者小icon之類的小物件。

我們現在為div標簽設置一下樣式,並且在中間加一些文字。

<div style=”width: 100px; height:100px; 這是一個實例的結構化標簽,一切正常</div>

我們發現文字會在這個div標簽的邊界處自動換行,也就是說這個div標簽圈定了一個範圍,裡面的文字或者其他標簽都預設在這個範圍裡面顯示。

但是當我們在中間書寫的不是中文而是一串英文字元的時候,我們會發現這一串英文字元在div的邊界處並沒有換行,而是一直顯示下去,這是為什麼呢?

文字分隔符與編碼集

• 這是因為我們的每一個漢字,電腦都會認出來是一個單獨的單詞,每一個漢字都會預設地和其他漢字分隔開,但是英文字母卻不會預設地分隔開,因為電腦不知道多少個英文字母才算是一個單詞,因此我們需要手動為其添加分隔符。

而這個分隔符我們也不陌生,就是我們常用的空格,只要我們在這一串字元中間加幾個空格,那麼被空格隔開的字元就會被當做是一個單詞從而與其他的單詞分隔開。

那麼現在問題來了,空格的作用是當做分隔符來使用,並不是我們所想的那種空白的一個格,那麼我們怎麼在html中寫空白格呢?

• 這裡我們就要提到一個名詞叫做編碼集了。我們在書寫html的時候,很多特殊的符號是無法寫出來的,這個時候我們只能用編碼來讓瀏覽器識別我們所想的符號。編碼的格式是&編碼; 千萬不能忘記後面的分號喲~

• 空格的編碼就是&nbsp; 當我們寫多個&nbsp;的時候,在頁面中我們也就可以看到多個空白格了。

• 其次,用來當做標簽的尖括弧<>也是無法正常通過符號來顯示出來的,我們同樣需要用編碼集讓瀏覽器識別出來。< 小於號的編碼是&lt; less than的意思,同理,> 大於號的編碼時&gt; great than的意思。我們只要在html中寫這兩個編碼,那麼大於號和小於號就可以正常顯示出來了喲~我記得有一個表情是 &gt;_&lt;~

• 同樣的,回車也是屬於分隔符,在html中回車是沒有作用的,我們想要在網頁上讓文字顯示出回車換行的效果的話,編碼同樣也是沒有辦法實現的,我們需要一個標簽叫做<br>標簽,這個標簽的作用就是換行。w3c標準中提到:<br> 標簽是空標簽(意味著它沒有結束標簽,因此這是錯誤的:<br></br>)。在 XHTML 中,把結束標簽放在開始標簽中,也就是 <br />。

下一篇我們會繼續教給大家HTML里更多的標簽


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

-Advertisement-
Play Games
更多相關文章
  • 我的Android studio版本是2.2版本 1.Ctrl+z是撤銷快捷鍵 2.如果Ctrl+z 掉的內容,又反悔了,快捷鍵為:Ctrl + Shift + z。 ...
  • 一,效果圖。 二,代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript 變數</title> </head> <body> <script> var x = 5; var y = 6; var z = x ...
  • 1.偽類與偽元素的區別? 1) 定義區別 2) 語法區別 3) 偽類/偽元素一覽表 2. css樣式優先順序,各自的權重 3.常見的DOM操作有哪些? 主要操作包括:查找節點,新建節點,添加節點,刪除節點,修改節點;開發中,我們用到最多的是element類型,用於表現HTML元素,提供了對元素標簽名、 ...
  • 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 【年末促銷】葡萄城 2018 歲末福利火熱放送中 原文轉載自 微信公眾號 justjavac 早起看手機,結果發現我的微信群炸了,未讀消息 999+,大家都在討論 event-stream 事件。打開 twi ...
  • 1.問題起源 在平時的業務開發寫CSS中,為了滿足頁面佈局,元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些佈局問題,但是也帶了一些副作用影響,比如,父元素高度塌陷,我們有好幾種可以清除浮動的方法,最常用的就是設置父元素的overflow:hidden這個屬性,每次在寫代碼的時候總是這樣寫 ...
  • 網上的相關教程非常多,基礎知識自行搜索即可。 習題主要選自Orelly出版的《數據結構與演算法javascript描述》一書。 參考代碼可見: "https://github.com/dashnowords/blogs/tree/master/Structure/graph" 一.圖的基本知識 基本概 ...
  • 轉載請註明出處 @[toc] .attr() 1. .attr() 的四種用法 大致用法: 調用形式:$("xxx").attr(attrName); 獲取匹配到的所有元素中的第一個元素的指定屬性的屬性值. 調用形式:$("xxx").attr(attrName,value): 設置/新增匹配到的所 ...
  • 面試的間隙回頭複習了一下node,感覺node就像一個膠帶,把V8和libuv粘在了一起。 V8毫無疑問,負責解析執行JavaScript,相當於語言層面的橋梁;而libuv則是負責操作系統底層功能的封裝,例如基於IOCP的event loop、file system、non-blockiong n ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...