【01】HTML_day01_03-HTML常用標簽

来源:https://www.cnblogs.com/jiexiaobai/archive/2020/02/09/12286939.html
-Advertisement-
Play Games

typora copy images to: media 第01階段.前端基礎.HTML常用標簽 學習目標 理解: 相對路徑三種形式 應用 排版標簽 文本格式化標簽 圖像標簽 鏈接 相對路徑,絕對路徑的使用 1. HTML常用標簽 首先 HTML和CSS是兩種完全不同的語言,我們學的是結構,就只寫H ...



typora-copy-images-to: media


第01階段.前端基礎.HTML常用標簽

學習目標

  • 理解:
    • 相對路徑三種形式
  • 應用
    • 排版標簽
    • 文本格式化標簽
    • 圖像標簽
    • 鏈接
    • 相對路徑,絕對路徑的使用

1. HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言,我們學的是結構,就只寫HTML標簽,認識標簽就可以了。 不會再給結構標簽指定樣式了。

HTML標簽有很多,這裡我們學習最為常用的,後面有些較少用的,我們可以查下手冊就可以了。

1.1 排版標簽

排版標簽主要和css搭配使用,顯示網頁結構的標簽,是網頁佈局最常用的標簽。

1)標題標簽h (熟記)

單詞縮寫: head 頭部. 標題 title 文檔標題

為了使網頁更具有語義化,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的標題,即

標題標簽語義: 作為標題使用,並且依據重要性遞減

其基本語法格式如下:

<h1>   標題文本   </h1>
<h2>   標題文本   </h2>
<h3>   標題文本   </h3>
<h4>   標題文本   </h4>
<h5>   標題文本   </h5>
<h6>   標題文本   </h6>

顯示效果如下:

小結 :

  • 加了標題的文字會變的加粗,字型大小也會依次變大
  • 一行是只能放一個標題的
     傳智播客學前端,
   前端入門亦簡單。
   簡單知識簡單看,
   重點勤練寫三遍。
   標題一共六級選,
   具體效果刷新見。
          ------pink老師

2)段落標簽p ( 熟記)

單詞縮寫: paragraph 段落 [ˈpærəgræf] 無須記這個單詞

作用語義:

可以把 HTML 文檔分割為若幹段落

在網頁中要把文字有條理地顯示出來,離不開段落標簽,就如同我們平常寫文章一樣,整個網頁也可以分為若幹個段落,而段落的標簽就是

<p>  文本內容  </p>

是HTML文檔中最常見的標簽,預設情況下,文本在一個段落中會根據瀏覽器視窗的大小自動換行。

3)水平線標簽hr(認識)

單詞縮寫: horizontal 橫線 [ˌhɔrəˈzɑntl] 同上

在網頁中常常看到一些水平線將段落與段落之間隔開,使得文檔結構清晰,層次分明。這些水平線可以通過插入圖片實現,也可以簡單地通過標簽來完成,


就是創建橫跨網頁水平線的標簽。其基本語法格式如下:

<hr />是單標簽

在網頁中顯示預設樣式的水平線。

課堂練習:新聞頁面

4)換行標簽br (熟記)

單詞縮寫: break 打斷 ,換行

在HTML中,一個段落中的文字會從左到右依次排列,直到瀏覽器視窗的右端,然後自動換行。如果希望某段文本強制換行顯示,就需要使用換行標簽

<br />

這時如果還像在word中直接敲回車鍵換行就不起作用了。

此處有練習題

5)div 和 span標簽(重點)

div span 是沒有語義的 是我們網頁佈局主要的2個盒子 想必你聽過 css+div

div 就是 division 的縮寫 分割, 分區的意思 其實有很多div 來組合網頁。

span 跨度,跨距;範圍

語法格式:

<div> 這是頭部 </div>    <span>今日價格</span>

他們兩個都是盒子,用來裝我們網頁元素的, 只不過他們有區別,現在我們主要記住使用方法和特點就好了

  • div標簽 用來佈局的,但是現在一行只能放一個div
  • span標簽 用來佈局的,一行上可以放好多個span

後面後面講顯示模式的時候,會告訴大家

排版標簽總結

標簽名 定義 說明
標題標簽 作為標題使用,並且依據重要性遞減

段落標簽 可以把 HTML 文檔分割為若幹段落

