js入門三部曲「第二部」ep04 html代碼的基本結(jié)構(gòu)#js

你太美。

雖然第一個(gè)html代碼寫(xiě)的非常隨意，就四個(gè)字：雞你太美。但是用瀏覽器打開(kāi)之后確實(shí)是能看到是以網(wǎng)頁(yè)的形式所展現(xiàn)的。這個(gè)現(xiàn)象就有點(diǎn)奇怪了，為什么？講道理，只要是一種語(yǔ)言，必定有自己的語(yǔ)法格式，得按它的套路去寫(xiě)才能認(rèn)為代碼寫(xiě)的是對(duì)的，然后才能去正常的運(yùn)行。

但是這里就四個(gè)字：雞你太美，它就能把這個(gè)東西給顯示出來(lái)，這是為什么？其實(shí)很簡(jiǎn)單。

·可以看一下，按一下F12，把瀏覽器的開(kāi)發(fā)者工具給打開(kāi)。

·然后選中elements標(biāo)簽頁(yè)，如果是中文版，這里就應(yīng)該是元素。

·這里有4行文本，這4行文本里面有沒(méi)有一個(gè)比較熟悉的東西？雞你太美這四個(gè)字是不是HTML代碼里面寫(xiě)的東西？如果把這個(gè)東西改了，雞你太美baby。

·然后就不再打開(kāi)HTML文件了，直接按刷新。這里變成了雞你太美baby，這里是不是也變成了雞你太美baby。

·再比如加點(diǎn)東西，保存刷新，有沒(méi)有發(fā)現(xiàn)什么規(guī)律？這里寫(xiě)什么，這一段就是什么，但其他地方是沒(méi)變的。

所以有理由相信這份代碼的完全體應(yīng)該是什么？應(yīng)該就是這個(gè)。所以先來(lái)把它復(fù)刻一下，尖括號(hào)。要注意，尖括號(hào)得是英文輸入法下的尖括號(hào)。html，有個(gè)had，后面又有一個(gè)head，只不過(guò)head前面加了一個(gè)斜杠。至于這些東西到底是什么意思，等一下再說(shuō)。

先把代碼搞完，雞左邊有個(gè)body，后面有個(gè)body，下面又有一個(gè)斜杠。html好保存，然后刷新，效果和之前的閹割版是一樣的。

然后來(lái)看一下這些尖括號(hào)到底是什么意思，其實(shí)還是挺簡(jiǎn)單的。首先在html里面，像這種用尖括號(hào)括起來(lái)的東西稱之為元素。在國(guó)內(nèi)有的人喜歡把它稱為標(biāo)簽，其實(shí)都是一個(gè)意思，就是元素的意思。所以在這里有幾種元素，很明顯是三種，一種是html，一種是head，還有一種是body。

這個(gè)時(shí)候有的小白可能會(huì)問(wèn)了，為什么有的前面是加了個(gè)斜杠的？其實(shí)是這樣子的，在html里面有些元素是有包裹區(qū)間的，就比如body元素，body元素里面的數(shù)據(jù)或者叫內(nèi)容是從哪到哪？很明顯這個(gè)是開(kāi)頭，這個(gè)是結(jié)尾，然后掐頭去尾，內(nèi)容就在這，懂了吧？開(kāi)頭結(jié)尾。

所以head元素的數(shù)據(jù)在哪？就在這，什么都沒(méi)有。head元素的數(shù)據(jù)在哪？很明顯就是這個(gè)。知道元素的概念之后，接下來(lái)再看一下這幾種元素都是什么意思。

·首先html元素是告訴瀏覽器，接下來(lái)是html代碼。

·然后head還有body是什么意思？其實(shí)可以把HTML代碼想象成是一個(gè)人，一個(gè)人有自己的頭，還有身體，而且人家的腦袋里面此時(shí)此刻在想什么是看不出來(lái)的。所以head元素里面的內(nèi)容一般都是去寫(xiě)一些對(duì)于頁(yè)面的一些設(shè)置，或者在這個(gè)區(qū)域里面所看不到的一些東西。

