產品經理的技術腦：html是什么意思？

文本標記語言（HTML）是用于在 Internet 上顯示 Web 頁面的主要標記語言。換句話說，網頁由 HTML 組成，用于通過 Web 瀏覽器顯示文本，圖像或其他資源。

使用標記來描述文檔結構和表現形式并通過瀏覽器進行解析,然后把結果顯示在網頁上. 它是網頁構成的基礎,你見到的所有網頁都離不開HTML,所以學習HTML是基礎中的基礎。

什么是HTML？

HTML是用來制作網頁的標記語言

HTML是Hypertext MarkupLanguage的英文縮寫, 即超文本標記語言

HTML語言是一種標記語言,不需要編譯,直接由瀏 HTML語言是一種標記語言,不需要編譯,直接由瀏覽器執行

HTML文件是一個文本文件,包含了一些HTML元素, HTML文件是一個文本文件,包含了一些HTML元素,標簽等.

HTML文件必須使用html或htm為文件名后綴

HTML是大小寫不敏感的,HTML與html是一樣的

Html和CSS的關系

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的：

1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

2. CSS樣式是表現(外觀控制)。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。

HTML形象案例理解

為了簡化對復雜Internet的理解，暫時把復雜的Internet抽象成：向女生宿舍發送信號。

為了能夠在斷網后繼續聯絡女神，我們買來了電池和開關，然后拉了普通電線線到女神的寢室。女神把小燈泡接在了電線的兩端。

這時只需要開閉開關，就可以控制女神屋里的燈泡了。

發送信號

關閉著小燈泡1秒鐘，代表發送一個0。

打開了小燈泡1秒鐘，代表發送一個1。

此時可以向女神發送任意二進制內容了。

發送文本

我們只希望發送一個“Good Night”。所以必須想辦法對“Good Night”進行編碼。

'G','o','o','d'的ASCII編碼是：071，111，111，100，轉換成二進制就是：0100 0001 0110 1111 0110 1111 0110 0100

使用發送二進制信號的方法發過去，女神需要自己解碼來閱讀出“Good”。

發送富文本

有一天，我們希望發送“I miss you”。

為了表達心意，你希望加粗“you”，并使用紅色的字體發送“miss”，而這一根簡陋的電線似乎很難理解“加粗”和“紅色”

于是機智的我們發送了：I <red>miss</red> <b>you</b>

同樣機智的女神理解了這件事情。

你發明了一種語言

我們很喜歡這種編碼格式，這是一種標記語言，于是我們稱其為：TGML （To Girl Markup Language）

平時你使用TGML來和你的女神通信，TGML可以非常好的解決富文本的傳輸問題。

表白

終于決定表白了，我們繪制了很美麗的心形圖片，還有兩個按鈕：接受、拒絕。

兩個按鈕分別會鏈接到 "接受.tgml"和"拒絕.tgml"

為了描述圖片，我們使用了<img src="pic">

為了描述按鈕，我們使用了<a href="接受.tgml">

現在發送給女神的內容，已經不只是帶格式的富文本，而是帶鏈接的富文本。

于是在這個世界上，擁有了一種能夠描述超文本的語言，叫做TGML

超文本

描述超文本的方式有很多，例如：HTML，TGML，還有markdown。HTML的誕生是為了描述超文本。

超文本的用途也很多，例如：描述一個網頁，或者描述一個Word文檔。HTML文件是超文本文件。但是超文本未必是HTML。

Microsoft Word

Microsoft Word是Office的一個組件。它同樣代表一個超文本資源。

如果你解壓一個docx文件并仔細翻一翻，你能找到你剛才寫的作業，是以HTML方式記載著。

當然，描述超文本還有markdown。所以你可以使用一些工具，比如pandoc，把markdown轉換成word。

故事的結局

女神的名字叫瀏覽器，我們的名字叫Web服務器，女神和我們中間的那根線叫HTTP。

eb標準：

由于不同瀏覽器解析出來的網頁效果可能不同，所以需要通過web標準對其進行約束使其一致，主要包括三個方面：

