HTML---簡介

時間 2019-12-09

標籤 html 簡介欄目 HTML 简体版

原文原文鏈接

什麼是HTML？

HTML是用來描述網頁的一種語言css

HTML是超文本標記語言（Hyper Text Markup Language）html

HTML不是變成語言，是一種標記語言canvas

HTML新特性

用於繪畫的canvas標籤瀏覽器

用於媒介回放的video和audio元素ide

對本地離線存儲更好支持學習

新的特殊內容元素測試

如：article、footer、header、nav、section字體

新的表單空間編碼

如：calendar、date、time、email、url、searchurl

瀏覽器的支持

Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

HTML基礎

聲明：<!DOCTYPE>

HTML也有多個不一樣的版本，只有徹底明白頁面中使用的確切HTML版本，瀏覽器纔會徹底正確的顯示出HTML頁面。這就是<!DOCTYPE>的用處。

<!-- HTML 5： -->
<!DOCTYPE html>

<!-- HTML 4.01: -->
<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」 」http://www.w3.org/TR/html4/loose.dtd」>

<!-- XHTML 1.0: -->
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 」http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>

HTML基礎標籤：

html---全部的標籤都會包含在html這個標籤當中，通常用尖括號」<html>」表示元素，而元素是一對一對的，有開始就有結束，用」</html>」表示元素結束。元素開始喝元素結束中間，就是元素的內容啦。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

head---用來定義「頭部」的信息，好比：編碼格式

這個編碼格式仍是有必要定義的，若是不定義就會在預覽的時候出現亂碼

<html>
 <!-- en表明英文，zh表明中文 -->
    <head lang = "zh">

    </head>

    <body>
        我就是要在body裏面直接寫文字。哼哼。
    </body>

</html>

定義編碼UTF-8以後，文字就能夠正常顯示出來了。

<html>
 <!-- en表明英文，zh表明中文 -->
    <head lang = "zh">
         <!-- 編碼格式「UTF-8」 -->
        <meta charset = "UTF-8">
    </head>

    <body>
        我就是要在body裏面直接寫文字。哼哼。
    </body>

</html>

body---用來表示正文，通常顯示頁面的內容，基本網頁編碼的一切，都是在body裏面進行的。出了title標題標籤還有一些特殊的標籤

title---用來表示標題的

h---用來表示標題，分別有h一、h二、h三、h四、h五、h6來表示文字不一樣的大小

<html>

 <!-- en表明英文，zh表明中文 -->
    <head lang = "zh">
         <!-- 編碼格式「UTF-8」 -->
        <meta charset = "UTF-8">
        <!--  標題 「Hello HTML」 -->
        <title>我是title，我就是瀏覽器的標題，O(∩_∩)O</title>
        
    </head>

    <!-- 用來顯示正文 -->
    <body>
        我是body，你看到我了嗎？
         <h1>我是h1，我是最大的，O(∩_∩)O</h1>
        <h2>我是h2，我是還算比較大了啦~</h2>
        <h3>我是h3，我還算正常吧。</h3>
        <h4>我是h4，我不是太大</h4>
        <h5>我是h5，我怎麼這麼小？？</h5>
        <h6>我是h6，我是最小的，T_T</h6>
    </body>

</html>

能夠看到，設置後的效果

p---用來表示段落

其實p標籤和直接在body裏面寫，顯示出來的效果是同樣的，可是p標籤表示的是一個段落，若是在body裏面直接寫文字的話，就無法換行了

<html>

 <!-- en表明英文，zh表明中文 -->
    <head lang = "zh">
         <!-- 編碼格式「UTF-8」 -->
        <meta charset = "UTF-8">
        <!--  標題 「Hello HTML」 -->
        <title>我是title，我就是瀏覽器的標題，O(∩_∩)O</title>
        
    </head>

    <!-- 用來顯示正文 -->
    <body>
       我就是要在body裏面直接寫文字。哼哼。
        我是第二行。
        我是第三行。

         <p>我仍是老老實實呆着小p裏面吧~</p>
        <p>我是第二行。</p>
        <p>我是第三行。</p>
    </body>

</html>

HTML屬性

標籤能夠擁有屬性爲元素提供更多的信息，屬性以鍵/值的形式出現，好比：href = 「www.baidu.com」