水平線標簽 沒啥可說的,就是一條線

換行標簽
div標簽 用來佈局的,但是現在一行只能放一個div
span標簽 用來佈局的,一行上可以放好多個span

1.2 文本格式化標簽(熟記)

在網頁中,有時需要為文字設置粗體、斜體或下劃線效果,這時就需要用到HTML中的文本格式化標簽,使文字以特殊的方式顯示。

區別:

b 只是加粗 strong 除了可以加粗還有 強調的意思, 語義更強烈。

剩下的同理...

請同學們重點記住 前兩組 加粗 和 傾斜 後面兩組沒記住回來查

1.3 標簽屬性

所謂屬性就是外在特性 比如 手機的顏色 手機的尺寸 ,總結就是手機的。。

  • 手機的顏色是黑色
  • 手機的尺寸是 8寸
  • 水平線的長度是 200
  • 圖片的寬度 是 300

使用HTML製作網頁時,如果想讓HTML標簽提供更多的信息,可以使用HTML標簽的屬性加以設置。其基本語法格式如下:

<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
<手機 顏色="紅色" 大小="5寸">  </手機>

1.4 圖像標簽img (重點)

單詞縮寫: image 圖像

要想在網頁中顯示圖像就需要使用圖像標簽,接下來將詳細介紹圖像標簽以及和他相關的屬性。(它是一個單身狗)

語法如下:

<img src="圖像URL" />

該語法中src屬性用於指定圖像文件的路徑和文件名,他是img標簽的必需屬性。

<

border 後面我們會用css來做,這裡童鞋們就記住這個border 單詞就好了

註意:

  1. 標簽可以擁有多個屬性,必須寫在開始標簽中,位於標簽名後面。
  2. 屬性之間不分先後順序,標簽名與屬性、屬性與屬性之間均以空格分開。
  3. 採取 鍵值對 的格式 key="value" 的格式

比如:

    正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     帶有邊框的<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
    有提示文本的<br />
    <img src="cz.jpg" width="300" height="300" border="3" title="這是個小蒲公英" /><br />
    有替換文本的<br />
    <img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" />

此處有練習題

重點掌握點:

  • [ ] 請說出 圖像標簽那個屬性是必須要寫的?
  • [ ] 請說出 圖像標簽中 alt 和 title 屬性區別?

1.5 鏈接標簽(重點)

單詞縮寫: anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋 錨, 鐵錨 的

在HTML中創建超鏈接非常簡單,只需用標簽把文字包括起來就好。

語法格式:

<a href="跳轉目標" target="目標視窗的彈出方式">文本或圖像</a>
屬性 作用
href 用於指定鏈接目標的url地址,(必須屬性)當為標簽應用href屬性時,它就具有了超鏈接的功能
target 用於指定鏈接頁面的打開方式,其取值有_self和_blank兩種,其中_self為預設值,__blank為在新視窗中打開方式。

註意:

  1. 外部鏈接 需要添加 http:// www.baidu.com
  2. 內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href="index.html"> 首頁
  3. 如果當時沒有確定鏈接目標時,通常將鏈接標簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時為一個空鏈接。
  4. 不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈接。

重點掌握點:

  • [ ] 請說出 鏈接標簽那個屬性是必須要寫的?
  • [ ] 請說出 如何新視窗打開這個一個鏈接網頁的?

1.6 註釋標簽

在HTML中還有一種特殊的標簽——註釋標簽。如果需要在HTML文檔中添加一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字,就需要使用註釋標簽。

簡單解釋:

註釋內容不會顯示在瀏覽器視窗中,但是作為HTML文檔內容的一部分,也會被下載到用戶的電腦上,查看源代碼時就可以看到。

語法格式:

    <!-- 註釋語句 -->     快捷鍵是:    ctrl + /       或者 ctrl +shift + / 

註釋重要性:

pink老師 一句話說出他們:

註釋是給人看的,目的是為了更好的解釋這部分代碼是幹啥的, 程式是不執行這個代碼的

團隊約定

一般用於簡單的描述,如某些狀態描述、屬性描述等

註釋內容前後各一個空格字元,註釋位於要註釋代碼的上面,單獨占一行

推薦:

<!-- Comment Text -->
<div>...</div>

不推薦:

<div>...</div><!-- Comment Text --> 
    
