Web專題分享
Web專題分享
如果格式有問題，可以直接在這里進行查看?https://www.yuque.com/shuangguidaidan/ft6o18/tcu448
先來了解一下什么是 Web ？創(chuàng)建 Web 頁面或 App 等前端界面呈現(xiàn)給用戶的過程，實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互
Web 標(biāo)準(zhǔn)：結(jié)構(gòu)、樣式和行為。W3C 對其進行規(guī)范。
HTML 是名詞 - 表現(xiàn)
CSS 是形容詞 - 結(jié)構(gòu)
JavaScript 是動詞 – 行為
以上這三個東西就形成了一個完整的網(wǎng)頁，但是 JS 改變時，可以會造成 CSS 和 HTML 的混亂，讓這三個的界限不是那么清晰。
這個時候，Web 標(biāo)準(zhǔn)就出來了，Web 標(biāo)準(zhǔn)一般是將該三部分獨立分開，使其更具有模塊化。
一、HTML
1、什么是 HTML ?
超文本標(biāo)記語言 (英語：Hypertext Markup Language，簡稱：HTML ) 是一種用來結(jié)構(gòu)化 Web 網(wǎng)頁及其內(nèi)容的標(biāo)記語言。網(wǎng)頁內(nèi)容可以是：一組段落、一個重點信息列表、也可以含有圖片和數(shù)據(jù)表。
HTML 規(guī)定了一系列的標(biāo)簽，通過不同標(biāo)簽的任意組合來拼裝了成了不同樣式的網(wǎng)頁內(nèi)容（這個很像積木），例如：Confluence、jira、淘寶、京東等
2、網(wǎng)頁基本結(jié)構(gòu)語法/模板：
?
<html>
????<head>?
????<meta?charset="utf-8">
????????<title>網(wǎng)頁標(biāo)題title>
????head>
????<body>?
????????
????body>
html>
這里有：
— 文檔類型。混沌初分，HTML 尚在襁褓（大約是 1991/92 年）之時，DOCTYPE用來鏈接一些 HTML 編寫守則，比如自動查錯之類。DOCTYPE在當(dāng)今作用有限，僅用于保證文檔正常讀取。現(xiàn)在知道這些就足夠了。— html 元素。該元素包含整個頁面的內(nèi)容，也稱作根元素。— head 元素。該元素的內(nèi)容對用戶不可見，其中包含例如面向搜索引擎的搜索關(guān)鍵字、頁面描述、CSS 樣式表和字符編碼聲明等。— 該元素指定文檔使用 UTF-8 字符編碼 ，UTF-8 包括絕大多數(shù)人類已知語言的字符。基本上 UTF-8 可以處理任何文本內(nèi)容，還可以避免以后出現(xiàn)某些問題，沒有理由再選用其他編碼。— title 元素。該元素設(shè)置頁面的標(biāo)題，顯示在瀏覽器標(biāo)簽頁上，也作為收藏網(wǎng)頁的描述文字。— body 元素。該元素包含期望讓用戶在訪問頁面時看到的內(nèi)容，包括文本、圖像、視頻、游戲、可播放的音軌或其他內(nèi)容。
3、HTML 元素
HTML 不是一門編程語言，而是一種用于定義內(nèi)容結(jié)構(gòu)的標(biāo)記語言。HTML 由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。一對標(biāo)簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號，等等。
4、HTML 標(biāo)簽
這個元素的主要部分有：
開始標(biāo)簽（Opening tag）：包含元素的名稱（本例為 p），被大于號、小于號所包圍。表示元素從這里開始或者開始起作用 —— 在本例中即段落由此開始。
結(jié)束標(biāo)簽（Closing tag）：與開始標(biāo)簽相似，只是其在元素名之前包含了一個斜杠。這表示著元素的結(jié)尾 —— 在本例中即段落在此結(jié)束。初學(xué)者常常會犯忘記包含結(jié)束標(biāo)簽的錯誤，這可能會產(chǎn)生一些奇怪的結(jié)果。
內(nèi)容（Content）：元素的內(nèi)容，本例中就是所輸入的文本本身。
元素（Element）：開始標(biāo)簽、結(jié)束標(biāo)簽與內(nèi)容相結(jié)合，便是一個完整的元素。
5、網(wǎng)頁元素分類
塊元素 (block)
無論標(biāo)簽內(nèi)容有多少,該標(biāo)簽始終會獨占一行
常見的塊元素有: h1、h2、h3、h4、h5、h6、p…
行內(nèi)元素 (in-line)
內(nèi)容決定元素的寬度和高度,不會獨占一行,行內(nèi)元素不允許設(shè)定寬度和高度(除圖片以外)
常見的行內(nèi)元素有: em、strong、a、img、code…..
6、HTML常用標(biāo)簽
標(biāo)題標(biāo)簽
可以使用 h1 ~ h6 來修飾標(biāo)題。其中 h1 最大 , h6 最小；所有的標(biāo)題標(biāo)簽?zāi)J加粗
所有的標(biāo)題標(biāo)簽?zāi)J獨占一行(塊級元素)
段落標(biāo)簽
段落內(nèi)容
默認會獨占一行,段落與其他元素之間會保留間距
換行標(biāo)簽：`
`
水平線標(biāo)簽：`
`
字體樣式標(biāo)簽
<strong>需要加粗的文本strong>
<em>需要傾斜的文本em>
<code>代碼塊code>
<var>變量var>
<dfn>定義項目dfn>
<samp>演示文本samp>
<kbd>定義鍵盤文本。表示該文本從鍵盤上輸入kbd>
<cite>引用cite>
效果：
需要加粗的文本
需要傾斜的文本
代碼塊
變量
定義項目
演示文本
定義鍵盤文本。表示該文本從鍵盤上輸入
引用
網(wǎng)頁中的特殊符號和注釋：（更多詳見：https://www.jb51.net/onlineread/htmlchar.htm）
圖片標(biāo)簽
屬性解釋:
src : 圖片所存放的地址 (推薦寫相對路徑)
title : 當(dāng)鼠標(biāo)在圖片上停留時的顯示文本
alt : 當(dāng)圖片加載失敗或網(wǎng)絡(luò)傳輸速度較慢時的默認提示文本
width : 圖片的寬度
height : 圖片的高度 [推薦: 在指定圖片寬度/高度時,只需要指定其中一個屬性即可,圖片會根據(jù)指定的寬度/高度進行等比例縮放,圖片不會失真]
圖片標(biāo)簽 src 是必須的，其余可以設(shè)置
超鏈接
超鏈接分類:
普通鏈接 (使用頻率最多的)
錨鏈接
功能性鏈接
普通鏈接
屬性解釋:
href : 超鏈接所要跳轉(zhuǎn)到的地址 [跳轉(zhuǎn)到指定的網(wǎng)址: http://www.baidu.com?[跳轉(zhuǎn)到同一個項目中的文件: 路徑/xxx.html]
name : 自定義框架名稱 , 表示當(dāng)前鏈接在指定的內(nèi)聯(lián)框架中打開
target : 鏈接打開目標(biāo), 可以選擇以下幾種
_self : 在當(dāng)前自身窗口中打開鏈接
_blank : 在新標(biāo)簽頁面中打開鏈接
_parent : 在父級框架中打開 [Ext]
_top : 在最頂層中打開 [Ext]
功能性鏈接
發(fā)送郵件:
mailto:你的電子郵箱
打電話:
tel:你的聯(lián)系電話
使用腳本:
鏈接內(nèi)容除了可以使用文本外,也可以使用圖片
錨鏈接
定義錨
使用錨鏈接
列表
Web 上的許多內(nèi)容都是列表，HTML 有一些特別的列表元素。標(biāo)記列表通常包括至少兩個元素。最常用的列表類型為：
無序列表（Unordered List）中項目的順序并不重要，就像購物列表。用一個
有序列表（Ordered List）中項目的順序很重要，就像烹調(diào)指南。用一個
列表的每個項目用一個列表項目（List Item）元素 包圍。
無序列表用于標(biāo)記列表項目順序無關(guān)緊要的列表 — 讓我們以早點清單為例。
豆?jié){
油條
豆汁
焦圈
<ul>
??<li>豆?jié){li>
??<li>油條li>
??<li>豆汁li>
??<li>焦圈li>
ul>
有序列表需要按照項目的順序列出來——讓我們以一組方向為例：
1.?沿著條路走到頭
2.?右轉(zhuǎn)
3.?直行穿過第一個十字路口
4.?在第三個十字路口處左轉(zhuǎn)
5.?繼續(xù)走?300?米，學(xué)校就在你的右手邊
<ol>
??<li>沿著條路走到頭li>
??<li>右轉(zhuǎn)li>
??<li>直行穿過第一個十字路口li>
??<li>在第三個十字路口處左轉(zhuǎn)li>
??<li>繼續(xù)走?300?米，學(xué)校就在你的右手邊li>
ol>
二、CSS
CSS 的官方名字叫層疊樣式表，它的出現(xiàn)是為了解決內(nèi)容和表現(xiàn)分離的問題，裝飾HTML樣式，美化頁面。
1、樣式
CSS 是一門基于規(guī)則的語言 —— 你能定義用于你的網(wǎng)頁中特定元素樣式的一組規(guī)則. 比如“我希望頁面中的主標(biāo)題是紅色的字”
下面這段代碼使用非常簡單的 CSS 規(guī)則實現(xiàn)了之前提到的效果:
h1?{
????color:?red;
}
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明:
選擇器{屬性名：屬性值；屬性名：屬性值；...}
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
如果直接使用行內(nèi)樣式的方式，可以不使用選擇器，而是直接在元素本身上添加 style 即可。
行內(nèi)樣式
<p?style="color:?red">這段字是紅色的！p>
非行內(nèi)樣式
<html>
??<head>
????<style>
????????p?{color:red;}?
????style>
??head>
??<body>
??????<p>這段字是紅色的！p>
????????<p>這段字也是紅色的！p>
??body>
html>
2、引入方式
行內(nèi)樣式
把樣式寫在標(biāo)簽內(nèi)部，需要在標(biāo)簽中添加一個屬性 style，在 style 中定義樣式
<p?style="color:?red">這段字是紅色的！p>
內(nèi)部樣式表
在 head 中定義 style 標(biāo)簽，在該標(biāo)簽中寫當(dāng)前頁面的樣式
<html>
??<head>
????<style>
????????p?{color:red;}?
????style>
??head>
??<body>
??????<p>這段字是紅色的！p>
????????<p>這段字也是紅色的！p>
??body>
html>
外部樣式表
內(nèi)部樣式表中定義的樣式，只能在當(dāng)前文件中使用，如果需要在多個文件中都想用到同一個樣式，而不需要來回復(fù)制的情況下，可以在HTML 文件外創(chuàng)建 .css 文件，然后在 HTML 中引入該文件。
main.css
p?{color:red;}
index.html
<html?lang="en">
??<head>
??????<meta?charset="UTF-8">
??????<title>DEMOtitle>
??????<link?href="main.css"?rel="stylesheet">
??head>
??<body>
??????<p>這段字是紅色的！p>
??????<p>這段字也是紅色的！p>
??body>
html>
3、樣式優(yōu)先級問題
當(dāng)采用多種方式對同一個元素同一個樣式定義了不同的效果時，優(yōu)先級 行內(nèi)樣式 > 內(nèi)部樣式表 = 外部樣式表
內(nèi)部樣式表和外部樣式表，按照引入順序有不同的優(yōu)先級，后引入的樣式會覆蓋先引入的樣式
例如：
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>DEMOtitle>
????<style>
????????p?{?color:?yellow}
????style>
????<link?href="main.css"?rel="stylesheet">
head>
<body>
????<p?style="color:?green">這段字是綠色的！p>
????<p>這段字也是紅色的！p>
body>
html>
因為行內(nèi)樣式優(yōu)先級高，則第一段文字是綠色的，又因為 main.css 是后引入且都是 p 元素的 color 樣式進行規(guī)定，則 main.css 中的優(yōu)先級會更高，所以第一段文字是紅色的。
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>DEMOtitle>
????<link?href="main.css"?rel="stylesheet">
????<style>
????????p?{?color:?yellow}
????style>
head>
<body>
????<p?style="color:?green">這段字是綠色的！p>
????<p>這段字也是黃色的！p>
body>
html>
當(dāng)我們把位置換一下的時候，第二段文字就變成換色的了。
在我們?nèi)粘ｉ_發(fā)項目中往往會很復(fù)雜，樣式?jīng)_突也會有很多，有時我們無法通過調(diào)整引入順序來覆蓋一部分樣式，這是我們可以使用 !important 來強制提高優(yōu)先級，在用 !important 修飾的樣式的優(yōu)先級比不用其修改的優(yōu)先級高。
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>DEMOtitle>
????<style>
????????p?{?color:?yellow?!important;}
????style>
????<link?href="main.css"?rel="stylesheet">
head>
<body>
????<p?style="color:?green">這段字是黃色的！因為我沒有 importantp>
????<p>這段字也是黃色的！p>
body>
html>
總結(jié)： 優(yōu)先級第一判斷標(biāo)準(zhǔn)為是否有 !important 有則優(yōu)先級提高，相同important情況下判斷樣式的引入方式。引入方式優(yōu)先級行內(nèi)樣式 > 內(nèi)部樣式表 = 外部樣式表，其中內(nèi)部樣式表和外部樣式表，按照引入順序有不同的優(yōu)先級，后引入的樣式會覆蓋先引入的樣式。
4、選擇器
從上面的例子可以看出，除了行內(nèi)樣式，內(nèi)部樣式表和外部樣式表對需要提供一個選擇器，來選擇指定的一部分元素。在 CSS 中提供了一系列的選擇器，常見的如下
類型選擇器
使用 HTML 本身提供的類型作為選擇器。這種選擇器會選擇當(dāng)前頁面的所有的元素
p { }
這個選擇器組，第一個是指向了所有 HTML 元素
id 選擇器
在編寫 HTML 時，我們可以改元素設(shè)置一個唯一 id, 方便之后定位到該標(biāo)簽，在同一個頁面中 id 應(yīng)該是唯一的
<p?id="username">?我的名字?p>
我們可以使用 #username { } 這樣可以選擇指定 id 的元素
類選擇器
類選擇器的用法和 Id 選擇器類似，在使用的時候，也需要預(yù)先對標(biāo)簽設(shè)置類別（class）,區(qū)別在于不要求其唯一
class="c1">?江畔何人初見月？江月何年初照人？?
class="c1">?人生代代無窮已，江月年年望相似。?
我們可以使用 .c1 {} 來對兩個元素同時這是樣式
屬性選擇器
這組選擇器根據(jù)一個元素上的某個標(biāo)簽的屬性的存在以選擇元素的不同方式：
a[title]?{?}
或者根據(jù)一個有特定值的標(biāo)簽屬性是否存在來選擇：
a[href="https://example.com"]?{?}
偽類與偽元素
這組選擇器包含了偽類，用來樣式化一個元素的特定狀態(tài)。例如:hover偽類會在鼠標(biāo)指針懸浮到一個元素上的時候選擇這個元素：
a:hover?{?}
它還可以包含了偽元素，選擇一個元素的某個部分而不是元素自己。例如，::first-line是會選擇一個元素（下面的情況中是）中的第一行，類似包在了第一個被格式化的行外面，然后選擇這個。
p::first-line?{?}
| 選擇器 | 示例 |
|---|---|
| 類型選擇器 | h1 { } |
| 通配選擇器 | * { } |
| 類選擇器 | .box { } |
| ID選擇器 | #unique { } |
| 標(biāo)簽屬性選擇器 | a[title] { } |
| 偽類選擇器 | p:first-child { } |
| 偽元素選擇器 | p::first-line { } |
| 后代選擇器 | article p { } |
| 子代選擇器 | article > p { } |
| 相鄰兄弟選擇器 | h1 + p { } |
| 通用兄弟選擇器 | h1 ~ p { } |
選擇器本身很重要，不僅是 CSS，在之后的 JavaScript 中選擇指定的元素以及對 Web 網(wǎng)站進行自動化測試都需要使用這些選擇器去模擬操作元素。
4、盒模型
在 CSS 中，所有的元素都被一個個的“盒子（box）”包圍著，理解這些“盒子”的基本原理，是我們使用CSS實現(xiàn)準(zhǔn)確布局、處理元素排列的關(guān)鍵。
完整的 CSS 盒模型應(yīng)用于塊級盒子，內(nèi)聯(lián)盒子只使用盒模型中定義的部分內(nèi)容。模型定義了盒的每個部分 —— margin, border, padding, and content —— 合在一起就可以創(chuàng)建我們在頁面上看到的內(nèi)容。
盒模型的各個部分
CSS中組成一個塊級盒子需要:
Content box: 這個區(qū)域是用來顯示內(nèi)容，大小可以通過設(shè)置 width和 height。
Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域；大小通過 padding相關(guān)屬性設(shè)置。可以對四周分別設(shè)置，也可以設(shè)置為同一個。
Border box: 邊框盒包裹內(nèi)容和內(nèi)邊距。大小通過 border 相關(guān)屬性設(shè)置。
Margin box: 這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域。大小通過 margin 相關(guān)屬性設(shè)置。
塊級盒子（Block box） 和 內(nèi)聯(lián)盒子（Inline box）
在 CSS 中我們廣泛地使用兩種“盒子” —— 塊級盒子 (block box) 和 內(nèi)聯(lián)盒子 (inline box)。這兩種盒子會在頁面流（page flow）和元素之間的關(guān)系方面表現(xiàn)出不同的行為:
一個被定義成塊級的（block）盒子會表現(xiàn)出以下行為:
盒子會在內(nèi)聯(lián)的方向上擴展并占據(jù)父容器在該方向上的所有可用空間，在絕大數(shù)情況下意味著盒子會和父容器一樣寬
每個盒子都會換行
width 和 height 屬性可以發(fā)揮作用
內(nèi)邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當(dāng)前盒子周圍“推開”
除非特殊指定，諸如標(biāo)題(等)和段落()默認情況下都是塊級的盒子。
如果一個盒子對外顯示為 inline，那么他的行為如下:
盒子不會產(chǎn)生換行。
width 和 height 屬性將不起作用。
垂直方向的內(nèi)邊距、外邊距以及邊框會被應(yīng)用但是不會把其他處于
inline狀態(tài)的盒子推開。水平方向的內(nèi)邊距、外邊距以及邊框會被應(yīng)用且會把其他處于
inline狀態(tài)的盒子推開。
用做鏈接的 元素、 、 以及 都是默認處于 inline 狀態(tài)的。
我們通過對盒子 display 屬性的設(shè)置，比如 inline 或者 block ，來控制盒子的外部顯示類型。
5、字體
font-family：字體（宋體/微軟雅黑）
font-size：字體大小（12px）
font-weight:字體粗細
6、背景
background
background-color 背景顏色：比背景圖片更靠近底層
background-image 背景圖片：url("圖片路徑")
size 背景圖片大小：x軸方向 y軸方向
position 背景定位：x軸方向 y軸方向
repeat 背景重復(fù)：
no-repeat: 不重復(fù)
repeat-x: 水平重復(fù)
repeat-y: 垂直重復(fù)
repeat: 在兩個方向重復(fù)
7、邊框
我們可以使用border為一個框的所有四個邊設(shè)置邊框。
.box?{
??border:?1px?solid?black;
}?
或者我們可以只設(shè)置盒子的一個邊，例如:
.box?{
??border-top:?1px?solid?black;
}
這些簡寫的等價于：
.box?{
??border-width:?1px;
??border-style:?solid;
??border-color:?black;
}
border-width: 用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度
border-style: 設(shè)置邊框樣式
border-color: 設(shè)置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色
border-radius: 設(shè)置元素邊框圓角屬性
三、JavaScript
JavaScript 是世界上最流行的腳本語言。JavaScript 是屬于 Web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動電話。JavaScript 被設(shè)計為向 HTML 頁面增加交互性，創(chuàng)建動態(tài)更新的內(nèi)容，控制多媒體，制作圖像動畫，還有很多。許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段添加到網(wǎng)頁中。隨著 Node.js 的發(fā)展，JavaScript 也可以用于服務(wù)端編程中，這里主要介紹在 Web 頁面中的使用。
本文用 js 代替 JavaScript 進行說明
1、js 常用來做什么？（案例演示try.html）
在變量中儲存有用的值。比如上文的示例中，我們請求客戶輸入一個新名字，然后將其儲存到 name 變量中。
操作一段文本（在編程中稱為“字符串”（string））。上文的示例中，我們?nèi)∽址?"玩家1："，然后把它和 name 變量連結(jié)起來，創(chuàng)造出完整的文本標(biāo)簽，比如："玩家1：小明"。
運行代碼以響應(yīng)網(wǎng)頁中發(fā)生的特定事件。上文的示例中，我們用一個 click（單擊）事件來檢測按鈕什么時候被點擊，然后運行代碼更新文本標(biāo)簽。
以及更多！
JavaScript 是腳本語言，可以在瀏覽器中執(zhí)行它是連接前臺（HTML）和后臺服務(wù)器的橋梁，它是操縱 HTML 的能手。
平時聽到原生 js，js庫，js框架，js 插件等等，下面簡單說明一下：
原生js，是指最基礎(chǔ)的js，沒有封裝過，但因為各瀏覽器對js的支持不同，就導(dǎo)致用基礎(chǔ)的js編程需要為不同的瀏覽器寫兼容代碼；
js 庫，js 框架，是指集成一系列 dom 操作，API 封裝，界面 UI 封裝的的庫類，常見的有 jQuery、extjs 等等，這方面的定義比較難區(qū)分，暫不誤導(dǎo)大家；
js 插件，就是集成了幫助程序員輕松完成功能的程序。js 插件用得比較多，網(wǎng)頁制作上隨處可見。如圖片輪換功能，導(dǎo)航制作，上傳圖片等等；
2、引入方式
文件內(nèi)引用
可以直接寫在 HTML 文檔中，在 HTML 中需要使用 標(biāo)簽中寫 js 代碼，可放在 head 中、body 中、body 后，放的越靠前，越先執(zhí)行
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>JS?DEMOtitle>
????<script>
????????//?這里可以寫?js
????script>
head>
<body>
body>
html>
外部文件引用
引入外部 .js 文件，使用 script 標(biāo)簽屬性 src 指向外部 js 文件路徑
try.js
//?這里可以寫一些?js?腳本
try.html
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>JS?DEMOtitle>
????<script?src="try.js">script>
head>
<body>
body>
html>
方法覆蓋問題
HTML 文件從頭到尾解析，如果在同一個頁面中存在同名的 js 函數(shù)，則后引入的會生效，先引入的會被覆蓋
3、js 選擇器
作用：找頁面中的標(biāo)簽
如果我們想要操作 DOM，則我們需要先能找到指定的 DOM，通過 js 的選擇器，我們可以獲取到頁面的元素
id 選擇器
document.getElementById('id名')
返回值：返回一個指定 id 的具體的標(biāo)簽元素
class 選擇器
document.getElementsByClassName('class名')
返回值：所有具有指定class名稱的元素，是多個，以類數(shù)組形式存在，使用某個元素時通過下標(biāo)來獲取
標(biāo)簽選擇器
document.gerElementsByTagName('標(biāo)簽名')
返回值：所有指定標(biāo)簽的合集
name 選擇器
document.getElementsByName('name')
該方法與 getElementById() 方法相似，但是它查詢元素的 name 屬性，而不是 id 屬性。
另外，因為一個文檔中的 name 屬性可能不唯一（如 HTML 表單中的單選按鈕通常具有相同的 name 屬性），所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個元素。
CSS 選擇器
document.querySelectorAll("css?選擇器格式");
querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對象。
NodeList 對象表示節(jié)點的集合。可以通過索引訪問，索引值從 0 開始。
提示: 你可以使用 NodeList 對象的 length 屬性來獲取匹配選擇器的元素屬性，然后你可以遍歷所有元素，從而獲取你想要的信息。
4、操作基本 DOM
獲取標(biāo)簽中的值
第一類：獲取雙標(biāo)簽中的值（div、span、p） .innerHtml來獲取
第二類：獲取input中的值 value 來獲取
添加點擊事件
事件：是一個具有某些功能的函數(shù)
點擊事件：鼠標(biāo)點擊某個元素的時候出發(fā)的功能
添加點擊事件的方法：
找到元素
元素.onclick = function(){}
設(shè)置值
第一類：設(shè)置雙標(biāo)簽的值 ?元素.innerHTML='新值'
第二類：設(shè)置 input 標(biāo)簽的值 元素.value='新值'
獲取/修改屬性
學(xué)習(xí)了一些實實在在的代碼，js在頁面上做了些什么？
簡單回顧一下，瀏覽器在讀取一個網(wǎng)頁時都發(fā)生什么（CSS 如何工作 一文中首次談及）。瀏覽器在讀取一個網(wǎng)頁時，代碼（HTML, CSS 和 JavaScript）將在一個運行環(huán)境（瀏覽器標(biāo)簽頁）中得到執(zhí)行。就像一間工廠，將原材料（代碼）加工為一件產(chǎn)品（網(wǎng)頁）。
在 HTML 和 CSS 集合組裝成一個網(wǎng)頁后，瀏覽器的 JavaScript 引擎將執(zhí)行 JavaScript 代碼。這保證了當(dāng) JavaScript 開始運行之前，網(wǎng)頁的結(jié)構(gòu)和樣式已經(jīng)就位。
這樣很好，因為 JavaScript 最普遍的用處是通過 DOM API（見上文）動態(tài)修改 HTML 和 CSS 來更新用戶界面 （user interface）。如果 JavaScript 在 HTML 和 CSS 就位之前加載運行，就會引發(fā)錯誤。
5、js運行次序
當(dāng)瀏覽器執(zhí)行到一段 JavaScript 代碼時，通常會按從上往下的順序執(zhí)行這段代碼。這意味著你需要注意代碼書寫的順序。比如，我們回到第一個例子中的 JavaScript 代碼：
這里我們選定一個文本段落（第 1 行)，然后給它附上一個事件監(jiān)聽器（第 3 行），使得在它被點擊時，updateName() 代碼塊（code block） （5 – 8 行）便會運行。updateName() （這類可以重復(fù)使用的代碼塊稱為“函數(shù)”）向用戶請求一個新名字，然后把這個名字插入到段落中以更新顯示。
如果你互換了代碼里最初兩行的順序，會導(dǎo)致問題。瀏覽器開發(fā)者控制臺將返回一個錯誤：TypeError: para is undefined。這意味著 para 對象還不存在，所以我們不能為它增添一個事件監(jiān)聽器。
6、注釋
HTML 和 CSS，JavaScript 代碼中均可添加注釋，瀏覽器會忽略它們，注釋只是為你的同事（還有你，如果半年后再看自己寫的代碼你會說，這是什么垃圾玩意。）提供關(guān)于代碼如何工作的指引。注釋非常有用，而且應(yīng)該經(jīng)常使用，尤其在大型應(yīng)用中。
HTML：
css:
/*小鎮(zhèn)傳奇*/
/*全部
JS：
//
/*!!!!!!
!!!!!!*/
參考
https://www.w3cschool.cn/css/css-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Web