HTML---簡介

昵稱10504424 2015-01-07

展開全文

HTML---簡介

什么是HTML？

HTML是用來描述網(wǎng)頁的一種語言

HTML是超文本標(biāo)記語言（Hyper Text Markup Language）

HTML不是變成語言，是一種標(biāo)記語言

HTML新特性

用于繪畫的canvas標(biāo)簽

用于媒介回放的video和audio元素

對(duì)本地離線存儲(chǔ)更好支持

新的特殊內(nèi)容元素

如：article、footer、header、nav、section

新的表單空間

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

瀏覽器的支持

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

HTML基礎(chǔ)

聲明：<!DOCTYPE>

HTML也有多個(gè)不同的版本，只有完全明白頁面中使用的確切HTML版本，瀏覽器才會(huì)完全正確的顯示出HTML頁面。這就是<!DOCTYPE>的用處。

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

<!-- HTML 4.01: -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www./TR/html4/loose.dtd”>

<!-- XHTML 1.0: -->
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML基礎(chǔ)標(biāo)簽：

html---所有的標(biāo)簽都會(huì)包含在html這個(gè)標(biāo)簽當(dāng)中，一般用尖括號(hào)”<html>”表示元素，而元素是一對(duì)一對(duì)的，有開始就有結(jié)束，用”</html>”表示元素結(jié)束。元素開始喝元素結(jié)束中間，就是元素的內(nèi)容啦。

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

</body>
</html>

head---用來定義“頭部”的信息，比如：編碼格式

這個(gè)編碼格式還是有必要定義的，如果不定義就會(huì)在預(yù)覽的時(shí)候出現(xiàn)亂碼

<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---用來表示正文，一般顯示頁面的內(nèi)容，基本網(wǎng)頁編碼的一切，都是在body里面進(jìn)行的。出了title標(biāo)題標(biāo)簽還有一些特殊的標(biāo)簽

title---用來表示標(biāo)題的

h---用來表示標(biāo)題，分別有h1、h2、h3、h4、h5、h6來表示文字不同的大小

<html>

 <!-- en代表英文，zh代表中文 -->
    <head lang = "zh">
         <!-- 編碼格式“UTF-8” -->
        <meta charset = "UTF-8">
        <!--  標(biāo)題 “Hello HTML” -->
        <title>我是title，我就是瀏覽器的標(biāo)題，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>

可以看到，設(shè)置后的效果

p---用來表示段落

其實(shí)p標(biāo)簽和直接在body里面寫，顯示出來的效果是一樣的，但是p標(biāo)簽表示的是一個(gè)段落，如果在body里面直接寫文字的話，就沒法換行了

<html>

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

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

         <p>我還是老老實(shí)實(shí)呆著小p里面吧~</p>
        <p>我是第二行。</p>
        <p>我是第三行。</p>
    </body>

</html>

HTML屬性

標(biāo)簽可以擁有屬性為元素提供更多的信息，屬性以鍵/值的形式出現(xiàn)，比如：href = “www.baidu.com”

常用標(biāo)簽屬性：

通用屬性：

class

style

通用屬性都是給標(biāo)簽定義一個(gè)名字，后面可以通過這個(gè)名字用CSS來調(diào)用，然后修改樣式

<h1 align="">---對(duì)其屬性

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <h3 align="center">我是標(biāo)題3，我是center居中的屬性</h1>
        <h3 align="left">我也是標(biāo)題3，我是left左對(duì)齊的屬性</h1>
        <h3 align="right">我還是標(biāo)題3，我是rigth右對(duì)齊的屬性</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是點(diǎn)擊超鏈接后的打開方式，默認(rèn)是self，如果設(shè)置成_banlk就可以在新標(biāo)簽頁中打開了。

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

點(diǎn)擊之后，就會(huì)跳出新的標(biāo)簽頁

HTML格式化

下標(biāo)就是格式化的使用

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

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <b>我是b標(biāo)簽格式，我是加粗的</b>
        <br /><br />
        <big>我是big，我是顯示大字體</big>
        <br /><br />
        <em>我是em，我代表著重語氣</em>
        <br    /><br />
        <i>我是i，我定義斜體的文字</i>
        <br /><br />
        <small>我是small，我定義小號(hào)字體</small>
        <br /><br />
        <strong>我是strong，我定義加重語氣</strong>
        <br /><br />
        我的出現(xiàn)是為了體現(xiàn)出sub是下標(biāo)的<sub>我是sub，我是下標(biāo)文字</sub>
        <br /><br />
        我也是出了讓sup體現(xiàn)上標(biāo)的<sup>我是sup，我是下標(biāo)文字</sup>
        <br /><br />
        <ins>我是ins，我是插入文字，我有一條下橫線</ins>
        <br /><br />
        <del>我是del，我是刪除文字，我中間有條橫線代表我已經(jīng)被刪除了。</del>
    </body>
</html>

HTML樣式

外部樣式表

使用link可以用來調(diào)用css更改標(biāo)簽樣式

這個(gè)link要寫在頭文件里面，也就是head標(biāo)簽里面，一般樣式都會(huì)寫在head里面。寫在頭文件里面比較方便，而且后期如果想要更改，也可以很快的找到link

html代碼

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

css代碼

h1{
    color: red;
}

內(nèi)部樣式表

就是將css樣式直接寫進(jìn)style標(biāo)簽里面

<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>我是標(biāo)題1，我被css樣式引用成紅色的</h1>
        <h2>我是標(biāo)題2，我被style改成綠色的</h2>
    </body>
</html>

內(nèi)聯(lián)樣式表

就是直接在標(biāo)簽里面寫style，當(dāng)然，這種方法后期修改就得一個(gè)一個(gè)的改了。非常麻煩

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

HTML的鏈接

可以在<a>標(biāo)簽中實(shí)現(xiàn)鏈接，當(dāng)然，也可以加入圖片

比如我有一種皮卡丘的圖片，在與html文件同目錄的img文件夾下，下圖是目錄結(jié)構(gòu)

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

點(diǎn)擊皮卡丘后，進(jìn)入百度首頁

好吧，今天就寫到這里。其實(shí)HTML還是蠻簡單的，學(xué)習(xí)之后，對(duì)于測(cè)試、開發(fā)、網(wǎng)頁游戲都會(huì)有一定的幫助。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)