<div><!-- Comment Text -->
    ...
</div>

2. 路徑(重點、難點)

實際工作中,我們的文件不能隨便亂放,否則用起來很難快速的找到他們,因此我們需要一個文件夾來管理他們。

目錄文件夾:

就是普通文件夾,裡面只不過存放了我們做頁面所需要的 相關素材,比如 html文件, 圖片 等等。

根目錄

打開目錄文件夾的第一層 就是 根目錄

頁面中的圖片會非常多, 通常我們再新建一個文件夾專門用於存放圖像文件(images),這時再插入圖像,就需要採用“路徑”的方式來指定圖像文件的位置。路徑可以分為: 相對路徑和絕對路徑

相對路徑

以引用文件之網頁所在位置為參考基礎,而建立出的目錄路徑。因此,當保存於不同目錄的網頁引用同一個文件時,所使用的路徑將不相同,故稱之為相對路徑。

路徑分類 符號 說明
同一級路徑 只需輸入圖像文件的名稱即可,如<img src="baidu.gif" />。

|
| 下一級路徑 | “/” | 圖像文件位於HTML文件同級文件夾下(例如文件夾名稱為:images) 如<img src="images/baidu.gif" />。 <

|
| 上一級路徑 | “../” | 在文件名之前加入“../” ,如果是上兩級,則需要使用 “../ ../”,以此類推, 如<img src="../baidu.gif" />。

|

pink老師 一句話說出他們:

相對路徑,是從代碼所在的這個文件出發, 去尋找我們的目標文件的,而 我們所說的 上一級 下一級 同一級 簡單說,就是 圖片 位於 HTML 頁面的位置

絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對,意指當所有網頁引用同一個文件時,所使用的路徑都是一樣的。

“D:\web\img\logo.gif”,或完整的網路地址,例如“http://www.itcast.cn/images/logo.gif”。

註意:

絕對路徑用的較少,我們理解下就可以了。 但是要註意,它的寫法 特別是符號   並不是 相對路徑的 /

3. 今日總結

總結今天的思路貫穿線:

4. 綜合案例: 聖誕

5. @拓展閱讀

5.1 錨點定位 (難點)

通過創建錨點鏈接,用戶能夠快速定位到目標內容。

創建錨點鏈接分為兩步:

1. 使用相應的id名標註跳轉目標的位置。 (找目標)
  <h3 id="two">第2集</h3> 

2. 使用<a href="#id名">鏈接文本</a>創建鏈接文本(被點擊的) (拉關係)  我也有一個姓畢的姥爺..
  <a href="#two">   

快速記憶法:

好比找個人辦事, 首先找到他,然後拉關係,最後看效果。

5.2 base 標簽

語法:

<base target="_blank" />

總結:

  1. base 可以設置整體鏈接的打開狀態
  2. base 寫到 之間
  3. 把所有的連接 都預設添加 target="_blank"

pink老師 一句話說出他們:

全體鏈接~ 到 ~ 全體集合 所有鏈接 以新視窗打開頁面 ~ 是

5.3 預格式化文本pre標簽

標簽可定義預格式化的文本。

被包圍在

 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

<pre>

  此例演示如何使用 pre 標簽

  對空行和 空格

  進行控制

</pre>

pink老師 一句話說出他們:

所謂的預格式化文本就是 ,按照我們預先寫好的文字格式來顯示頁面, 保留空格和換行等。

有了這個標簽,裡面的文字,會按照我們書寫的模式顯示,不需要段落和換行標簽了。但是,比較少用,因為不好整體控制。

5.4 特殊字元 (理解)

一些特殊的符號,我們再html 裡面很難或者 不方便直接 使用, 我們此時可以使用下麵的替代代碼。

雖然有很多,但是我們平時用的比較較少, 大家重點記住 空格 大於號 小於號 就可以了,剩下的回來查閱。

總結:

  1. 是以運算符&開頭,以分號運算符;結尾。
  2. 他們不是標簽,而是符號。
  3. HTML 中不能使用小於號 “<” 和大於號 “>”特殊字元,瀏覽器會將它們作為標簽解析,若要正確顯示,在 HTML 源代碼中使用字元實體

團隊約定

推薦:

   <a href="#">more &gt;&gt;</a>

不推薦:

   <a href="#">more >> </a>

5.5 html5發展之路

