HTML知識點！趕緊碼住

.什么是HTML

HTML 是用來描述網頁的一種語言。HTML 指的是超文本標記語言: HyperText Markup LanguageHTML 不是一種編程語言，而是一種標記語言標記語言是一套標記標簽 (markup tag)HTML 使用標記標簽來描述網頁HTML 文檔包含了HTML 標簽及文本內容HTML文檔也叫做 web 頁面

二.HTML基本語法

(1)HTML標簽

整個網頁是從<html>這里開始的，然后到</html>結束。

(2)head標簽

head標簽代表頁面的“頭”，定義一些特殊內容，這些內容往往都是“不可見內容”（在瀏覽器不可見）。

（3）body標簽

body標簽代表頁面的“身”，定義網頁展示內容，這些內容往往都是可見內容（在瀏覽器可見）。后續課程講解的標簽都是在body標簽內部的各種標簽。

三.HTML語法規范

HTML中不區分大小寫，但是我們一般都使用小寫

HTML中的注釋不能嵌套、

HTML標簽必須結構完整，要么成對出現，要么自結束標簽

HTML標簽可以嵌套，但是不能交叉嵌套

HTML標簽中的屬性必須有值，且值必須加引號(雙引號單引號都可以)

四.HTML標簽使用方法

（1）HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

（2）有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。列表項使用數字來標記。

（3）段落與文字標簽

（4）文本格式化標簽

五.HTML表單和輸入

表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。表單使用表單標簽來設置。

（1）文本域（Text Fields）

輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

（2）密碼字段

密碼字段通過標簽來定義:

（3）單選按鈕

標簽定義了表單單選框選項

（4）復選框

定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

（5）提交按鈕

定義了提交按鈕。當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理

今天我們就先分享到這里，有不懂的可以私信我

（私信我有免費的IT課程可以領取喲）

釋

單行注釋使用雙斜杠//
多行注釋使用/*開始，并以*/結尾

// 這是單行注釋
/* 這是
多行
注釋
 */

語句結束符

JavaScript中，每一個語句的結束都應該使用分號;結尾。這是在告訴解釋器每段代碼的有效范圍。
當然，你也可以不在代碼結束的位置寫上分號;，JavaScript會在每一行結束位置自動幫你添加上
有幾種特別的情況必須要加上分號。當
同一行存在多條代碼分別實現不同的功能時，必須用分號隔開，比如在一行中聲明多個變量
如果下面的代碼用圓括號放在一起了，上面的代碼就必須以分號結束。否則JavaScript會突然那位上面未加分號的代碼并沒結束，將上下兩段不想管的代碼鏈接在一起，導致出錯。

console.log('hello')
(function (arg){
	alert(arg);
})('ziawang')
// 這種情況下就會報錯，js把下面匿名函數與console函數當作一段代碼，導致出錯

說了這么多，最后其實就是要強調的是，一定要在每段語句結束的時候加上分號。。。

變量

在JavaScript中，定義一個變量必須要對這個變量使用var關鍵字聲明
如果聲明地變量沒有初始化值，那么這個變量值的類型就是undefined類型，并且該類型的值只有一個，也是undefined
格式（不需要聲明變量類型）

var 變量名;			// 未初始化變量值
var 變量名 = 變量值	// 出事化變量值
var 
	變量名1 = 變量值1, 
	變量名2 = 變量值2, 
	變量名3 = 變量值3; // 聲明多個變量用逗號隔開，語句以分號結束

變量提升

在ES6中，如果我們在使用var關鍵字初始化一個變量之前調用了這個變量，那么調用這個變量的時候并不會報錯，而是會把這個變量值當作undefined來對待
舉例

console.log(b)			// undefined
var b = "hello ziawang";
console.log(b);			// "hello ziawang"

這就等價于

var b;
console.log(b)		// undefined
b = "hello ziawang";
console.log(b)		// "hello ziawang"

使用let聲明變量

let與var的區別
在for循環中，通過var是不能創建一個只存在于for循環代碼塊中的局部變量的，如果初始條件中的i變量是通過var關鍵字聲明的，那么該變量在for循環結束之后，在for循環外部仍然可以調用，這就是常說的變量溢出。
使用let關鍵字解決變量溢出問題
使用let關鍵字可以在for循環的內存空間中創建一個局部變量，當for循環結束，其內存空間釋放的同時，該變量也會被釋放。這樣既節省了內存空間，又防止了內存溢出

