整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
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)用于臺(tái)灣地區(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)符
" 雙引號(hào)
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯(cuò)誤時(shí)的替代文本"
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是一個(gè)容器, 常用于頁面的布局
標(biāo)簽的分類:
1. 塊級標(biāo)簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨(dú)占容器中的一行, 其寬度是容器的100%
2. 行級標(biāo)簽/行級元素
如: span, img, strong, em, a
特征1: 多個(gè)行級元素可以同處一行, 其寬度由內(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)前行的上方插入新行
以上知識(shí)能做的效果圖
部分效果
SS 組合選擇符
| 組合選擇符說明了兩個(gè)選擇器直接的關(guān)系。 |
CSS組合選擇符包括各種簡單選擇符的組合方式。
在 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將完全向后兼容，所以沒有必要修改現(xiàn)在的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。對我們來說，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說使用分欄）
概念：漸進(jìn)增強(qiáng) ： 漸進(jìn)增強(qiáng) progressive enhancement：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級 graceful degradation：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
1）E[attr]：只使用屬性名，但沒有確定任何屬性值2）E[attr=“value”]：指定屬性名，并指定了該屬性的屬性值
3）E[attr~=“value”]：指定屬性名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”必須的
4）E[attr^=“value”]：指定了屬性名，并且有屬性值，屬性值是以value開頭的
5）E[attr$=“value”]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的
6）E[attr*=“value”]：指定了屬性名，并且有屬性值，而且屬值中包含了value
7）E[attr|=“value”]：指定了屬性名，并且屬性值僅是value或者以“value-”開頭的值（比如說left-con）
<style> input[value|="a"]{color:#ff0;}
</style>
<input value=“a” > 只有al
<input value=“a-” > 以al- 開頭的1）結(jié)構(gòu)性偽類選擇器
X:first-child 匹配子集的第一個(gè)元素。IE7就可以支持
X:last-child 匹配父元素中最后一個(gè)X元素 X:nth-child(n) 用于匹配索引值為n的子元素。索引值從1開始X:only-child 這個(gè)偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說，如果div內(nèi)有多個(gè)p，將不匹配。 (唯一的一個(gè)子元素)X:nth-last-child(n) 從最后一個(gè)開始算索引。
注：(n) 括號(hào)里可以指定參數(shù)值，也可以寫表達(dá)式 如：2n n+1 \ odd \even
位置和標(biāo)簽都要匹配上
X:first-of-type 匹配同級(相同的元素)兄弟元素中的第一個(gè)X元素X:last-of-type 匹配同級兄弟元素中的最后一個(gè)X元素X:nth-of-type(n) 匹配同類型中的第n個(gè)同級兄弟元素XX:only-of-type 匹配屬于同類型中唯一兄弟元素的XX:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級兄弟元素X
:root匹配文檔的根元素。在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）中，根元素永遠(yuǎn)是HTMLX:empty**匹配沒有任何子元素（包括包含文本）的元素X
目標(biāo)偽類選擇器:
E:target 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向 (如：錨點(diǎn)鏈接)
動(dòng)態(tài)偽類選擇器
E:link 鏈接偽類選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點(diǎn)上E:visited 鏈接偽類選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點(diǎn)上E:active 用戶行為選擇器 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上E:hover 用戶行為選擇器 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hoverE:focus 用戶行為選擇器 選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)
UI 元素狀態(tà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元素
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
