HTML基礎(chǔ)

TML的作用

HTML是用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)的，它是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語(yǔ)言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

超文本兩層含義：

因?yàn)榫W(wǎng)頁(yè)中還可以有圖片、視頻、音頻等內(nèi)容（超越文本限制）
它還可以在網(wǎng)頁(yè)中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，與世界各地主機(jī)的網(wǎng)頁(yè)鏈接（超鏈接文本）

HTML的基本結(jié)構(gòu)

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

第一行<!DOCTYPE html>是文檔聲明
用來(lái)指定頁(yè)面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開(kāi)發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁(yè)是從<html>這里開(kāi)始的，到</html>結(jié)束
也就是html文檔的開(kāi)始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁(yè)上顯示的內(nèi)容

網(wǎng)頁(yè)文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)代碼編輯器
目前是前端(網(wǎng)頁(yè))開(kāi)發(fā)使用最多的一款軟件開(kāi)發(fā)工具

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對(duì)應(yīng)的安裝包進(jìn)行下載:

安裝一切默認(rèn)

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開(kāi)html

常用的HTML標(biāo)簽

1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書(shū)寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒(méi)有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

標(biāo)簽的使用形式

成對(duì)出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個(gè)出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無(wú)序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁(yè)效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并

網(wǎng)頁(yè)效果

表單標(biāo)簽

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

一個(gè)表單中有很多信息組成,比如姓名,愛(ài)好,地址等,這些內(nèi)容有很多其他標(biāo)簽來(lái)承載

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁(yè)效果

表單提交

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

兩種方式的區(qū)別:

“GET”方式 : 沒(méi)有請(qǐng)求體
“POST”方式 : 有請(qǐng)求體

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛(ài)好:</label>
<input type="checkbox" name="like" value="睡覺(jué)">睡覺(jué)
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點(diǎn)擊提交：

可以看到服務(wù)器收到了請(qǐng)求報(bào)文。

、什么是HTML？

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

作用：編寫網(wǎng)站；

基本格式：

<html>

<head>

<title>我的第一個(gè)網(wǎng)頁(yè)</title>

</head>

<body>

我的第一個(gè)網(wǎng)頁(yè)

</body>

</html>

注：< body>、</body>等成對(duì)的標(biāo)簽，分別叫開(kāi)放標(biāo)簽和閉合標(biāo)簽

單獨(dú)呈現(xiàn)的標(biāo)簽（空元素），如 <hr/> ；意為用 / 來(lái)關(guān)閉空元素

二、基本標(biāo)簽：

1、title標(biāo)簽：<title>我愛(ài)上了不該愛(ài)的人</title>

2、meta標(biāo)簽：<meta charset="UTF-8" />

3、標(biāo)題標(biāo)簽：<h1>…</h1>

4：段落標(biāo)簽：

<p>北京歡迎你，有夢(mèng)想誰(shuí)都了不起！</p>

<p>有勇氣就會(huì)有奇跡。</p>

5、換行標(biāo)簽：<br/>

6、水平線標(biāo)簽：<hr/>

7、字體樣式標(biāo)簽：加粗：<strong>..<strong/>

斜體：<em>..<em/>

8、圖片標(biāo)簽：<img src="path" alt="text" title="text" width="x" height="y" />

9、鏈接標(biāo)簽：<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>

添加新內(nèi)容：

塊元素：無(wú)論內(nèi)容多少，該元素獨(dú)占一行（p、h1-h6…），可以改變高度，可以改變左右距離

行內(nèi)元素內(nèi)容撐開(kāi)寬度，左右都是行內(nèi)元素的可以排在一行(a、strong、em…)，不可以改變高度，只可以改變左右的距離。

示例：

<head >

</head>

<body>

<!-- <h1>Hello World!</h1>

</body>

</html>

效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlOne/hello.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è)模型的定義及交互的編寫，主要指的是 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)寫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

在線咨詢

上一篇：JavaScript 語(yǔ)句
下一篇：分享一個(gè)外貿(mào)老鳥(niǎo)開(kāi)發(fā)百萬(wàn)訂單的方法