就比如里面可以再加個(gè)元素，比如說(shuō)叫title，title我相信大家應(yīng)該都知道，就是標(biāo)題的意思，這個(gè)也是一樣的，起止。然后中間這里寫(xiě)什么？選項(xiàng)卡的這里名字就是什么？就比如坤坤牛逼，保存，然后刷新，是不是變成了坤坤牛逼？當(dāng)然，想把這個(gè)東西放到別的地方也行，比如說(shuō)放到body里面，然后保存，一刷新，你看也是坤坤牛逼，對(duì)吧？但是一般來(lái)說(shuō)按照規(guī)范，一般是放到這種head元素里面去，這是head元素。

·然后接下來(lái)是body，body就是人的身體，人家長(zhǎng)得什么樣子，身材好不好，到底前凸不凸，后翹不翹，一眼就能看得出來(lái)，多看一眼都會(huì)爆炸的那種。所以在body元素里面，一般都是寫(xiě)一些在這個(gè)區(qū)域里面能看到的東西，就比如說(shuō)一些文字或者說(shuō)一些圖片等等，所以這個(gè)才是html代碼最基本的結(jié)構(gòu)。

·然后回過(guò)頭來(lái)再看一下最初的問(wèn)題，什么？就是一開(kāi)始代碼不是這個(gè)樣子的嗎？沒(méi)有，那些head、html、body卻依然能在瀏覽器上正確的顯示出來(lái)。其實(shí)很簡(jiǎn)單，就是因?yàn)殡m然就寫(xiě)了這個(gè)東西，但是瀏覽器會(huì)讀取代碼文件里面所寫(xiě)的內(nèi)容，寫(xiě)了什么就能讀到什么。

如果代碼不夠規(guī)范，瀏覽器就會(huì)自動(dòng)的幫你把這些元素給補(bǔ)齊，補(bǔ)齊完之后才是真正的HTML代碼。有了正確的代碼之后，瀏覽器才會(huì)根據(jù)這份代碼來(lái)進(jìn)行渲染，也就是現(xiàn)在所看到的樣子。

所以代碼千萬(wàn)條，規(guī)范第一條，因?yàn)橛肋h(yuǎn)都不會(huì)想知道瀏覽器到底會(huì)對(duì)不規(guī)范的代碼進(jìn)行什么樣的修改，把它改成什么樣子。所以html代碼的最基本的格式就是html、head、body。修改后的結(jié)果:雞你太美。

大家在瀏覽網(wǎng)頁(yè)的時(shí)候，是否思考過(guò)這樣一個(gè)問(wèn)題：怎樣才能制作出一個(gè)網(wǎng)頁(yè)呢？制作出一個(gè)網(wǎng)頁(yè)是很簡(jiǎn)單的，只要知道什么是HTML并掌握HTML的基礎(chǔ)知識(shí)就可以制作出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，今天我就為講解HTML的入門及結(jié)構(gòu)組成。

一、什么是HTML?

1、在我們開(kāi)始學(xué)習(xí)HTML之前我們需要知道什么是HTML？

HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標(biāo)記語(yǔ)言，閱覽方式為網(wǎng)頁(yè)瀏覽器，同時(shí)HTML也被稱為網(wǎng)頁(yè)。

2、一個(gè)簡(jiǎn)單的HTML文檔

二、HTML編輯器

我們?cè)诳梢允褂肨XT文本文檔或者專業(yè)的HTML編輯器來(lái)編輯HTML。

1、記事本

①　創(chuàng)建一個(gè)TXT文本

②　輸入HTML代碼

③　點(diǎn)擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個(gè)HTML文件。

④　然后雙擊這個(gè)文件運(yùn)行。

運(yùn)行結(jié)果

2、專業(yè)編輯器

①　Sublime Text

②　HBuilder

③　Adobe Dreamweaver

④　CoffeeCup HTML Editor

這其中我比較推薦HBuilder這款編輯器，界面簡(jiǎn)單，編輯起來(lái)很快。

三、HTML的組成部分

