三分鐘了解當(dāng)前最受歡迎的前端語(yǔ)言標(biāo)準(zhǔn)：TypeScr

三分鐘了解當(dāng)前最受歡迎的前端語(yǔ)言標(biāo)準(zhǔn)：TypeScript 核心特性

CMA簡(jiǎn)單來(lái)說(shuō)是評(píng)估、開發(fā)和認(rèn)可計(jì)算機(jī)標(biāo)準(zhǔn)的一個(gè)組織。我們熟知的Javascript就是由他來(lái)制定標(biāo)準(zhǔn)的。經(jīng)過(guò)從1997年ECMAScript 1后到今天我們要介紹的ECMAScript 6經(jīng)歷近20年。ES6 是在2015年6月發(fā)布的，此后由于標(biāo)準(zhǔn)委員會(huì)最終決定，標(biāo)準(zhǔn)在每年的 6 月份正式發(fā)布一次，作為當(dāng)年的正式版本，所以ES6也叫做ES2015。

ES6擴(kuò)充了之前發(fā)布的ES5語(yǔ)法并使得 JavaScript語(yǔ)言可以用來(lái)編寫大型的復(fù)雜的應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。ES6 增添了許多必要的特性，例如：模塊和類、Maps、Sets、Promises、生成器（Generators）以及一些實(shí)用特性等。

因?yàn)楝F(xiàn)在市場(chǎng)上流行的瀏覽器很多對(duì)ES6還沒(méi)有完全支持。所以使用ES6編寫的javascript也需要使用工具在轉(zhuǎn)成ES5的語(yǔ)法，比如使用Babel轉(zhuǎn)碼器。

那TypeScript和ES6有什么區(qū)別呢？

TypeScript是由微軟開發(fā)的自由和開源的編程語(yǔ)言。Google的Angular 2框架就是用TypeScript開發(fā)的，兩個(gè)公司對(duì)此有著諸多交流。背靠著兩大科技界扛把子，讓我們來(lái)一睹TypeScript的風(fēng)采。

首先TypeScript是ES6的超集。除了包含所有ES6語(yǔ)法外，他自身也有很多特性。

基于靜態(tài)類型，用 TypeScript 編輯代碼有更高的預(yù)測(cè)性，更易糾錯(cuò)。

由于模塊，命名空間和強(qiáng)大的面向?qū)ο缶幊讨С郑箻?gòu)建大型復(fù)雜應(yīng)用程序的代碼庫(kù)更加容易。

TypeScript在編譯為JavaScript的過(guò)程中，在它到達(dá)運(yùn)行時(shí)間前可以捕獲所有類型的錯(cuò)誤，并中斷它們的執(zhí)行。

首先需要安裝TypeScript，可以通過(guò)npm來(lái)安裝。npm install -g typescript

安裝后就可以使用命令來(lái)編譯用TypeScript編寫的.ts文件成為.js文件，這樣讓編寫的文件在瀏覽器上運(yùn)行。編譯的過(guò)程可以通過(guò)配置來(lái)選擇使用ES5或者ES6的語(yǔ)法來(lái)編譯，這點(diǎn)還是很方便強(qiáng)大的。

支持 TypeScript 的文本編輯器

此外隨著TypeScript的日益流行，現(xiàn)在也出現(xiàn)了更多本身支持或者通過(guò)插件支持 TypeScript 語(yǔ)法、智能提示、糾錯(cuò)、甚至是內(nèi)置編譯器的文本編輯器和IDE。

Visual Studio Code– 微軟另外一個(gè)輕量級(jí)的開源代碼編輯器。內(nèi)置支持TypeScript。
Sublime Text的官方免費(fèi)插件。

WebStorm的最新版本帶有內(nèi)置支持。
其他包括Vim，Atom，Emacs等。

靜態(tài)類型

TypeScript 一個(gè)很獨(dú)特的特征是支持靜態(tài)類型。意思就是可以聲明變量的類型，（因此）編譯器就可以確保賦值時(shí)不會(huì)產(chǎn)生類型錯(cuò)誤。如果省略了類型聲明，TypeScript 將會(huì)從代碼中自動(dòng)推測(cè)出正確的類型。

這有個(gè)例子。任意變量，函數(shù)自變量或者返回值在初始化時(shí)都可以定義自己的類型

