web開發人員必須學習得3門語言：

HTML 定義了網頁的内容；
CSS 描述了網頁的布局；
JavaScript 網頁的行為。

一、HTML(HTML5标準)

1.什麼是HTML：

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本标記語言: HyperText Markup Language
HTML 不是一種程式設計語言，而是一種标記語言
标記語言是一套标記标簽 (markup tag)
HTML 使用标記标簽來描述網頁
HTML 文檔包含了HTML 标簽及文本内容
HTML文檔也叫做 web 頁面

2.HTML 标簽：

HTML 标記标簽通常被稱為 HTML 标簽 (HTML tag)。

HTML 标簽是由尖括号包圍的關鍵詞，比如 <html>
HTML 标簽通常是成對出現的，比如 <b> 和 </b>
标簽對中的第一個标簽是開始标簽，第二個标簽是結束标簽
開始和結束标簽也被稱為開放标簽和閉合标簽

3.通用聲明：

HTML5 ：<!DOCTYPE html>

4.字元聲明：

如果要是用中文，就需要在頭部将字元聲明為 UTF-8。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面标題</title>
</head>
<body>

<h1>我的第一個标題</h1>

<p>我的第一個段落。</p>

</body>
</html>

5.HTML 元素:

HTML 文檔由 HTML 元素定義。如：

WEB前端學習之HTML一、HTML(HTML5标準)

HTML 元素以開始标簽（起始标簽）起始，HTML 元素以結束标簽（閉合标簽）終止。
元素的内容是開始标簽與結束标簽之間的内容
某些 HTML 元素具有空内容（empty content）
空元素在開始标簽中進行關閉（以開始标簽的結束而結束）
大多數 HTML 元素可擁有屬性

HTML 文檔由嵌套的 HTML 元素構成。如

<!DOCTYPE html>
<html>

<body>
<p>這是第一個段落。</p>
</body>

</html>

這個 <p> 元素定義了 HTML 文檔中的一個段落。這個元素擁有一個開始标簽 <p> 以及一個結束标簽 </p>.
<body> 元素定義了 HTML 文檔的主體。這個元素擁有一個開始标簽 <body> 以及一個結束标簽 </body>。元素内容是另一個 HTML 元素（p 元素）。
html> 元素定義了整個 HTML 文檔。這個元素擁有一個開始标簽 <html> ，以及一個結束标簽 </html>.元素内容是另一個 HTML 元素（body 元素）。
沒有内容的 HTML 元素被稱為空元素。空元素是在開始标簽中關閉的。<br> 就是沒有關閉标簽的空元素（<br> 标簽定義換行）。在開始标簽中添加斜杠，比如 <br />，是關閉空元素的正确方法。
使用小寫标簽。（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

6.HTML屬性：

屬性是 HTML 元素提供的附加資訊。

HTML 元素可以設定屬性
屬性可以在元素中添加附加資訊
屬性一般描述于開始标簽
屬性總是以名稱/值對的形式出現，比如：name="value"。

示例：HTML 連結由 <a> 标簽定義。連結的位址在 href 屬性中指定：

<a href="http://www.runoob.com" target="_blank" rel="external nofollow" >這是一個連結</a>

屬性值應該始終被包括在引号内。雙引号是最常用的，在某些個别的情況下，比如屬性值本身就含有雙引号，那麼必須使用單引号，例如：name='John "ShotGun" Nelson' 。

7.HTML标題：

标題（Heading）是通過 <h1> - <h6> 标簽進行定義的. <h1> 定義最大的标題。 <h6> 定義最小的标題。

<hr> 标簽在 HTML 頁面中建立水準線。hr 元素可用于分隔内容。

HTM注釋:  .

8.HTML 段落:

HTML 可以将文檔分割為若幹段落。段落是通過 <p> 标簽定義的。示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>

<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>這是一個段落。</p>

</body>
</html>

如果您希望在不産生一個新段落的情況下進行換行（新行），請使用 <br /> 标簽：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<p>這個<br>段落<br>示範了分行的效果</p>

</body>
</html>

運作結果：

WEB前端學習之HTML一、HTML(HTML5标準)

9.HTML 連結：

HTML 使用超級連結與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到連結。點選連結可以從一張頁面跳轉到另一張頁面。如：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 

</head>
<body>

<p>
<a href="/index.html" target="_blank" rel="external nofollow" >本文本</a> 是一個指向本網站中的一個頁面的連結。</p>

<p><a href="http://www.microsoft.com/" target="_blank" rel="external nofollow" >本文本</a> 是一個指向網際網路上的頁面的連結。</p>

</body>
</html>

HTML 連結文法：

<a href="url" target="_blank" rel="external nofollow" >連結文本</a> href 屬性描述了連結的目标。

示例:<a href="http://www.runoob.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >通路菜鳥教程</a>

使用 target 屬性，你可以定義被連結的文檔在何處顯示。下面的這行會在新視窗打開文檔：

<a href="http://www.runoob.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank">通路菜鳥教程!</a>

id屬性可用于建立在一個HTML文檔書簽标記。( 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，是以對于讀者來說是隐藏的。) 執行個體：

在HTML文檔中插入ID: <a id="tips">有用的提示部分</a>
在HTML文檔中建立一個連結到"有用的提示部分(id="tips"）"：<a href="#tips" target="_blank" rel="external nofollow" >通路有用的提示部分</a>
或者，從另一個頁面建立一個連結到"有用的提示部分(id="tips"）"：<a href="http://www.runoob.com/html/html-links.html#tips" target="_blank" rel="external nofollow" >通路有用的提示部分</a>

10.HTML 頭部：

HTML <head> 元素：定義了文檔的資訊