結構標準：

結構用于對網頁元素進行整理和分類，主要指的是HTML。

表現標準：

表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

行為標準：

行為是指網頁模型的定義及交互的編寫，主要指的是 JavaScript。

初識HTML：

html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標記語言” ，描述網頁的一種語言。

HTML發展：

XHTML 是一個 W3C 標準，可擴展超文本標簽語言（EXtensible HyperText Markup Language），更嚴格更純凈的 HTML 版本，作為一種 XML 應用被重新定義的 HTML。

HTML中的注釋：

 <!-- 注釋標簽：注釋的內容 -->

條件注釋：

條件注釋的作用是：定義只有Internet Explorer才執行條件注釋中的html標簽。


    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網頁的跟標簽,lang=""用來設置網頁語言，其值還有zh-CN中文簡體、fr法語等，設置后當系統設置語言和網頁語言發生沖突時會提示是否翻譯網頁 -->
    <head> <!-- 網頁的頭部 -->
        <meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有gbk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動端視口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設置iOS頂部通欄樣式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到數字不轉成電話號碼 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 網站搜索關鍵字 -->
        <meta name='description' content='this is description'> <!-- 描述網站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!--  網站的圖標，如果圖標是gif圖，則需要改：type="image/gif"，引入網站圖標另一種方法：命名為favicon.ico文件放到網站根目錄下 -->
        <link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base標簽，定義這個網頁中a鏈接打開窗口的方式，其值還有_self -->
        <title>標題</title> <!-- 網站的標題 -->
        <style type="text/CSS">  /* 用來寫CSS代碼，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 網頁的主體 -->
        <h1>標題</h1> <!-- 標題標簽，共六個級，分別為：h1~h6,大小逐級遞減，h1在一個網頁中只允許出現一次。 -->
        <p>段落</p> <!-- 段落標簽 -->
        <hr/> <!-- 單線標簽,所有單標簽后面的關閉符均可以省略 -->
        <br/> <!-- 換行標簽 -->
        </div></div> <!-- 無語義化標簽布局用,上面的標簽是語義化標簽 -->
        <span>span</span> <!-- 無語義化標簽分割用 -->                
        <strong>加粗</strong> <!-- 加粗標簽 -->
        <b>加粗</b> <!-- 加粗標簽 -->
        <i>傾斜</i> <!-- 傾斜標簽 -->
        <em>傾斜</em> <!-- 傾斜標簽 -->
        <s>刪除線</s> <!-- 刪除標簽 -->
        <del>刪除線</del> <!-- 刪除標簽 -->
        <u>下劃線</u> <!-- 下劃線標簽 -->
        <ins>下劃線</ins> <!-- 下劃線標簽 -->
        <img src="圖片路徑" alt="圖片無法加載，提示文字" title="鼠標懸停，提示文體" border="2"/> <!-- 圖像標簽，border是邊框屬性，width和height屬性設置圖像的寬度和高度 -->
        <a href="跳轉目標" target="_self">鏈接的命名</a> <!-- 鏈接標簽，target屬性為鏈接頁面打開的方式，默認值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁面只會打開一個;_top跳出框架-->
        <ul> <!-- 無序列表 -->
            <li>列表項1</li>
            <li>列表項2</li>
            <li>列表項3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,屬性type可以控制li序號的樣式，其屬性值有：1、A、a、I、i-->
            <li>中國</li>
            <li>美國</li>
            <li>英國</li>
        </ol>
        <dl> <!-- 自定義列表 -->
            <dt>分類1</dt> <!-- 分類名稱 -->
            <dd>分類1第1項</dd> <!-- 類的項 -->
            <dd>分類1第2項</dd>
            <dt>分類2</dt>
            <dd>分類2第1項</dd>
            <dd>分類2第2項</dd>
        </dl>
        <table> <!-- 定義表格，table標簽實際就是一個四方塊框框，里面有單元格才會顯示出表格的樣子 -->
        <caption>信息表</caption> <!-- 表格標題 -->
        <tr> <!-- 定義行 -->
            <th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr> <!-- 定義行 -->
            <td>小明</td> <!-- 定義單元格，表格里面沒有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

個人編寫HTML使用的軟件是dreamweaver，這個軟件的話，正版是要購買的，一開始學習HTML就是用的這個軟件了，挺好用的，而且代碼提示特別方便，不用擔心太多的標簽和屬性記勞~

1.什么是HTML？

HTML 是用來描述網頁的一種語言，指的是超文本標記語言: HyperText Markup Language；
HTML 不是一種編程語言，而是一種標記語言；
HTML文檔也叫做 web 頁面；

2.HTML基本結構

<!DOCTYPE html>：文檔聲明；
<html>：HTML 頁面的根元素；
<head>：用于定義文檔的頭部，是所有頭部元素的容器；
<meta>：提供有關頁面的元信息，位于文檔的頭部，不包含任何內容；
<title>：文檔的標題；
<body>：定義文檔的主體，包含文檔的所有內容；

3.HTML標簽使用？

HTML 標簽是由尖括號包圍的關鍵詞，且通常是成對出現的如<a></a>，當然也有單個的，只不過比較少如<hr>；
標簽對中的第一個標簽表示開始標簽，第二個標簽表示結束標簽；

4.HTML常用標簽介紹

除了HTML基本結構的幾個標簽以外，HTML還有一些比較常用的基本標簽；

（1）文本標簽：

h1-h6：用于定義標題，h1為最大標題，h6為最小標題；
p：定義段落；
span：組合文檔中的行內元素；
br：換行；
hr：水平線；
strong/b：加粗文字；
em/i：斜體；
u：下劃線；
s：刪除線；
pre：定義預格式化的文本，保持原有格式；
sub：下標；
sup：上標；
blockquote：塊引用；

（2）布局標簽：

div：定義文檔中的分區或節，把文檔分割為獨立的、不同的部分；
header：定義頁面的頭部；
aside：用作文章的側欄；
section：定義文檔中的節；
footer：定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等；
article：規定文章獨立的其他內容，如標題、內容、評論；

（3）多媒體標簽：

img：用于在網頁中插入圖像；
audio：定義聲音，比如音樂或其他音頻流；
video：定義視頻，比如電影片段或其他視頻流；

（4）超鏈接標簽：

a：定義超鏈接，指定頁面間的跳轉；

（5）序列化標簽：

ul：定義無序列表；
ol：定義有序列表；
li：定義列表項目，可用在無序列表ul和有序列表ol中；
dl：定義了定義列表；
dt：定義了定義列表中的項目（即術語部分）；
dd：在定義列表中定義條目的定義部分；

（6）表格標簽：

table：定義 HTML 表格；
tr：定義表格的行；
td：定義表格的單元；
th：定義表頭；
caption：定義表格標題；
col：為表格中一個或多個列定義屬性值；
colgroup：用于對表格中的列進行組合，以便對其進行格式化；
thead：定義表格的表頭；
tbody：表格主體，也就是正文部分；
tfoot：定義表格的頁腳（腳注或表注）；

（7）表單標簽：

form：用于為用戶輸入創建 HTML 表單；
input：用于搜集用戶信息；
button：定義一個按鈕；
select：創建單選或多選菜單；
option：定義下拉列表中的一個選項；
textarea：定義多行的文本輸入控件；
label：為 input 元素定義標注（標記）；
fieldset：用于將表單內的相關元素分組；
legend：為 fieldset 元素定義標題；

5.HTML注意事項

HTML文件當以后綴名為 .html 或 .htm 來命名；
HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍；
HTML標簽都是以開始標簽起始，以結束標簽終止；
HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護；
HTML標簽使用必須符合標簽嵌套規則，如禁止a標簽嵌套a標簽，p標簽嵌套div標簽等；
建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器；

在線咨詢

上一篇：多頁面項目webpack打包實踐
下一篇：html常用代碼大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。