因?yàn)?JavaScript 是弱類型語(yǔ)言（即不聲明變量類型），因此 TypeScript 編譯為 JavaScript 時(shí)，（變量類型的聲明）全部被移除：

然而，如果我們?cè)囍斎敕欠ǖ恼Z(yǔ)句，tsc 會(huì)警告代碼里有錯(cuò)誤。例如：

以下是一些最常用的數(shù)據(jù)類型：

Number (數(shù)值類型) – 所有數(shù)字都是數(shù)值類型的，無(wú)論是整數(shù)、浮點(diǎn)型或者其他數(shù)值類型都相同。
String（字符串類型） – 文本類型，就如 vanilla JS 字符串一樣可以使用單引號(hào)或者雙引號(hào)。
Boolean（布爾類型） – true 或者 false，用 0 和 1 會(huì)造成編譯錯(cuò)誤。
Any（任意類型） – 該類型的變量可以設(shè)定為字符串類型，數(shù)值類型或者任何其他類型。
Arrays（數(shù)組類型） – 有兩種語(yǔ)法：my_arr: number[];或者my_arr: Array<number>
Void （空類型）- 用在不返回任何值的函數(shù)中。

Interfaces 接口

接口通常會(huì)根據(jù)一個(gè)對(duì)象是否符合某種特定結(jié)構(gòu)來(lái)進(jìn)行類型檢查。通過(guò)定義一個(gè)接口我們可以命名一個(gè)特殊的組合變量，確保它們會(huì)一直一起運(yùn)行。當(dāng)轉(zhuǎn)譯成 JavaScript 時(shí)，接口會(huì)消失 – 它們唯一的目的是在開發(fā)階段里起到輔助的作用。在下面的例子中我們定義了一個(gè)簡(jiǎn)單的接口來(lái)對(duì)一個(gè)函數(shù)自變量進(jìn)行類型檢查：

屬性的順序并不重要。我們只需必要的屬性存在并且是正確的類型。如果哪里有遺漏，類型錯(cuò)誤，或者命名不同的話，編譯器都會(huì)報(bào)警告信息。

類

在搭建大型規(guī)模的應(yīng)用程序時(shí)，尤其是在 Java 或 C# 當(dāng)中，許多開發(fā)者會(huì)優(yōu)先選擇面向?qū)ο缶幊獭ypeScript 提供一個(gè)類系統(tǒng)，和 Java、C# 中的非常相似，包括了繼承，抽象類，接口實(shí)現(xiàn)，setters/getters 方法等。

值得一提的是由于最新的 JavaScript 更新（ECMAScript 2015），這些類對(duì)于 vanilla JS 來(lái)說(shuō)是原生的，并且在沒(méi)有 TypeScript 的情況下也可以使用。這兩種實(shí)現(xiàn)方式非常相似但是也有不同的地方，TypeScript 更加嚴(yán)格一些。

繼續(xù)上面的 food的例子，這里有一個(gè)簡(jiǎn)單的TypeScript類：

只要寫過(guò)一點(diǎn) Java 或者 C# ，就會(huì)發(fā)現(xiàn)TypeScript和它們?cè)谡Z(yǔ)法上非常相似。繼承也是一樣：

泛型

泛型（Generics）是允許同一個(gè)函數(shù)接受不同類型參數(shù)的一種模板。相比于使用 any 類型，使用泛型來(lái)創(chuàng)建可復(fù)用的組件要更好，因?yàn)榉盒蜁?huì)保留參數(shù)類型。

一段簡(jiǎn)單的腳本例子，傳入一個(gè)參數(shù)，返回一個(gè)包含了同樣參數(shù)的數(shù)組。

第一次調(diào)用函數(shù)的時(shí)候，我們將類型手動(dòng)設(shè)置成字符串。第二次及以后再次調(diào)用的時(shí)候就不必這樣做了，因?yàn)榫幾g器會(huì)判斷傳遞過(guò)什么參數(shù)并且自動(dòng)決定哪種類型最適合。雖然不是強(qiáng)制性的，但是由于編譯器在眾多復(fù)雜環(huán)境中確定正確類型的時(shí)候可能會(huì)失敗，所以每次都傳入類型是好的做法。

