整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時(shí)候會(huì)使用不了view in browser我公司的電腦可以安裝、結(jié)果家里的電腦就報(bào)編碼錯(cuò)誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網(wǎng)頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對(duì)于前端來說確實(shí)很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個(gè)編輯器
剛開始設(shè)計(jì)HTML語言是為了將文字圖像關(guān)聯(lián)在一起，用另一臺(tái)發(fā)送或接收
HTML 不是一種編程語言，而是一中標(biāo)記語言(mark-up language),標(biāo)記語言是一套標(biāo)記標(biāo)簽(mark-up tag)
標(biāo)簽是由尖括號(hào) < > 把關(guān)鍵詞括起來，標(biāo)簽通常是成對(duì)出現(xiàn)的
讀取 HTML 文檔，使用標(biāo)簽來解析頁面的內(nèi)容，以網(wǎng)頁的形式現(xiàn)實(shí)，瀏覽器不會(huì)現(xiàn)實(shí)HTML標(biāo)簽
每種瀏覽器都有自己的內(nèi)核(引擎)（解析網(wǎng)頁的一個(gè)程序，io以什么方式去渲染它都要通過引擎去執(zhí)行）
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 （Webkit內(nèi)核，V8 js引擎）
Firefox火狐瀏覽器 （Gecko內(nèi)核）
Internet Explorer IE瀏覽器（ Trident內(nèi)核）
Opera 歐朋瀏覽器 （Presto內(nèi)核） 主要市場：移動(dòng)端
Safari 蘋果瀏覽器 （Webkit內(nèi)核，但JS引擎為Nitro）
不需要去記，簡單了解下
標(biāo)簽必須閉合
所有標(biāo)簽名一律小寫
代碼縮進(jìn)，使閱讀代碼更加易懂
特殊符號(hào)規(guī)范使用
命名規(guī)范，見名之意
PS: 所有的標(biāo)記符號(hào)都是半角英文
眾說紛紜編輯器太多，最終只是一個(gè)工具，希望同學(xué)們能從萬千世界中找到適合自己的編輯器伙伴
| 編輯器 | 描述 |
|---|---|
| EditPlus | 手寫模式，適合初學(xué)手寫，無代碼提示(有IE調(diào)試視圖) |
| Sublime | 插件特別多，占用內(nèi)存小，啟動(dòng)速度快，打開大項(xiàng)目較慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特別多，啟動(dòng)較慢，占用內(nèi)存大，開發(fā)和管理視圖都很方便 |
| Dreamweaver | 適合初學(xué)，主要代碼提示和代碼插入功能強(qiáng)大，主要偏向于設(shè)計(jì)(有設(shè)計(jì)視圖) |
| 插件名 | 描述 | 詳情請(qǐng)戳 |
|---|---|---|
| emmet | 前端自動(dòng)補(bǔ)全，提供快捷補(bǔ)全方式 | |
| ColorPicker | 調(diào)色板，顏色選擇器 | |
| SublimeTmpl | sublime模板，可以快速創(chuàng)建一個(gè)HTML模板 | |
| view in browser | 用快捷方式打開瀏覽器進(jìn)行調(diào)試HTML(需要配置參考后面網(wǎng)頁) | |
| LiveReload | 實(shí)時(shí)刷新HTML(編輯器里按下保存ctrl+s的時(shí)候，已經(jīng)打開的HTMl會(huì)自動(dòng)刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
| Color Highlighter | CSS顏色代碼高亮及顏色預(yù)覽提示 | |
| CSS3 | CSS3的代碼高亮提示 | 還針對(duì)了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代碼提示 | |
| Sublime-Better-Completion | 可自選開啟代碼提示，支持jQ、js、bootstrap、php、sql ... | 倉庫地址此插件只能通過Github克隆下載安裝安裝方法 |
注：Github 網(wǎng)頁中 下面是有詳細(xì)的使用方法 packagecontrol.io官網(wǎng) 里面search 可以進(jìn)行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現(xiàn)編碼錯(cuò)誤以及安裝不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是標(biāo)簽，主要用于文檔類型的聲明 |
| charset="utf-8" | 聲明字符編碼集 |
| http-equiv="Content-Type" | 把Content屬性關(guān)聯(lián)到HTTP頭部(協(xié)議頭) |
HTML模板
簡單了解，并不需要熟練掌握
Dom節(jié)點(diǎn)樹
.html .htm這兩種是比較常見的
在早期系統(tǒng)中文件名是有8+3組成 三個(gè)擴(kuò)展名所以不支持四個(gè)字母的擴(kuò)展采用.htm
現(xiàn)在通常使用.html作為擴(kuò)展名
接下來所有的標(biāo)簽元素學(xué)習(xí)都在body標(biāo)簽里面去敲打?qū)崿F(xiàn)、
為了突出標(biāo)題，字體大小和加粗發(fā)生相應(yīng)的改變
<h1>我是大主題</h1> <h2>我是大主題</h2> <h3>我是大主題</h3> <h4>我是大主題</h4> <h5>我是大主題</h5> <h6>我是大主題</h6>
<!doctype html><!-- 讓瀏覽器使用html5的標(biāo)準(zhǔn)解析 --> <html> <head> <!-- 設(shè)置字符編碼集讓瀏覽器使用utf8解析當(dāng)前網(wǎng)頁 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，關(guān)鍵詞，多個(gè)請(qǐng)用逗號(hào)分開" /> <meta name="description" content="網(wǎng)頁描述，八十字內(nèi)" /> <title>瀏覽器標(biāo)簽頁上的網(wǎng)頁標(biāo)題</title> </head> <body> <!-- 所有的標(biāo)簽學(xué)習(xí)都在這body里面去敲，上面head元素里面的內(nèi)容做個(gè)了解就可以了 --> <h1>我是大標(biāo)題</h1> <h2>我是主題2</h2> <h3>我是主題3</h3> <h4>我是主題4</h4> <h5>我是主題5</h5> <h6>我是主題6</h6> </body> </html>
可以發(fā)現(xiàn)h標(biāo)簽從h1到h6會(huì)隨著數(shù)值越小字越小，并且都是會(huì)加粗和各占一行的狀態(tài)（前后的元素都會(huì)被換行）
h1標(biāo)簽一般一個(gè)頁面里面只會(huì)寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優(yōu)化)
<p> 冬著一身素衣，緩緩而來，季節(jié)沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。 </p>
剛我們了解到了瀏覽器是識(shí)別尖括號(hào)的，如果要在頁面中顯示html標(biāo)記那要怎么做呢？這時(shí)候就需要特殊符號(hào)的表示來顯示
| 符號(hào) | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引號(hào) | " |
| 版權(quán) | © |
| ×叉 | × |
| & | & |
| 符號(hào) | 描述 |
|---|---|
| B標(biāo)簽 | 物理加粗，頁面呈現(xiàn)加粗狀態(tài). |
| Strong標(biāo)簽 | 不僅能加粗，還利于搜索引擎優(yōu)化 |
<b>物理加粗，頁面呈現(xiàn)加粗狀態(tài).</b> <strong>不僅能加粗，還利于搜索引擎優(yōu)化，就是類似于百度、谷歌這種搜索引擎爬取你的網(wǎng)頁的時(shí)候會(huì)查找這個(gè)標(biāo)簽里面的內(nèi)容來優(yōu)化顯示網(wǎng)頁的排名</strong>
可以根據(jù)word文檔上面發(fā)現(xiàn) b是加粗 u是下劃線 i是傾斜 同樣適用于標(biāo)簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個(gè)頁面,點(diǎn)擊則會(huì)跳轉(zhuǎn)這個(gè)鏈接頁面
使用錨點(diǎn)滾動(dòng)到設(shè)定的位置
<a href=""></a> a標(biāo)簽中的href控制點(diǎn)擊的時(shí)候跳轉(zhuǎn)到哪里如果沒寫表示刷新當(dāng)前頁面 <a href="#"></a> 跳轉(zhuǎn)到當(dāng)前頁面(回歸到頁面頂部) <a href="javascript： void(0);"></a> 死鏈接，不會(huì)跳轉(zhuǎn)，一般用于js特效 <a href="#name">錨點(diǎn)到一個(gè)標(biāo)簽上所對(duì)應(yīng)的ID名字，點(diǎn)擊則跳到那個(gè)標(biāo)簽位置</a> <a >跳轉(zhuǎn)到百度</a> 跳轉(zhuǎn)到百度 需要注意的是 http 協(xié)議不能少
點(diǎn)擊#flag的a標(biāo)簽的時(shí)候會(huì)跳到到上面h2標(biāo)簽
只有擁有name屬性的
a標(biāo)簽
才能錨點(diǎn),還有一種方式是通過ID標(biāo)識(shí)唯一元素，也可以跳轉(zhuǎn)(不僅僅是a標(biāo)簽)
| 描述 | 標(biāo)簽 |
|---|---|
| 滾動(dòng)標(biāo)簽 | marquee |
| 字體標(biāo)簽 | font |
| 定義水平線 | hr |
marquee
| 屬性 | 描述 |
|---|---|
| direction | 滾動(dòng)方向 |
| behivior | 行為 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滾動(dòng) |
| scroll | 滾動(dòng) |
| slide | 滑落 |
| 屬性 | 描述 |
|---|---|
| color | 顏色 |
| size | 0-7 |
| face | 字體 |
與font相似，擁有color和size屬性
hr標(biāo)簽沒有結(jié)束標(biāo)簽 按照早期的習(xí)慣也H5也遵循XHTML的解析 所以統(tǒng)一會(huì)加一個(gè)反斜杠表示結(jié)束這個(gè)標(biāo)簽，不加也能夠正確顯示，但是養(yǎng)成一個(gè)良好的習(xí)慣確實(shí)重要，比如微信小程序就是沒有結(jié)束標(biāo)簽必須要使用一個(gè)反斜杠結(jié)尾否則直接報(bào)錯(cuò)、
結(jié)合今天所學(xué)，寫一個(gè)簡單的網(wǎng)頁
內(nèi)容如下：
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網(wǎng)上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字
在習(xí)題一的文章底部，使用滾動(dòng)標(biāo)簽進(jìn)行滾動(dòng)方向?yàn)?5°
<html></html>雙標(biāo)簽 開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽 稱為根標(biāo)簽
<head></head> 文檔頭部標(biāo)簽 且必須設(shè)置title
<title></title> 頁面標(biāo)題
<body></body> 文檔的主體 包含頁面的內(nèi)容
<h1>-<h6> HTML提供6個(gè)等級(jí)的頁面標(biāo)題 有大到小
<p></p> p標(biāo)簽用于定義段落 可以將頁面分為若干個(gè)段落 根據(jù)窗口大小自動(dòng)換行
<br/>單標(biāo)簽 換行標(biāo)簽 （break打斷）
加粗 <strong></strong>or<b></b>
斜線 <em></em>or<i></i>
刪除線 <del></del>or<s></s>
下劃線 <ins></ins>or<u></u>
沒有語義 屬于一種盒子 來裝內(nèi)容
<div></div> 表示分割分區(qū) 用來布局 一行一個(gè) 大盒子
<span></span>意為跨度，跨距 一行可以哦有多個(gè) 小盒子
<img src="圖像路徑(url)"/> 定義頁面中的圖像
圖像標(biāo)簽包含多個(gè)屬性
src 圖片路徑 必須屬性
alt 文本 替換文本 圖像不能顯示的文字
title 文本 鼠標(biāo)放到圖像上顯示文字
width 像素 寬度
height 高度
border 邊框
相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑：以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑
分類：下級(jí)路徑/ 上級(jí)路徑../
絕對(duì)路徑：是指目錄下的絕對(duì)位置，如硬盤中的路徑或網(wǎng)路地址
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href用于指定鏈接目標(biāo)的url地址(必須屬性)
target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式
錨點(diǎn)鏈接：可以快速到頁面某個(gè)位置
在鏈接文本中的href屬性中，設(shè)置屬性值為#名字的形式，如<a href="#two">目標(biāo)</a>
找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性 = 名字，如：<h3 id="two">目標(biāo)</h3>
<!-- 注釋語句 --> 快捷鍵CTRL + /
HTML 原代碼 | 顯示結(jié)果 | 描述 |
< | < | 小于號(hào)或顯示標(biāo)記 |
> | > | 大于號(hào)或顯示標(biāo)記 |
& | & | 可用于顯示其它特殊字符 |
" | “ | 引號(hào) |
? | ? | 已注冊(cè) |
? | ? | 版權(quán) |
? | ? | 商標(biāo) |
半個(gè)空白位 | ||
一個(gè)空白位 | ||
不斷行的空白 |
<table></table> 是用于定義表格的標(biāo)簽
<tr></tr> 標(biāo)簽用于定義表格中的行，必須嵌套在<table></table>標(biāo)簽中
<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標(biāo)簽中
<td> 元素中的文本通常是普通的左對(duì)齊文本。字母td指表格數(shù)據(jù)(table data)，即數(shù)據(jù)單元格的內(nèi)容
表頭單元格標(biāo)簽：
<th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。
表格屬性：
align left center right 規(guī)定表格相對(duì)于周圍元素的對(duì)齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框
cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容的空白，默認(rèn)1像素
cellspacing 像素值 規(guī)定單元格直接的空白 默認(rèn)2像素
with 像素值or百分比 規(guī)定表格的寬度
合并單元表格方式：
跨行合并：rowspan="合并單元格的個(gè)數(shù)"
跨列合并：colspan="合并單元格的個(gè)數(shù)"
<ul>標(biāo)簽表示無序列表 里面只能包含li
<ol>有序標(biāo)簽 里面只能包含li
<li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽
<dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會(huì)與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用
標(biāo)簽 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個(gè)多行的輸入控件) |
<label> | 定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題 |
<fieldset> | 定義了一組相關(guān)的表單元素，并使用外框包含起來 |
<legend> | 定義了 <fieldset> 元素的標(biāo)題 |
<select> | 定義了下拉選項(xiàng)列表 |
<optgroup> | 定義選項(xiàng)組 |
<option> | 定義下拉列表中的選項(xiàng) |
<button> | 定義一個(gè)點(diǎn)擊按鈕 |
<datalist> New | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
<keygen> New | 定義了表單的密鑰對(duì)生成器字段 |
<output> New | 定義一個(gè)計(jì)算結(jié)果 |
<input>標(biāo)簽用于收集用戶信息 包含一個(gè)type屬性 可以有多種樣式
<input type="value">
<input type="屬性值" />屬性值：
button | 定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動(dòng)腳本）。 |
checkbox | 定義復(fù)選框。 |
file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。 |
submit | 定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。 |
text | 定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。 |
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。 label是標(biāo)注的意思
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
現(xiàn)在這個(gè)社會(huì)最害怕的是什么，無非是紙上談兵這樣的人，你對(duì)問題的見解，你對(duì)事情的看法都有很多獨(dú)到的解釋，但是真正地讓你帶一個(gè)項(xiàng)目，寫一行代碼的時(shí)候，短板就開始暴露，所以對(duì)于這樣的情況一定要避免。以下內(nèi)容就是關(guān)于HTML的用法介紹，希望對(duì)大家的基礎(chǔ)提升有所幫助。
首先是最常用的<view>標(biāo)簽與<text>標(biāo)簽
<view>標(biāo)簽也就是盒子模型，在它的里面可以放其他所有標(biāo)簽，<text>標(biāo)簽里面可以寫文字，但是我們也可以直接在<view>標(biāo)簽里面寫文字。
<view>標(biāo)簽是單獨(dú)占一行，但是<text>標(biāo)簽卻在一行中有兩個(gè)。
這里就不得不提到一個(gè)知識(shí)點(diǎn)：行內(nèi)元素與塊級(jí)元素。首先，HTML的排版是從上而下進(jìn)行的，塊級(jí)元素：不管它的內(nèi)容有沒有達(dá)到一整行，它都是會(huì)占據(jù)一整行，行內(nèi)元素：不會(huì)單獨(dú)占一行，只會(huì)占自己應(yīng)占的長度，可以在一行中共存。
塊級(jí)元素：div，p，form，ul，li，ol，dl，form，table
行內(nèi)元素：span，strong，em，br，img，input，label，select，textarea
<image>標(biāo)簽
也就是圖片，我們需要在標(biāo)簽中寫上src，后面跟上它的地址，地址可以是本地地址，也可以是網(wǎng)絡(luò)地址，網(wǎng)絡(luò)地址寫法如下圖：
而本地地址就涉及到一個(gè)知識(shí)點(diǎn)了：相對(duì)路徑與絕對(duì)路徑。相對(duì)路徑：以自己本身A文件為參照物，相對(duì)而言B文件所在的路徑。可能大家暫時(shí)沒懂啥意思，我們接著慢慢看，../兩個(gè)點(diǎn)加一個(gè)斜杠，代表著返回上一層（相當(dāng)于父母），./一個(gè)點(diǎn)加上一個(gè)斜杠代表同一層（相當(dāng)于兄弟姐妹），這樣大家就好理解多了吧~
這里我在images文件夾中添加了一個(gè)圖片，但是我此時(shí)正在寫代碼的文件是demo.wxml，我要引入它，就是要返回到上一級(jí)的demo文件夾，然后返回到上一級(jí)的pages文件夾，找到同一級(jí)的images文件夾下的tupian1.png，那么我就應(yīng)該src="../.././images/tupian1.png"。
而絕對(duì)路徑就更好寫了，直接用一個(gè)/表示絕對(duì)路徑，我們直接src="/images/tupian1.png"就可以啦~
input標(biāo)簽
輸入框，可以看到代碼中的input標(biāo)簽中間并沒有寫任何文字，但是我們可以在左邊隨意輸入，我們大家平時(shí)使用的登錄賬號(hào)，輸入文字都是用這個(gè)實(shí)現(xiàn)的~
了解著HTML用法，提升自己的能力，是最好的成長。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
