前端是什么？
網(wǎng)頁(yè)？
將數(shù)據(jù)以各種方式（如：表格、餅圖、柱狀圖等）呈現(xiàn)給用戶(hù)，我們就可以稱(chēng)之為前端。
做前端所需要的工具？
notepad
、
editplus
、
notepad++
、
vscode
、
webstorm
等，一般用于前端開(kāi)發(fā)。
前端有那個(gè)語(yǔ)言？
html
、
css
、
Javascript
、
vue
、
react
、
node.js
都是屬于前端相關(guān)的語(yǔ)言。
HTML
介紹
什么是
HTML
HTML
是
Hyper Text Markup Language
（超文本標(biāo)記語(yǔ)言），它可以支持超鏈接、圖片、視頻、音樂(lè)
等元素，然后使用不同的標(biāo)簽來(lái)對(duì)這些元素進(jìn)行標(biāo)記。
這個(gè)語(yǔ)言是由一個(gè)叫：
Tim Berners-Lee(
蒂姆
·
伯納斯
·
李
)
。
HTML
是一種樹(shù)型結(jié)構(gòu)的文本。它主要包括兩個(gè)部分：頭部和主體。
頭部中主要有標(biāo)記、引入樣式、設(shè)置文本編碼、搜索優(yōu)的的關(guān)鍵字、以及搜索優(yōu)化的描述等信息。
主體就是我們可以看到的所有內(nèi)容，都在這個(gè)部分。
HTML
的作用
它的作用是用于呈現(xiàn)數(shù)據(jù)的基石。
HTML
發(fā)展
①
HTML 1.0
：在
1993
年
6
月作為
互聯(lián)網(wǎng)工程工作小組
(
IETF
)
工作草案發(fā)布。
[5]
②
HTML 2.0
：
1995
年
1 1
月作為
RFC
1866
發(fā)布，于
2000
年
6
月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)。
[5]
③
HTML 3.2
：
1997
年
1
月
14
日，
W3C
推薦標(biāo)準(zhǔn)。
[5]
④
HTML 4.0
：
1997
年
12
月
18
日，
W3C
推薦標(biāo)準(zhǔn)。
[5]
⑤
HTML 4.01
（微小改進(jìn)）：
1999
年
12
月
24
日，
W3C
推薦標(biāo)準(zhǔn)。
[5]
⑥
HTML 5
：
HTML5
是公認(rèn)的下一代
Web
語(yǔ)言，極大地提升了
Web
在
富媒體
、富內(nèi)容和富應(yīng)用等方面的
能力，被喻為終將改變
移動(dòng)互聯(lián)網(wǎng)
的重要推手。
Internet Explorer 8
及以前的版本不支持。
使用
HTML
環(huán)境安裝和配置
要想運(yùn)行
HTML
，只需要有瀏覽器即可。而我們系統(tǒng)中就自帶了瀏覽器， 所以我們不需要額外的環(huán)境。
對(duì)于編寫(xiě)
HTML
，我們可以使用前面說(shuō)的工具，我個(gè)人習(xí)慣使用
webstorm
。
在企業(yè)中，目前所使用的工具比較多的是兩大類(lèi)：
vscode
，它是微軟開(kāi)發(fā)的免費(fèi)工具
webstorm
，它是
jetbrains
公司開(kāi)發(fā)的收費(fèi)工具
編寫(xiě)頁(yè)面
打開(kāi)工具，編寫(xiě)一個(gè)后綴為
.html
的頁(yè)面，如：
index.html
頁(yè)面元素解析：
HTML
標(biāo)簽介紹
常用標(biāo)簽
b/strong
標(biāo)簽
這個(gè)標(biāo)簽是用于加粗文字的，一般用于強(qiáng)調(diào)某個(gè)部分的作用。
在以后使用中，推薦使用
strong
標(biāo)簽。
i/em
標(biāo)簽
它們的使用是讓文字變?yōu)樾斌w
u
標(biāo)簽
它的作用是給文字添加下劃線
del
刪除線
它的使用是給文字添加刪除線
br
換行
p
標(biāo)簽
*
這個(gè)標(biāo)簽是一個(gè)段落標(biāo)簽，它本身就自帶了意思距。在這個(gè)標(biāo)簽中的文件會(huì)獨(dú)占一行。
pre
預(yù)處理標(biāo)簽
這個(gè)標(biāo)簽的作用是書(shū)寫(xiě)的內(nèi)容與顯示的樣式內(nèi)容相同。
這個(gè)標(biāo)簽一般用于顯示源碼的。
span
標(biāo)簽
**
它是一個(gè)行內(nèi)標(biāo)簽，它沒(méi)有什么特殊的意義，但是在使用中卻比較多。一般會(huì)接合
css
樣式來(lái)修飾文本。
div
標(biāo)簽
***
它是一個(gè)塊狀標(biāo)簽，一般用于頁(yè)面布局。
sub
標(biāo)簽
這個(gè)標(biāo)簽的作用是指定下標(biāo)，一般用于數(shù)字方面。
sup
標(biāo)簽
這個(gè)標(biāo)簽的作用是指定上標(biāo)，一般用于數(shù)字方面。
hr
標(biāo)簽
這個(gè)標(biāo)簽用于給頁(yè)面劃水平線。
標(biāo)簽屬性說(shuō)明：
size
：用于指定線的粗線，值越大線越粗
width
：用于指定線的寬度，值越大越寬
align
：用于指定線的對(duì)齊方式，有以下三個(gè)值：
left
：居左對(duì)齊
center
：居中對(duì)齊，它是默認(rèn)值
right
：居右對(duì)齊
hn
標(biāo)簽
這個(gè)標(biāo)簽中的
n
是
1 ~ 6
的數(shù)字，一般用于標(biāo)題。
HTML5
中語(yǔ)義標(biāo)簽
這個(gè)標(biāo)簽是
HTML5
中定義的新的語(yǔ)義標(biāo)簽，有以下幾個(gè)：
header
：用于定義頁(yè)面的頂部
article
：用于表示文章的內(nèi)容
section
：用于定義內(nèi)容的分塊信息
nav
：用于定義頁(yè)面的導(dǎo)航部分
aside
：用于定義頁(yè)面的側(cè)邊欄
footer
：用于定義頁(yè)面的頁(yè)腳部分
address
：用于定義用戶(hù)郵件、地址等信息
特殊字符
在
HTML
中有很多特殊字符，如下表所示
多媒體標(biāo)簽
img***
這個(gè)標(biāo)簽的作用是在頁(yè)面中引入圖片
標(biāo)簽屬性說(shuō)明：
src
：這個(gè)屬性非常重要，用于指定圖片顯示的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。（簡(jiǎn)單來(lái)說(shuō)，
在
windows
中帶了盤(pán)符，在
Linux
中以
/
開(kāi)頭的路徑，在鏈接中以
http://
開(kāi)頭的就是絕對(duì)路徑，
其他都是相對(duì)路徑。相對(duì)路徑的參考點(diǎn)就是這個(gè)對(duì)象本身。）
width
：用于指定圖片顯示的寬度，如果只指定寬，則高會(huì)根據(jù)寬度來(lái)等比例綻放
height
：用于指定圖片顯示的高度，如果只指定高，則寬度會(huì)根據(jù)高度來(lái)等比例綻放。注意：
width
和
height
兩個(gè)屬性不要同時(shí)指定。
border
：用于指定力圖片顯示的邊框粗細(xì)，默認(rèn)是無(wú)邊框
alt
：是在圖片不能正常顯示時(shí)才會(huì)顯示這個(gè)文字內(nèi)容
title
：用于當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)顯示的提示信息。一般用于搜索引擎優(yōu)化。
a
標(biāo)簽
***
這個(gè)標(biāo)簽是用于作鏈接的標(biāo)簽。
第一種用法：超鏈接
屬性說(shuō)明：
href
：這個(gè)屬性是一個(gè)必須屬性，用于指定要打開(kāi)的目標(biāo)地址
target
：鏈接打開(kāi)的方式，有以下幾個(gè)值：
- _blank
：在新窗口打開(kāi)
- _self
：在本窗口打開(kāi)，默認(rèn)值
- _top
：在父窗口打開(kāi)，一般用于
frame
框架時(shí)
- _parent
：在父窗口打開(kāi)，一般用于
frame
框架時(shí)
第二種用法：錨點(diǎn)
demo1.html
demo2.html
audio
標(biāo)簽
這個(gè)標(biāo)簽是用于播放音樂(lè)的標(biāo)簽。常用支持格式為
mp3
格式。
標(biāo)簽屬性說(shuō)明：
1. controls
：它是用于對(duì)播放器進(jìn)行控制器的，即顯示播放器的控制按鈕
2. src
：用于指定音頻文件的路徑
3. autoplay
：指定是否自動(dòng)播放
4. loop
：指定是否循環(huán)播放
video
標(biāo)簽
標(biāo)簽屬性說(shuō)明：
1. src
：指定要播放的視頻地址，可以是相對(duì)路徑，也可以是絕對(duì)路徑。這個(gè)標(biāo)簽所支持的視頻格式不
多，目前只把持
mp4
、
ogg
兩種
2. controls
：顯示播放控制按鈕
3. autoplay
：自動(dòng)播放
4. loop
：自動(dòng)循環(huán)
5. width
：設(shè)置播放器的寬度
6. height
：設(shè)置播放器的高度
表格標(biāo)簽
**
在我們進(jìn)行數(shù)據(jù)展示時(shí)，很多時(shí)候都會(huì)用到表格，特殊是在后臺(tái)進(jìn)行數(shù)據(jù)管理時(shí)，或者顯示列表數(shù)據(jù)
時(shí)，就會(huì)用表格。
要使用表格就需要用到
table
標(biāo)簽，而表格是由行和列組成。行的標(biāo)簽是
tr
，而列的標(biāo)簽是
td
或
th
。
基本表格
表格的標(biāo)簽和屬性說(shuō)明：
table
：用于繪制表格
tr
：用于繪制表格的行
td
：用于繪制表格的列（單元格）
width
：指定表格的寬度，也可以是
td
的屬性
border
：指定表格的邊框粗細(xì)
cellspacing
：指定單元格之間的間距
cellpadding
：指定單元格邊框與單元格中內(nèi)容的距離
align
：用于指定表格對(duì)齊方式：
- left
：左對(duì)齊，默認(rèn)值
- center
：居中對(duì)齊
- right
：右對(duì)齊
align
屬性可以是
table
，也可以是
tr
，還可以是
td
。如果是
table
的，表示對(duì)整個(gè)表格有
效；如果是
tr
的，表示對(duì)當(dāng)前行有效；如果是
td
的表示只對(duì)當(dāng)前的單元格有效。
帶標(biāo)題的表格
使用
caption
來(lái)指定表格的標(biāo)題，使用
thead
標(biāo)簽來(lái)指定表格的頭，
tbody
來(lái)指定表格數(shù)據(jù)區(qū)，
tfoot
指
定表格的尾部。
td
和
th
的區(qū)別：
1. td
中的內(nèi)容是普通格式，而
th
中的內(nèi)容是加粗的格式
2. td
中的內(nèi)容是左對(duì)齊，而
th
中的內(nèi)容是居中對(duì)齊
跨行跨列表格
相關(guān)屬性說(shuō)明：
1. colspan
：用于指定要跨多少列，它的值是一個(gè)數(shù)字
2. rowspan
：用于指定要跨多少行，它的值是一個(gè)數(shù)字
表格嵌套
列表標(biāo)簽
***
在
HTML
中，列表標(biāo)簽有以下幾種：
ul
ol
dl
ul
它是無(wú)序列表標(biāo)簽
標(biāo)簽和屬性說(shuō)明：
ul
：用于指定無(wú)序列表
li
：指定列表中的某一項(xiàng)
type
：指定無(wú)序列表的格式，有以下幾個(gè)值：（了解）
- disc
：實(shí)心圓形，默認(rèn)值
- square
：實(shí)心方形
- circle
：空心圓形
ol
它是有序列表
type
屬性有以下值：
1.
數(shù)字：默認(rèn)值
2. a
：以小寫(xiě)字母
a
開(kāi)始
3. A
：在大寫(xiě)字母
A
開(kāi)始
4. i
：以羅馬字開(kāi)始
dl
它數(shù)據(jù)列表
表單標(biāo)簽
***
form
標(biāo)簽
這個(gè)標(biāo)簽是用于表單提交的標(biāo)簽，一般在與用戶(hù)交互時(shí)就會(huì)用到
form
標(biāo)簽。
標(biāo)簽屬性說(shuō)明：
name
：用于給這個(gè)表單取一個(gè)唯一的名稱(chēng)，便于后續(xù)使用
js
來(lái)操作這個(gè)表單
action
：表單提交的地址
method
：表單提交的方式，有以下兩個(gè)值：
- get
：表單以
get
方式提交
- post：表單以 post 方式提交
補(bǔ)充
get
和
post
提交的區(qū)別：
1. get
提交的數(shù)據(jù)會(huì)以參數(shù)的形式體現(xiàn)在瀏覽器地址欄中，而
post
提交的數(shù)據(jù)是在請(qǐng)求頭中
2. get
提交方式提交的數(shù)據(jù)不能超過(guò)
4k
大小，而
post
提交方式理論上是沒(méi)有大小限制的
input
這是表單元素中非常重要一組標(biāo)稱(chēng)，它有很多類(lèi)型：
text
：最常見(jiàn)的類(lèi)型，用于提交文本字符串內(nèi)容
password
：用于提交密碼數(shù)據(jù)
radio
：?jiǎn)芜x按鈕
checkbox
：多選按鈕
submit
：提交按鈕
reset
：重置按鈕
button
：普通按鈕
image
：圖片按鈕
file
：文件上傳域
select
select
是下拉列表標(biāo)簽
標(biāo)簽屬性說(shuō)明：
name
：表單提交時(shí)要獲取對(duì)應(yīng)元素值是所需要的屬性
value
：指定
select
中每一個(gè)子元素的值
size
：指定
select
可看到的元素個(gè)數(shù)，默認(rèn)值是
1
multiple
：表示可以多選
textarea
這個(gè)標(biāo)簽是用于輸入大文本內(nèi)容的標(biāo)簽。
標(biāo)簽屬性說(shuō)明：
name
：用于獲取元素值的屬性
cols
：用于指定文本框的寬度
rows
：用于指定文本框的高度
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-809889.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-809889.html
到了這里，關(guān)于web前端（第一天HTML）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
