今日總結(jié)
學(xué)習(xí)快捷鍵5個
sublime
- Ctrl+D 選中光標所占的文本，繼續(xù)操作則會選中下一個相同的文本。
- Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進行同時編輯。
舉個栗子：快速選中并更改所有相同的變量名、函數(shù)名等。 - Ctrl+L 選中整行，繼續(xù)操作則繼續(xù)選擇下一行，效果和 Shift+↓ 效果一樣。
- Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標，
即可同時編輯這些行。 - Ctrl+Shift+M 選擇括號內(nèi)的內(nèi)容（繼續(xù)選擇父括號）。舉個栗子：
快速選中刪除函數(shù)中的代碼，重寫函數(shù)體代碼或重寫括號內(nèi)里的內(nèi)容。
linux
- Ctrl + Y 刪除當前行
- Ctrl + D 重復(fù)生成當前行
- Ctrl + X 剪切當前行
- Ctrl + Alt + Enter 在當前行上面生成一個新行
- Ctrl + Enter 在當前行下面生成一個新行
復(fù)習(xí)HTML(到鏈接)
什么是 HTML?
HTML 語言用于描述網(wǎng)頁。
- HTML 是指超文本標記語言: Hyper Text Markup Language
- HTML 不是一種編程語言，而是一種標記語言
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網(wǎng)頁
- HTML 文檔包含了HTML** 標簽及文本**內(nèi)容
- HTML 文檔也叫做** web 頁面**
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。您可以在 W3Cschool 的編程實戰(zhàn)部分開始學(xué)習(xí) HTML 標簽。
- HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如
<html> - HTML 標簽通常是成對出現(xiàn)的，比如
<b>和</b> - 標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
- 開始和結(jié)束標簽也被稱為開放標簽和閉合標簽
HTML 元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述相同的意思。
但是嚴格來講，一個 HTML元素包含了開始標簽與結(jié)束標簽，如下實例:
HTML 元素:
<p>This is a paragraph.</p>
<!DOCTYPE> 聲明
<!DOCTYPE>是標準通用標記語言的文檔類型聲明，有助于在瀏覽器中正確地顯示網(wǎng)頁。
由于網(wǎng)絡(luò)上文件的類型不一，因此需要正確聲明 HTML 版本，以使得瀏覽器能夠正確識別并顯示您的網(wǎng)頁內(nèi)容。
HTML 標題
HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的.
h是英文header標題的縮寫，標題無處不在，它的應(yīng)用范圍十分廣泛：網(wǎng)站結(jié)構(gòu)、寫作文、PPT 等。
這里有六個標題元素標簽 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每個元素代表文檔中不同級別的內(nèi)容：
<h1> 表示主標題（the main heading），<h2> 表示二級子標題（subheadings），<h3>表示三級子標題（sub-subheadings），<h4>、<h5>、<h6>依次遞減字體的大小。
HTML 段落
HTML 段落是通過標簽<p>來定義的，P是英文paragraph段落的縮寫，經(jīng)常被用來創(chuàng)建一個段落，就和你寫作文一樣，您可以進行實戰(zhàn)實驗。
HTML中的空格
在代碼中可能包含了很多的空格——這是沒有必要的
無論你用了多少空格（包括空格字符，包括換行），當渲染這些代碼的時候，HTML解釋器會將連續(xù)出現(xiàn)的空格字符減少為一個單獨的空格符。
為什么我們會使用那么多的空格呢?
答案就是為了可讀性——如果你的代碼被很好地進行格式化，那么就很容易理解你的代碼，反之就會很混亂。在我們的HTML代碼中，我們讓每一個嵌套的元素以兩個空格縮進。
你使用什么風(fēng)格來格式化你的代碼取決于你（比如所對于每層縮進使用多少個空格），但是記住你應(yīng)該堅持使用某種風(fēng)格。
HTML 鏈接
HTML 鏈接是通過標簽<a>來定義的。a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現(xiàn)頁面跳轉(zhuǎn)功能，也可以鏈接到當前頁面的某部分實現(xiàn)內(nèi)部導(dǎo)航功能。
- 實例
<a >這是一個鏈接</a>
HTML 圖像
HTML 圖像是通過標簽<img>來定義的。使用img元素來為你的網(wǎng)站添加圖片，使用src 屬性指向一個圖片的具體地址。
舉例如下：<img src="https://www.your-image-source.com/your-image.jpg">
請注意：img元素是自關(guān)閉元素，不需要結(jié)束標記。
- 實例
<img src="w3cschool.png" width="104" height="142">
HTML 強調(diào)
在人類語言中，為了突出一句話的意思，我們通常強調(diào)某些詞，并且我們通常想要標記某些詞作為重點或者表示某種程度上的不同。HTML 提供了許多語義化的元素，并且允許我們通過這些元素的意義標記正文內(nèi)容，在這個章節(jié)中，我們將看到最常見的一小部分元素。
在HTML中我們可以使用em（emphasis）元素來標記這樣的情況，瀏覽器默認風(fēng)格為斜體：
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
在HTML中我們還可以使用<strong>(strong importance)元素來標記這樣的請況，瀏覽器默認風(fēng)格為粗體：
<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>
HTML 元素語法
- HTML 元素以開始標簽起始
- HTML 元素以結(jié)束標簽終止
- 元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容
- 某些 HTML 元素具有空內(nèi)容（empty content）
- 空元素在開始標簽中進行關(guān)閉（以開始標簽的結(jié)束而結(jié)束）
- 大多數(shù) HTML 元素可擁有屬性
HTML 屬性
- HTML 元素可以設(shè)置屬性
- 屬性可以在元素中添加附加信息
- 屬性一般描述于開始標簽
- 屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
屬性實例
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：
- 實例
<a >這是一個鏈接</a>
HTML 水平線
標簽在 HTML 頁面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容，使用該元素產(chǎn)生的水平線可以在視覺上將文檔分隔成各個部分。
HTML 注釋
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。
HTML 注釋可以方便地用來幫助網(wǎng)頁設(shè)計人員，提醒他們與程序相關(guān)的信息。
注釋寫法如下:
- 實例
<!-- 這是一個注釋 -->
HTML 折行
如果您希望在不產(chǎn)生一個新段落的情況下進行換行（新行），請使用 <br />標簽。
在 HTML 語言中， <br />標簽定義為一個換行符，它可以理解為簡單的輸入一個空行，而不是用來對內(nèi)容進行分段：
- 實例
<p>這個<br> 段落<br>演示了分行的效果</p>
HTML 超鏈接（鏈接）
HTML使用標簽 <a>來設(shè)置超文本鏈接，是可以從一個頁面指向另一個目的端的鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
- 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線
- 訪問過的鏈接顯示為紫色并帶上下劃線
- 點擊鏈接時，鏈接顯示為紅色并帶上下劃線
注意：如果為這些超鏈接設(shè)置了CSS樣式，展示樣式會根據(jù)CSS的設(shè)定來顯示
HTML 空鏈接
HTML 空鏈接：指指向鏈接后，鼠標變成手形，但單擊后仍停留在當前頁面。
臨時加的空鏈接，主要為了能更好的看到最終的效果。
基本語法：
<a href="#">鏈接文字</a>
其中“ # ”表示空鏈接。
HTML 鏈接 - target 屬性
使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示（在新的窗口打開，還是在原有的窗口中打開）。
下面的這行會在新窗口打開文檔：
實例
<a target="_blank">訪問W3CSchool教程!</a>
HTML 鏈接 - id 屬性
id 屬性可用于在一個 HTML 文檔中創(chuàng)建書簽標記。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。
實例
在HTML文檔中插入ID:
<a id="tips">Useful Tips Section</a>
在HTML文檔中創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">Visit the Useful Tips Section</a>
或者，從另一個頁面創(chuàng)建一個鏈接到"有用的提示(id="tips"）部分"：
<a > Visit the Useful Tips Section</a>
復(fù)習(xí)css(css基礎(chǔ)+css樣式)
CSS 語法
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu)：
注意
- 值的不同寫法和單位：除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
- 如果值為若干單詞，則要給值加引號；
- 如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最后一條規(guī)則是不需要加分號的，因為分號在英語中是一個分隔符號，不是結(jié)束符號。然而，大多數(shù)有經(jīng)驗的設(shè)計師會在每條聲明的末尾都加上分號，這么做的好處是，當你從現(xiàn)有的規(guī)則中增減聲明時，會盡可能地減少出錯的可能性。
- 大多數(shù)樣式表包含不止一條規(guī)則，而大多數(shù)規(guī)則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯
選擇器的分組
你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
派生選擇器
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，通過這種方式來應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由于它們依賴于上下文關(guān)系來應(yīng)用或者避免某項規(guī)則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個標簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。
比方說，你希望列表中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
css選擇器總結(jié)
- *通配符選擇器
這個選擇器是匹配頁面中所有的元素，一般用來清除瀏覽器的默認樣式.
*{margin:0; padding:0}
- 元素選擇器
通過標簽名來選擇元素。
div{width:100px; height:100px;}
- class選擇器
class選擇器 / 類選擇器 / 用class屬性給元素命名，在頁面中可以出現(xiàn)很多次，相當于人的名字。
.box{width:100px; height:100px;}
<div class="box"></div>
<p class="box"></p>
- id選擇器
以id屬性來命名，在頁面中只能出現(xiàn)一次，具有唯一性，并且權(quán)重值最高，相當于一個人的身份證。
#box{width:100px; height:100px;}
<div id="box"></div>
如何插入樣式表
- 外部樣式表
當樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- 內(nèi)部樣式表
當單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
- 內(nèi)聯(lián)樣式
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當樣式僅需要在一個元素上應(yīng)用一次時。
要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
css背景
- 背景色
可以使用 background-color 屬性為元素設(shè)置背景色。這個屬性接受任何合法的顏色值。
這條規(guī)則把元素的背景設(shè)置為灰色：
p {background-color: gray;}
- 背景圖像
要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。
如果需要設(shè)置一個背景圖像，必須為這個屬性設(shè)置一個 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
- 背景重復(fù)
如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。
屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪。
默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
- 背景定位
可以利用 background-position 屬性改變圖像在背景中的位置。
下面的例子在 body 元素中將一個背景圖像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
css文本
1. 縮進文本
把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。
CSS 提供了 text-indent 屬性，該屬性可以方便地實現(xiàn)文本縮進。
通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。
這個屬性最常見的用途是將段落的首行縮進，下面的規(guī)則會使所有段落的首行縮進 5 em：
p {text-indent: 5em;}
2. 水平對齊
text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。
3. 字間隔
word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設(shè)置值為 0 是一樣的。
4. 字母間隔
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
- none
- uppercase
- lowercase
- capitalize
默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。
5. 文本裝飾
接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。
text-decoration 有 5 個值：
- none
- underline
- overline
- line-through
- blink
不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。
6. 處理空白符
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經(jīng)完成了空白符處理：它會把所有空白符合并為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：
<p>This paragraph has many
spaces in it.</p>
p {white-space: normal;}
CSS字體
指定字體
使用 font-family 屬性 定義文本的字體系列。\
- 使用通用字體系列
如果你希望文檔使用一種 sans-serif 字體，但是你并不關(guān)心是哪一種字體，以下就是一個合適的聲明：
body {font-family: sans-serif;}
- 指定字體系列
除了使用通用的字體系列，您還可以通過 font-family 屬性設(shè)置更具體的字體。
下面的例子為所有 h1 元素設(shè)置了 Georgia 字體：
h1 {font-family: Georgia;}
字體風(fēng)格
font-style 屬性最常用于規(guī)定斜體文本。
該屬性有三個值：
- normal - 文本正常顯示
- italic - 文本斜體顯示
- oblique - 文本傾斜顯示
字體變形
font-variant 屬性可以設(shè)定小型大寫字母。
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。
字體加粗
font-weight 屬性設(shè)置文本的粗細。
使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。
關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預(yù)定義的級別，100 對應(yīng)最細的字體變形，900 對應(yīng)最粗的字體變形。數(shù)字 400 等價于 normal，而 700 等價于 bold。
如果將元素的加粗設(shè)置為 bolder，瀏覽器會設(shè)置比所繼承值更粗的一個字體加粗。與此相反，關(guān)鍵詞 lighter 會導(dǎo)致瀏覽器將加粗度下移而不是上移。
字體大小
font-size 屬性設(shè)置文本的大小。
有能力管理文本的大小在 web 設(shè)計領(lǐng)域很重要。但是，您不應(yīng)當通過調(diào)整文本大小使段落看上去像標題，或者使標題看上去像段落。
請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。
font-size 值可以是絕對或相對值。
絕對值：
- 將文本設(shè)置為指定的大小
- 不允許用戶在所有瀏覽器中改變文本大?。ú焕诳捎眯裕?/li>
- 絕對大小在確定了輸出的物理尺寸時很有用
相對大?。?/p>
- 相對于周圍的元素來設(shè)置大小
- 允許用戶在瀏覽器改變文本大小
注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。
使用像素來設(shè)置字體大小
通過像素設(shè)置文本大小，可以對文本大小進行完全控制
使用 em 來設(shè)置字體大小
如果要避免在 Internet Explorer 中無法調(diào)整文本的問題，許多開發(fā)者使用 em 單位代替 pixels。
結(jié)合使用百分比和 EM
在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設(shè)置默認的 font-size 值
CSS 鏈接
- 設(shè)置鏈接的樣式
能夠設(shè)置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。
鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式。
鏈接的四種狀態(tài)：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
注意
當為鏈接的不同狀態(tài)設(shè)置樣式時，請按照以下次序規(guī)則：
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
常見的鏈接樣式
- 文本修飾
text-decoration 屬性大多用于去掉鏈接中的下劃線 - 背景色
background-color 屬性規(guī)定鏈接的背景色
css列表
列表類型
要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。
例如，在一個無序列表中，列表項的標志 (marker) 是出現(xiàn)在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數(shù)字或另外某種計數(shù)體系中的一個符號。
要修改用于列表項的標志類型，可以使用屬性 list-style-type：
ul {list-style-type : square}
上面的聲明把無序列表中的列表項標志設(shè)置為方塊。
列表項圖像
有時，常規(guī)的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：
ul li {list-style-image : url(xxx.gif)}
只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。
列表標志位置
CSS2.1 可以確定標志出現(xiàn)在列表項內(nèi)容之外還是內(nèi)容內(nèi)部。這是利用 list-style-position 完成的。
簡寫列表樣式
為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。
css表格
- 表格邊框
如需在 CSS 中設(shè)置表格邊框，請使用 border 屬性。
2.折疊邊框
border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框。 - 表格寬度和高度
通過 width 和 height 屬性定義表格的寬度和高度。 - 表格文本對齊
text-align 和 vertical-align 屬性設(shè)置表格中文本的對齊方式。
- text-align 屬性設(shè)置水平對齊方式，比如左對齊、右對齊或者居中
- vertical-align 屬性設(shè)置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊
- 表格內(nèi)邊距
如需控制表格中內(nèi)容與邊框的距離，請為 td 和 th 元素設(shè)置 padding 屬性。 - 表格顏色
下面的例子設(shè)置邊框的顏色，以及 th 元素的文本和背景顏色。
