Web前端学习笔记(001)
Posted Ascension
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端学习笔记(001)相关的知识，希望对你有一定的参考价值。
....编号
........类别
............条目
................明细
....................时间
一.Web前端学习笔记 2016年6月15日10:38:53
/****************************************************************begin**************************************************************************/
001.Dreamweaver和Sublime开发工具使用
01-01.Sublime:一切皆命令.
01-02.学C++时：一切皆对象.
01-03.学Linux时：一切皆文件.
002.html与CSS关系
02-01. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
02-02. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
02-03. javascript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互 的一般都是用JavaScript来实现的。
003.标签的定义
03-01. 标签由英文尖括号<和>括起来，如<html>就是一个标签。
03-02. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
03-03. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。如下图所示。
4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
004.常用标签说明
04-01.<html> </html>
04-02.<head> <title>标题头</title> <style>设置样式</style></head>
04-03.<body> <h1>标题级别</h1> <p>段落</p> </body>
04-04.<strong>和<em>标签：但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
04-05.<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
备注:
HTML 4.0标准仅支持16种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的 话,就应该使用十六进制的颜色值;
04-06.<q>标签，短文本引用;<blockquote>标签，长文本引用
04-07.<br>标签分行显示文本;在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。
04-08.在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入
04-09.<hr>标签，添加水平横线；(<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签)
04-10.<address>标签，为网页加入地址信息;
04-11.<code>标签添加一行代码;<pre>标签添加多行代码;
04-12.<ul><li></li></ul>标签：列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表;ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点;
04-13.<ol><li></li></ol>标签：列表就可以使用ol-li标签来完成。ol-li是有前后顺序的信息列表;ol-li在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始;
04-14.div标签：可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器;可以用id属性来为<div>提供唯一的名称;(div相当于房间,id相当于房间号)
04-15.table标签:
a.<table>…</table>：整个表格以<table>标记开始、</table>标记结束;
b.<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码;
c.<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行;
d.<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列;
e.<th>…</th>：表格的头部的一个单元格，表格表头;
f.表格中列的个数，取决于一行中数据单元格的个数；
g.可以使用css样式，为表格加入边框。
04-16.caption标签，为表格添加标题和摘要;
04-17.<a>标签，链接到另一个页面;使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
a.<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>;
b.<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>;
c.标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开;
d.<a href="目标网址" target="_blank">click here!</a>即可在新窗口中打开;
04-18.<img>标签，为网页插入图片;
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">;
a.src：标识图像的位置；
b.alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
c.title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
d.图像可以是GIF，PNG，JPEG格式的图像文件。
005.与浏览者交互，表单标签
05-01.<form>表单标签;
<form method="传送方式" action="服务器文件">;
a.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束;
b.action ：浏览者输入的数据被传送到的地方,比如一个php页面(save.php);
c.method ： 数据传送的方式（get/post）;
d.所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）;
e.method:post/get的区别这一部分内容属于后端程序员考虑的问题:http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html
05-02.文本输入框、密码输入框:
<input type="text/password" name="名称" value="文本" />
a.当type="text"时，输入框为文本输入框;当type="password"时, 输入框为密码输入框;
b.name：为文本框命名，以备后台程序ASP 、PHP使用;
c.value：为文本输入框设置默认值。(一般起到提示作用);
05-03.文本域，支持多行文本输入:
<textarea rows="行数" cols="列数">文本</textarea>
a.<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束;
b.cols ：多行输入域的列数;
c.rows ：多行输入域的行数;
d.rows ：多行输入域的行数;
05-04.使用单选框、复选框，让用户选择:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
a.当 type="radio" 时，控件为单选框;当 type="checkbox" 时，控件为复选框;
b.value：提交数据到服务器的值（后台程序PHP使用）;
c.name：为控件命名，以备后台程序 ASP、PHP 使用;
d.checked：当设置 checked="checked" 时，该选项被默认选中;
e.同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
05-05.下拉列表框，节省空间
<select> <option value="看书">看书</option> </select>
a.value提交的值，看书界面显示的值;
b.设置selected="selected"属性，则该选项就被默认选中;
c.下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能;<select multiple = "multiple">
05-06.使用提交按钮，提交数据
<input type="submit" value="提交">
a.type：只有当type值设置为submit时，按钮才有提交作用;
b.value：按钮上显示的文字;
05-07.使用重置按钮，重置表单信息
<input type="reset" value="重置">
a.type：只有当type值设置为reset时，按钮才有重置作用;
b.value：按钮上显示的文字;
05-08.form表单中的label标签
<label for="控件id名称">;
a.标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同;
006.学习CSS,为网页添加样式
06-01.认识CSS样式
a.CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
b.使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
06-02.CSS代码语法
a.css 样式由选择符和声明组成，而声明又由属性和值组成;
b.选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
c.声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔;
d.为了使用样式更加容易阅读，可以将每条代码写在一个新行内;最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
06-03.CSS注释代码
a.就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->);
b.//单句注释;
007.CSS样式基本知识
07-01.从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种
a.内联式css样式表就是把css代码直接写在现有的HTML标签中{<span style="color:blue">超酷的互联网</span>};
b.嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间;嵌入式css样式必须写在<style></style>之间;并且一般情况下写在<head></head>之间;
c.外部式css样式，写在单独的一个文件中;
<link href="base.css" rel="stylesheet" type="text/css" />
1.css样式文件名称以有意义的英文字母命名，如 main.css;
2.rel="stylesheet" type="text/css" 是固定写法不可修改;
3.<link>标签位置一般写在<head>标签之内;
07-02.三种方法的优先级
a.内联式 > 嵌入式 > 外部式,就是--就近原则（离被设置元素越近优先级别越高）;
b.上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下;
008.CSS选择器
08-01.什么是选择器？
a.每一条css样式声明（定义）由两部分组成,选择器 {样式;};
b.在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素;
c.标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>;
08-02.类选择器
语法：.类选器名称{css样式代码;}
a.英文圆点开头;
b.其中类选器名称可以任意起名（但不要起中文噢）;
08-03.ID选择器
ID选择器都类似于类选择符，但也有一些重要的区别：
a.为标签设置id="ID名称"，而不是class="类名称";
b.ID选择符的前面是井号（#）号，而不是英文圆点（.）;
08-03.类和ID选择器的区别
a.相同点：可以应用于任何元素;
b.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次;
c.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的;
08-04.子选择器
格式：.food>li{border:1px solid red;}
a.即大于符号(>),用于选择指定标签元素的第一代子元素。
08-05.包含(后代)选择器
a.即加入空格,用于选择指定标签元素下的后辈元素;
b.与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
c.>作用于元素的第一代后代，空格作用于元素的所有后代；
08-06.通用选择器
格式:* {color:red;}
a.通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
08-07.伪类选择符
格式:a:hover{color:red;}
a.更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
08-08.分组选择符
格式:h1,span{color:red;}
a.当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）;
009.CSS的继承,层叠和特殊性
09-01.继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
09-02.特殊性
a.p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
b.标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
c.还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
09-03.层叠
a.层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
b.内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中)；
09-04.重要性
a.在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
b.p{color:red!important;}
c.当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文 本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
010.CSS格式化排版
10-01.文字排版--字体
格式：body{font-family:"宋体";}
a.我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性;
b.注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
c.现在一般网页喜欢设置“微软雅黑”;
d.字号、颜色;body{font-size:12px;color:#666};
e.font-weight:bold粗体;
f.font-style:italic斜体;
g.a{text-decoration:underline;}下划线;
h..oldPrice{text-decoration:line-through;}删除线;
10-02.段落排版--缩进，间距，对齐
a.p{text-indent:2em;};2em的意思就是文字的2倍大小;缩进
b.p{line-height:1.5em;};段落排版中起重要作用的行间距（行高）属性（line-height）;
c.中文字间隔、字母间隔设置：
1.如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing 来实现,这个样式使用在英文单词时，是设置字母与字母之间的间距。
2.如果想设置英文单词之间的间距,可以使用 word-spacing 来实现；
d.div{text-align:center;};文本或图片设置居中,左,右对齐;
011.CSS盒模型
11-01.元素分类
a.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素;
b.常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>;
c.常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>;
d.常用的内联块状元素有：<img>、<input>;
11-02.块级元素
a.每个块级元素都从新的一行开始，并且其后的元素也另起一行;
b.元素的高度、宽度、行高以及顶和底边距都可设置;
c.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
11-03.内联元素
a.和其他元素都在一行上；
b.元素的高度、宽度及顶部和底部边距不可设置；
c.元素的宽度就是它包含的文字或图片的宽度，不可改变。
11-04.内联块状元素
a.和其他元素都在一行上；
b.元素的高度、宽度及顶部和底部边距都可设置；
11-05.盒模型--边框
a.边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性);
b.p{border:2px dotted #111;}
1.border-style（边框样式）常见样式有:dashed（虚线）| dotted（点线）| solid（实线）
2.border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）;
3.border-color（边框颜色）中的颜色可设置为十六进制颜色;
4.如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式,div{border-bottom:1px solid red;};
11-06.盒模型--宽度和高度
a.一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界,元素的高度也是同理;
b.元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型;
11-07.盒模型--填充
a.元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针);
b.栗子：div{padding:20px 10px 15px 30px;}依次对应上右下左;
c.如果上右下左的距离都为10px;可以这么写div{padding:10px}
11-08.盒模型--边界
a.元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左;
b.栗子：div{margin:20px 10px 15px 30px;}依次对应上右下左;
c.如果上右下左的边界都为10px;可以这么写div{margin:10px};
d.padding和margin的区别，padding在边框里，margin在边框外;
012.CSS布局模型
12-01.css布局模型概念
a.布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板
b.CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float;
c.在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
12-02.
以上是关于Web前端学习笔记(001)的主要内容，如果未能解决你的问题，请参考以下文章