第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

慕少3449830 · 更新于 2020-09-08

語法簡介

本章概括介紹 HTML 的標簽語法，以及 HTML 語言和傳統(tǒng)語言的差異。

1. HTML來歷

1969年，IBM 的技術(shù)人員 Charles Goldfarh 和 Edward Mosher 等人一起發(fā)明了通用標記語言 GML（Generalized Marked Language）。1985年在英國成立了國際 SGML 用戶組織，在1986年，SGML 成為國際標準ISO8879：信息處理標準通用標記語言（Information processing Text and office system Standard generalized markup language）。HTML 和 XML 派生于 SGML，XML 可以被認為是它的一個子集，而 HTML 是它的一個應(yīng)用。為了告訴瀏覽器我們需要展示什么內(nèi)容，HTML 定義了一整套符號標記規(guī)范，這些規(guī)范包括

  • 設(shè)置文字的格式；
  • 創(chuàng)建列表；
  • 顯示圖片；
  • 顯示多媒體；
  • 顯示超鏈接；
  • 等等。

2.標準

HTML3.2 以前的標準是由 IETF 制定。IETF 互聯(lián)網(wǎng)工程任務(wù)組（The Internet Engineering Task Force），成立于1985年底，是全球互聯(lián)網(wǎng)最具權(quán)威的技術(shù)標準化組織，主要任務(wù)是負責互聯(lián)網(wǎng)相關(guān)技術(shù)規(guī)范的研發(fā)和制定，當前絕大多數(shù)國際互聯(lián)網(wǎng)技術(shù)標準出自IETF。 IETF 的工作成果主要以RFC文檔的途徑發(fā)布。
HTML 3.2 開始，由 W3C 制定標準。W3C 萬維網(wǎng)聯(lián)盟（ The World Wide Web Consortium ）創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)。到目前為止，W3C 已發(fā)布了200多項影響深遠的Web技術(shù)標準及實施指南，如廣為業(yè)界采用的超文本標記語言（ HTML ）、可擴展標記語言（ XML ）以及幫助殘障人士有效獲得Web內(nèi)容的信息無障礙指南（ WCAG ）等，有效促進了Web技術(shù)的互相兼容，對互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。

3.HTML和編譯型語言的區(qū)別

計算機語言分成解釋型語言和編譯型語言兩種。

我們下面來展開講一下解釋型語言和編譯型語言兩者的區(qū)別：

在說兩區(qū)別之前我們先來講一下計算機怎么把代碼翻譯成計算機能看得懂的語言（翻譯成機器碼）。

眾所周知，計算機 CPU 的集成電路中，除了電容、電阻、電感就是晶體管了，每個晶體管相當于一個開關(guān)，理論上 CPU 只能存儲識別兩個標識符，那就是 0 和 1，所以說 CPU 識別的指令集只能由 0 和 1 組合。那么所有的計算機語言想要 CPU 能看得懂，必須翻譯成 0/1 代碼才行，這個由 0/1 組成的代碼叫做機器碼。但是機器碼相對于人來說過于繁瑣，所以就有人發(fā)明了高級語言、低級語言等等，這些語言的分級是根據(jù)它的語法是貼近人還是貼近機器來區(qū)分的，越貼近人它就越高級，越貼近機器它就越低級，但是最終想要 CPU 可以識別都需要翻譯成機器碼。

典型的低級語言包括剛剛提到的機器碼、匯編語言、c 等，高級語言包括 PHP、c#、JavaScript、Java、Python 等等。

什么是編譯型語言和解釋性語言呢？

剛剛我們提到翻譯成機器碼，這個翻譯的過程就叫做編譯或解釋。編譯型語言是指通過編譯器翻譯成完整的機器碼，然后通過 CPU 去執(zhí)行。

而解釋型語言是指通過一個虛擬機的方式一行行的翻譯，翻譯一行執(zhí)行一行；還有一種方式是混合型，介于兩者之間。常見的編譯型語言包括 c++、c、rust等，解釋型語言包括 JavaScript、PHP、HTML 等等，混合型包括 Python、Java等。

4. 標簽語法和屬性

4.1 HTML文檔擴展名

HTML 以文檔的形式存儲，文檔的后綴可以是 .html .htm .xhtml，有時也會看到 php/asp/jsp 等類型的網(wǎng)頁后綴，這種是通過服務(wù)器的 CGI 動態(tài)解析過的網(wǎng)頁，網(wǎng)頁內(nèi)容也是 HTML 格式，只不過網(wǎng)頁后綴是根據(jù)服務(wù)器的 CGI 網(wǎng)關(guān)的不同來定義的。不同的后綴形式可能在瀏覽器的解釋結(jié)果不相同，在此不做深入討論。

