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
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...