HTML是用來開發(fā)網(wǎng)頁的,它是開發(fā)網(wǎng)頁的語言
全稱HyperText Mark-up Language,超文本標(biāo)記語言
標(biāo)記就是標(biāo)簽
<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等,標(biāo)簽大多數(shù)都是成對出現(xiàn)的。
超文本 兩層含義:
<!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全拼是 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)
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)簽的使用形式
列表標(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ù)器
兩種方式的區(qū)別:
表單元素屬性設(shè)置
<!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>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復(fù)選框
照片 type="file" 定義上傳文件
個(gè)人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個(gè)普通按鈕
-->
<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í)例
<p>我將顯示 €</p>
<p>我將顯示 €</p>
<p>我將顯示 €</p>
結(jié)果如下:
我將顯示 €
我將顯示 €
我將顯示 €
HTML 支持的數(shù)學(xué)符號
如果您使用的是一個(gè) HTML 實(shí)體名稱或一個(gè)十六進(jìn)制編號,字符總是能正確顯示。
這是與您頁面使用的字符集相互獨(dú)立的!
字符 | 編號 | 實(shí)體 | 描述 |
---|---|---|---|
? | ∀ | ∀ | 所有(for all) |
? | ∂ | ∂ | 部分(part) |
? | ∃ | ∃ | 存在(exists) |
? | ∅ | ∅ | 空(empty) |
? | ∇ | ∇ | 倒三角(nabla) |
∈ | ∈ | ∈ | 屬于(isin) |
? | ∉ | ∉ | 不屬于(notin) |
? | ∋ | ∋ | 包含的成員(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) |
? | ♠ | ♠ | 黑桃(BLACK SPADE SUIT) |
? | ♣ | ♣ | 黑梅花(BLACK CLUB SUIT) |
? | ♥ | ♥ | 黑心(BLACK HEART SUIT) |
? | ♦ | ♦ | 黑方塊(BLACK DIAMOND SUIT) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
程序越來越火,而小程序需要學(xué)會(huì)的基本語言則是HTML+CSS+JS,今天給大家?guī)鞨TML的簡介和操作思想,希望大家看完能對HTML有所了解。
HTML的全稱是HyperText Mark-up Language,翻譯過來就是超文本標(biāo)記型語言。
超文本指的是超出文本的范疇,標(biāo)記:理解為標(biāo)簽,html中所有的操作都是通過標(biāo)簽來實(shí)現(xiàn)的。
html是做網(wǎng)頁。
創(chuàng)建hello.html,利用編輯工具NotePad編輯,輸入一下代碼,點(diǎn)擊保存,點(diǎn)擊運(yùn)行,選擇自己有的瀏覽器即可。
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ù)樣式的變化。
從學(xué)習(xí)HTML開始,帶你一步一步學(xué)習(xí),直到開發(fā)一個(gè)小程序。喜歡的還是點(diǎn)個(gè)贊,加個(gè)收藏;想繼續(xù)關(guān)注的,還請?zhí)砑雨P(guān)注;如果有什么話想說,可以發(fā)表評論。希望以上本篇內(nèi)容能讓大家有說收獲,感謝大家。
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。