TypeScript 本身是開源的，同時(shí)其架構(gòu)設(shè)計(jì)的也很優(yōu)秀，提供了大量的API來(lái)供開發(fā)人員來(lái)擴(kuò)展其功能，目前仍在積極開發(fā)和持續(xù)演變中。

隨著各大廠商對(duì)ES6標(biāo)準(zhǔn)的不斷支持，TypeScript 和 JavaScript 都會(huì)有屬于他們自己的舞臺(tái)，讓前端技術(shù)能夠適應(yīng)越來(lái)越復(fù)雜的應(yīng)用成為可能。

如果你有什么疑問(wèn)或者問(wèn)題，請(qǐng)關(guān)注我并給我私信，我將在第一時(shí)間給予回復(fù)！

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

一、標(biāo)記<Html> 建立HTML文檔

<Head> 設(shè)置網(wǎng)頁(yè)頭部和其它信息

<Body> 設(shè)計(jì)文件格式及內(nèi)文所在<Body> 元素的屬性

Text 設(shè)置頁(yè)面文字的送顔色 Bgcolor 設(shè)置頁(yè)面背景的顡色

Background 設(shè)置頁(yè)面的背景圖像 Link設(shè)置頁(yè)面黙認(rèn)的顔色

Bgproperties 設(shè)置頁(yè)面的背景圖像為固定，不隨頁(yè)面的滾動(dòng)而滾動(dòng)

Alink 設(shè)置鼠標(biāo)正在單擊時(shí)候的鏈接顔色 Vlink 設(shè)置訪問(wèn)過(guò)后的鏈接顔色

Topmargin 設(shè)置頁(yè)面的上邊距 Leftmargin 設(shè)置頁(yè)面的左邊距

二、頭部

標(biāo)記 <Base> 當(dāng)前文檔的URL全稱 <Title>設(shè)置顯示在瀏覽器在上方的標(biāo)題內(nèi)容

<Isindex> 表明該文檔是一個(gè)可用于檢索的網(wǎng)關(guān)腳本

<Meta> 有關(guān)文檔本身的信息，例如用于查詢的關(guān)鍵詞，用于獲取該文檔的有效期等

<Style> 設(shè)置CSS層疊樣式表的內(nèi)容

<Mate> 標(biāo)記屬性

Http-Equiv 生成一個(gè)HTTP標(biāo)題域，它的取值與另一個(gè)屬性相同，

例如Http-Equiv=Expires，實(shí)際取值由Content確定

Name 如果元數(shù)據(jù)是以關(guān)鍵字/取值的形式出現(xiàn)的，Name 表示鍵字,

如Author或ID

Content 關(guān)鍵字/取值的內(nèi)容

三、文字

文字標(biāo)記 <HNumber>……<1HNumber> Number=1.2.3.4.5.6

分別指1至6級(jí)標(biāo)題

<Font>文字

文字的修飾標(biāo)記 <B>/<strong> 粗體 <I>/<Em>/<cite> 斜體

<Sup>上標(biāo) <sub>下標(biāo) <Big>大字號(hào) <small>小字號(hào)

<U>下劃線 <S>/<strike>刪除線 <Address>地址

<Tt>打字機(jī)文字 <Blink>閃爍文字（只適用于Netscape瀏覽器）

<Code>/<samp>等寬 <kbd>鍵盤輸入文字 <Var>聲明變量

<Fant>標(biāo)記的屬性

Face 字體 Size字號(hào) Color顔色

四.列表

列表標(biāo)記 <Ul>無(wú)序列表 <Ol>有序列表 <Dir>回錄列表 <Dl>定義列表

<Meru>菜單列表 <Dt>·<Dd>定義列表的標(biāo)記 <Li>列表項(xiàng)目的標(biāo)記

<Ul><Ol>標(biāo)記的屬性 Type設(shè)置列表類型 start設(shè)置列表起始屬性

Type的屬性值 1 數(shù)字 a 小寫字母 A 大寫字母 i小寫羅馬數(shù)字

I 大寫羅馬數(shù)字 Disc ● Circle ○ square □

五.鏈接

鏈接標(biāo)記 <A> 鏈接

<A>標(biāo)記的屬性 Href 指定鏈接地址 Name給鏈接命名

Title設(shè)置鏈接提示文字 Target指定鏈接的目標(biāo)窗口

Target屬性值 -parent在上一級(jí)窗口中打開。一般使用分幀的框架頁(yè)會(huì)經(jīng)常使用