<head> 元素包含了所有的頭部标簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式檔案（CSS），及各種meta資訊。可以添加在頭部區域的元素标簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素：定義了文檔的标題

<title> 标簽定義了不同文檔的标題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素：定義了浏覽器工具欄的标題；當網頁添加到收藏夾時，顯示在收藏夾中的标題；顯示在搜尋引擎結果頁面的标題。執行個體：
```
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔标題</title>
</head>
 
<body>
文檔内容......
</body>
 
</html>
           
```
HTML <base> 元素：定義了頁面連結标簽的預設連結位址。<base> 标簽描述了基本的連結位址/連結目标，該标簽作為HTML文檔中所有的連結标簽的預設連結，示例:
```
<head>
<base href="http://www.runoob.com/images/" target="_blank" rel="external nofollow"  target="_blank">
</head>
           
```
HTML <link> 元素：定義了一個文檔和外部資源之間的關系。

<link> 标簽定義了文檔與外部資源之間的關系。

<link> 标簽通常用于連結到樣式表:
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" target="_blank" rel="external nofollow" >
</head>
           
```
HTML <style> 元素：定義了HTML文檔的樣式檔案。<style> 标簽定義了HTML文檔的樣式檔案引用位址.

在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
```
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
           
```
HTML <meta> 元素：定義了HTML文檔中的中繼資料。

提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞

1.頁面編碼（告訴浏覽器是什麼編碼）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

2.重新整理和跳轉

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

3.關鍵詞

< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >

4.描述

例如：cnblogs

5.X-UA-Compatible：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> #選擇支援的浏覽器版本
HTML <script> 元素：定義了用戶端的腳本檔案。<script>标簽用于加載腳本檔案，如： JavaScript。:

1.引進檔案

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

2.寫js代碼

< script type="text/javascript" > ... </script >

11.HTML body标簽：

标簽一般分為兩種：塊級标簽和行内标簽

a、span、select 等
div、h1、p 等

常用标簽:

<hn>: n的取值範圍是1~6; 從大到小. 用來表示标題.

a标簽（超連結标簽）:

1、跳轉< a href="http://www.autohome.com.cn" target="_blank" rel="external nofollow" > </a>

target屬性，_black表示在新的頁面打開

2、錨 href='#某個标簽的ID' 标簽的ID不允許重複

<p>: 段落标簽. 包裹的内容被換行.并且也上下内容之間有一行空白.

<b> <strong>: 加粗标簽.

<strike>: 為文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角标和下角表.

<br>:換行.

<hr>:水準線

特殊字元：

< &gt；&quot；©®

<div>和<span>：

<div></div> ： <div>隻是一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現.

<span></span>： <span>表示了内聯行(行内元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.

塊級元素與行内元素的差別

所謂塊元素，是以另起一行開始渲染的元素，行内元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面産生任何的影響。

這兩個元素是專門為定義CSS樣式而生的。

圖像标簽（img）：

src: 要顯示圖檔的路徑.

alt: 圖檔沒有加載成功時的提示.

title: 滑鼠懸浮時的提示資訊.

width: 圖檔的寬

height:圖檔的高 (寬高兩個屬性隻用一個會自動等比縮放.)

清單标簽：

<ul>: 無序清單 [type屬性：disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]

<ol>: 有序清單

<li>:清單中的每一項.

<dl> 定義清單

<dt> 清單标題

<dd> 清單項

表格标簽（table）：

表格概念

表格是一個二維資料空間，一個表格由若幹行組成，一個行又有若幹單元格組成，單元格裡可以包含文字、清單、圖案、表單、數字元号、預置文本和其它的表格等内容。

表格最重要的目的是顯示表格類資料。表格類資料是指最适合組織為表格格式（即按行和列組織）的資料。

表格的基本結構：

<table>
         <tr>
                <th>标題</th>
                <th>标題</th>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

屬性：

<tr>: 表行

<th>: 表頭
<td>:表資料


屬性:

    border: 表格邊框.

    cellpadding: 内邊距

    cellspacing: 外邊距.

    width: 像素 百分比.（最好通過css來設定長寬）

    rowspan:  單元格豎跨多少行

    colspan:  單元格橫跨多少列（即合并單元格）

---------------------------------------------------------------------------------------------------------

小結：所有标簽分為：

塊級标簽： div（白闆），H系列（加大加粗），p标簽（段落和段落之間有間距）

行内标簽： span（白闆）

标簽之間可以嵌套

标簽存在的意義，css操作，js操作

ps:chorme審查元素的使用

- 定位

- 檢視樣式

- h系列

- div

- span

- input系列 + form标簽

input type='text' - name屬性，value="趙凡"

input type='password' - name屬性，value="趙凡"

input type='submit' - value='送出' 送出按鈕，表單

input type='button' - value='登入' 按鈕

input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥）

input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量擷取資料）

input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data"

input type='rest' - 重置

<textarea >預設值</textarea> - name屬性

select标簽 - name,内部option value, 送出到背景，size，multiple

- a标簽

- 跳轉

- 錨 href='#某個标簽的ID' 标簽的ID不允許重複

- img

src

alt

title

- 清單

- 表格

table

thead

tbody

colspan = ''

rowspan = ''

- label

用于點選檔案，使得關聯的标簽擷取光标

- fieldset

legend

轉載于:https://my.oschina.net/sign/blog/1796794

WEB前端學習之HTML一、HTML(HTML5标準)

一、HTML(HTML5标準)

1.什麼是HTML：

2.HTML 标簽：

3.通用聲明：

4.字元聲明：

5.HTML 元素:

6.HTML屬性：

7.HTML标題：

8.HTML 段落:

9.HTML 連結：

10.HTML 頭部：

11.HTML body标簽：

<div>和<span>：

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條