初識(shí)HTML，什么是HTML?

eb標(biāo)準(zhǔn)：

由于不同瀏覽器解析出來(lái)的網(wǎng)頁(yè)效果可能不同，所以需要通過(guò)web標(biāo)準(zhǔn)對(duì)其進(jìn)行約束使其一致，主要包括三個(gè)方面：

結(jié)構(gòu)標(biāo)準(zhǔn)：

結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類，主要指的是HTML。

表現(xiàn)標(biāo)準(zhǔn)：

表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

行為標(biāo)準(zhǔn)：

行為是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě)，主要指的是 JavaScript。

初識(shí)HTML：

html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標(biāo)記語(yǔ)言” ，描述網(wǎng)頁(yè)的一種語(yǔ)言。

HTML發(fā)展：

XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)，可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language），更嚴(yán)格更純凈的 HTML 版本，作為一種 XML 應(yīng)用被重新定義的 HTML。

HTML中的注釋：

 <!-- 注釋標(biāo)簽：注釋的內(nèi)容 -->

條件注釋：

條件注釋的作用是：定義只有Internet Explorer才執(zhí)行條件注釋中的html標(biāo)簽。


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

HTML骨架：

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

提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問(wèn)題可通過(guò)以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁(yè)面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

tml概述和基本結(jié)構(gòu)

html概述

HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。

html基本結(jié)構(gòu)

一個(gè)html的基本結(jié)構(gòu)如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>網(wǎng)頁(yè)標(biāo)題</title>
 </head>
 <body>
 網(wǎng)頁(yè)顯示內(nèi)容
 </body>
</html>

第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁(yè)的語(yǔ)言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒(méi)什么影響，它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁(yè)的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“”內(nèi)編寫(xiě)網(wǎng)頁(yè)上顯示的內(nèi)容。

HTML文檔類型

目前常用的兩種文檔類型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一個(gè)常用的版本，目前許多網(wǎng)站仍然使用此版本。

此版本文檔用sublime text創(chuàng)建方法： html:xt + tab

文檔示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文檔類型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文檔用sublime text創(chuàng)建方法： html:5 + tab 或者 ! + tab

文檔示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文檔類型 </title>
</head>
<body>
</body>
</html>

兩種文檔的區(qū)別

1、文檔聲明和編碼聲明

2、html5新增了標(biāo)簽元素以及元素屬性

html注釋：

html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說(shuō)明和解釋，注釋的內(nèi)容不會(huì)顯示在頁(yè)面上，html代碼中插入注釋的方法是：

<!-- 這是一段注釋 -->

html標(biāo)題標(biāo)簽

通過(guò)

、

,標(biāo)簽可以在網(wǎng)頁(yè)上定義6種級(jí)別的標(biāo)題。6種級(jí)別的標(biāo)題表示文檔的6級(jí)目錄層級(jí)關(guān)系，比如說(shuō)：

用作主標(biāo)題，其后是

，再其次是

，以此類推。搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁(yè)上使用標(biāo)題是很重要的。

<h1>這是一級(jí)標(biāo)題</h1>
<h2>這是二級(jí)標(biāo)題</h2>
<h3>這是三級(jí)標(biāo)題</h3>

html段落標(biāo)簽、換行標(biāo)簽與字符實(shí)體

html段落標(biāo)簽

標(biāo)簽定義一個(gè)文本段落，一個(gè)段落含有默認(rèn)的上下間距，段落之間會(huì)用這種默認(rèn)間距隔開(kāi)，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，超
 文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的
 標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。
 </p>
 <p>一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方
 式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)
 頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p>
</body>
</html>

html換行標(biāo)簽

代碼中成段的文字，直接在代碼中回車(chē)換行，在渲染成網(wǎng)頁(yè)時(shí)候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入

來(lái)強(qiáng)制換行，代碼如下：

<p>
一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br />
渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。
</p>

html字符實(shí)體

代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁(yè)時(shí)只會(huì)顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體,代碼如下：

<!-- 在段落前想縮進(jìn)兩個(gè)文字的空格，使用空格的字符實(shí)體： -->
<p>
 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br />
渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p>

在網(wǎng)頁(yè)上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁(yè)上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：

<!-- “<” 和 “>” 的字符實(shí)體為 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html塊標(biāo)簽、含樣式的標(biāo)簽

html塊標(biāo)簽

1、

標(biāo)簽塊元素，表示一塊內(nèi)容，沒(méi)有具體的語(yǔ)義。

2、標(biāo)簽行內(nèi)元素，表示一行中的一小段內(nèi)容，沒(méi)有具體的語(yǔ)義。

含樣式和語(yǔ)義的標(biāo)簽

1、 標(biāo)簽行內(nèi)元素，表示語(yǔ)氣中的強(qiáng)調(diào)詞

2、標(biāo)簽行內(nèi)元素，表示專業(yè)詞匯

3、 標(biāo)簽行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名

4、標(biāo)簽行內(nèi)元素，表示非常重要的內(nèi)容

語(yǔ)義化的標(biāo)簽

語(yǔ)義化的標(biāo)簽，就是在布局的時(shí)候多使用有語(yǔ)義的標(biāo)簽，搜索引擎在爬網(wǎng)的時(shí)候能認(rèn)識(shí)這些標(biāo)簽，理解文檔的結(jié)構(gòu)，方便網(wǎng)站的收錄。比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等，語(yǔ)義化的標(biāo)簽不多。

html圖像標(biāo)簽、絕對(duì)路徑和相對(duì)路徑

html圖像標(biāo)簽

標(biāo)簽可以在網(wǎng)頁(yè)上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，它的常用屬性有：

src屬性定義圖片的引用地址

alt屬性定義圖片加載失敗時(shí)顯示的文字，搜索引擎會(huì)使用這個(gè)文字收錄圖片、盲人讀屏軟件會(huì)讀取這個(gè)文字讓盲人識(shí)別圖片，所以此屬性非常重要。

<img src="images/pic.jpg" alt="產(chǎn)品圖片" />

絕對(duì)路徑和相對(duì)路徑

像網(wǎng)頁(yè)上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對(duì)地址和相對(duì)地址。

絕對(duì)地址：相對(duì)于磁盤(pán)的位置去定位文件的地址

相對(duì)地址：相對(duì)于引用文件本身去定位被引用的文件地址

絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P(pán)和頂層目錄的改變而找不到文件，相對(duì)路徑就沒(méi)有這個(gè)問(wèn)題。相對(duì)路徑的定義技巧：

“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。

“ …/ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如：“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。

html鏈接標(biāo)簽

標(biāo)簽可以在網(wǎng)頁(yè)上定義一個(gè)鏈接地址，它的常用屬性有：

href屬性定義跳轉(zhuǎn)的地址

title屬性定義鼠標(biāo)懸停時(shí)彈出的提示文字框

target屬性定義鏈接窗口打開(kāi)的位置

target="_self" 缺省值，新頁(yè)面替換原來(lái)的頁(yè)面，在原來(lái)位置打開(kāi)

target="_blank" 新頁(yè)面會(huì)在新開(kāi)的一個(gè)瀏覽器窗口打開(kāi)

在線咨詢

上一篇：HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)，小米熱評(píng)產(chǎn)品布局樣式
下一篇：用Python畫(huà)中國(guó)地圖，實(shí)現(xiàn)各省份數(shù)據(jù)可視化

您的項(xiàng)目需求

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

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