Web前端學習筆記 HTML常用標籤

2021-10-03 03:10:08 字數 2481 閱讀 1987

文字標題標籤: h1  -  h6  

特點:有預設樣式:文字會加粗、字型大小不一樣

​ h2-h6 : 板塊的標題、一段敘述性文字的標題。

注:​ h1 - h6 不能互相巢狀

文字的加粗&文字的傾斜

​ 加粗:語義化:表示強調​ 傾斜:

下劃線、水平線、換行符

​ 下劃線:

​ 水平線: ​ 換行符:

段落標記

一般用來放一段敘述性文字。

注:​ p標籤不能進行相互巢狀

​ p標籤裡面不能巢狀 h1- h6

轉義字元:

​   不換行的空格

​ < > 左右尖角號

塊|容器標籤

​ 作用:劃分網頁結構!!!

無序列表:

​ 特點:預設情況下 : 每乙個li前面都存在乙個列表符號(實心圓點)

​ 怎麼用:實現新聞列表、頁面的主導航

有序列表:

​ ​ 新聞條新聞條新聞條新聞條

​ 新聞條新聞條新聞條新聞條

​ 特點:列表符號預設為數字

​ 拓展:更改列表符號

type="a" 以小寫英文本母排序

type="a" 以大寫英文本母排序

type="i" 以小寫羅馬字母排序

type="i" 以大寫羅馬字母排序

start="" 控制排序的起始符號,只能接收數字。

自定義列表:

​ ​

a標籤的屬性:

新聞 //空連線,在當前頁面進行跳轉。

新聞 //空連線,不會跳轉 (用來模擬乙個按鈕)

​ target=""

屬性值:

_self 預設值:在當前視窗開啟

_blank 新建乙個視窗開啟目標位址。

​ title="" 屬性(不僅僅使用在a上面,大部分標籤都支援)

用來做提示資訊。

​      src="的url"  必須存在

​ alt="" 必須存在

​ alt屬性的作用:

a:文字替換(當載入不出來的時候,顯示alt裡面的文字)

b:搜尋引擎檢測不到裡面的文字,會查詢alt裡面的文字 (seo優化)

​ title="" :

​ title屬性的作用:

​ a:提示文字

​ b:當作的乙個小標題

​ width="" 控制的寬度

​ height="" 控制的高度

​ border="" 給新增邊框

相對路徑的寫法:

​ 1:同級找同級檔案 ./直接寫目標檔名稱

​ 2:父級找子級 ./資料夾的名稱/目標檔案

**的作用: 

​ 顯示資料!

**標籤:

​ table **

​ tr 行

​ td 列

**的屬性:

​ width="" 寬 (table上面新增 整個**的寬,如果新增在td上 每列的乙個寬)

​ height="" 高

​ border="" 新增邊框

​ bordercolor="" 邊框顏色

​ cellpadding="" 內容距離邊框的乙個間距

​ cellspacing="" 邊框與邊框之間的間距

​ align="" 水平對齊方式 屬性值:left/ right/ center

​ valign="" 垂直對齊方式 屬性值:top/ bottom/ middle

單元格的合併:

只要跨行:就是合併行

如果沒有跨行:就是合併列

​ 行合併: rowspan="合併的單元格的數量"

​ 列合併: colspan="合併的單元格的數量"

注:無論合併行 還是 合併列 都是給td新增屬性。和誰合併就刪除誰。

前端學習筆記,HTML常用標籤02

table是 th用於表示,的標題 th的用法和td一樣 tr用於表示行 乙個table標籤 有幾個tr,表示有幾行 td表示列 乙個tr裡有幾個td,表示有幾列 table標籤屬性 border 1 設定 邊框的寬度為1pixel 畫素 width 500 設定 寬度為500pixel heigh...

Web前端學習筆記

學習用時 5小時 學習目標 零基礎學院 第二天 目標是否達成 已達成 答 html 指的是超文字標記語言 hyper text markup language html5是最新的html標準,擁有更豐富的語義 圖形以及多 元素等內容。答 在網際網路上有許多不同的文件,只有了解文件的型別,瀏覽器才能正...

Web前端 Html部分筆記(二)

作用 用於給文字新增標題語義 格式說明 作用讓內容換行 格式aaaaa bbbbb 說明br的意思是不另起乙個段落進行換行,如果需要另起了乙個段落,則應該使用p標籤來做。作用告訴瀏覽器哪些文字是乙個段落 格式 xx 說明 在瀏覽器中會單獨佔一行且自動換行。p標籤與br標籤的區別 1 相同之處 br和...