經常使用標籤屬性：

通用屬性：

class

style

通用屬性都是給標籤訂義一個名字，後面能夠經過這個名字用CSS來調用，而後修改樣式

<h1 align="">---對其屬性

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <h3 align="center">我是標題3，我是center居中的屬性</h1>
        <h3 align="left">我也是標題3，我是left左對齊的屬性</h1>
        <h3 align="right">我仍是標題3，我是rigth右對齊的屬性</h1>
    </body>
</html>

<body bgcolor="">---背景顏色

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body bgcolor="#000">
    </body>
</html>

<a href="">---超連接的屬性，能夠填URL

<a href="" target="">---target是點擊超連接後的打開方式，默認是self，若是設置成_banlk就能夠在新標籤頁中打開了。

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <a href="http://www.baidu.com" target="_banlk">點我就能上百度</a>
    </body>
</html>

點擊以後，就會跳出新的標籤頁

HTML格式化

下標就是格式化的使用

標籤	描述
<b>	定義粗體文本
<big>	定義大號文字
<em>	定義着重文字
<i>	定義斜體文字
<small>	定義小號文字
<strong>	定義加劇語氣
<sub>	定義下標文字
<sup>	定義上標文字
<ins>	定義插入文字
<del>	定義刪除文字

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <b>我是b標籤格式，我是加粗的</b>
        <br /><br />
        <big>我是big，我是顯示大字體</big>
        <br /><br />
        <em>我是em，我表明着重語氣</em>
        <br    /><br />
        <i>我是i，我定義斜體的文字</i>
        <br /><br />
        <small>我是small，我定義小號字體</small>
        <br /><br />
        <strong>我是strong，我定義加劇語氣</strong>
        <br /><br />
        個人出現是爲了體現出sub是下標的<sub>我是sub，我是下標文字</sub>
        <br /><br />
        我也是出了讓sup體現上標的<sup>我是sup，我是下標文字</sup>
        <br /><br />
        <ins>我是ins，我是插入文字，我有一條下橫線</ins>
        <br /><br />
        <del>我是del，我是刪除文字，我中間有條橫線表明我已經被刪除了。</del>
    </body>
</html>

HTML樣式

外部樣式表

使用link能夠用來調用css更改標籤樣式

這個link要寫在頭文件裏面，也就是head標籤裏面，通常樣式都會寫在head裏面。寫在頭文件裏面比較方便，並且後期若是想要更改，也能夠很快的找到link

html代碼

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="hello_css.css">
    </head>
    <body>
        <h1>我是標題1，我會被hello_css.css給引用成紅色的</h1>
    </body>
</html>

css代碼

h1{
    color: red;
}

內部樣式表

就是將css樣式直接寫進style標籤裏面

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="hello_css.css">
        <style type="text/css">
            h2{
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>我是標題1，我被css樣式引用成紅色的</h1>
        <h2>我是標題2，我被style改爲綠色的</h2>
    </body>
</html>

內聯樣式表

就是直接在標籤裏面寫style，固然，這種方法後期修改就得一個一個的改了。很是麻煩

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        </style>
    </head>
    <body>
        <p style="color: blue">我是小p</p>
    </body>
</html>

HTML的連接

能夠在<a>標籤中實現連接，固然，也能夠加入圖片

好比我有一種皮卡丘的圖片，在與html文件同目錄的img文件夾下，下圖是目錄結構

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        </style>
    </head>
    <body>
        <!-- 文字連接 -->
        <a href="http://www.baidu.com">點我進百度</a>
        <br />
        
        <!-- 圖片連接 -->
        <a name="pika" href="http://www.baidu.com">
            <img src="img/pika.png" alt="pika" width="250" height="200">
        </a>
    </body>
</html>

點擊皮卡丘後，進入百度首頁

好吧，今天就寫到這裏。其實HTML仍是蠻簡單的，學習以後，對於測試、開發、網頁遊戲都會有必定的幫助。

1. HTML 5 簡介
2. HTML簡介
3. HTML的簡介
4. 三、HTML簡介
5. HTML：簡介
6. 【HTML】WWW簡介
7. HTML JavaScript簡介
8. HTML 簡介
9. HTML(2)--- 簡介
10. HTML DOM 簡介
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。