HTML基礎語法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body bgcolor="red"> hello HTML~ <hr/> <!-- 這是注釋 --> </body> </html>
sublime快捷鍵
ctrl+n 新建文件
ctrl+s 保存文件
ctrl+? 注釋
文檔聲明 <!DOCTYPE html>
meta解決文字亂碼 <meta charset="UTF-8">
文字和段落
標題 h1~h6
段落 p標簽對齊方式：
align="left" 左對齊
align="right" 右對齊
align="center" 居中對齊
align="justify" 兩端對齊
<br/> 換行
空格
pre 預格式化的文本，常見應用就是用來表示計算機的源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>h1標題</h1> <h2>h2標題</h2> <h3>h3標題</h3> <h4>h4標題</h4> <h5>h5標題</h5> <h6>h6標題</h6> <p align="left">HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</p> <p align="right">HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</p> <p align="center">HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</p> <p align="justify">HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</p> <p> HTML稱為超文本標記語言，是一種標識性的語言。<br>它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。<br>HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</p> <pre> HTML稱為超文本標記語言，是一種標識性的語言。 它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。 HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</pre> </body> </html>
修飾標簽和特殊符號
<hr/> 水平線
<i></i> <em></em> 文字斜體
<b></b> <strong></strong> 文字加粗
<sub></sub> 文字下標
<sup></sup> 文字上標
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p align="left">HTML標簽總是成對出現(xiàn)的，如<b></b></p> <hr/> <div align="center"> <p>關于我們 | 招聘信息 | 聯(lián)系我們 | 意見反饋</p> <hr/> <p>版權信息：Copyright © 2020 cyy</p> </div> </body> </html>
列表標簽-無序列表
type="disc" 圓點
type="square" 正方形
type="circle" 空心圓
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>什么是HTML？</h1> <p>HTML是用來描述網(wǎng)頁的一種語言</p> <ul type="disc"> <li>HTML指的是超文本標記語言</li> <li>HTML不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽</li> <li>HTML使用標記標簽來描述網(wǎng)頁</li> </ul> <ul type="square"> <li>HTML指的是超文本標記語言</li> <li>HTML不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽</li> <li>HTML使用標記標簽來描述網(wǎng)頁</li> </ul> <ul type="circle"> <li>HTML指的是超文本標記語言</li> <li>HTML不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽</li> <li>HTML使用標記標簽來描述網(wǎng)頁</li> </ul> </body> </html>
列表標簽-有序列表
type="1" 數(shù)字
type="a" 小寫字母
type="A" 大寫字母
type="i" 小寫羅馬數(shù)字
type="I" 大寫羅馬數(shù)字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>什么是HTML？</h1> <p>HTML是用來描述網(wǎng)頁的一種語言</p> <ol type="1"> <li>HTML指的是超文本標記語言</li> <li>HTML不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽</li> <li>HTML使用標記標簽來描述網(wǎng)頁</li> </ol> <ol type="a"> <li>HTML指的是超文本標記語言</li> <li>HTML不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽</li> <li>HTML使用標記標簽來描述網(wǎng)頁</li> </ol> <ol type="I"> <li>HTML指的是超文本標記語言</li> <li>HTML不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽</li> <li>HTML使用標記標簽來描述網(wǎng)頁</li> </ol> </body> </html>
列表標簽-定義列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <dl> <dt>什么是HTML？</dt> <dd>HTML是用來描述網(wǎng)頁的一種語言</dd> <dt>HTML標簽</dt> <dd>HTML指的是超文本標記語言</dd> <dd>HTML不是一種編程語言，而是一種標記語言</dd> <dd>標記語言是一套標記標簽</dd> <dd>HTML使用標記標簽來描述網(wǎng)頁</dd> </dl> </body> </html>
列表標簽實際應用
開發(fā)中常常會把ul和ol的樣式去掉，使用自定義圖片來代替
圖像
絕對路徑：從盤符開始寫起
相對路徑：
圖片與當前網(wǎng)頁在同一目錄下 <img src="cat.jpg" alt="cat">
圖片在上一級目錄下 <img src="../cat.jpg" alt="cat">
圖片在下一級目錄下 <img src="文件夾名/cat.jpg" alt="cat">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 絕對路徑 --> <!-- 寬度固定為50px --> <img src="C:\Users\96579\Desktop\cat.jpg" alt="cat" width="50px"> <!-- 相對路徑 --> <!-- 寬度為父容器的10% --> <img src="cat.jpg" alt="cat" width="10%"> </body> </html>
超鏈接
屬性：
href 鏈接地址
target 鏈接的目標窗口
_self 當前頁面
_blank 新頁面
_top 框架相關，了解即可
_parent 框架相關，了解即可
title 鏈接提示文字
name 鏈接命名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="demo2.html">站內(nèi)鏈接</a> <a href="http://www.baidu.com">站外鏈接，如友鏈等</a> <hr/> <a href="#">空鏈接</a> </body> </html>
錨鏈接
a鏈接如果不加href屬性，不會有鏈接樣式
當鏈接為空的時候，點擊超鏈接會刷新頁面
<a href="">鏈接</a>
不同頁面的錨鏈接
<a href="demo2.html#couse1">課程1</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#couse1">課程1</a> <a href="#couse2">課程2</a> <a href="#couse3">課程3</a> <br/> <a name="couse1"><h1>課程1</h1></a> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <a name="couse2"><h1>課程2</h1></a> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <a name="couse3"><h1>課程3</h1></a> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> <p>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 [1] 超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯(lián)。這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。</p> </body> </html>
鏈接擴展功能
郵箱鏈接
<a href="mailto:cyy@qq.com">反饋意見</a>
如果想成功打開郵箱，需要在本機電腦上安裝郵箱軟件如foxmail等
文件下載
下載的文件需要壓縮，否則會直接打開文件，而不是下載
<a href="cyy.rar">文件下載</a>
聯(lián)系客服
