當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【HTML】重点知识内容~快速上手

發(fā)布時間：2024/3/12 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML】重点知识内容~快速上手小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

推薦前端學(xué)習(xí)路線如下：

HTML、CSS、JavaScript、noodJS、組件庫、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 碼源、NextJS、React Native、后端內(nèi)容。。。。。。

HTML基本結(jié)構(gòu)：

<html></html> ? ? ?根<head></head> ? ? ?頭部 ?放置頁面相關(guān)信息<body></body> ? ? ?身體 ?放置內(nèi)容<title><title> ? ? 標(biāo)題

網(wǎng)頁結(jié)構(gòu)展示：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body>【HTML】重點(diǎn)知識內(nèi)容~快速上手</body> </html>

常用標(biāo)簽：

h1~h6

表示一級到六級標(biāo)簽文本標(biāo)題標(biāo)簽自帶加粗，有自己的文本大小，并且獨(dú)占一行，有默認(rèn)間距

p

標(biāo)識一個段落(段落與段落之間有段間距)；

默認(rèn)情況，在網(wǎng)頁上，頁面上的內(nèi)容不會按照我們寫的代碼進(jìn)行換行。`回車` 會被渲染成一個 `空格`；

<p>這是一段文字</p><p>這是一段文字 </p>

img

image的縮寫，img是一個單標(biāo)簽，功能是在一個網(wǎng)頁上展示一個圖片。

屬性

src
source的縮寫，表示圖片的源，在src可以設(shè)置圖片地址
alt
當(dāng)圖片加載失敗時顯示對應(yīng)的alt中的文本內(nèi)容
title
當(dāng)鼠標(biāo)放在圖片上時，顯示一段提示文字
width 寬
height 高

src

可以是絕對路徑，也可以是相對路徑

絕對路徑
可以使用電腦中的文件的路徑?E:\H5\02_HTML\代碼\xxx.jpg
也可以使用網(wǎng)絡(luò)路徑?https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png?未來我們的網(wǎng)頁上，最后上線，幾乎都是網(wǎng)絡(luò)地址
相對路徑
一般情況下，我們在做靜態(tài)頁面時，頁面中的背景圖，圖標(biāo)等不常更改的資源。一般存放在項(xiàng)目中，做相對路徑引入。

相對路徑記住兩個概念?./?和?../，分別表示當(dāng)前目錄和上一級目錄。一般我們在正常的項(xiàng)目結(jié)構(gòu)中。

推薦一個使用方法，在src中直接輸入?./?接下來根據(jù)提示選擇對應(yīng)的文件夾及對應(yīng)的文件

- 項(xiàng)目文件夾- css- img- js- 網(wǎng)頁1.html- 網(wǎng)頁2.html

大小設(shè)置

我們可以給圖片添加width和height兩個屬性，設(shè)置圖片的寬高

數(shù)字
百分比

注意！！！寬高只要設(shè)置一邊，就會等比縮放，如果都設(shè)置，除非都是等比例縮放，否者會變形

文字的樣式屬性（強(qiáng)調(diào)屬性）

em i

可以讓文字傾斜，em表示強(qiáng)調(diào)，i表示文字斜體。在項(xiàng)目中，很多人把?i?作為圖標(biāo)展示的標(biāo)簽。

stong b

可以讓文字加粗，stong表示強(qiáng)調(diào)，b表示文字加粗。

br

可以在網(wǎng)頁中實(shí)現(xiàn)換行，就像是一個回車。
如果我們在項(xiàng)目開發(fā)中，主動頻繁使用?br，說明寫的有問題

hr

分割線，在網(wǎng)頁上實(shí)現(xiàn)一條橫線，也很少使用

特殊標(biāo)簽：

2<sup>3</sup> 上標(biāo) 0<sub>2</sub> 下標(biāo) <del></del> 刪除線 <u></u> 下劃線 <s><s> 刪除線

特殊符號

&nbsp 空格 &gt 大于號 &lt 小于號 &copy 版權(quán)

a

超鏈接，在網(wǎng)頁上，存在著很多的超鏈接。一定要會用

屬性

href 必填屬性
超鏈接跳轉(zhuǎn)路徑的設(shè)置，可以是網(wǎng)址，也可以是相對路徑
target 設(shè)置窗口的打開方式； _blank 頁面打開時在新的窗口中打開，如果不設(shè)置，則在當(dāng)前窗口打開； _self 默認(rèn)值，打開本窗口
title
當(dāng)鼠標(biāo)放在超鏈接上時，顯示一段提示文字

列表

有序列表
無序列表
定義列表

無序列表在網(wǎng)頁中應(yīng)用最多

有序列表

type類型：

type="A/a/I/i/1"

start="4"

定義開始位置，屬性值必須是數(shù)字。

無序列表

type類型：

type="disc" 實(shí)心圓

type="circle" 空心圓

type="square" ?方形

type="none" ? 沒有

定義列表

<dl><dt>標(biāo)題關(guān)鍵詞（可以插圖片和文本）</dt><dd>對內(nèi)容的詳細(xì)解釋</dd><dd></dd><dd></dd><dd></dd><dd></dd> <dl>

表格（table）

這是一個重要的標(biāo)簽，但是前期我們所做的面向用戶的網(wǎng)站中，不常用。

插件：表格寬*高=table>tr*n>td*n

在寫表格時，thead , tbody , tfoot 可以省略不寫。

表格的屬性

