HTML基礎(chǔ)

TML的作用

HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對出現(xiàn)的。

超文本兩層含義：

因?yàn)榫W(wǎng)頁中還可以有圖片、視頻、音頻等內(nèi)容（超越文本限制）
它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，與世界各地主機(jī)的網(wǎng)頁鏈接（超鏈接文本）

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網(wǎng)頁標(biāo)題</title>
    </head>
    <body>
        網(wǎng)頁顯示內(nèi)容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容

網(wǎng)頁文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開源的跨平臺(tái)代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對應(yīng)的安裝包進(jìn)行下載:

安裝一切默認(rèn)

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標(biāo)簽

1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

標(biāo)簽的使用形式

成對出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個(gè)出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并

網(wǎng)頁效果

表單標(biāo)簽

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

一個(gè)表單中有很多信息組成,比如姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

兩種方式的區(qū)別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對應(yīng)的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點(diǎn)擊提交：

可以看到服務(wù)器收到了請求報(bào)文。

TML 符號實(shí)體

HTML 符號是不呈現(xiàn)在標(biāo)準(zhǔn)的鍵盤上，比如數(shù)學(xué)運(yùn)算符、箭頭符號、技術(shù)符號和形狀。

如需向 HTML 頁面添加這些符號，您可以使用 HTML 實(shí)體名稱。

如果不存在實(shí)體名稱，您可以使用實(shí)體編號。

如果字符沒有實(shí)體名稱，您可以使用十進(jìn)制（或十六進(jìn)制）引用。

實(shí)例

結(jié)果如下：

我將顯示 €

HTML 支持的數(shù)學(xué)符號

如果您使用的是一個(gè) HTML 實(shí)體名稱或一個(gè)十六進(jìn)制編號，字符總是能正確顯示。

這是與您頁面使用的字符集相互獨(dú)立的！

字符	編號	實(shí)體	描述
?	∀	∀	所有（for all）
?	∂	∂	部分（part）
?	∃	∃	存在（exists）
?	∅	∅	空（empty）
?	∇	∇	倒三角（nabla）
∈	∈	∈	屬于（isin）
?	∉	∉	不屬于（notin）
?	∋	&ni;	包含的成員（ni）
∏	∏	∏	連乘（prod）
∑	∑	∑	總和（sum）

完整的數(shù)學(xué)（Math）參考手冊

HTML 支持的希臘字母

字符	編號	實(shí)體	描述
Α	Α	Α	Alpha（中文注音：阿耳法）
Β	Β	Β	Beta（中文注音：貝塔）
Γ	Γ	Γ	Gamma（中文注音：伽馬）
Δ	Δ	Δ	Delta（中文注音：德耳塔）
Ε	Ε	Ε	Epsilon（中文注音：艾普西隆）
Ζ	Ζ	Ζ	Zeta（中文注音：截塔）

完整的希臘（Greek）參考手冊

HTML 支持的其他實(shí)體

字符	編號	實(shí)體	描述
?	©	©	版權(quán)所有（REGISTERED SIGN）
?	®	®	注冊商標(biāo)（REGISTERED SIGN）
€	€	€	歐元符號（EURO SIGN）
?	™	™	商標(biāo)（trademark）
←	←	←	向左箭頭（LEFTWARDS ARROW）
↑	↑	↑	向上箭頭（UPWARDS ARROW）
→	→	→	向右箭頭（RIGHTWARDS ARROW）
↓	↓	↓	向下箭頭（DOWNWARDS ARROW）
?	♠	&spades;	黑桃（BLACK SPADE SUIT）
?	♣	&clubs;	黑梅花（BLACK CLUB SUIT）
?	♥	&hearts;	黑心（BLACK HEART SUIT）
?	♦	&diams;	黑方塊（BLACK DIAMOND SUIT）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

程序越來越火，而小程序需要學(xué)會(huì)的基本語言則是HTML+CSS+JS,今天給大家?guī)鞨TML的簡介和操作思想，希望大家看完能對HTML有所了解。

HTML是什么

HTML的全稱是HyperText Mark-up Language，翻譯過來就是超文本標(biāo)記型語言。
超文本指的是超出文本的范疇，標(biāo)記：理解為標(biāo)簽，html中所有的操作都是通過標(biāo)簽來實(shí)現(xiàn)的。
html是做網(wǎng)頁。

第一個(gè)HTML程序

創(chuàng)建hello.html,利用編輯工具NotePad編輯，輸入一下代碼，點(diǎn)擊保存，點(diǎn)擊運(yùn)行，選擇自己有的瀏覽器即可。

HTML遵循的規(guī)范

HTML程序以<html>開始，同時(shí)以</html>結(jié)束
HTML程序包含兩部分內(nèi)容：head和body，代碼如下：

3. html的標(biāo)簽有開始標(biāo)簽，同時(shí)也要有結(jié)束標(biāo)簽，代碼如下：

4. html代碼是不區(qū)分大小寫的

5. 有些標(biāo)簽沒有結(jié)束標(biāo)簽,需要在標(biāo)簽內(nèi)結(jié)束------</br>

實(shí)現(xiàn)換行的操作，使用標(biāo)簽實(shí)現(xiàn)的<br>,沒有</br>

操作思想

網(wǎng)頁中可能有很多的數(shù)據(jù)，不同的數(shù)據(jù)可能有不同的顯示效果，這個(gè)時(shí)候需要使用標(biāo)簽把我們需要操作的數(shù)據(jù)包起來（封裝），通過修改標(biāo)簽的的屬性值來實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化。標(biāo)簽相當(dāng)于一個(gè) 容器，通過修改容器的屬性值，實(shí)現(xiàn)容器內(nèi)數(shù)據(jù)樣式的變化。

總結(jié)

從學(xué)習(xí)HTML開始，帶你一步一步學(xué)習(xí)，直到開發(fā)一個(gè)小程序。喜歡的還是點(diǎn)個(gè)贊，加個(gè)收藏；想繼續(xù)關(guān)注的，還請?zhí)砑雨P(guān)注；如果有什么話想說，可以發(fā)表評論。希望以上本篇內(nèi)容能讓大家有說收獲，感謝大家。

在線咨詢

上一篇：JavaScript之關(guān)聯(lián)數(shù)組
下一篇：21html模版里的if判斷語句