整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.圖片標(biāo)簽img
2.h標(biāo)題系列 （有6個級別）
3.分段標(biāo)簽p
4.換行標(biāo)簽br
5.分割線標(biāo)簽hr
6.特殊字符
<— — 小于號
>— —大于號
 ；— —空格
&— —&符號
"— —雙引號
7.a標(biāo)簽做超鏈接
8.a作為錨點(diǎn)
9.div標(biāo)簽和span標(biāo)簽
div是塊級元素，Span是行元素
Hyper Text Markup Language, 超文本標(biāo)記語言
標(biāo)記又稱為標(biāo)簽(Tag), 一般語法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標(biāo)簽也可以不成對地關(guān)閉:
<tagName />
HTML文檔由瀏覽器解釋并執(zhí)行。
<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來解釋和執(zhí)行該網(wǎng)頁
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來解釋網(wǎng)頁中的文本.
常見編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺灣地區(qū)
utf-8: 國際首選編碼,它兼容所有的字符
除此之外, meta還可以通過keywords, description屬性對頁面關(guān)鍵詞及描述信息進(jìn)行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁標(biāo)題, 顯示在瀏覽器選項(xiàng)卡的標(biāo)題欄上!
h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁面上帶格式渲染
small: 比當(dāng)前字體小的文本
空格
< 小于
> 大于
? 版權(quán)符
" 雙引號
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯誤時的替代文本"
width="寬度"
height="高度"
/>
圖像地址分為2種:
1. 相對地址, 如: img/cc.jpg
2. 絕對地址, 如: http://img.bcd.com/2017/1644232421.jpg
<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>
目標(biāo)窗口:
_self: 目標(biāo)頁面在當(dāng)前窗口打開
_blank: 目標(biāo)頁面在新窗口中打開
如果是在頁面具有frameset/frame/iframe的場景下:
_top: 在頂級窗口中打開
_parent: 在父級窗口中打開
_自定義名稱: 在指定的特定窗口中打開
三種用法:
1. 頁面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁面中一處id為help的標(biāo)簽, 如: <p id="help">
或者:
help是通過a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一個容器, 常用于頁面的布局
標(biāo)簽的分類:
1. 塊級標(biāo)簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨(dú)占容器中的一行, 其寬度是容器的100%
2. 行級標(biāo)簽/行級元素
如: span, img, strong, em, a
特征1: 多個行級元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)
特征2: 大部分行級元素設(shè)置其width/height無效
ctrl + D : 刪除當(dāng)前行
ctrl + PgUp : 當(dāng)前行上移
ctrl + PgDown : 當(dāng)前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復(fù)制當(dāng)前行
ctrl + X : 剪切當(dāng)前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當(dāng)前文件
ctrl + shift + S : 保存項(xiàng)目中全部文件
ctrl + Enter : 在當(dāng)前行的下方插入新行
ctrl + shift + Enter : 在當(dāng)前行的上方插入新行
以上知識能做的效果圖
部分效果
本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結(jié)果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網(wǎng)頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實(shí)很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器
剛開始設(shè)計HTML語言是為了將文字圖像關(guān)聯(lián)在一起，用另一臺發(fā)送或接收
HTML 不是一種編程語言，而是一中標(biāo)記語言(mark-up language),標(biāo)記語言是一套標(biāo)記標(biāo)簽(mark-up tag)
標(biāo)簽是由尖括號 < > 把關(guān)鍵詞括起來，標(biāo)簽通常是成對出現(xiàn)的
讀取 HTML 文檔，使用標(biāo)簽來解析頁面的內(nèi)容，以網(wǎng)頁的形式現(xiàn)實(shí)，瀏覽器不會現(xiàn)實(shí)HTML標(biāo)簽
每種瀏覽器都有自己的內(nèi)核(引擎)（解析網(wǎng)頁的一個程序，io以什么方式去渲染它都要通過引擎去執(zhí)行）
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 （Webkit內(nèi)核，V8 js引擎）
Firefox火狐瀏覽器 （Gecko內(nèi)核）
Internet Explorer IE瀏覽器（ Trident內(nèi)核）
Opera 歐朋瀏覽器 （Presto內(nèi)核） 主要市場：移動端
Safari 蘋果瀏覽器 （Webkit內(nèi)核，但JS引擎為Nitro）
不需要去記，簡單了解下
標(biāo)簽必須閉合
所有標(biāo)簽名一律小寫
代碼縮進(jìn)，使閱讀代碼更加易懂
特殊符號規(guī)范使用
命名規(guī)范，見名之意
PS: 所有的標(biāo)記符號都是半角英文
眾說紛紜編輯器太多，最終只是一個工具，希望同學(xué)們能從萬千世界中找到適合自己的編輯器伙伴
| 編輯器 | 描述 |
|---|---|
| EditPlus | 手寫模式，適合初學(xué)手寫，無代碼提示(有IE調(diào)試視圖) |
| Sublime | 插件特別多，占用內(nèi)存小，啟動速度快，打開大項(xiàng)目較慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特別多，啟動較慢，占用內(nèi)存大，開發(fā)和管理視圖都很方便 |
| Dreamweaver | 適合初學(xué)，主要代碼提示和代碼插入功能強(qiáng)大，主要偏向于設(shè)計(有設(shè)計視圖) |
| 插件名 | 描述 | 詳情請戳 |
|---|---|---|
| emmet | 前端自動補(bǔ)全，提供快捷補(bǔ)全方式 | |
| ColorPicker | 調(diào)色板，顏色選擇器 | |
| SublimeTmpl | sublime模板，可以快速創(chuàng)建一個HTML模板 | |
| view in browser | 用快捷方式打開瀏覽器進(jìn)行調(diào)試HTML(需要配置參考后面網(wǎng)頁) | |
| LiveReload | 實(shí)時刷新HTML(編輯器里按下保存ctrl+s的時候，已經(jīng)打開的HTMl會自動刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
| Color Highlighter | CSS顏色代碼高亮及顏色預(yù)覽提示 | |
| CSS3 | CSS3的代碼高亮提示 | 還針對了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)編碼錯誤以及安裝不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !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組成 三個擴(kuò)展名所以不支持四個字母的擴(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)鍵詞，多個請用逗號分開" /> <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)容做個了解就可以了 --> <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會隨著數(shù)值越小字越小，并且都是會加粗和各占一行的狀態(tài)（前后的元素都會被換行）
h1標(biāo)簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優(yōu)化)
<p> 冬著一身素衣，緩緩而來，季節(jié)沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。 </p>
剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標(biāo)記那要怎么做呢？這時候就需要特殊符號的表示來顯示
| 符號 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引號 | " |
| 版權(quán) | © |
| ×叉 | × |
| & | & |
| 符號 | 描述 |
|---|---|
| B標(biāo)簽 | 物理加粗，頁面呈現(xiàn)加粗狀態(tài). |
| Strong標(biāo)簽 | 不僅能加粗，還利于搜索引擎優(yōu)化 |
<b>物理加粗，頁面呈現(xiàn)加粗狀態(tài).</b> <strong>不僅能加粗，還利于搜索引擎優(yōu)化，就是類似于百度、谷歌這種搜索引擎爬取你的網(wǎng)頁的時候會查找這個標(biāo)簽里面的內(nèi)容來優(yōu)化顯示網(wǎng)頁的排名</strong>
可以根據(jù)word文檔上面發(fā)現(xiàn) b是加粗 u是下劃線 i是傾斜 同樣適用于標(biāo)簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個頁面,點(diǎn)擊則會跳轉(zhuǎn)這個鏈接頁面
使用錨點(diǎn)滾動到設(shè)定的位置
<a href=""></a> a標(biāo)簽中的href控制點(diǎn)擊的時候跳轉(zhuǎn)到哪里如果沒寫表示刷新當(dāng)前頁面 <a href="#"></a> 跳轉(zhuǎn)到當(dāng)前頁面(回歸到頁面頂部) <a href="javascript： void(0);"></a> 死鏈接，不會跳轉(zhuǎn)，一般用于js特效 <a href="#name">錨點(diǎn)到一個標(biāo)簽上所對應(yīng)的ID名字，點(diǎn)擊則跳到那個標(biāo)簽位置</a> <a >跳轉(zhuǎn)到百度</a> 跳轉(zhuǎn)到百度 需要注意的是 http 協(xié)議不能少
點(diǎn)擊#flag的a標(biāo)簽的時候會跳到到上面h2標(biāo)簽
只有擁有name屬性的
a標(biāo)簽
才能錨點(diǎn),還有一種方式是通過ID標(biāo)識唯一元素，也可以跳轉(zhuǎn)(不僅僅是a標(biāo)簽)
| 描述 | 標(biāo)簽 |
|---|---|
| 滾動標(biāo)簽 | marquee |
| 字體標(biāo)簽 | font |
| 定義水平線 | hr |
marquee
| 屬性 | 描述 |
|---|---|
| direction | 滾動方向 |
| behivior | 行為 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滾動 |
| scroll | 滾動 |
| slide | 滑落 |
| 屬性 | 描述 |
|---|---|
| color | 顏色 |
| size | 0-7 |
| face | 字體 |
與font相似，擁有color和size屬性
hr標(biāo)簽沒有結(jié)束標(biāo)簽 按照早期的習(xí)慣也H5也遵循XHTML的解析 所以統(tǒng)一會加一個反斜杠表示結(jié)束這個標(biāo)簽，不加也能夠正確顯示，但是養(yǎng)成一個良好的習(xí)慣確實(shí)重要，比如微信小程序就是沒有結(jié)束標(biāo)簽必須要使用一個反斜杠結(jié)尾否則直接報錯、
結(jié)合今天所學(xué)，寫一個簡單的網(wǎng)頁
內(nèi)容如下：
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網(wǎng)上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字
在習(xí)題一的文章底部，使用滾動標(biāo)簽進(jìn)行滾動方向?yàn)?5°
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