4.2 HTML標簽

標簽有兩種定義方式：

  • 閉合型標簽：<標簽>內(nèi)容</標簽>
  • 自閉合標簽： <標簽 />或者<標簽>
    標簽不區(qū)分大小寫，工作中通常使用小寫，因為日常寫代碼的時候 IDE 通常設(shè)置小寫。
實例演示
預覽 復制
復制成功！
<div>這是一個閉合標簽</div> <!-- 閉合標簽 -->
<DIV>跟上邊等價</DIV> <!-- 標簽不區(qū)分大小寫 -->
<input type='text' name='test' /> <!-- 自閉合標簽 -->
運行案例 點擊 "運行案例" 可查看在線運行效果

自閉合標簽通常是一些不需要包含具體 HTML 內(nèi)容的的標簽，例如表單、圖片、換行符、css 樣式等等。

實例演示
預覽 復制
復制成功！
<input type='radio' /><!-- 表單 -->
<img src='https://www.baidu.com/img/bd_logo1.png' /><!-- 圖片 -->
<br>
<link rel="stylesheet" type="text/css" href="theme.css" /><!-- 引入css樣式 -->
運行案例 點擊 "運行案例" 可查看在線運行效果

從上述例子看得出來，通常自閉和標簽是不包含實際的文本內(nèi)容，通常是用來引入文件、圖片、樣式等作用，而閉合標簽是包含內(nèi)容，既然包含內(nèi)容所以后邊的閉合標簽相當于起到一個結(jié)束符的作用。實際開發(fā)中，如果忘記將標簽閉合，通常來說日常的瀏覽器（例如在 chrome v81） 中不會報語法錯誤，而是自動閉合，但是不建議這么做，因為瀏覽器并非完全的智能，有可能會引起排版錯誤，例如：

實例演示
預覽 復制
復制成功！
<p style='color:red'>我是紅色的段落</p><!-- 正確的寫法 -->
<span>我是默認的文本</span>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

這段代碼中，定義了一個段落，并設(shè)置了字體為紅色，當忘記使用閉合標簽時

實例演示
預覽 復制
復制成功！
<p style='color:red'>我是紅色的段落<!-- 忘記閉合 -->
<span>我是默認的文本</span>
運行案例 點擊 "運行案例" 可查看在線運行效果

在瀏覽器的展示效果如下：
圖片描述
可以看到，樣式出現(xiàn)了錯亂。

TIPS: 所以在日常項目開發(fā)中，盡量選擇帶有語法檢測的 IDE，可以避免大部分的語法錯誤。

4.3 屬性

屬性是控制元素的第二個維度，通過屬性的設(shè)置，可以讓元素展現(xiàn)出不同的表現(xiàn)風格。屬性包含屬性名稱和屬性值，通常在元素標簽中用 name = value 的方式設(shè)置，多個屬性之間使用空格隔開。例如表單中的是否只讀，可以用

實例演示
預覽 復制
復制成功！
<input readonly=true type='text'>
運行案例 點擊 "運行案例" 可查看在線運行效果

屬性值通常需要使用引號隔開，并非強制性，但是一旦屬性值中包含空格的話不使用引號隔開則會解析異常，例如：

實例演示
預覽 復制
復制成功！
<input name="one style" type='text'><!-- 定義表單的name為 one style -->
<input name=one style type="text"><!-- 未使用引號 -->
運行案例 點擊 "運行案例" 可查看在線運行效果

上述表單定義 name 為 one style，第二種寫法的解析結(jié)果則是定義表單的 name 為 one，然后定義一個空的 style 屬性，顯然與預期不符，但是瀏覽器并不會報錯。所以使用規(guī)范的寫法（引號隔開）則會避免這種異常情況出現(xiàn)。
一個標簽內(nèi)可以包含多個屬性，屬性名稱不能重復，屬性名稱不區(qū)分大小寫，例如：

實例演示
預覽 復制
復制成功！
<input type='text' type='file' ><!-- 這種寫法是錯誤的 -->
運行案例 點擊 "運行案例" 可查看在線運行效果

這樣的話瀏覽器會解析錯誤，不同的瀏覽器會呈現(xiàn)不同的效果，但是一般不會報錯。
除了可以在標簽內(nèi)定義元素的屬性之外，還可以使用 JavaScript 動態(tài)控制屬性，這種方式在項目開發(fā)中經(jīng)常使用，例如：