5.6 什麼是XHTML

XHTML 是更嚴格更純凈的 HTML 代碼。

  • XHTML 指可擴展超文本標簽語言(EXtensible HyperText Markup Language)。
  • XHTML 的目標是取代 HTML。
  • XHTML 與 HTML 4.01 幾乎是相同的。
  • XHTML 是更嚴格更純凈的 HTML 版本。
  • XHTML 是作為一種 XML 應用被重新定義的 HTML。
  • XHTML 是一個 W3C 標準。

5.7 HTML和 XHTML之間有什麼區別?

  • XHTML 指的是可擴展超文本標記語言
  • XHTML 與 HTML 4.01 幾乎是相同的
  • XHTML 是更嚴格更純凈的 HTML 版本
  • XHTML 是以 XML 應用的方式定義的 HTML
  • XHTML 是 2001 年 1 月發佈的 W3C 推薦標準
  • XHTML 得到所有主流瀏覽器的支持
  • XHTML 元素是以 XML 格式編寫的 HTML 元素。XHTML是嚴格版本的HTML,例如它要求標簽必須小寫,標簽必須被正確關閉,標簽順序必須正確排列,對於屬性都必須使用雙引號等。

6. @深入閱讀

HTML5的崛起之路

7. 預習內容

  • 表格標簽

  • 能夠通過表格標簽能夠寫出一個簡版表格數據展示

    例如:

    可以把你今天學習的內容放在表格內,再次作為總結


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

-Advertisement-
Play Games
更多相關文章
  • 前言 我不是名校畢業,更沒有大廠的背景,我只是一個畢業不到 2 年的普普通通的程式員,在摸爬滾打的工作這段時間里,深知了有一個「完整的知識體系」是非常重要的。當事人非常後悔沒有在大學期間知道這個道理…… 眾多大廠招人的需求也是非常註重此方面,畢竟我們不能單單隻是一個只會寫代碼的程式員,更應該成為一個 ...
  • 為了在伺服器上跑爬蟲,以及學SegNet,研究了一圈看來linux是必學品了。在自己電腦上安裝了一個 1。官網下載iso,一個linux dvd是穩定版,選之,另一個stream版是更新更快的測試版,裡面軟體更新。 https://www.centos.org/download/ 2。刻u盤,用Wi ...
  • 問題說明(環境:windows7,MySql8.0) 今天安裝好MySql後啟動MySql服務 啟動服務都失敗的就不要往下看了,自行百度解決。 打開客戶端秒退,但在cmd中是可以使用資料庫的。 正常來說只要能用就好了,但客戶端方便,就不想敲那一行代碼。就在網上找,百度,google,各種方法都試了。 ...
  • 一、Text 組件 屬性 textAlign: TextAlign.left, 文本對齊方式 maxLines: 1, 顯示最大行 overflow: TextOverflow.clip, 文本溢出的處理方式 clip:直接切斷溢出的文字。 ellipsis:在後邊顯示省略號(...) 常用 fad ...
  • 什麼是 Vue TCB 我自己平時經常會用到 Vue 來開發前端應用。所以,基於 Vue 的插件系統,封裝了一個 Vue 插件。 如何使用 1. 安裝 vue tcb 執行如下命令,安裝 vue tcb 2. 在主文件中引入 vue tcb 在你的 main.js 中加入如下代碼 在實際的使用過程中 ...
  • CSS Sprite CSS雪碧圖 為了減少http請求數量,加速網頁內容顯示,很多網站的導航欄圖標、登錄框圖片等,使用的並不是<image>標簽,而是CSS Sprite雪碧圖。 雪碧圖使用場景: 1、靜態圖片,不隨用戶信息的變化而變化 2、小圖片,圖片容量比較小 3、載入數量比較大 4、一些大圖 ...
  • 緩存設置: 編輯-首選項-暫存檔 改完除了C盤之外的其他盤 單位設置: 編輯-首選項-單位與標尺 將單位修改成像素 PS預設: 工具 (視窗-工具) 標尺 (視圖-標尺) 圖層 (視窗-圖層) 信息 (視窗-信息) 字元 (視窗-段落) 框選一塊區域後,可以在信息里查看尺寸相關 藉助輔助線切圖:拉好 ...
  • 在JS中,能用 . 的地方一般都可以用 [ ] 取代 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...