HTML基礎(基於黑馬程式員視頻的學習筆記)

来源:https://www.cnblogs.com/ruchu045/archive/2022/09/27/16736424.html
-Advertisement-
Play Games

HTML標簽 1、標題和段落 <h1>一級標題</h1> ~ <h6>六級標題</h6>是標題標簽,獨占一行,均有加粗效果,且字體逐漸變小 <h1>一級標題</h1> ​ 一級標題 ​ <h6>六級標題</h6> ​ 六級標題 ​ <p>p是段落標簽,獨占一行</p> ​ p標簽是段落標簽,獨占一行 ...


HTML標簽

1、標題和段落

<h1>一級標題</h1> ~ <h6>六級標題</h6>是標題標簽,獨占一行,均有加粗效果,且字體逐漸變小

<h1>一級標題</h1>

一級標題

<h6>六級標題</h6>
六級標題
<p>p是段落標簽,獨占一行</p>

p標簽是段落標簽,獨占一行

<br> (換行)

 

<hr> (一行橫線)

 

2、文本格式化標簽

標簽說明效果
<b></b> <strong></strong> 加粗 加粗
<u></u> <ins></ins> 下劃線 下劃線
<i></i> <em></em> 傾斜 傾斜
<s></s> <del></del> 刪除線 刪除線

其中,strong、ins、em、del表示的強調語義更強烈,更推薦

 

3、媒體標簽

圖片標簽:

<img src="" alt="">

其中路徑中的./表示當前的路徑,可用./文件名也可直接文件名獲取同級文件,預設寬高等比縮放(只需給出width和height中的一個值)

如:

<img src="C:\xxx.jpg" alt="" title="title文字在滑鼠懸停時顯示" width="60%" height="">

 

音頻標簽:

<audio src="" controls></audio>

controls:顯示播放控制項,autoplay:自動播放(部分瀏覽器不支持),loop:迴圈播放

如:

<audio src="C:\xxx.wav" controls></audio>

視頻標簽:

<video src=""></video>

controls:顯示視頻控制項,autoplay:自動播放(谷歌瀏覽器需配合muted屬性靜音播放),loop:迴圈播放

如:

<video src="C:\xxx.mp4" controls></video>

超鏈接:

<a href="目標網頁.html">超鏈接</a>

target:_self,預設值,在當前視窗跳轉;_blank,在新視窗跳轉。

如:

<a href="www.baidu.com" target="_blank">跳轉百度</a>

跳轉百度

開發初期,不知道跳轉地址,可以將href的值書寫為 #

 

4、列表標簽

無序列表

ul表示無需標簽的整體,用於包裹li標簽

li標簽表示無序列表的每一項,用於包含每一行的內容

ul中只能包含li標簽,li標簽中可以包含任何內容

如:

<ul>
<li>蘋果</li>
<li>香蕉</li>
</ul>
  • 蘋果
  • 香蕉

 

有序列表

ol表示無需標簽的整體,用於包裹li標簽

li標簽表示無序列表的每一項,用於包含每一行的內容

ol中只能包含li標簽,li標簽中可以包含任何內容

如:

<ol>
<li>蘋果</li>
<li>香蕉</li>
</ol>
  1. 蘋果
  2. 香蕉

 

自定義列表

dl表示自定義列表的整體,用於包裹dt/dd標簽

dt表示自定義列表的主題

dd表示自定義列表的針對主題的每一項內容

dd會預設顯示縮進效果,dl中只能包含dt/dd標簽,dt/dd標簽中可以包含任何內容

如:

<dl>
<dt>幫助</dt>
<dd>指南</dd>
<dd>xx</dd>
</dl>
幫助
指南
xx

 

5、表格標簽

table表示整體,可用於包裹多個tr

tr表示表格的每一行,可用於包裹td

td表示表格單元格,可用於包裹內容

表格屬性:

border:邊框寬度,width:表格寬度,height:表格高度(寬高設置只對tbody有效,但一般寬高在CSS里設置)

caption:表格標題,書寫在table標簽內部,th:表頭單元格(有加粗效果),書寫在tr標簽內部

表格結構標簽包含theadtbodytfoot,分別表示表頭、表主體、表底,表格標簽內部用於包裹tr標簽,可省略不寫

合併單元格:(保留左/上原則)

rowspan:跨行合併,屬性值:合併單元格的個數

colspan:跨列合併,屬性值:合併單元格的個數

如:

<table>
<caption><strong>學生表</strong></caption>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td rowspan="2">14</td>
<td>女</td>
</tr>
<tr>
<td>小紅</td>
<!-- <td>15</td> //刪除該行 -->
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tfoot>
</table>
學生表
nameagesex
小明 14
小紅
... ... ...

 

6、表單標簽

input系列標簽:根據type屬性不同,展示不同效果。

標簽名type屬性值說明
input text 文本框,輸入單行文本
password 密碼
radio 單選框
checkbox 多選框
file 文件選擇
submit 提交
reset 重置
button 普通按鈕,預設無功能,配合JS使用

text/password:placeholder屬性表示占位符

radio:含有相同name屬性的為一組,checked預設選中

checkbox:checked預設選中

file:multiple表示多文件選擇

submit、reset、button:需要配合form(表單域標簽)使用

button標簽是雙標簽,更便於包裹其他內容:文字圖片等,Google瀏覽器中button預設是提交(submit)按鈕

如:

<form action="">
文本框:<input type="text" placeholder="請輸入文字">
<br>
密碼:<input type="password" placeholder="請輸入密碼">
<br>
性別:<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
<br>
愛好:<input type="checkbox" checked>
<br>
多文件選擇:<input type="file" multiple>
<br>

