HTML 簡介

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

1.什么是HTML？

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

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

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

3.HTML標(biāo)簽使用？

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，且通常是成對出現(xiàn)的如<a></a>，當(dāng)然也有單個(gè)的，只不過比較少如<hr>；
標(biāo)簽對中的第一個(gè)標(biāo)簽表示開始標(biāo)簽，第二個(gè)標(biāo)簽表示結(jié)束標(biāo)簽；

4.HTML常用標(biāo)簽介紹

除了HTML基本結(jié)構(gòu)的幾個(gè)標(biāo)簽以外，HTML還有一些比較常用的基本標(biāo)簽；

（1）文本標(biāo)簽：

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

（2）布局標(biāo)簽：

div：定義文檔中的分區(qū)或節(jié)，把文檔分割為獨(dú)立的、不同的部分；
header：定義頁面的頭部；
aside：用作文章的側(cè)欄；
section：定義文檔中的節(jié)；
footer：定義文檔或節(jié)的頁腳，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等；
article：規(guī)定文章獨(dú)立的其他內(nèi)容，如標(biāo)題、內(nèi)容、評(píng)論；

（3）多媒體標(biāo)簽：

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

（4）超鏈接標(biāo)簽：

a：定義超鏈接，指定頁面間的跳轉(zhuǎn)；

（5）序列化標(biāo)簽：

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

（6）表格標(biāo)簽：

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

（7）表單標(biāo)簽：

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

5.HTML注意事項(xiàng)

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

Ol 對象

Ol 對象表示一個(gè) HTML <ol> 元素。

訪問 Ol 對象

您可以使用 getElementById() 來訪問 <ol> 元素：

var x = document.getElementById("myOl");

創(chuàng)建 Ol 對象

您可以使用 document.createElement() 方法來創(chuàng)建 <ol> 元素：

var x = document.createElement("OL");

Ol 對象屬性

屬性	描述
compact	HTML5 中不支持。使用 style.lineHeight 替代。設(shè)置或返回列表是否呈現(xiàn)比正常情況更小巧的效果。
reversed	設(shè)置或返回列表是否為降序。
start	設(shè)置或返回有序列表的 start 屬性的值。
type	設(shè)置或返回有序列表的 type 屬性的值。

標(biāo)準(zhǔn)屬性和事件

Ol 對象同樣支持標(biāo)準(zhǔn) 屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

ody

常用標(biāo)簽

body分為塊級(jí)和行內(nèi)

塊級(jí) 獨(dú)占整行
行內(nèi) 內(nèi)容有多少就占多少

文本格式化標(biāo)簽

br 換行

<div>qwer<br/>zxcv</div>

div和span

div 塊級(jí)標(biāo)簽樣式

<div style="background-color: green;">qwer</div>

span 行內(nèi)標(biāo)簽樣式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 標(biāo)題

h1~h6y依次變小

   <div>默認(rèn)文字字體</div>
   <h1>再再再再再粗一點(diǎn)</h1>
   <h2>再再再再粗一點(diǎn)</h2>
   <h3>再再再粗一點(diǎn)</h3>
   <h4>再再粗一點(diǎn)</h4>
   <h5>再粗一點(diǎn)</h5>
   <h6>粗一點(diǎn)</h6>

鏈接

a 超鏈接，跳轉(zhuǎn)到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

錨點(diǎn)，點(diǎn)擊后跳轉(zhuǎn)到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野雞平臺(tái)</title>
</head>
<body>
<h1>章節(jié)</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>內(nèi)容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花開,萬物復(fù)蘇,又到了交配的季節(jié)。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄過去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 無序列表
ol 有序列表
dl 層級(jí)列表
li 列表項(xiàng)目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野雞平臺(tái)</title>
</head>
<body>
    <ul>
        <li>周杰倫</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>鐵錘</li>
        <li>鋼彈</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯鄲</dd>
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>
</body>
</html>

table 表格

table表格標(biāo)題
thead表格標(biāo)題
tr 行標(biāo)簽
th 列名
tbody表格內(nèi)容
tr 列標(biāo)簽
td 列內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 選擇表格樣式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并單元格-->>
                <td>18</td>
                <td>吃飯</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--顯示本地圖片，找不到圖片則顯示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--顯示網(wǎng)絡(luò)圖片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用戶交互

按鈕標(biāo)簽

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按鈕 </button>

input

text，文本框。
password，密碼框。
radio，單選框（必須設(shè)置name屬性相同，否則無法實(shí)現(xiàn)）。
checkbox，復(fù)選框。
file，文件上傳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>復(fù)選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML學(xué)習(xí)</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
臥槽，無情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML學(xué)習(xí)</title>
</head>
<body>
    <textarea>文本內(nèi)容寫在這里...</textarea>
</body>
</body>
</html>

form表單

用于提交數(shù)據(jù)到后臺(tái)

提交時(shí)，只會(huì)提交form標(biāo)簽內(nèi)部【用戶交互】相關(guān)的標(biāo)簽。
<input type="submit" value="提交"> 用于提交當(dāng)前所在的表單。
<input type="reset" value="重置"> 用于重置當(dāng)前標(biāo)簽中的選項(xiàng)。
form標(biāo)簽內(nèi)置屬性action="/xx/" ，表示表單要提交的地址。method="get"，表示表單的提交方式。enctype="multipart/form-data"，如果form內(nèi)部有文件上傳，必須加上此設(shè)置
form內(nèi)部【用戶交互】相關(guān)標(biāo)簽必須設(shè)置name，不然提交數(shù)據(jù)后后端無法獲取

// 提交表單之后，實(shí)際上會(huì)將表單中的數(shù)據(jù)構(gòu)造成一種特殊的結(jié)構(gòu)，發(fā)送給后臺(tái)，類似于：
{
    user:用戶輸入的姓名,
  pwd:用戶輸入的密碼,
    ...
}

radio、checkbox、select 除了要設(shè)置name屬性以外，還必須設(shè)置value屬性，因?yàn)檫@三中標(biāo)簽在form表單提交時(shí)，不會(huì)把看到的內(nèi)容提交到后臺(tái)，而是把選擇選項(xiàng)對應(yīng)的value值提交到后臺(tái)。

在線咨詢

您的項(xiàng)目需求

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

整合營銷服務(wù)商