HTML概念、語法及經常使用基礎標籤

時間  2020-02-01
標籤 html 概念 語法 經常 使用 基礎 標籤 欄目 HTML 简体版
原文   原文鏈接

HTML基礎語法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/> 換行
&nbsp; 空格
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稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。</p>
    <p align="right">HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。</p>
    <p align="center">HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。</p>
    <p align="justify">HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;HTML稱爲超文本標記語言，是一種標識性的語言。<br>它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。<br>HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。</p>
    <pre>  
        HTML稱爲超文本標記語言，是一種標識性的語言。
    它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的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標籤老是成對出現的，如&lt;b&gt;&lt;/b&gt;</p>
    <hr/>
    <div align="center">
        <p>關於咱們 | 招聘信息 | 聯繫咱們 | 意見反饋</p>
        <hr/>
        <p>版權信息：Copyright &copy; 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是用來描述網頁的一種語言</p>
<ul type="disc">
    <li>HTML指的是超文本標記語言</li>
    <li>HTML不是一種編程語言，而是一種標記語言</li>
    <li>標記語言是一套標記標籤</li>
    <li>HTML使用標記標籤來描述網頁</li>
</ul>
<ul type="square">
    <li>HTML指的是超文本標記語言</li>
    <li>HTML不是一種編程語言，而是一種標記語言</li>
    <li>標記語言是一套標記標籤</li>
    <li>HTML使用標記標籤來描述網頁</li>
</ul>
<ul type="circle">
    <li>HTML指的是超文本標記語言</li>
    <li>HTML不是一種編程語言，而是一種標記語言</li>
    <li>標記語言是一套標記標籤</li>
    <li>HTML使用標記標籤來描述網頁</li>
</ul>
</body>
</html>

 

 

列表標籤-有序列表
type="1" 數字
type="a" 小寫字母
type="A" 大寫字母
type="i" 小寫羅馬數字
type="I" 大寫羅馬數字spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>什麼是HTML？</h1>
<p>HTML是用來描述網頁的一種語言</p>
<ol type="1">
    <li>HTML指的是超文本標記語言</li>
    <li>HTML不是一種編程語言，而是一種標記語言</li>
    <li>標記語言是一套標記標籤</li>
    <li>HTML使用標記標籤來描述網頁</li>
</ol>
<ol type="a">
    <li>HTML指的是超文本標記語言</li>
    <li>HTML不是一種編程語言，而是一種標記語言</li>
    <li>標記語言是一套標記標籤</li>
    <li>HTML使用標記標籤來描述網頁</li>
</ol>
<ol type="I">
    <li>HTML指的是超文本標記語言</li>
    <li>HTML不是一種編程語言，而是一種標記語言</li>
    <li>標記語言是一套標記標籤</li>
    <li>HTML使用標記標籤來描述網頁</li>
</ol>
</body>
</html>

 

 列表標籤-定義列表3d

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<dl>
<dt>什麼是HTML？</dt>
<dd>HTML是用來描述網頁的一種語言</dd>
<dt>HTML標籤</dt>
<dd>HTML指的是超文本標記語言</dd>
<dd>HTML不是一種編程語言，而是一種標記語言</dd>
<dd>標記語言是一套標記標籤</dd>
<dd>HTML使用標記標籤來描述網頁</dd>
</dl>

</body>
</html>

 

 

列表標籤實際應用
開發中經常會把ul和ol的樣式去掉，使用自定義圖片來代替code

 

圖像
絕對路徑：從盤符開始寫起
相對路徑：
圖片與當前網頁在同一目錄下 <img src="cat.jpg" alt="cat">
圖片在上一級目錄下 <img src="../cat.jpg" alt="cat">
圖片在下一級目錄下 <img src="文件夾名/cat.jpg" alt="cat">htm

<!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">站內連接</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稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>

<a name="couse2"><h1>課程2</h1></a>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>

<a name="couse3"><h1>課程3</h1></a>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
<p>HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。 [1] 
超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。</p>
</body>
</html>

 

 

連接擴展功能
郵箱連接
<a href="mailto:cyy@qq.com">反饋意見</a>
若是想成功打開郵箱，須要在本機電腦上安裝郵箱軟件如foxmail等

文件下載下載的文件須要壓縮，不然會直接打開文件，而不是下載<a href="cyy.rar">文件下載</a>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程