-bank在新窗口中打開

-self在同一個(gè)幀或窗口中打開.這項(xiàng)一般不用設(shè)置

Href屬性值 http:// 進(jìn)入萬(wàn)維網(wǎng)站點(diǎn) news://啟動(dòng)新聞?dòng)懻?/p>

ftp:// 進(jìn)入文件傳輸服務(wù)器 mailto:// 啟動(dòng)新聞?dòng)懻摻M

telnet:// 啟動(dòng)telnet方式 gopher://訪問(wèn)一個(gè)gopher服務(wù)器

六.圖片

圖片標(biāo)記 <Img>圖片 <Map>圖像映射 <Area>圖像映射中定義區(qū)域

<lmg>標(biāo)記的屬性 src圖像的源文件 Alt提示文字 Width寬度

Height高度 Vspace垂直間距 Hspace水平間距 Align排列 Border邊框

Align屬性值 Top文字的中間線居于圖片上方 Middle文字的中間線居于圖片中間

Bottom文字的中間線居于圖片底部 Left 圖片在文字的左側(cè)

Right圖片在文字的右側(cè) Absbottom文字的底線居于圖片底部

Absmiddle文字的底線居于圖片中間 Baseline英文文字基線對(duì)齊

Texttop英文文字上邊線對(duì)齊

Shape屬性值

Rect矩形區(qū)域 Circle橢圓形區(qū)域 Poly多邊形區(qū)域

七.表格

1.表格標(biāo)記 <Table>…</Table>表格標(biāo)記 <Tr>…</Tr>行標(biāo)記

<Td>…</Td>單元格標(biāo)記 <Th>表頭標(biāo)記

<Table>標(biāo)記屬性 Bordercolor 表格邊框色 Borde表格邊框的寬度

Bordercolorlight 表格邊框亮邊框色（左上邊框顔色）

Bordercolordark 表格暗邊框色（右下邊框顔色）

Bordercolor 行的邊框顔色 Width表格的寬度 Height表格的高度

Bgcolor表格的背景顔色 Background表格的背圖像

<Tr>標(biāo)記屬性 Align行內(nèi)容的水平對(duì)齊 Valign 行內(nèi)容的垂直對(duì)齊

Bgcolor 行的背景顔色 Background 行的背景圖像

Bordercolor 行的邊框顔色 Bordercolorlight 行的亮邊框顔色

Bordercolordark 行的暗邊框顔色

<Td>標(biāo)記屬性 Align單元內(nèi)容的水平對(duì)齊 Valign單元格內(nèi)容的垂直對(duì)齊

Bgcolor 單元格的背景顔色 Background 單元格的背景圖像

Bordercolor單元格的背景顔色 Bordercorlorlight單元格的亮邊框顔色

Brodercolordark 單元格的暗邊框顔色 Width 單元格的寬度

Height單元格的高度

<Th>標(biāo)記屬性 Align表頭內(nèi)容的水平對(duì)齊 Valign表頭內(nèi)容的垂直對(duì)齊

Bgcolor 表頭的背景顔色 Background表頭的背景圖像

Bordercolor表頭的邊框顔色 Bordercolorlight 表頭的亮邊框顔色

Bordercolordark 表頭的暗邊框顔色 Width 表頭的寬度 Height 表頭的高度

八.表單

1.表單標(biāo)記 <Form>表單標(biāo)記 <Input>表單輸入標(biāo)記

<select>菜單和列表標(biāo)記 <Option>菜單和列表項(xiàng)目標(biāo)記

2.屬性 <Form> Name表單的名稱

Method 定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get,post

Action 用來(lái)定義表單處理程序（一個(gè)Asp,CGI等程序）的位置（相對(duì)地址或絕對(duì)地址）

<lnput>標(biāo)記屬性 Name 域的名稱 Type域的類型

Maxlength 域的最大輸入字符數(shù) size域的寬度 Value 域的默認(rèn)值

<Select>標(biāo)記屬性 Name 菜單和列表的名稱 size 顯示的選項(xiàng)數(shù)目

Multiple 列表中的項(xiàng)目多選 Value 選項(xiàng)值 selected默認(rèn)選項(xiàng)

<Texrarea>標(biāo)記屬性 Name 文字域的名稱 Rows文字域的行數(shù)

