HTML知識點！趕緊碼住

.什么是HTML

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

二.HTML基本語法

(1)HTML標(biāo)簽

整個網(wǎng)頁是從<html>這里開始的，然后到</html>結(jié)束。

(2)head標(biāo)簽

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

（3）body標(biāo)簽

body標(biāo)簽代表頁面的“身”，定義網(wǎng)頁展示內(nèi)容，這些內(nèi)容往往都是可見內(nèi)容（在瀏覽器可見）。后續(xù)課程講解的標(biāo)簽都是在body標(biāo)簽內(nèi)部的各種標(biāo)簽。

三.HTML語法規(guī)范

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

HTML中的注釋不能嵌套、

HTML標(biāo)簽必須結(jié)構(gòu)完整，要么成對出現(xiàn)，要么自結(jié)束標(biāo)簽

HTML標(biāo)簽可以嵌套，但是不能交叉嵌套

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

四.HTML標(biāo)簽使用方法

（1）HTML無序列表

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

（2）有序列表

同樣，有序列表也是一列項目，列表項目使用數(shù)字進行標(biāo)記。列表項使用數(shù)字來標(biāo)記。

（3）段落與文字標(biāo)簽

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

五.HTML表單和輸入

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

（1）文本域（Text Fields）

輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：

（2）密碼字段

密碼字段通過標(biāo)簽來定義:

（3）單選按鈕

標(biāo)簽定義了表單單選框選項

（4）復(fù)選框

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

（5）提交按鈕

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

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

（私信我有免費的IT課程可以領(lǐng)取喲）

釋

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

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

語句結(jié)束符

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

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

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

變量

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

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

變量提升

在ES6中，如果我們在使用var關(guān)鍵字初始化一個變量之前調(diào)用了這個變量，那么調(diào)用這個變量的時候并不會報錯，而是會把這個變量值當(dāng)作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的區(qū)別
在for循環(huán)中，通過var是不能創(chuàng)建一個只存在于for循環(huán)代碼塊中的局部變量的，如果初始條件中的i變量是通過var關(guān)鍵字聲明的，那么該變量在for循環(huán)結(jié)束之后，在for循環(huán)外部仍然可以調(diào)用，這就是常說的變量溢出。
使用let關(guān)鍵字解決變量溢出問題
使用let關(guān)鍵字可以在for循環(huán)的內(nèi)存空間中創(chuàng)建一個局部變量，當(dāng)for循環(huán)結(jié)束，其內(nèi)存空間釋放的同時，該變量也會被釋放。這樣既節(jié)省了內(nèi)存空間，又防止了內(nèi)存溢出

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關(guān)鍵字聲明之前調(diào)用，那么就會報錯
let初始化得到的變量，不能再重復(fù)定義。意思是，你如果已經(jīng)在代碼中使用let聲明了一個變量x，那么當(dāng)你再次使用let聲明一個相同名稱的變量x的時候，就會拋出錯誤

解構(gòu)變量

解構(gòu)變量使用起來類似python的閉包

使用注意

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

<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); // 解構(gòu)亂序也可以，只要key正確
 console.log(age)
</script>

全局變量

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

常量

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

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

標(biāo)識符

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

標(biāo)識符由數(shù)字、字母、下劃線、$組成
標(biāo)識符不能以數(shù)字開頭
標(biāo)識符的名稱要與要表達的對象相符
標(biāo)識符不能與JavaScript內(nèi)置的關(guān)鍵字（js中稱為保留字）相同

關(guān)于布爾值

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

在開篇

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

css語法

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

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

例如：

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

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

使用css的3種方式

有3種css的使用方式：

外部 CSS
內(nèi)部 CSS
行內(nèi) CSS

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

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

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

css代碼中如何寫注釋

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

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

姿勢1：

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

姿勢2：

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

姿勢3：

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

css選擇器

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

1. 元素選擇器

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

創(chuàng)建home.html文件

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

創(chuàng)建test.css文件

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

2. id選擇器

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

創(chuàng)建home.html文件

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

創(chuàng)建test.css文件

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

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

效果圖如下：

3. 類選擇器

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

創(chuàng)建home.html文件

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

創(chuàng)建test.css文件

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

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

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

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

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

效果圖如下：

4. 通用選擇器

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學(xué)習(xí)</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2 class="cls_1">彩虹運維技術(shù)棧社區(qū)</h2>
    <p id="id_1">持續(xù)分享運維領(lǐng)域技能</p>
    <p>持續(xù)分享運維開發(fā)技能</p>
</body>
</html>

下面是css的代碼

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

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

5. 分組選擇器

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全棧運維學(xué)習(xí)</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2>彩虹運維技術(shù)棧社區(qū)</h2>
    <h3>持續(xù)分享運維領(lǐng)域技能</h3>
    <p>持續(xù)分享運維開發(fā)技能</p>
</body>
</html>

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

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

效果如下圖：

寫在最后

本次分享的到此結(jié)束，感謝閱讀。望多多關(guān)注我們，點贊、收藏、轉(zhuǎn)發(fā)。

本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/K0LjEs0F3KyY0wNuQ_MPzw

在線咨詢

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

您的項目需求

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

整合營銷服務(wù)商

HTML知識點！趕緊碼住

在開篇

css語法

使用css的3種方式

css代碼中如何寫注釋

css選擇器

1. 元素選擇器

2. id選擇器

3. 類選擇器

4. 通用選擇器

5. 分組選擇器

寫在最后

您的項目需求