HTML基礎(chǔ)

TML的作用

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

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

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

超文本兩層含義：

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

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

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

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

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

VS Code 安裝

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

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

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

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

常用的HTML標簽

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

標簽的使用形式

成對出現(xiàn)的標簽
標簽的嵌套
單個出現(xiàn)的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網(wǎng)頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

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

網(wǎng)頁效果

表單標簽

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

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

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

這些標簽稱為表單元素標簽

網(wǎng)頁效果

表單提交

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

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

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

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

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

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時參數(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>

<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>個人描述:</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>

點擊提交：

可以看到服務器收到了請求報文。

頁就是一個HTML文件。

1、HTML結(jié)構(gòu)

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

說明：

文檔類型<!DOCTYPE>

<!DOCTYPE html>

標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規(guī)范.

HTML標簽
標識HTML文檔，是所有HTML中標簽的一個根節(jié)點。
head標簽
標識頭部區(qū)域，用于存放：title,meta,base,style,script,link
title標題
在head標簽中我們必須要設(shè)置的標簽，讓頁面擁有一個屬于自己的標題。
body標簽
標識頁面的主體部分，用于存放所有的HTML標簽，如p,h,a,b,u,i,s,em,del,ins,strong,img

2、HTML標簽和屬性

寫HTML文檔時，必須遵循HTML語法規(guī)范。HTML文檔實際上就是一個文本文件，它由標簽和信息組合而成，當然標簽和信息也不是隨便組合的，需要遵循一定規(guī)則，否則無法正常顯示。

標簽分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <html>、<head>、<body>都是HTML標簽。根據(jù)出現(xiàn)個數(shù)不同，分為雙標簽和單標簽
雙標簽
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結(jié)束，一般稱為“結(jié)束標簽（end tag）”。和開始標簽相比，結(jié)束標簽只是在前面加了一個關(guān)閉符“/”。
<標簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" ……> 內(nèi)容 </標簽名>
單標簽
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。
<標簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" …… />

標簽關(guān)系
嵌套關(guān)系
<head> <title> </title> </head>
并列關(guān)系
<head></head> <body></body>
標簽語義化
所謂標簽語義化，就是指標簽的含義
作用：

方便代碼閱讀和維護
具有更好地搜索引擎優(yōu)化
更容易讓瀏覽器或是網(wǎng)絡(luò)爬蟲解析，從而更好地分析網(wǎng)頁的內(nèi)容

遵循原則：
合適的地方放一個最為合理的標簽。當我們?nèi)サ鬋SS之后，網(wǎng)頁結(jié)構(gòu)依然組織有序，并且有良好的可讀性

有一起學習的嗎？請點贊收藏+關(guān)注哦！

、認識WEB

網(wǎng)頁主要是由文字、圖像和超鏈接等元素構(gòu)成，除了這些基本的元素以外，還包含一些多媒體元素等，比如音頻、視頻等。

比如我們常見的有小米商城、京東商城、以及淘寶等，都屬于我們的大型的購物平臺網(wǎng)站，而這些網(wǎng)站都包含了網(wǎng)頁中基本的元素。那么網(wǎng)頁是怎么形成的呢？

其實網(wǎng)頁的形參很簡單，當我們前端小姐姐將頁面通過代碼構(gòu)建好以后，再通過瀏覽器（IE、谷歌等瀏覽器）將其渲染成為用戶眼中所能看得到的各種樣式的頁面。

既然我們的網(wǎng)頁是通過瀏覽器的渲染而顯示不同的頁面，那么常見的瀏覽器有哪一些呢？如常見的五大瀏覽器，分別是IE、火狐、谷歌、Safari以及Opera等。

五大瀏覽器

但是在開發(fā)過程中，谷歌和火狐用得比較多，可以更好地幫助開發(fā)人員進行調(diào)試。IE瀏覽器相對來說存在兼容性問題，所以很少去使用。

為什么網(wǎng)頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢？此處就不得不提到瀏覽器的內(nèi)核，通常瀏覽器的內(nèi)核分為如下幾種：

排版引擎
解釋引擎
渲染引擎

而五大瀏覽器之間的內(nèi)核都是什么呢？如下圖所示：

五大瀏覽器的內(nèi)核

二、Web標準

什么是Web標準？Web標準是由W3C組織和其它標準化組織，制定的一系列標準的集合。

W3C萬維網(wǎng)聯(lián)盟是國際最著名的標準化組織。他是1994年成立后，至今已發(fā)布了近百項相關(guān)萬維網(wǎng)的標準。

w3c組織

那為什么要制定Web標準呢？

作用：由于市場上誕生了許多不同類型的瀏覽器，而這些瀏覽器都存在不同的內(nèi)核，導致前端小姐姐開發(fā)的頁面在不同的瀏覽器上顯示會存在不同的差異，這樣就會給前端開發(fā)者帶來了許多麻煩。而通過Web標準就會降低這種頁面之間的差異化，讓瀏覽器在解析前端代碼的時候，轉(zhuǎn)向W3C的標準，呈現(xiàn)出統(tǒng)一的效果。

優(yōu)點：

遵循Web標準，讓頁面更標準統(tǒng)一。
同時讓Web的發(fā)展變得越來越好。
內(nèi)容更容易被多種設(shè)備訪問。
還容易被搜索引擎搜索。
降低網(wǎng)站流量費用和提高頁面的加載速度。
也讓頁面變得易維護。

那么一個漂亮的頁面是怎樣構(gòu)成的呢？它的構(gòu)成分別是如下幾種類型：

結(jié)構(gòu)（Structure）：通常在頁面中HTML就是一個頁面的結(jié)構(gòu)，好比剛孵出來的小鳥寶寶。
表現(xiàn)（Presentation）：通常在頁面中CSS就是對一個頁面進行美化的，好比小鳥寶寶慢慢地長出了漂亮的羽毛。
行文（Behavior）：通常在頁面中會使用JavaScript（或JQuery）來完成行文，好比小鳥寶寶長大了，可以進行飛行、捕食等。

漂亮頁面的構(gòu)成

好啦！[微笑]本節(jié)就分享到這兒哦！對前端感興趣的小伙伴，可以關(guān)注我的，我會繼續(xù)給大家分享前端以及其它開發(fā)內(nèi)容的知識，也歡迎大家給我在評論區(qū)留言[作揖]。

在線咨詢

上一篇：HTML+js響應鍵盤快捷鍵ctrl+s實現(xiàn)文章保存提交功能
下一篇：3種方法（div法、css法、js法）制作html的旋轉(zhuǎn)太極圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

HTML基礎(chǔ)

TML的作用

HTML的定義

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

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

您的項目需求