Cols 文字域的列數(shù) Value 文字域的默認(rèn)值

Type屬性值 Text 文字域 Password 密碼域 File 文件域

Checkbox復(fù)選框 Redio單選框 Button普通按扭

Submit 提交按鈕 Reset重置按鈕 Hidden隱藏域Image圖像域

九.滾動(dòng)

滾動(dòng)標(biāo)記 <Marquee>

<Marquee>標(biāo)記屬性 Direction 滾動(dòng)方向 up 文字向上滾動(dòng) Left文字向左滾動(dòng)

Behavior 滾動(dòng)方式 Scroll 循環(huán)往復(fù)

Side 只做一次滾動(dòng)

Alternate 交替進(jìn)行滾動(dòng)

ScrollAmount 滾動(dòng)速度

ScrollDelay 滾動(dòng)延遲

Trim函數(shù)用來(lái)剔除首尾空格

十.框架

1.標(biāo)記 <Frameset> 框架邊框標(biāo)記 <Frame> 框架標(biāo)記 <Iframe>浮動(dòng)框架標(biāo)記

<Frameset>標(biāo)記屬性 Cols列 Rows行

<Frame> 標(biāo)記屬性 src框架中顯示頁(yè)面源文件的路徑

FrameBorder 框架邊框顯標(biāo)屬性 FrameSpacing框架邊框?qū)挾葘傩?/p>

Scrolling框架滾動(dòng)條顯示屬性 NoResize 框架尺寸調(diào)整屬性

BorderColor 框架邊框顔色屬性 MarginWidt 框架邊框緣寬度屬性

MarginHerght框架邊緣高度屬性

<1frame> 標(biāo)記屬性 src浮動(dòng)框架中顯示頁(yè)面源文件的路徑

Width 浮動(dòng)框架的寬度 Height 浮動(dòng)框架的高度

Name 浮動(dòng)框架的名稱

Align 浮動(dòng)框架的排列方式 Left表示居左 Center表示居中 Right表示居右

FrameBorder 框架邊框顯示屬性 FrameSpacing 框架寬度屬性

Scrolling 框架滾動(dòng)條顯示屬性 ( yes顯示 No不顯示 Auto根據(jù)頁(yè)面的長(zhǎng)度自動(dòng)判斷是否晶粒示滾動(dòng)條

NoResize 框架尺寸調(diào)整屬性 BorderColor框架的顔色

MarginWidth 框架邊緣寬度屬性 MarginHeight 框架邊緣高度屬性

插入刷新

步驟：1.選擇"查看/文件頭內(nèi)容"

2.在插入面板上，打開HTML選項(xiàng)卡

優(yōu)化代碼

打開文件窗口，執(zhí)行"命令、清理HTML"命令

文本換行：Enter 行距較大

Enter + Shift 行距較小

插入水平線設(shè)置顔色：?jiǎn)螕魧傩悦姘逯械目旖輼?biāo)簽編輯器按鈕

在代碼中鍵入"color=#顔色值"

當(dāng)圖像無(wú)法顯示時(shí)將顯示這段文字：

圖像屬性中的替代→輸入文字

插入鼠標(biāo)經(jīng)過(guò)圖像:準(zhǔn)備兩張圖像

在文件窗口中，將光標(biāo)放置于需要翻轉(zhuǎn)圖像位置→插入工具欄中單擊鼠標(biāo)經(jīng)過(guò)圖像

Ⅱ.使用導(dǎo)航條：

在"常用"對(duì)象組中，單擊"圖像"小三角→導(dǎo)航條

插入圖像占位符：圖像小三角→圖像占位符

Flash動(dòng)畫的背景實(shí)現(xiàn)透明參數(shù)wmode 值 transparent

插入 Java Applet

插入表單

插入表單域：對(duì)象面板上"表單"→插入表單

插入文本域：?jiǎn)螕裘姘迳系牟迦胛谋居? 初始值=打開時(shí)顯于的文字

插入密碼框：在屬性面板上選擇密碼

插入多行文本域：在類型后選擇多行

插入隱藏域：對(duì)象面板→插入隱藏域

插入按鈕：標(biāo)簽用來(lái)設(shè)置按鈕上顯示的文本

插入圖像提交按鈕=圖像域：

