整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器
剛開始設計HTML語言是為了將文字圖像關聯在一起，用另一臺發送或接收
HTML 不是一種編程語言，而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)
標簽是由尖括號 < > 把關鍵詞括起來，標簽通常是成對出現的
讀取 HTML 文檔，使用標簽來解析頁面的內容，以網頁的形式現實，瀏覽器不會現實HTML標簽
每種瀏覽器都有自己的內核(引擎)（解析網頁的一個程序，io以什么方式去渲染它都要通過引擎去執行）
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 （Webkit內核，V8 js引擎）
Firefox火狐瀏覽器 （Gecko內核）
Internet Explorer IE瀏覽器（ Trident內核）
Opera 歐朋瀏覽器 （Presto內核） 主要市場：移動端
Safari 蘋果瀏覽器 （Webkit內核，但JS引擎為Nitro）
不需要去記，簡單了解下
標簽必須閉合
所有標簽名一律小寫
代碼縮進，使閱讀代碼更加易懂
特殊符號規范使用
命名規范，見名之意
PS: 所有的標記符號都是半角英文
眾說紛紜編輯器太多，最終只是一個工具，希望同學們能從萬千世界中找到適合自己的編輯器伙伴
| 編輯器 | 描述 |
|---|---|
| EditPlus | 手寫模式，適合初學手寫，無代碼提示(有IE調試視圖) |
| Sublime | 插件特別多，占用內存小，啟動速度快，打開大項目較慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特別多，啟動較慢，占用內存大，開發和管理視圖都很方便 |
| Dreamweaver | 適合初學，主要代碼提示和代碼插入功能強大，主要偏向于設計(有設計視圖) |
| 插件名 | 描述 | 詳情請戳 |
|---|---|---|
| emmet | 前端自動補全，提供快捷補全方式 | |
| ColorPicker | 調色板，顏色選擇器 | |
| SublimeTmpl | sublime模板，可以快速創建一個HTML模板 | |
| view in browser | 用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁) | |
| LiveReload | 實時刷新HTML(編輯器里按下保存ctrl+s的時候，已經打開的HTMl會自動刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
| Color Highlighter | CSS顏色代碼高亮及顏色預覽提示 | |
| CSS3 | CSS3的代碼高亮提示 | 還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代碼提示 | |
| Sublime-Better-Completion | 可自選開啟代碼提示，支持jQ、js、bootstrap、php、sql ... | 倉庫地址此插件只能通過Github克隆下載安裝安裝方法 |
注：Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是標簽，主要用于文檔類型的聲明 |
| charset="utf-8" | 聲明字符編碼集 |
| http-equiv="Content-Type" | 把Content屬性關聯到HTTP頭部(協議頭) |
HTML模板
簡單了解，并不需要熟練掌握
Dom節點樹
.html .htm這兩種是比較常見的
在早期系統中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm
現在通常使用.html作為擴展名
接下來所有的標簽元素學習都在body標簽里面去敲打實現、
為了突出標題，字體大小和加粗發生相應的改變
<h1>我是大主題</h1> <h2>我是大主題</h2> <h3>我是大主題</h3> <h4>我是大主題</h4> <h5>我是大主題</h5> <h6>我是大主題</h6>
<!doctype html><!-- 讓瀏覽器使用html5的標準解析 --> <html> <head> <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，關鍵詞，多個請用逗號分開" /> <meta name="description" content="網頁描述，八十字內" /> <title>瀏覽器標簽頁上的網頁標題</title> </head> <body> <!-- 所有的標簽學習都在這body里面去敲，上面head元素里面的內容做個了解就可以了 --> <h1>我是大標題</h1> <h2>我是主題2</h2> <h3>我是主題3</h3> <h4>我是主題4</h4> <h5>我是主題5</h5> <h6>我是主題6</h6> </body> </html>
可以發現h標簽從h1到h6會隨著數值越小字越小，并且都是會加粗和各占一行的狀態（前后的元素都會被換行）
h1標簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優化)
<p> 冬著一身素衣，緩緩而來，季節沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。 </p>
剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標記那要怎么做呢？這時候就需要特殊符號的表示來顯示
| 符號 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引號 | " |
| 版權 | © |
| ×叉 | × |
| & | & |
| 符號 | 描述 |
|---|---|
| B標簽 | 物理加粗，頁面呈現加粗狀態. |
| Strong標簽 | 不僅能加粗，還利于搜索引擎優化 |
<b>物理加粗，頁面呈現加粗狀態.</b> <strong>不僅能加粗，還利于搜索引擎優化，就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優化顯示網頁的排名</strong>
可以根據word文檔上面發現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個頁面,點擊則會跳轉這個鏈接頁面
使用錨點滾動到設定的位置
<a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面 <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部) <a href="javascript： void(0);"></a> 死鏈接，不會跳轉，一般用于js特效 <a href="#name">錨點到一個標簽上所對應的ID名字，點擊則跳到那個標簽位置</a> <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協議不能少
點擊#flag的a標簽的時候會跳到到上面h2標簽
只有擁有name屬性的
a標簽
才能錨點,還有一種方式是通過ID標識唯一元素，也可以跳轉(不僅僅是a標簽)
| 描述 | 標簽 |
|---|---|
| 滾動標簽 | marquee |
| 字體標簽 | font |
| 定義水平線 | hr |
marquee
| 屬性 | 描述 |
|---|---|
| direction | 滾動方向 |
| behivior | 行為 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滾動 |
| scroll | 滾動 |
| slide | 滑落 |
| 屬性 | 描述 |
|---|---|
| color | 顏色 |
| size | 0-7 |
| face | 字體 |
與font相似，擁有color和size屬性
hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標簽，不加也能夠正確顯示，但是養成一個良好的習慣確實重要，比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、
結合今天所學，寫一個簡單的網頁
內容如下：
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字
在習題一的文章底部，使用滾動標簽進行滾動方向為45°
SS 中，::before 創建一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素添加修飾性的內容。此元素默認是行級的。
備注： 由 ::before 和 ::after 偽元素生成的盒子，就好像它們是應用它們的元素或“原始元素（originating element）”的直接子元素一樣，因此不能應用在替換元素上，比如 <img> 元素，其內容不在 CSS 格式化模型的范圍內。
CSSCopy to Clipboard
::before {
content: /* 值 */;
/* 屬性 */
}
如果 content 屬性沒有明確指定，或者有一個無效值，或者其值為 normal 或 none，則 ::before 偽元素不會被渲染。它的行為就好像設置了 display: none 一樣。
備注： Selectors 第 3 版引入了雙冒號標記法 ::before，以將偽類和偽元素區別開。瀏覽器也接受由 CSS2 引入的 :before 寫法。
示例
使用 ::before 偽元素的一個簡單示例就是用于加入引號。此處同時使用了 ::before 和 ::after來插入引用性文本。
HTMLPlayCopy to Clipboard
<q>有引號，</q>他說，<q>總比沒有好。</q>
CSSPlayCopy to Clipboard
q::before {
content: "“";
color: blue;
}
q::after {
content: "”";
color: red;
}
我們可以用幾乎任何方法定義 content 中的文字和圖片樣式。
HTMLPlayCopy to Clipboard
<span class="ribbon">注意橙色方框的位置。</span>
CSSPlayCopy to Clipboard
.ribbon {
background-color: #5bc8f7;
}
.ribbon::before {
content: "看橙色的盒子。";
background-color: #ffba10;
border-color: black;
border-style: dotted;
}
在本例中我們將使用偽元素來創建一個簡單的待辦列表。這個方法也可用于 UI 的小幅度更改和用戶體驗的提升。
HTMLPlayCopy to Clipboard
<ul>
<li>買牛奶</li>
<li>帶著狗散步</li>
<li>鍛煉</li>
<li>寫代碼</li>
<li>播放音樂</li>
<li>放松</li>
</ul>
CSSPlayCopy to Clipboard
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
}
li.done {
background: #ccff99;
}
li.done::before {
content: "";
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}
JSPlayCopy to Clipboard
const list = document.querySelector("ul");
list.addEventListener(
"click",
(ev) => {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("done");
}
},
false,
);
下面展示的是最終得到的結果。請注意我們沒有使用任何圖標，對勾標識實際上是使用 CSS 定義了樣式的 ::before 偽元素。接下來建立幾個待辦事項來完成它們吧。
由于這是 CSS；不是 HTML，你不可以在內容值中使用標記實體。如果你需要使用特殊字符，并且無法將其直接輸入到 CSS 內容字符串中，那么請使用 unicode 轉義序列，該序列由一個反斜杠和十六進制 unicode 值組成。
HTMLPlayCopy to Clipboard
<ol>
<li>把雞蛋打入碗中</li>
<li>加牛奶</li>
<li>加面粉</li>
<li aria-current="step">混合成光滑的面糊</li>
<li>將一勺面糊倒在熱的、抹了油的平底鍋上</li>
<li>煎至煎餅頂部失去光澤</li>
<li>把它翻過來再煎幾分鐘</li>
<li>配上你喜歡的佐料</li>
</ol>
CSSPlayCopy to Clipboard
li {
padding: 0.5em;
}
li[aria-current="step"] {
font-weight: bold;
}
li[aria-current="step"]::after {
content: " \21E6"; /* 向左白色箭頭的十六進制 */
display: inline;
}
不鼓勵使用 ::before 偽元素添加內容，因為屏幕閱讀器無法可靠地訪問它。
、 HTML語言
HTML 指的是超文本標記語言 (Hyper Text Markup Language)，它不是一種編程語言，而是一種使用一套標記標簽（markup tag）來標記元素作用的標記語言，標記語言使用標記標簽來描述網頁的內容。標記標簽不會出現在頁面中，只有標簽中的內容才會顯示在頁面上。
二、 HTML標簽和HTML元素
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)，是由一對尖括號括起來的關鍵詞，稱為標簽名，如 <html>、<a>、<h1>。標簽不區分大小寫，但是推薦使用小寫，(X)HTML 版本中強制使用小寫，這樣更加嚴謹。
標簽的標記分為起始標簽和結束標簽。HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有內容。
起始標簽用于標記對應HTML元素的開始位置，結束標簽用于標記HTML元素的結束位置。
標簽分為單標簽和雙標簽，都需要起始標簽和結束標簽，不同的是單標簽起始、結束標簽都寫在一個尖括號里而雙標簽則分別寫在兩個尖括號里。單標簽又稱為空標簽，雙標簽又稱為閉合標簽。單標簽的結束標簽就是在標簽的右尖括號前面一個反斜杠，如<br />就是一個單標簽，雙標簽的結束標簽就是在左尖括號后比開始標簽多了一個反斜杠，如<html>和</html>就是一對開始標簽和結束標簽。
三、 HTML元素的分類
不同的HTML標簽對應的HTML元素可以根據位置特征等分為兩類:
四、 標簽嵌套
雙標簽的開始標簽和結束標簽之間可以嵌套其他標簽，不過需要遵循以下規則：
1、兩個標簽嵌套時必須確保開始標簽和結束標簽的層級是一致的，即開始標簽在外層的結束標簽必須在外層；
2、建議書寫HTML文本時嵌套標簽的內層標簽相對外層標簽進行縮進以體現嵌套關系；
3、塊元素標簽可以包含行元素標簽，但行元素標簽不能包含塊元素標簽，它們只能包含其它的行元素標簽；
4、a標簽想要用hover必須把它的路徑寫全；
5、偽類(hover/link/visited/active)只能加給a標簽，在支持 CSS 的瀏覽器中，偽類表示鏈接的不同狀態，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態：
1)link用在為訪問的連接上；
2)visited用在已經訪問過的連接上；
3)hover用于鼠標光標置于其上的連接；
4)active用于獲得焦點(比如，被點擊)的連接上。
6、塊元素標簽之間：
1)h1、h2、h3、h4、h5、h6、p、dt標簽內不能再嵌套塊標簽；
2)li元素可以嵌入ul, ol, div；
3)div內可以再嵌套其他塊元素；
4)塊元素嵌套其他標簽時，同一層級必須都是塊元素，或必須都是行元素，不能一部分是塊元素，一部分是行元素。如<div><span></span><p></p></div>這種模式是錯誤的，因為span是行元素，p是塊元素，所以這個是錯誤的嵌套。
雖然標簽可以嵌套，但為了提高瀏覽器的渲染效率，應該盡量少使用標簽嵌套。
五、 標簽的屬性
HTML 標簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標簽中使用,總是以名稱/值對的形式出現，屬性與屬性之間需要用空格隔開，屬性使用小寫。常用的屬性有class(樣式類)、id（屬性名）、style（顯示風格）、title（標題）、align（對齊方式）、bgcolor（背景色）、color（顏色）。
如：
。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