在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。

1、頭部（head）

通常包含標(biāo)題（title），也就是一個(gè)網(wǎng)頁(yè)的名稱

網(wǎng)頁(yè)標(biāo)題

2、身體（body）

body的部分是整個(gè)網(wǎng)頁(yè)的重要內(nèi)容部分，讓人一眼就瀏覽到這個(gè)網(wǎng)頁(yè)的內(nèi)容，可以插入文本、圖片、多媒體等內(nèi)容。

四、HTML元素

l HTML元素是指以開(kāi)始標(biāo)簽起始，以結(jié)束標(biāo)簽終止的元素：元素內(nèi)容即為開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。

l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個(gè)元素。

l 也有部分元素只有開(kāi)始標(biāo)簽，例如<br>,以開(kāi)始標(biāo)簽的結(jié)束而結(jié)束。

五、HTML的屬性

l 一般來(lái)說(shuō)HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。

l 屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name=”value”。

l 屬性一般描述于開(kāi)始標(biāo)簽。

l style中會(huì)有更多的屬性。

六、HTML格式化

HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。

HTML文本格式化標(biāo)簽

標(biāo)簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號(hào)字
<strong>	定義加重語(yǔ)氣
<sub>	定義下標(biāo)字
<sup>	定義上標(biāo)字
<ins>	定義插入字
<del>	定義刪除字

運(yùn)行結(jié)果示意圖

HTML“計(jì)算機(jī)輸出”標(biāo)簽

標(biāo)簽	描述
<code>	定義計(jì)算機(jī)代碼
<kdd>	定義鍵盤碼
<samp>	定義計(jì)算機(jī)代碼樣本
<var>	定義變量
<pre>	定義預(yù)格式文本

HTML引文、引用及標(biāo)簽定義

標(biāo)簽	描述
<abbr>	定義縮寫(xiě)
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長(zhǎng)的引用
<q>	定義短的引用語(yǔ)
<cite>	定義引用、引證
<dfn>	定義一個(gè)定義項(xiàng)目

七、HTML超鏈接

超鏈接可以是圖片、文字、多媒體也可以是一個(gè)網(wǎng)址

示例：

結(jié)果：

點(diǎn)擊帶有下劃線的兩個(gè)字就可以進(jìn)入某度的網(wǎng)站

八、HTML CSS

1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進(jìn)行排版

2、CSS有三種方式：

l 內(nèi)部樣式，在HTML元素中使用“style”屬性

l 內(nèi)部樣式表，在頭部<head>區(qū)域使用<style>元素來(lái)包含CSS

l 外部引用，引用帶有后綴css的文件，示例：

html文檔

css文檔

如果你看到了這里，就說(shuō)明你已經(jīng)打開(kāi)了制作網(wǎng)頁(yè)的大門啦~

TML的作用

HTML是用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)的，它是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言

HTML的定義

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

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

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

超文本兩層含義：

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

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

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

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

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

VS Code 安裝

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

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

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

安裝一切默認(rèn)

VS Code 的插件安裝

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

常用的HTML標(biāo)簽

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

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

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

列表標(biāo)簽

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

網(wǎng)頁(yè)效果

表格標(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)頁(yè)效果

表單標(biāo)簽

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

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

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

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

網(wǎng)頁(yè)效果

表單提交

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

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

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

“GET”方式 : 沒(méi)有請(qǐng)求體
“POST”方式 : 有請(qǐng)求體

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

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(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>愛(ài)好:</label>
<input type="checkbox" name="like" value="睡覺(jué)">睡覺(jué)
<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ù)器收到了請(qǐng)求報(bào)文。

在線咨詢

上一篇：把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)方法
下一篇：知識(shí)就是金錢之：js中關(guān)于Blob對(duì)象的介紹與使用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

js入門三部曲「第二部」ep04 html代碼的基本結(jié)構(gòu)#js

TML的作用

HTML的定義

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

VS Code 安裝

VS Code 的插件安裝

常用的HTML標(biāo)簽

表單提交

您的項(xiàng)目需求