插入文件上傳按鈕=文件域：

插入單選框

插入單選按鈕組：Label文字說(shuō)明 Value 單選按鈕的值

插入復(fù)選框

菜單/插入列表：列表值→

插入跳轉(zhuǎn)菜單：(

制作網(wǎng)頁(yè)鏈接

URL統(tǒng)一資源定位器

目標(biāo)：_blank在一個(gè)新的未命名的瀏覽器窗口中打開

_parent如果是嵌套的框架，鏈接會(huì)在父框架或窗口中打開，否則=_top

_top在完整的瀏覽器中打開

創(chuàng)建搜索頁(yè)

運(yùn)行中輸入:

Inetmgr (IIS

Odbcad32 (odbc

Asp對(duì)象

Applicatipn 在給定的應(yīng)用程序的所有用戶間共享信息,并在服務(wù)器運(yùn)行期間持久地保存數(shù)據(jù)。

集合： Contents

staticObjects

Item（變量值）=設(shè)置資料變量的值

Key（變量名稱）=設(shè)置資料變量的名稱

Count（變量資料的數(shù)量）=表示

Coutents集合中資料的總數(shù)量

方法： Lock

Unlock

事件： Applicatipn_Onstart

Application_OnEnd

Session 存儲(chǔ)特定的用戶會(huì)話所需的信息

屬性：CodePage

LCID

SessionID

Timeout

集合：Contents

StaticObjects

方法：Abandon

事件：Session_Onstart

Session_OnEnd

Response 用來(lái)控制發(fā)送給用戶的信息，包括直接發(fā)送信息給瀏覽器，重定位瀏覽器到另一個(gè)URL或設(shè)置Cookie值

屬性： Buffer

CacheControl

Charset

ContentType

Expires

ExpiresAbsolute

IsClientConnected

PICS

Status

集合： Cookies

方法： AddHeader

AppendToLog

BinaryWrite

Clear

End

Flush

Redirect

Write

Request 訪問(wèn)任何基于HTTP請(qǐng)求傳遞的信息，常見的有從HTML表單用Post方法或Get方法傳遞的參數(shù)，Cookie或用戶認(rèn)證等。

屬性： TotalBytes

集合： ClientCertificate

Form

QueryString

ServerVaiables

方法： BinaryRead

Server 提供對(duì)服務(wù)器方法和屬性的訪問(wèn)

屬性： ScriptTimeout

集合：無(wú)

方法： CreatObject

HTMLEncode

MapPath

URLEncode

Recordset

MoveNext 將前數(shù)據(jù)記錄移至下一條

MovePrevious 將當(dāng)前數(shù)據(jù)記錄移至上一條

MoveFirst 將當(dāng)前數(shù)據(jù)記錄移至第一條

MoveLast 將當(dāng)前數(shù)據(jù)記錄移至最后一條

AbsolutePosition=N 將當(dāng)前數(shù)據(jù)記錄移至第N條

EOF 當(dāng)前數(shù)據(jù)記錄是否移過(guò)了最后一條（發(fā)生于向下移動(dòng)時(shí)）

BOF 當(dāng)前數(shù)據(jù)記錄是否移過(guò)了第一條（發(fā)生于向上移動(dòng)時(shí)）

VBScript 運(yùn)算符

算術(shù)運(yùn)算符

指數(shù) 取負(fù) 乘法除法加法減法取模連接整數(shù)除法

∧ － * ／ ﹢ ﹣ Mod & \

比較運(yùn)算符

相等不相等小于大于小于或等于大于或等于對(duì)象相象

=<> < > <=>=IS

邏輯運(yùn)算符

邏輯非邏輯與邏輯或異或邏輯等于邏輯蘊(yùn)含

Not And Or Xor Eqv Imp

文本標(biāo)記語(yǔ)言

HTML 代表超文本標(biāo)記語(yǔ)言。它給出了網(wǎng)站或網(wǎng)頁(yè)的基本結(jié)構(gòu)。它定義了您的網(wǎng)站在結(jié)構(gòu)方面的外觀，即網(wǎng)站包含標(biāo)題、輸入、表單、表格、按鈕等等。

HTML 代碼

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body> 
    <h1>Hello world</h1>
  </body>
</html>

您可以在此處查看 Hello world 網(wǎng)站的實(shí)時(shí)版本，其代碼寫在上面。

我們將詳細(xì)討論每一行代碼，以便您能夠了解每一行的想法。

<!DOCTYPE html>

這一行基本上告訴網(wǎng)絡(luò)瀏覽器我們正在使用哪個(gè)HTML版本。在本例中我們是HTML5。

html

這是包含我們網(wǎng)頁(yè)的所有代碼的HTML元素。換句話說(shuō)，這包含了網(wǎng)頁(yè)所需的所有結(jié)構(gòu)和設(shè)置，即外部 CSS、JS、CDN 等。您可能會(huì)注意到所有內(nèi)容都位于<html>和之間</html>。這是因?yàn)檫@樣所有的內(nèi)容都會(huì)在這些元素之間。<html>通常指的是開始標(biāo)簽，</html>通常指的是結(jié)束標(biāo)簽。

頭

該元素包含了網(wǎng)頁(yè)的所有要求。例如，如果您想添加一些外部 CSS 文件、外部 JS 文件或一些外部 CDN（這是網(wǎng)站的要求），那么此元素就會(huì)派上用場(chǎng)。如果您不了解 CSS，它用于樣式目的，JS 用于功能目的，CDN 代表內(nèi)容交付網(wǎng)絡(luò)。

標(biāo)題

該元素包含顯示在Web 瀏覽器選項(xiàng)卡中的標(biāo)題。如果您訪問(wèn) Hello world 網(wǎng)站，您會(huì)注意到網(wǎng)絡(luò)瀏覽器的選項(xiàng)卡中有標(biāo)題。這是這些標(biāo)簽的主要工作。Hello world<title>...</title>

身體

該元素包含用戶可見的結(jié)構(gòu)。您可以想象到的上述元素可以用于我們網(wǎng)頁(yè)的設(shè)置。主要內(nèi)容進(jìn)入正文部分。

h1

h1是用于標(biāo)題的標(biāo)題元素。如果您訪問(wèn) hello world 網(wǎng)站，我們可以看到的 hello world 就是標(biāo)題。h1不僅僅是我們擁有的標(biāo)題元素。我們有一個(gè)標(biāo)題元素，從開始h1，直到，h6唯一的區(qū)別是h1較大，然后尺寸減小，直到 h6。

如果您想了解有關(guān) HTML 元素的更多信息，可以在此處查看。

讓我們創(chuàng)建一些表

<table>
  <tr>
    <th>S.No.</th>
    <th>Day</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Sunday</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Monday</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Tuesday</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Wednesday</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Thursday</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Friday</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Saturday</td>
  </tr>
</table>

table：這是用于創(chuàng)建表格的表格元素。
tr：表示表格行。即表的行。
td：表示表數(shù)據(jù)。即包含該表的數(shù)據(jù)。

您可以在此處查看代碼的實(shí)時(shí)版本。
注意此代碼必須寫在body元素之間。

是時(shí)候創(chuàng)建 HTML 表單了

當(dāng)您上網(wǎng)時(shí)，您可能見過(guò)一些 HTML 表單。讓我們來(lái)創(chuàng)建我們自己的 HTML 表單。

這是代碼片段。

    <form>
        Name: <input type="text" name="name"><br>
        Email: <input type="email" name="email"><br>
        <input type="submit" value="Submit">
    </form>

form：HTML 元素幫助我們創(chuàng)建 HTML 表單。
input：輸入元素允許我們獲取用戶的輸入。和稱為HTML 屬性type="email"。name="email"

您可以在此處查看該網(wǎng)頁(yè)的實(shí)時(shí)版本。
注意此代碼必須寫在body元素之間。

結(jié)論

總之，HTML 通過(guò)定義其結(jié)構(gòu)作為網(wǎng)站或網(wǎng)頁(yè)的基礎(chǔ)。它決定了網(wǎng)站在標(biāo)題、表單、表格、按鈕等元素方面的顯示方式。通過(guò)使用 HTML 標(biāo)簽和元素，我們可以創(chuàng)建結(jié)構(gòu)良好且組織良好的網(wǎng)頁(yè)。

在線咨詢

上一篇：普通網(wǎng)站如何制作一個(gè)網(wǎng)站？
下一篇：JavaScript奇淫技巧：命令行語(yǔ)法高亮

您的項(xiàng)目需求

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

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