<input type="submit">
<input type="reset">
<input type="button" value="按鈕">
<br>

<button>我是按鈕</button>
<button type="submit">提交button</button>
<button type="reset">重置button</button>
<button type="button">無用button</button>
</form>

 

 

select下拉菜單標簽:select:下單菜單整體,option:下拉菜單的每一項

selected:下單菜單的預設選中

textarea標簽:cols規定文本域內可見寬度,rows規定文本域內可見行數(可通過右下角調整大小,實際推薦使用CSS設置樣式)

label標簽:實現點擊文字即勾選

①用label標簽把內容包裹,表單添加id屬性,label標簽for屬性設置對應id

②直接用label把內容和標簽標簽一起包裹,把label標簽的for屬性刪除

如:

<select>
<option>北京</option>
<option>上海</option>
<option selected>廣州</option>
<option>深圳</option>
</select>

<textarea cols="40" rows="10"></textarea>

性別:<input type="radio" name="sex" id="man"><label for="man">男</label> <!-- 第一種方法 -->
<label><input type="radio" name="sex" checked>女</label> <!-- 第二種方法 -->

 

 

7、語義化標簽

沒有語義的佈局標簽:

div:一行只顯示一個

span:一行可顯示多個

如:

<div>
this is div
</div>
<div>
this is div
</div>

<span>this is span</span>
<span>this is span</span>

 

有語義的佈局標簽:

header:網頁頭部

nav:網頁導航

footer:網頁底部

aside:網頁側邊欄

section:網頁區塊

article:網頁文章

 

 

8、字元實體

源碼中即使輸入多個空格,網頁端也只會識別一個

 

  

HTML骨架標簽說明

  • <!DOCTYPE html>:文檔類型聲明,告訴瀏覽器該網頁的HTML版本

  • <html lang="en">:標識網頁使用的語言,常見:zh-CN簡體中文,en英文

  • <meta charset="UTF-8">:標識網頁使用的字元編碼,開發統一使用UTF-8即可

    • 常見的字元編碼:

    • UTF-8:萬國碼,國際化的字元編碼,收錄了全球語言文字

    • GB2312:6000+漢字

    • GBK:20000+漢字

  • <meta http-equiv="X-UA-Compatible" content="IE=edge">,解決IE相容性差

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

    • 寬度 = 設備寬度 ,移動端網頁的時候用

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

-Advertisement-
Play Games
更多相關文章
  • 準備工作 一臺Linux(Centos7為例)伺服器。 安裝Docker服務。 安裝並啟動SqlServer容器服務。 編寫Shell文件 給出一個備份的範例 #!/bin/bash #設置mssql備份目錄 folder=/var/opt/mssql/data/databack/ day=`dat ...
  • 風裡雨里,我在深圳機場等你,口說無憑,上圖! 這是一段很長的故事!以前倒也不曾提過~ 銀河證券和騰訊雲資料庫長久以來並肩作戰,情比金堅,我們的故事日前在深圳寶安機場上映 他說:做好國產化分散式改造,就用騰訊雲資料庫。 我說:做國產資料庫,我是認真的。 誕生於2007年的騰訊雲資料庫現已歷經十四年的錘 ...
  • 1 導讀 數據的一致性是數據準確的重要指標,那如何實現數據的一致性呢?本文從事務特性和事務級別的角度和大家一起學習如何實現數據的讀寫一致性。 2 一致性 1.數據的一致性:通常指關聯數據之間的邏輯關係是否正確和完整。 舉個例子:某系統實現讀寫分離,讀資料庫是寫資料庫的備份庫,小李在系統中之前錄入的學 ...
  • 開心一刻 今天,她給我打來電話 她:你明天陪我去趟醫院吧 我:怎麼了 她:我懷孕了,陪我去打胎 我:他的嗎 她:嗯 我心一沉,猶豫了片刻:生下來吧,我養! 她:他的孩子,你不配養! 我:我隨孩子姓 需求背景 最近接到一個數據遷移的需求,舊系統的數據遷移到新系統;舊系統不會再新增業務數據,業務操作都在 ...
  • 本文主要記錄了關於fragment的四種跳轉方式: 1、從同一個Activiy的一個Fragment跳轉到另外一個Fragment 2、從一個Activity的Fragment跳轉到另外一個Activity 3、從一個Activity跳轉到另外一個Activity的Fragment上4、從一個Act ...
  • 在Xcode 項目執行:Run Script 時,則標識:${SYMROOT} . 更改括弧類型。 例如:BUILD 號自增,編譯完成後自動copy 某文件至目標文件夾等: cp -R ${BUILD_DIR}/${CONFIGURATION}-iphoneos/XXXX.bundle ${SRCR ...
  • 一、CSS選擇器 1、標簽選擇器 選中所有的該標簽 標簽名 { CSS屬性名:屬性值;} 2、類選擇器 .類名 { CSS屬性名:屬性值;} 所有標簽都有class屬性,class屬性的屬性值稱為類名 類名可以由數字、字母、下劃線、中劃線組成,但不能以數字或中劃線開頭 一個標簽可以有多個類名,類名之 ...
  • #背景 學習前端新框架、新技術。如果需要做一些資料庫的操作來增加demo的體驗(CURD流程可以讓演示的體驗根據絲滑) 最開始的時候一個演示程式我們會調用後臺,這樣其實有一點弊端,就是增加了開發和維護成本,簡單的一個demo不應該勞師動眾 後來我會在demo中使用一些websql,奈何,websql ...
一周排行
    -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版本說明 機器同時安裝了 ...