今日总结
学习快捷键5个
sublime
- Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。
- Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。
举个栗子：快速选中并更改所有相同的变量名、函数名等。 - Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。
- Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，
即可同时编辑这些行。 - Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：
快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容。
linux
- Ctrl + Y 删除当前行
- Ctrl + D 重复生成当前行
- Ctrl + X 剪切当前行
- Ctrl + Alt + Enter 在当前行上面生成一个新行
- Ctrl + Enter 在当前行下面生成一个新行
复习HTML(到链接)
什么是 HTML?
HTML 语言用于描述网页。
- HTML 是指超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML** 标签及文本**内容
- HTML 文档也叫做** web 页面**
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。您可以在 W3Cschool 的编程实战部分开始学习 HTML 标签。
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述相同的意思。
但是严格来讲，一个 HTML元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>This is a paragraph.</p>
<!DOCTYPE> 声明
<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。
由于网络上文件的类型不一，因此需要正确声明 HTML 版本，以使得浏览器能够正确识别并显示您的网页内容。
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。
这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：
<h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3>表示三级子标题（sub-subheadings），<h4>、<h5>、<h6>依次递减字体的大小。
HTML 段落
HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样，您可以进行实战实验。
HTML中的空格
在代码中可能包含了很多的空格——这是没有必要的
无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML解释器会将连续出现的空格字符减少为一个单独的空格符。
为什么我们会使用那么多的空格呢?
答案就是为了可读性——如果你的代码被很好地进行格式化，那么就很容易理解你的代码，反之就会很混乱。在我们的HTML代码中，我们让每一个嵌套的元素以两个空格缩进。
你使用什么风格来格式化你的代码取决于你（比如所对于每层缩进使用多少个空格），但是记住你应该坚持使用某种风格。
HTML 链接
HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。
- 实例
<a href="http://www.w3cschool.cn">这是一个链接</a>
HTML 图像
HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。
举例如下：<img src="https://www.your-image-source.com/your-image.jpg">
请注意：img元素是自关闭元素，不需要结束标记。
- 实例
<img src="w3cschool.png" width="104" height="142">
HTML 强调
在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。
在HTML中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
在HTML中我们还可以使用<strong>(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：
<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 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
- 实例
<a href="http://www.w3cschool.cn">这是一个链接</a>
HTML 水平线
标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。
注释写法如下:
- 实例
<!-- 这是一个注释 -->
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br />标签。
在 HTML 语言中， <br />标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段：
- 实例
<p>这个<br> 段落<br>演示了分行的效果</p>
HTML 超链接（链接）
HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时，链接显示为红色并带上下划线
注意：如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定来显示
HTML 空链接
HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。
临时加的空链接，主要为了能更好的看到最终的效果。
基本语法：
<a href="#">链接文字</a>
其中“ # ”表示空链接。
HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。
下面的这行会在新窗口打开文档：
实例
<a href="//www.w3cschool.cn/" target="_blank">访问W3CSchool教程!</a>
HTML 链接 - id 属性
id 属性可用于在一个 HTML 文档中创建书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
<a id="tips">Useful Tips Section</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">Visit the Useful Tips Section</a>
或者，从另一个页面创建一个链接到"有用的提示(id="tips"）部分"：
<a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a>
复习css(css基础+css样式)
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
注意
- 值的不同写法和单位：除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
- 如果值为若干单词，则要给值加引号；
- 如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。
- 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
css选择器总结
- *通配符选择器
这个选择器是匹配页面中所有的元素，一般用来清除浏览器的默认样式.
*{margin:0; padding:0}
- 元素选择器
通过标签名来选择元素。
div{width:100px; height:100px;}
- class选择器
class选择器 / 类选择器 / 用class属性给元素命名，在页面中可以出现很多次，相当于人的名字。
.box{width:100px; height:100px;}
<div class="box"></div>
<p class="box"></p>
- id选择器
以id属性来命名，在页面中只能出现一次，具有唯一性，并且权重值最高，相当于一个人的身份证。
#box{width:100px; height:100px;}
<div id="box"></div>
如何插入样式表
- 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
- 内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
css背景
- 背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
p {background-color: gray;}
- 背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
- 背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，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 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
p {text-indent: 5em;}
2. 水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
3. 字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
4. 字母间隔
text-transform 属性处理文本的大小写。这个属性有 4 个值：
- none
- uppercase
- lowercase
- capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，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 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many
spaces in it.</p>
p {white-space: normal;}
CSS字体
指定字体
使用 font-family 属性 定义文本的字体系列。\
- 使用通用字体系列
如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
body {font-family: sans-serif;}
- 指定字体系列
除了使用通用的字体系列，您还可以通过 font-family 属性设置更具体的字体。
下面的例子为所有 h1 元素设置了 Georgia 字体：
h1 {font-family: Georgia;}
字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
字体变形
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
字体大小
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小（不利于可用性）
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值
CSS 链接
- 设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
注意
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
常见的链接样式
- 文本修饰
text-decoration 属性大多用于去掉链接中的下划线 - 背景色
background-color 属性规定链接的背景色
css列表
列表类型
要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type：
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块。
列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
css表格
- 表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。
2.折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框。 - 表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。 - 表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
- text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
- vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
- 表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性。 - 表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色。