for (var i= 0; i < 5; i++){
 console.log(i);
}
console.log(i); // 得到6，變量溢出 
for (let j = 0; j < 5; j++){
 console.log(j);
}
console.log(j); // 變量不會溢出，此處會拋出ReferenceError

但是要注意

let聲明得到的變量不存在變量提升。也就是說，如果一個變量在其使用let關鍵字聲明之前調用，那么就會報錯
let初始化得到的變量，不能再重復定義。意思是，你如果已經在代碼中使用let聲明了一個變量x，那么當你再次使用let聲明一個相同名稱的變量x的時候，就會拋出錯誤

解構變量

解構變量使用起來類似python的閉包

使用注意

前后一定要一致
如果等號右邊是一個數組，那么等號的左邊也必須使用一個數組來接收，并且用于接收該數組的元素數量不能比數組右邊的對象元素個數多（可以少于右邊元素的個數）
如果等號的右邊是一個對象，在結構的時候左邊也必須是一個對象并且需要使用該對象的屬性作為解構變量接收對象的value。并且左側對象中屬性的位置可以隨意

<script>
 let arr = [1, 2, 3, 4];
 let [a, b, c] = arr;
 console.log(a);
 console.log(b);
 console.log(c);
 let [a1, b1, [c1]] =[1, 2, [4]];
 console.log(a1);
 console.log(b1);
 console.log(c1);
 let {age, name} = {"name":"ziawang", age:23}
 console.log(name); // 解構亂序也可以，只要key正確
 console.log(age)
</script>

全局變量

當聲明變量時，如果不用var關鍵字，那么得到的變量就是一個全局變量
在JavaScript中，應該盡量使用局部變量代替全局變量
因為全局變量在調用過程中會降低js代碼運行的效率。
理由：待補充

常量

在JavaScript中可以使用關鍵字const來定義常量，該關鍵字定義的常量具有塊級作用域
所謂塊級作用域，其實可以簡單理解為局部作用域，比如使用for循環時，如果在for循環內通過const創建了一個常量，那么這個常量的有效范圍即是該for循環代碼塊，當for循環運行結束的時候，該常量會隨著for循環內存空間的釋放而釋放

for (let i = 0; i < 5; i++){
 const PI = 3.141592653;
 console.log(PI);
}
console.log(PI); // 拋出ReferenceError錯誤

標識符

大部分編程語言的表示符規范基本都是一樣的
JavaScript表示符規范如下

標識符由數字、字母、下劃線、$組成
標識符不能以數字開頭
標識符的名稱要與要表達的對象相符
標識符不能與JavaScript內置的關鍵字（js中稱為保留字）相同

關于布爾值

在JavaScript中，null undefined 0 NAN 空字符串空數據對象（空列表、空Map的等）視為false

在開篇

html的內容，想要改變它的樣式？比如顏色、字體、布局，等等，怎么破？CSS代碼帶你起飛！

css語法

css的語法非常簡單，如下：

選擇器 {屬性: 值;屬性:值}

例如：

h2 {color: cornflowerblue;font-size: 60px;}

上面的h2是元素選擇器，屬性color，它的值是cornflowerblue。屬性font-size，它的值是60px。

使用css的3種方式

有3種css的使用方式：

外部 CSS
內部 CSS
行內 CSS

雖然有3種，但筆者只講外部css，在實際開發中，內容必須和樣式分離，大有好處，慢慢體會吧！

那么如何使用外部的css？需要在html的head中通過link來引入，如下：

<head>
    <link rel="stylesheet" href="./test.css">
</head>

css代碼中如何寫注釋

在寫代碼的過程中，注釋很重要。但不要盲目的注釋，對關鍵的、重要的邏輯做簡單明了的注釋即可，不然寫的代碼看起來跟一坨屎沒什么區別。那么在css代碼中，也是可以做注釋的。當然了，該注釋的時候就注釋，不該注釋的時候就別注釋。那到底要不要加注釋？算了，隨你吧！不！我還是啰嗦一下，對簡單明了、見名知意的代碼就沒必要注釋了，要盡量讓我們的代碼看起來簡潔、優雅。筆者曾經接手過一個項目，看了別人寫的代碼之后，就是一坨屎。我看個屁啊！直接重寫，看都不想看了。