實例演示
預覽 復制
復制成功！
<input type='text' id = 'num1'> + <input type='text' id='num2'> = <input type='text' id='res'>
<button onclick='count()'>計算結(jié)果</button><!-- 點擊按鈕實現(xiàn)計算 -->
<script>
function count(){
    if(isNaN(document.getElementById('num1').value) || isNaN(document.getElementById('num2').value)) return alert("請輸入正確的數(shù)字");//判斷輸入數(shù)字是否合法
    document.getElementById('res').value = parseFloat(document.getElementById("num1").value) + parseFloat(document.getElementById("num2").value);//將結(jié)果輸出
}
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

上述代碼，通過使用 JavaScript 設(shè)置表單元素的 value 屬性，實現(xiàn)了一個簡單的加法計算器。
圖片描述

4.4 注釋

注釋內(nèi)容在瀏覽器中不做解釋，只用于開發(fā)者記錄代碼用途等信息，格式如下：

實例演示
預覽 復制
復制成功！
< !-- 這是在HTML的注釋內(nèi)容，支持多行注釋 -->
運行案例 點擊 "運行案例" 可查看在線運行效果
實例演示
預覽 復制
復制成功！

// 這是JavaScript的單行注釋
/*
這是JavaScript的多行注釋
*/
運行案例 點擊 "運行案例" 可查看在線運行效果
實例演示
預覽 復制
復制成功！
/* 這是css的注釋，支持單行注釋和多行注釋 */
運行案例 點擊 "運行案例" 可查看在線運行效果

以上可以看出，css 和 HTML 都只有一種注釋方式，這種設(shè)計方式可以因為 HTML 和 css 只是標記語言，沒有函數(shù)和類等傳統(tǒng)編程語言的概念，因此無需過多的注釋風格。

TIPS: 除以上注釋，實際項目開發(fā)中可能還會針對文件、類、項目模塊做注釋，這種注釋的設(shè)置方式跟使用的 IDE 設(shè)置有關(guān)，有些 IDE 可以設(shè)置當聲明一個類或文件時自動加上定義好的注釋內(nèi)容，良好的注釋可以提升項目整體的擴展性、維護性、可用性。在程序編譯或者解釋的過程中會被瀏覽器忽略，在開發(fā)大型項目中上線之前通過會做程序壓縮合并等處理，處理的過程中通常會刪掉注釋代碼

4.5 HTML代碼結(jié)構(gòu)

符合HTML標準的網(wǎng)頁代碼結(jié)構(gòu)大致格式如下

實例演示
預覽 復制
復制成功！
<!DOCTYPE >  <!-- 控制w3c格式 -->
<html> 
<head> 
<meta charset="utf-8"> <!-- 告訴瀏覽器使用的是utf-8字符集 --> <title>我的網(wǎng)站</title><!-- 這里用來編寫網(wǎng)站的標題 -->
</head>
<body> <!-- 只有body標簽的內(nèi)容，才能真正顯示在瀏覽器的窗口 --> 
</body> 
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

上述內(nèi)容是一個大致符合 w3c 標準的 HTML 代碼框架，其中包含文檔描述頭標簽、HTML標簽、頭標簽和 body 標簽，但是實際開發(fā)者可能不會包含這么完整的標簽框架，例如可以只聲明 body 內(nèi)的標簽：

實例演示
預覽 復制
復制成功！
<a href="http://www.baidu.com">百度搜索</a>
運行案例 點擊 "運行案例" 可查看在線運行效果

這樣的話，瀏覽器的展示效果并未有什么變化，但是當打開瀏覽器調(diào)試工具可以發(fā)現(xiàn)：
圖片描述
瀏覽器幫我們補齊的缺失的標簽。

4.6 在瀏覽器中查看源碼

開發(fā)過程中需要調(diào)試、查看代碼，在瀏覽器中可以通過開發(fā)者工具方便的查看源碼，這里以 Chrome 舉例，在網(wǎng)頁中點擊右鍵->查看網(wǎng)頁源代碼/檢查，即可查看源碼。
圖片描述

總結(jié)

本章主要從標簽語法、屬性用途、文件格式、框架結(jié)構(gòu)等幾個方面大致介紹了HTML的規(guī)范和標準，只是預熱一下，沒有作深入討論。之后的章節(jié)里，我們會根據(jù)以上內(nèi)容延伸講解。