整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Hyper Text Markup Language, 超文本標(biāo)記語(yǔ)言
標(biāo)記又稱(chēng)為標(biāo)簽(Tag), 一般語(yǔ)法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標(biāo)簽也可以不成對(duì)地關(guān)閉:
<tagName />
HTML文檔由瀏覽器解釋并執(zhí)行。
<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來(lái)解釋和執(zhí)行該網(wǎng)頁(yè)
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來(lái)解釋網(wǎng)頁(yè)中的文本.
常見(jiàn)編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡(jiǎn)體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺(tái)灣地區(qū)
utf-8: 國(guó)際首選編碼,它兼容所有的字符
除此之外, meta還可以通過(guò)keywords, description屬性對(duì)頁(yè)面關(guān)鍵詞及描述信息進(jìn)行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁(yè)標(biāo)題, 顯示在瀏覽器選項(xiàng)卡的標(biāo)題欄上!
h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無(wú)任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁(yè)面上帶格式渲染
small: 比當(dāng)前字體小的文本
空格
< 小于
> 大于
? 版權(quán)符
" 雙引號(hào)
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯(cuò)誤時(shí)的替代文本"
width="寬度"
height="高度"
/>
圖像地址分為2種:
1. 相對(duì)地址, 如: img/cc.jpg
2. 絕對(duì)地址, 如: http://img.bcd.com/2017/1644232421.jpg
<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>
目標(biāo)窗口:
_self: 目標(biāo)頁(yè)面在當(dāng)前窗口打開(kāi)
_blank: 目標(biāo)頁(yè)面在新窗口中打開(kāi)
如果是在頁(yè)面具有frameset/frame/iframe的場(chǎng)景下:
_top: 在頂級(jí)窗口中打開(kāi)
_parent: 在父級(jí)窗口中打開(kāi)
_自定義名稱(chēng): 在指定的特定窗口中打開(kāi)
三種用法:
1. 頁(yè)面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁(yè)面中一處id為help的標(biāo)簽, 如: <p id="help">
或者:
help是通過(guò)a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一個(gè)容器, 常用于頁(yè)面的布局
標(biāo)簽的分類(lèi):
1. 塊級(jí)標(biāo)簽/塊級(jí)元素
如: div, h1-h6, p, hr
特征: 獨(dú)占容器中的一行, 其寬度是容器的100%
2. 行級(jí)標(biāo)簽/行級(jí)元素
如: span, img, strong, em, a
特征1: 多個(gè)行級(jí)元素可以同處一行, 其寬度由內(nèi)容來(lái)?yè)伍_(kāi)(auto)
特征2: 大部分行級(jí)元素設(shè)置其width/height無(wú)效
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)前行的上方插入新行
以上知識(shí)能做的效果圖
部分效果
SS 組合選擇符
| 組合選擇符說(shuō)明了兩個(gè)選擇器直接的關(guān)系。 |
CSS組合選擇符包括各種簡(jiǎn)單選擇符的組合方式。
在 CSS3 中包含了四種組合方式:
后代選取器(以空格分隔)
子元素選擇器(以大于號(hào)分隔）
相鄰兄弟選擇器（以加號(hào)分隔）
普通兄弟選擇器（以破折號(hào)分隔）
后代選取器
后代選取器匹配所有值得元素的后代元素。
以下實(shí)例選取所有 <p> 元素插入到 <div> 元素中:
實(shí)例
divp{background-color:yellow;}
子元素選擇器
與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。
以下實(shí)例選擇了<div>元素中所有直接子元素 <p> ：
實(shí)例
div>p{background-color:yellow;}
相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
以下實(shí)例選取了所有位于 <div> 元素后的第一個(gè) <p> 元素:
實(shí)例
div+p{background-color:yellow;}
普通相鄰兄弟選擇器
普通兄弟選擇器選取所有指定元素的相鄰兄弟元素。
以下實(shí)例選取了所有 <div> 元素的所有相鄰兄弟元素 <p> :
實(shí)例
div~p{background-color:yellow;}
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
css3的優(yōu)點(diǎn)：CSS3將完全向后兼容，所以沒(méi)有必要修改現(xiàn)在的設(shè)計(jì)來(lái)讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。對(duì)我們來(lái)說(shuō)，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡(jiǎn)單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說(shuō)使用分欄）
概念：漸進(jìn)增強(qiáng) ： 漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
1）E[attr]：只使用屬性名，但沒(méi)有確定任何屬性值2）E[attr=“value”]：指定屬性名，并指定了該屬性的屬性值
3）E[attr~=“value”]：指定屬性名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開(kāi)，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”必須的
4）E[attr^=“value”]：指定了屬性名，并且有屬性值，屬性值是以value開(kāi)頭的
5）E[attr$=“value”]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的
6）E[attr*=“value”]：指定了屬性名，并且有屬性值，而且屬值中包含了value
7）E[attr|=“value”]：指定了屬性名，并且屬性值僅是value或者以“value-”開(kāi)頭的值（比如說(shuō)left-con）
<style> input[value|="a"]{color:#ff0;}
</style>
<input value=“a” > 只有al
<input value=“a-” > 以al- 開(kāi)頭的1）結(jié)構(gòu)性偽類(lèi)選擇器
X:first-child 匹配子集的第一個(gè)元素。IE7就可以支持
X:last-child 匹配父元素中最后一個(gè)X元素 X:nth-child(n) 用于匹配索引值為n的子元素。索引值從1開(kāi)始X:only-child 這個(gè)偽類(lèi)一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說(shuō)，如果div內(nèi)有多個(gè)p，將不匹配。 (唯一的一個(gè)子元素)X:nth-last-child(n) 從最后一個(gè)開(kāi)始算索引。
注：(n) 括號(hào)里可以指定參數(shù)值，也可以寫(xiě)表達(dá)式 如：2n n+1 \ odd \even
位置和標(biāo)簽都要匹配上
X:first-of-type 匹配同級(jí)(相同的元素)兄弟元素中的第一個(gè)X元素X:last-of-type 匹配同級(jí)兄弟元素中的最后一個(gè)X元素X:nth-of-type(n) 匹配同類(lèi)型中的第n個(gè)同級(jí)兄弟元素XX:only-of-type 匹配屬于同類(lèi)型中唯一兄弟元素的XX:nth-last-of-type(n) 匹配同類(lèi)型中的倒數(shù)第n個(gè)同級(jí)兄弟元素X
:root匹配文檔的根元素。在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）中，根元素永遠(yuǎn)是HTMLX:empty**匹配沒(méi)有任何子元素（包括包含文本）的元素X
目標(biāo)偽類(lèi)選擇器:
E:target 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向 (如：錨點(diǎn)鏈接)
動(dòng)態(tài)偽類(lèi)選擇器
E:link 鏈接偽類(lèi)選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上E:visited 鏈接偽類(lèi)選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上E:active 用戶行為選擇器 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上E:hover 用戶行為選擇器 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hoverE:focus 用戶行為選擇器 選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)
UI 元素狀態(tài)偽類(lèi)選擇器
E:enabled 匹配所有用戶界面（form表單）中處于可用狀態(tài)的E元素E:disabled 匹配所有用戶界面（form表單）中處于不可用狀態(tài)的E元素E:checked 匹配所有用戶界面（form表單）中處于選中狀態(tài)的元素E
默認(rèn)選中： checked 禁用：disabled 可用：enabled
E::selection 匹配E元素中被用戶選中或處于高亮狀態(tài)的部分
E>F
子選擇器 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F相鄰兄弟選擇器(找后面的相鄰的第一個(gè)同輩元素)選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面
E~F通用選擇器 (找后面的所有同輩元素)選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
