柚子快報(bào)邀請碼778899分享：css 快速入門HTML

http://yzkb.51969.com/

歡迎關(guān)注個(gè)人主頁：逸狼

創(chuàng)造不易，可以點(diǎn)點(diǎn)贊嗎

如有錯(cuò)誤，歡迎指出~

目錄

第一個(gè)html文件

標(biāo)簽

h1~h6

p =>段落標(biāo)簽

br => 換行標(biāo)簽

img =>圖片標(biāo)簽

a =>超鏈接標(biāo)簽

表格標(biāo)簽

表單標(biāo)簽

表單控件?

form表單

?語義標(biāo)簽:div&span?

綜合練習(xí):實(shí)現(xiàn)一個(gè)??注冊界?

HTML(Hyper?Text Markup Language),超?本標(biāo)記語?.?超?本:??本要強(qiáng)?.通過鏈接和交互式?式來組織和呈現(xiàn)信息的?本形式.不僅僅有?本,還可能包 含圖?,?頻,或者?已經(jīng)審閱過它的學(xué)者所加的評注、補(bǔ)充或腳注等等.

第一個(gè)html文件

打開vs code ,創(chuàng)建一個(gè)html文件

按"!"快捷鍵 快速初始化界面

html標(biāo)簽是整個(gè)html?件的根標(biāo)簽(最頂層標(biāo)簽)head標(biāo)簽中寫??的屬性.body標(biāo)簽中寫的是??上顯?的內(nèi)容title標(biāo)簽中寫的是??的標(biāo)題.?

我的第一個(gè)html文件

在網(wǎng)頁中使用快捷鍵F12 ,查看網(wǎng)頁源代碼

HTML的標(biāo)簽都是提前定義好的,使?不同的標(biāo)簽,表?不同的內(nèi)容.

標(biāo)簽

標(biāo)簽名(body)放到<>中??部分標(biāo)簽成對出現(xiàn).

為開始標(biāo)簽,

為結(jié)束標(biāo)簽.少數(shù)標(biāo)簽只有開始標(biāo)簽,稱為"單標(biāo)簽".開始標(biāo)簽和結(jié)束標(biāo)簽之間,寫的是標(biāo)簽的內(nèi)容.開始標(biāo)簽中可能會(huì)帶有"屬性".id屬性相當(dāng)于給這個(gè)標(biāo)簽設(shè)置了?個(gè)唯?的標(biāo)識符(?份證號碼).

h1~h6

h1~h6,數(shù)字越大,字體越小

我是?級標(biāo)題

我是?級標(biāo)題

我是三級標(biāo)題

經(jīng)過瀏覽器解析后效果

快速復(fù)制上一行的 快捷鍵: alt + shift +上鍵

p =>段落標(biāo)簽

p標(biāo)簽表示 段落標(biāo)簽.

沒有縮進(jìn)根據(jù)瀏覽器寬度來決定排版首尾處 換行符,空格均無效文字間輸入多個(gè)空格或換行 相當(dāng)于 一個(gè)空格

br => 換行標(biāo)簽

br是break的縮寫,如果想實(shí)現(xiàn)換行,使用
,

br是單標(biāo)簽(沒有結(jié)束標(biāo)簽)br標(biāo)簽不像p標(biāo)簽有這么大換行空隙("換行"與"段落和段落間的空隙")
是正確寫法,不建議寫成br(寫成br也能實(shí)現(xiàn)效果,瀏覽器有較好的"魯棒性",自動(dòng)幫助補(bǔ)全了)

img =>圖片標(biāo)簽

可以使用絕對路徑 或者 相對路徑,也可以是 網(wǎng)絡(luò)路徑

width/height:控制寬度?度.?度和寬度?般改?個(gè)就?,另外?個(gè)會(huì)等?例縮放.否則就會(huì)圖?失 衡.border:邊框,參數(shù)是寬度的像素.但是?般使?CSS來設(shè)定.