-width="" ? ? ? ? ? ?表格的寬度

-height="" ? ? ? ? ? 表格的高度

-border="" ? ? ? ? ? 表格的邊框

-bordercolor="" ? ? ?表格邊框的顏色

-bgcolor="" ? ? ? ? ?背景顏色

-cellspacing="" ? ? ?單元格之間的間距

-cellpadding="" ? ? ?內(nèi)容到邊框的間距

-aligen="" ?left ?center ?right ? ? 水平對齊方式 ?

-valign="" top bottom ?middle ?basline ? ?垂直對齊方式

跨行

如果我們想讓某一個單元格，跨多行，給這個td添加 `rowspan` 可以實(shí)現(xiàn)跨行操作

-rowspan="所要合并單元格的行數(shù)" ? 合并行

跨列

如果我們想讓某一個單元格，跨多列，給這個td添加 `colspan` 可以實(shí)現(xiàn)跨列操作

-cowspan="所要合并單元格的列數(shù)" ? 合并列

form表單

表單標(biāo)簽未來不太常用，因?yàn)閒orm已經(jīng)逐漸被ajax替代了。但是我們前期寫頁面時，還是要使用

我們應(yīng)該把所有的表單內(nèi)元素包裹在一個form中（非必須）

method 方式，方法，定義表單提交的方法。

get是獲取

method="get" 從服務(wù)器上獲取數(shù)據(jù)，在數(shù)據(jù)傳輸?shù)倪^程中，用可以在地址欄上看到過程，默認(rèn)傳遞方式，安全性比較低。

post 是傳遞數(shù)據(jù)

method="post" 向服務(wù)器傳送數(shù)據(jù)，在數(shù)據(jù)傳遞過程，用戶在地址欄上看不到，安全性比較高。

action設(shè)置數(shù)據(jù)傳遞之后給誰？

input(行內(nèi)塊、置換元素)

input有很多種形態(tài)，需要通過type屬性進(jìn)行控制

type

text
文本輸入框，最常用，讓用戶在文本框中輸入我們想要獲取的內(nèi)容
password
密碼，讓文本以密文顯示（不安全）
radio
單選（必須加一個name屬性,且同組的屬性值必須一樣），多個選項(xiàng)只選其一時使用，如性別
checkbox
多選，當(dāng)有多個選項(xiàng)需要選擇時，如愛好
submit
提交按鈕，自動顯示提交兩個字，可以通過value修改
reset
重置按鈕，自定顯示重置兩個字，可以通過value修改
button
普通按鈕，沒有功能，需要通過value配置顯示文本
file
文件上傳，可以進(jìn)行本地文件的上傳功能

value

一般情況下，value用來獲取對應(yīng)用戶輸入的值,用來幫助系統(tǒng)顯示內(nèi)容。

name

如果我們要使用表單提交，則所有的表單內(nèi)元素都需要加name屬性

<input type="radio" name="sex" id="qita"><label for="qita">不明</label> 點(diǎn)擊文字即可選中 <label for=""><input type="radio" name="sex" checked>男</label> 方便修改文本樣式

placeholder

設(shè)置提示信息

button

普通按鈕，如果把button放在表單里，則button自動會有提交功能

<button>按鈕</button> <input type="button"> 兩種的作用相同

select > option

下拉選擇框，需要用select包裹多個option

<select><option value="123">選項(xiàng)2</option><option value="123">選項(xiàng)3</option><option value="123">選項(xiàng)1</option><option value="123">選項(xiàng)4</option> 選項(xiàng)顯示在瀏覽器，123是提交給服務(wù)器的數(shù)據(jù) </select>

textarea

文本域，用于輸入多行文本時使用

表單內(nèi)元素的狀態(tài)

blur
失去焦點(diǎn)
focus
獲取焦點(diǎn)
checked 給radio和checkbox添加，用于設(shè)置對應(yīng)選項(xiàng)的選中狀態(tài)，添加則表示選中
selected 給option添加，用于設(shè)置默認(rèn)被選中的選項(xiàng)
readonly 只讀，添加到輸入框，無法修改內(nèi)容，只能查看
disabled 添加到元素上，則對應(yīng)元素禁用，樣式變灰

頁面劃分

<div>用來劃分頁面區(qū)域的</div> <span>修飾獨(dú)立小部分內(nèi)容</span>

兩者沒有固定的格式表現(xiàn)。對他應(yīng)用樣式（CSS）時，他才會產(chǎn)生視覺上的變化。

總結(jié)

以上是生活随笔為你收集整理的【HTML】重点知识内容~快速上手的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 5G NSA 和SA 介绍
下一篇： HTML5七夕情人节表白网页(烂漫的空中

HTML

【HTML】重点知识内容~快速上手

HTML基本結(jié)構(gòu)：

網(wǎng)頁結(jié)構(gòu)展示：

常用標(biāo)簽：

h1~h6

p

img

屬性

src

文字的樣式屬性（強(qiáng)調(diào)屬性）

em i

stong b

br

hr

特殊標(biāo)簽：

特殊符號

a

屬性

列表

有序列表

無序列表

type類型：

定義列表

表格（table）

表格的屬性

跨行

跨列

form表單

input(行內(nèi)塊、置換元素)

type

value

name

placeholder

button

select > option

textarea

表單內(nèi)元素的狀態(tài)

頁面劃分

總結(jié)

input(行內(nèi)塊、置換元素)