回到正題，解鎖3種注釋姿勢。

姿勢1：

/* 注釋內容 */
h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

姿勢2：

/* 注釋內容，注釋內容，
注釋內容。
*/
h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

姿勢3：

h2,h3,p{
    text-align: center;
    color: cornflowerblue; /* 注釋內容 */
    font-size: 60px;
}

css選擇器

css的選擇器很重要，所以筆者單獨拿出來講了。下面我們剖析一下5種選擇

1. 元素選擇器

元素選擇器就是通過元素來進行選擇，并設置css樣式，看下面小栗子。

創建home.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學習</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p>面向運維編程</p>
    <p>面向運維編程</p>
</body>
</html>

創建test.css文件

p {
    text-align: center;
    color: red;
}

2. id選擇器

通過id選擇器，來選擇元素，前提條件是元素需要設置了id，看下面的小栗子。

創建home.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學習</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p id="a1">面向運維編程</p>
    <p id="a2">面向運維編程</p>
</body>
</html>

創建test.css文件

#a1 {
    text-align: center;
    color: blue;
    font-size: 100px;
}

id選擇器的語法是，前面需要加#號，然后跟著是id的名字，這樣就能選擇到元素了，如這個例子只選擇了#a1，#a2并沒有設置任何樣式，效果見下圖。

效果圖如下：

3. 類選擇器

類選擇器的語法是通過一個點（“.”）來進行選擇，前提是要給元素設置一個類名字，請看下面案例。

創建home.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學習</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p class="c1">彩虹運維技術棧社區</p>
    <p class="c1">面向運維編程</p>
</body>
</html>

創建test.css文件

.c1 {
    text-align: center;
    color: red;
    font-size: 60px;
}

上面的例子中，類名均為c1的，設置的css樣式都會生效，那如果想針對性的設置屬性怎么做？請繼續往下看小栗子。

前端代碼保持不變，修改一些css的代碼，請細品：

h2.c1 {
    text-align: center;
    color: red;
    font-size: 80px;
}

p.c1 {
    color: green;
    font-size: 60px;
}

效果圖如下：

4. 通用選擇器

通用選擇器最大特點就是“一鍋端”，不管你給元素設置了id也好還是class也好，都直接將所有元素都應用css的樣式。它是用“*”符號來作為選擇，請看下面例子。

html代碼分別設置了有class和id，以及啥都沒有設置的最后一個p元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學習</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2 class="cls_1">彩虹運維技術棧社區</h2>
    <p id="id_1">持續分享運維領域技能</p>
    <p>持續分享運維開發技能</p>
</body>
</html>

下面是css的代碼

* {
    text-align: center;
    color: darkmagenta;
    font-size: 60px;
}

來看看“一鍋端”的效果：

5. 分組選擇器

分組選擇器的最大好處就是可以減少css代碼量，如果部分元素需要設置一樣的樣式，那么可以將它進行分組，選擇器用逗號分隔。

對html代碼進行改造改造，如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學習</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2>彩虹運維技術棧社區</h2>
    <h3>持續分享運維領域技能</h3>
    <p>持續分享運維開發技能</p>
</body>
</html>

h2、h3、p為一組，均應用了同樣的css樣式，css代碼如下：

h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

效果如下圖：

寫在最后

本次分享的到此結束，感謝閱讀。望多多關注我們，點贊、收藏、轉發。

本文轉載于（喜歡的盆友關注我們）：https://mp.weixin.qq.com/s/K0LjEs0F3KyY0wNuQ_MPzw

在線咨詢

上一篇：HTML 編輯器
下一篇：零基礎入門 HTML 的 8 分鐘極簡教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML知識點！趕緊碼住

在開篇

css語法

使用css的3種方式

css代碼中如何寫注釋

css選擇器

1. 元素選擇器

2. id選擇器

3. 類選擇器

4. 通用選擇器

5. 分組選擇器

寫在最后

您的項目需求