a =>超鏈接標(biāo)簽

href:必須具備,可以是網(wǎng)絡(luò)路徑,文件地址或者 #,表?點(diǎn)擊后會(huì)跳轉(zhuǎn)到哪個(gè)??.?target:打開?式.默認(rèn)是_self(表示從當(dāng)前網(wǎng)頁加載).如果是_blank則?新的標(biāo)簽?打開.

外部鏈接:href引?其他?站的地址內(nèi)部鏈接:?站內(nèi)部??之間的鏈接. 寫相對路徑即可.?空鏈接:使?#在href中占位.

百度

test1

下載文件

空鏈接

表格標(biāo)簽

able標(biāo)簽:表?整個(gè)表格tr:表?表格的??(使用tr*3,快速生成3行tr標(biāo)簽,其它同樣可以使用這個(gè)方法)td:表??個(gè)單元格thead:表格的頭部區(qū)域tbody:表格的主體區(qū)域.

aaa	bbb
ccc	ddd
eee	fff

運(yùn)行結(jié)果是沒有邊框的,如果要添加邊框,就要配合使用CSS?

表格標(biāo)簽有?些屬性,可以?于設(shè)置??邊框等.但是?般使?CSS?式來設(shè)置.

這些屬性都要放到table標(biāo)簽中.

align是表格相對于周圍元素的對??式.如align="center"表示居中?(不是內(nèi)部元素的對??式)border表?邊框. 1表?有邊框(數(shù)字越?,邊框越粗),""表?沒邊框.cellpadding:內(nèi)容距離邊框的距離,默認(rèn)1像素cellspacing:單元格之間的距離.默認(rèn)為2像素width/height:設(shè)置尺?.

?注意,這些屬性,vscode都沒有提?

表單標(biāo)簽

用于讓用戶輸入信息的重要途徑,包含下面兩種

表單控件:輸?框,提交按鈕等.重點(diǎn)是input標(biāo)簽.表單域:包含表單元素的區(qū)域.重點(diǎn)是form標(biāo)簽.

表單控件?

各種輸?控件,單??本框,按鈕,單選框,復(fù)選框.

type(必須有),取值種類很多,按鈕button,復(fù)選框checkbox,文本框text,文件file,圖片image,密碼password,單選按鈕radio等.name:給input起了個(gè)名字.尤其是對于單選按鈕,具有相同的name才能多選?.value:input中的默認(rèn)值.?checked:默認(rèn)被選中.(?于單選按鈕和多選按鈕)

日期,可以選擇日期

文本框

密碼

文件

郵箱

單選按鈕 男

女

復(fù)選框 唱跳 rap

籃球

普通按鈕

提交按鈕

下拉菜單

北京

上海

廣州

深圳

文本域

注意?

單選框之間必須具備相同name屬性,才能實(shí)現(xiàn)多選?效果.這里的普通按鈕當(dāng)前點(diǎn)擊了沒有反應(yīng).需要搭配JS使?提交按鈕必須放到form標(biāo)簽內(nèi).點(diǎn)擊后就會(huì)嘗試給服務(wù)器發(fā)送請求

form表單

form表單用于提交數(shù)據(jù),要和submit配合使用

action的值 表示要提交的頁面(可以是前端鏈接或 后端鏈接)

用戶名:

密碼:

?語義標(biāo)簽:div&span?

div標(biāo)簽,division的縮寫,含義是分割?span標(biāo)簽,含義是跨度?就是兩個(gè)盒?.?于??布局

div是獨(dú)占??的,是?個(gè)?盒?span不獨(dú)占??,是?個(gè)?盒?.

綜合練習(xí):實(shí)現(xiàn)一個(gè)??注冊界?

用戶注冊

用戶名
手機(jī)號
密碼

加入div和span方便"拿取"調(diào)用選擇?

柚子快報(bào)邀請碼778899分享：css 快速入門HTML

http://yzkb.51969.com/

精彩內(nèi)容