HTML+CSS+JS的基础知识笔记
来源：互联网 发布：mac一键关闭所有程序 编辑：程序博客网 时间：2024/04/29 03:50
语义化：通俗来说就是明白每个标签的用途（在什么情况下使用此标签合理）
<html>
<head>...</head>
<body>...</body>
</html>
代码注释的语法:<!--注释文字 -->
<html>标签:根标签，所有的网页标签都在<html></html>中。
<head>标签:定义文档的头部,所有头部元素的容器.头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
<body>标签:网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签里的内容会在浏览器中显示出来。
<title>标签：网页的标题信息，它会出现在浏览器的标题栏中。
<p>标签:<p>段落文本</p>,添加段落。
<hx>标签：<hx>标题文本</hx>，标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级、二级、三级、四级、五级、六级标题。依据重要性递减。<h1>是最高的等级。注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。标题标签的样式都会加粗，h1标签字号最大，以此类推h6标签的字号最小。
<strong>和<em>标签：<em>表示强调，默认用斜体表示；<strong> 表示更强烈的强调，默认用粗体表示。习惯用<strong>表示强调。
<span>标签：对文字设置单独样式用的没有语义。
<q>标签:短文本引用,<q>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</q>，效果“庄生晓梦迷蝴蝶,望帝春心托杜鹃.”
<blockquote>标签:长文本引用，浏览器对<blockquote>标签的解析是缩进样式。
<br>标签：相当于word文档中的回车。xhtml1.0写法：<br/>；html4.01写法：<br>。现在一般使用xhtml1.0的版本的写法（其它标签也是），这种版本比较规范。与之前我们学过的标签不一样，<br/>标签是一个空标签,只需要写一个开始标签，这样的标签有<br/>、<hr/>和<img/>。
 :添加空格。
<hr>标签：添加水平横线，使文章看起来整齐些。浏览器中的默认样式线条比较粗，颜色为灰色。
<address>标签：<address>联系地址信息</address>，浏览器中显示的样式为斜体。
<code>标签：<code>代码语言</code>，当代码为一行时，使用<code>标签。
<pre>标签:<pre>代码段</pre>，当代码为多行时，使用<pre>标签。<pre>标签的主要作用:预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
<ul-li>标签：<ul>
<li>信息</li>
...
</ul>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，ul-li是没有前后顺序的信息列表。
<ol-li>标签：<ol>
<li>信息</li>
...
</ol>
ol-li在网页中显示的默认样式一般为:每项li前都自带一个序号，序号默认从1开始，ol-li是有前后顺序的信息列表。
<div>标签：在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个标签的作用就相当于一个容器。
逻辑部分:它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
给div命名，使逻辑更加清晰：<div id="版块名称">…</div>；div相当于划分成一个个房间，id就是房间号了。
<table>标签:在网页上展示表格效果,创建表格的五个元素：table、tbody、tr、th、td
1、table：整个表格以<table>标记开始、</table>标记结束。
2、tbody：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
3、tr：表格的一行，有几对tr表格就有几行。
4、td：表格的一个单元格，一行中包含几对td，说明一行中就有几列。
5、th：表格的头部的一个单元格，表格表头。
班级 学生数 平均成绩 //表头
一班 30 89
二班 35 85
注意：1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
<caption>标签:为表格添加标题和摘要;
标题:用以描述表格内容，标题的显示位置：表格上方。
摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化).
<table summary="表格简介文本"> //摘要
<caption>标题文本</caption>
<tr>
<td>…</td>
…
</tr>
…
</table>
<a>标签:1.实现超链接，<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
2.在新建浏览器窗口中打开链接:<a href="目标网址" target="_blank">链接显示的文本</a>
3.链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件
关键字：mailto：邮箱地址/cc=抄送地址/bcc=密件抄送地址/;多个收件人、抄送、密件抄送人/subject=邮 件主题/body=邮件内容。
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
完整的实例：<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主 题&body=邮件内容">发送</a>
<img>标签：插入图片。<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置.
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本.
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本).
4、图像可以是GIF，PNG，JPEG格式的图像文件.
表单标签:表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。使用HTML表单(form)与用户进行交互.<form method="传送方式" action="服务器文件">
1.<form> ：以<form>开始，以</form>结束，成对出现。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ：数据传送的方式(get/post).
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。
文本输入框、密码输入框:
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
文本域：当用户需要在表单中输入大段文字时，需要用到。<textarea rows="行数" cols="列数">文本</textarea>
单选框和复选框:单选框中的选项用户只能选择一项，复选框用户可以任意选择多项，甚至全选。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio"时，控件为单选框
当 type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP使用
4、checked：当设置 checked="checked" 时，该选项被默认选中。
注意:同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才能起到单选的作用。
下拉列表框：有效的节省网页空间，既可以单选、又可以多选。
单选：<select>
<option value="提交值" selected="selected">选项</option>
...
</select>
设置selected="selected"属性，则该选项就被默认选中。
多选：只需在<select>标签中设置multiple="multiple"属性，就可以实现多选功能.
在windows操作系统下，多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。
表单中有两种按钮：提交、重置。
提交按钮：
<input type="submit" value="提交">
type:只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字
重置按钮：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用 value:按钮上显示的文字
form表单中的label标签：获得焦点，把鼠标移动到文字上(男、女),同样可以激活控件进行选择输入。但是如果不加label,鼠标就必须移动到控件上面。
<label for="控件id名称">
注意：标签的for属性中的值应当与相关控件的id属性值一定要相同。
CSS代码语法：css样式由选择符和声明组成，而声明又由属性和值组成.eg：p{color:blue}
其中p就是选择符，花括号里的内容就是声明，color是属性，blue是值。
选择符:又称选择器，指明网页中要应用样式规则的元素.
声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分隔。当有多条声明时,中间用英文分号";"分隔
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内。
CSS注释代码：/*注释语句*/
CSS样式:全称为“层叠样式表”，主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。从CSS样式代码插入的形式来看可以分为以下3种：内联式、嵌入式和外部式。
内联式:把css代码直接写在现有的HTML标签中。<p style="color:red;font-size:12px">这里文字是红色</p>
嵌入式:写在当前的文件中。
<style type="text/css">
span{
color:red;
}
</style>
外部式(外联式):把css代码写在一个单独的外部文件中，文件以“.css”为扩展名，在<head>内（不是<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css"/>
注意：
1、css样式文件名称以有意义的英文字母命名，如main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
总结三种css插入方式：
内联：<span style="color:red;font-size:10px;" >text</span>
嵌入：<style type="text/css">span{color:red;font-size:10px;}</style>
外部：<link href="style.css" rel="stylesheet" type="text/css">
优先级顺序：内联式 > 嵌入式 > 外部式(相同权值的情况下)
嵌入式>外部式的前提：就近原则（离被设置元素越近优先级别越高）。
HTML+CSS基础课程
选择器：每一条css样式声明（定义）由两部分组成，形式如下：选择器{样式;}“选择器”指明了{}中的“样式”的作用对象。
标签选择器:其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。
p{font-size:12px;line-height:1.6em;}
类选择器：在css样式编码中最常用到。
.类选器名称{css样式代码;}
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器：ID选择器类似于类选择符
1、为标签设置id="ID名称"。
2、ID选择符的前面是井号（#）号。
类和ID选择器的区别:
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次，而类选择器可以使用多次。
2、只能使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器不能使用ID词列表。
正确写法：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课</p>
错误写法：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课</p>
子选择器：即大于符号(>)用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
包含(后代)选择器：即加入空格,用于选择指定标签元素下的后辈元素。
.first span{color:red;}
子选择器和包含选择器的区别：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器：功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {color:red;}
伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}为a标签鼠标滑过的状态设置字体颜色变红。
关于伪选择符：
其实 :hover 可以放在任意的标签上，比如说 p:hover，但它们的兼容性不好，所以比较常用的还是a:hover 的组合。
分组选择符:当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符(,)
为h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}相当于下面两行代码
h1{color:red;}
span{color:red;}
继承：继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 这里子元素为span标签。
注意：有一些css样式是不具有继承性的。p{border:1px solid red;}
这段代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没作用的。
特殊性:为同一个元素设置了不同的CSS样式代码，浏览器根据权值大小来判断使用哪种css样式的。
权值的规则:标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：继承的权值最低。
层叠：当有相同权重的样式存在时，根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}
最后p中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
重要性:使用!important为某些样式设置最高权值
p{color:red!important;} 注意：!important要写在分号的前面
p{color:green;}
这时p段落中的文本会显示red红色。
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
文字排版--字体：设置网页中的文字字体为宋体。
body{font-family:"宋体";}
注意不要设置不常用的字体，现在一般网页喜欢设置“微软雅黑”
body{font-family:"Microsoft Yahei";} 兼容性更好一些
或body{font-family:"微软雅黑";}
文字排版--字号、颜色：
设置网页中文字的字号为12像素，颜色设置为#666(灰色)：
body{font-size:12px;color:#666}
文字排版--粗体：
p span{font-weight:bold;}
文字排版--斜体：
p a{font-style:italic;}
文字排版--下划线：
p a{text-decoration:underline;}
文字排版--删除线：
.oldPrice{text-decoration:line-through;}
段落排版--缩进：
p{text-indent:2em;}注意：2em的意思就是文字的2倍大小。
段落排版--行间距（行高）：
p{line-height:1.5em;}
段落排版--中文字间距、字母间距：
设置字母与字母之间的间距: h1{letter-spacing:50px;}
设置英文单词之间的间距: h1{word-spacing:50px;}
段落排版--对齐:
实现文本居中/居左/居右显示：h1{text-align:center/left/right;}
元素分类:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
元素分类--块级元素：
将内联元素a转换为块状元素 a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，和父元素的宽度一致。
元素分类--内联元素:
将块状元素div转换为内联元素 div{display:inline;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类--内联块状元素:
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型-边框(一)：
围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是border代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed(虚线)|dotted(点线)|solid（实线）。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin|medium|thick(但不常用),最常还是用象素(px)。
盒子模型-边框(二):
为标签单独设置下边框，而其它三边都不设置边框样式.css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒模型-宽度和高度:
css内定义的宽(width)和高(height)指的是填充以里的内容范围。
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度同理。
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。
盒模型--填充:
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒模型--边界:
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
padding和margin的区别：padding在边框里，margin在边框外。
css布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）
流动模型：
流动（Flow）是默认的网页布局模式。
流动布局模型具有2个比较典型的特征：
第一点：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型：
块状元素独占一行，设置元素浮动就可以实现让两个块状元素并排显示。
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
设置两个div元素一行显示向左/右浮动。
div{
width:200px;
height:200px;
border:2px red solid;
float:left/right;
}
设置两个元素一左一右浮动代码如下:
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
层模型：
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--绝对定位：
设置position:absolute(表示绝对定位)，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
层模型--相对定位:
设置position:relative（表示相对定位），首先按static(float)方式生成一个元素，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
层模型--固定定位：
与absolute定位类型类似，但它的相对移动的坐标是视图本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
如下代码实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用：
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了。这里注意参照物可以不是浏览器了,而可以自由设置。
盒模型代码简写:
外边距(margin)、内边距(padding)和边框(border)设置四个方向的边距是按照顺时针方向设置的：上右下左。
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同
margin:10px 10px 10px 10px;可缩写为margin:10px;
2、如果top和bottom值相同、left和right的值相同
margin:10px 20px 10px 20px;可缩写为：margin:10px 20px;
3、如果left和right的值相同：
margin:10px 20px 30px 20px;可缩写为：margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
颜色值缩写:
当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
p{color:#000000;}缩写为：p{color: #000;}
p{color: #336699;}缩写为：p{color: #369;}
字体缩写：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
缩写为：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式至少要指定font-size和font-family属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、缩写时font-size与line-height中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
颜色值：
字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色 p{color:red;}
2、RGB颜色 这个与photoshop中的RGB颜色是一致的,由R(red)、G(green)、B(blue)三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是0-255之间的整数，也可以是0%-100%的百分数。如:p{color:rgb(20%,33%,25%);}
3、十六进制颜色
比较普遍使用的设置方法，其原理其实也是RGB设置,只是其每一项的值由0-255变成了十六进制00-ff。
p{color:#00ffff;}
长度值：
目前比较常用的长度单位px(像素)、em、%百分比,其实这三种单位都是相对单位。
1、像素
像素指的是显示器上的小点（CSS规范中假设"90像素=1英寸"）。目前大家倾向于使用像素（px）作为单位。
2、em
如果元素的font-size为14px,那么1em=14px；如果font-size为18px,那么1em=18px。
p{font-size:12px;text-indent:2em;}实现段落首行缩进24px（也就是两个字体大小的距离）。
注意一个特殊情况：
当给font-size设置单位为em时，此时计算标准以p的父元素的font-size为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果span中的字体“例子”字体大小就为11.2px(14 * 0.8=11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12*1.3=15.6px)
水平居中设置:分为行内元素和块状元素.块状元素又分为定宽块状元素和不定宽块状元素.
水平居中设置-行内元素：
当被设置元素为文本、图片等行内元素时，通过给父元素设置text-align:center来实现水平居中。
父元素和子元素：div是“我想要在父容器中水平居中显示”这个文本的父元素。
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
<style>
.txtCenter{
text-align:center;
}
</style>
水平居中设置-定宽块状元素：定宽块状元素(块状元素的宽度width为固定值)
满足定宽和块状两个条件的元素通过设置“左右margin”值为“auto”来实现居中。
设置div这个块状元素水平居中：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
<style>
div{
border:1px solid red;/*为了显示居中效果明显为div设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/*margin-left与margin-right设置为auto */
}
</style>
也可以写成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin”是可以随意设置的。
水平居中设置-不定宽块状元素：不定宽块状元素(块状元素的宽度width不固定)。
设置不定宽元素居中的方式有三种：
1加入 table 标签
2设置 display:inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3设置 position:relative 和 left:50%：采用相对定位的方式，将元素向左偏移50%。
方法一：利用table标签的长度自适应性--table其长度根据其内文本长度决定，因此可以看做一个定宽度块状元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置居中的元素外面加入一个table 标签(包括<tbody>、<tr>、<td>)。
第二步：为这个table设置“左右 margin 居中”。
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
/ul>
</td></tr>
</tbody>
</table>
</div>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
方法二：改变块级元素的display为inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</body>
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;/*列表样式无*/
margin:0;
padding:0;/*消除文本与div边框之间的间隙*/
display:inline;
}
.container li{
margin-right:8px;/*设置li文本之间的间隔*/
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法三：通过给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative 和left:-50%来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中设置:分为父元素高度确定的单行文本和多行文本。
垂直居中设置--单行文本:
设置父元素的height和line-height高度一致来实现。弊端:当文字内容的长度大于块的宽时，就有内容脱离了块。
<div class="container">
hi,imooc!
</div>
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
垂直居中设置-多行文本：
方法一：插入table(包括tbody、tr、td)标签，同时设置vertical-align:middle(竖直居中)，父元素设置此样式时，会对inline-block类型的子元素都有用。
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
table td{height:500px;background:#ccc}
因为td标签默认情况下就默认设置了vertical-align为middle，所以不需要显式地设置。
方法二：设置块级元素的display为table-cell(表格单元显示)，激活vertical-align属性，这种方法的好处是不用添加多余的无意义的标签，但是它的兼容性不是很好，不兼容IE6、7这样修改。
隐性改变display类型：
当为元素(display:none除外)设置以下2个句之一：
1. position:absolute
2. float:left或float:right
元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
a标签是行内元素,设置width是没有效果的,但是设置为position:absolute就行了。
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
JavaScript
定义变量：使用关键字var。语法:var 变量名
变量名可以任意取名，但要遵循命名规则：
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
定义函数：使用关键字function
function 函数名()
{
函数代码;
}
document.write():用于直接在网页中输出内容。
第一种:输出内容用""括起，直接输出""号内的内容。
document.write("I love JavaScript！");
第二种:通过变量，输出内容。
var mystr="hello world!";
document.write(mystr);
第三种:输出多项内容，内容之间用+号连接。
var mystr="hello";
document.write(mystr+"I love JavaScript");
第四种:输出HTML标签，并起作用，标签使用""括起来。
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
警告(alert消息对话框)
语法:alert(字符串或变量);
注:alert弹出消息对话框(包含一个确定按钮)。
确认(confirm消息对话框)
语法:confirm(str);
参数说明:
str：在消息对话框中要显示的文本
返回值: Boolean值,当用户点击"确定"按钮时，返回true点击"取消"按钮时，返回false
注: 通过返回值可以判断用户点击了什么按钮
提问(prompt)消息对话框
用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)
语法:prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本,不可修改 str2：文本框中的内容,可以修改
返回值:
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null
打开新窗口(window.open)
open()方法可以查找一个已经存在或者新建的浏览器窗口。
语法：window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：在窗口中要显示网页的网址或路径。
窗口名称:被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top：、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。
4.name不能包含空格。
参数字符串：设置窗口参数，各参数用逗号隔开。
关闭窗口(window.close)
close()关闭窗口
用法：window.close(); //关闭本窗口 或
<窗口对象>.close(); //关闭指定的窗口
mywin=window.open('http://www.imooc.com'); //将新打开的窗口对象，存储在变量mywin中
mywin.close();
DOM(Document Object Model):文档对象模型,定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
<a href="http://www.imooc.com">JavaScript DOM</a>
通过ID获取元素
标签的id属性值是唯一的，通过身份证号就可以找到相对应的人。在网页中，通过id先找到标签，然后进行操作。
document.getElementById("id")
结果:null或[object HTMLParagraphElement]
注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
innerHTML属性
Object.innerHTML
注意:1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
改变HTML样式：
Object.style.property=new style;
显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
Object.style.display=value
value=none 此元素不会被显示(即隐藏)
value=block 此元素将显示为块级元素(即显示)
控制类名(className属性)
className属性设置或返回元素的class属性。
object.className=classname
作用:
1.获取元素的class属性
2.为网页内的某个元素指定一个css样式来更改该元素的外观
removeAttribute()方法删除指定的属性。
语义化的好处:1更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。
<html>
<head>...</head>
<body>...</body>
</html>
代码注释的语法:<!--注释文字 -->
<html>标签:根标签，所有的网页标签都在<html></html>中。
<head>标签:定义文档的头部,所有头部元素的容器.头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
<body>标签:网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签里的内容会在浏览器中显示出来。
<title>标签：网页的标题信息，它会出现在浏览器的标题栏中。
<p>标签:<p>段落文本</p>,添加段落。
<hx>标签：<hx>标题文本</hx>，标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级、二级、三级、四级、五级、六级标题。依据重要性递减。<h1>是最高的等级。注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。标题标签的样式都会加粗，h1标签字号最大，以此类推h6标签的字号最小。
<strong>和<em>标签：<em>表示强调，默认用斜体表示；<strong> 表示更强烈的强调，默认用粗体表示。习惯用<strong>表示强调。
<span>标签：对文字设置单独样式用的没有语义。
<q>标签:短文本引用,<q>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</q>，效果“庄生晓梦迷蝴蝶,望帝春心托杜鹃.”
<blockquote>标签:长文本引用，浏览器对<blockquote>标签的解析是缩进样式。
<br>标签：相当于word文档中的回车。xhtml1.0写法：<br/>；html4.01写法：<br>。现在一般使用xhtml1.0的版本的写法（其它标签也是），这种版本比较规范。与之前我们学过的标签不一样，<br/>标签是一个空标签,只需要写一个开始标签，这样的标签有<br/>、<hr/>和<img/>。
 :添加空格。
<hr>标签：添加水平横线，使文章看起来整齐些。浏览器中的默认样式线条比较粗，颜色为灰色。
<address>标签：<address>联系地址信息</address>，浏览器中显示的样式为斜体。
<code>标签：<code>代码语言</code>，当代码为一行时，使用<code>标签。
<pre>标签:<pre>代码段</pre>，当代码为多行时，使用<pre>标签。<pre>标签的主要作用:预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
<ul-li>标签：<ul>
<li>信息</li>
...
</ul>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，ul-li是没有前后顺序的信息列表。
<ol-li>标签：<ol>
<li>信息</li>
...
</ol>
ol-li在网页中显示的默认样式一般为:每项li前都自带一个序号，序号默认从1开始，ol-li是有前后顺序的信息列表。
<div>标签：在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个标签的作用就相当于一个容器。
逻辑部分:它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
给div命名，使逻辑更加清晰：<div id="版块名称">…</div>；div相当于划分成一个个房间，id就是房间号了。
<table>标签:在网页上展示表格效果,创建表格的五个元素：table、tbody、tr、th、td
1、table：整个表格以<table>标记开始、</table>标记结束。
2、tbody：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
3、tr：表格的一行，有几对tr表格就有几行。
4、td：表格的一个单元格，一行中包含几对td，说明一行中就有几列。
5、th：表格的头部的一个单元格，表格表头。
班级 学生数 平均成绩 //表头
一班 30 89
二班 35 85
注意：1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
<caption>标签:为表格添加标题和摘要;
标题:用以描述表格内容，标题的显示位置：表格上方。
摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化).
<table summary="表格简介文本"> //摘要
<caption>标题文本</caption>
<tr>
<td>…</td>
…
</tr>
…
</table>
<a>标签:1.实现超链接，<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
2.在新建浏览器窗口中打开链接:<a href="目标网址" target="_blank">链接显示的文本</a>
3.链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件
关键字：mailto：邮箱地址/cc=抄送地址/bcc=密件抄送地址/;多个收件人、抄送、密件抄送人/subject=邮 件主题/body=邮件内容。
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
完整的实例：<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主 题&body=邮件内容">发送</a>
<img>标签：插入图片。<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置.
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本.
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本).
4、图像可以是GIF，PNG，JPEG格式的图像文件.
表单标签:表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。使用HTML表单(form)与用户进行交互.<form method="传送方式" action="服务器文件">
1.<form> ：以<form>开始，以</form>结束，成对出现。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ：数据传送的方式(get/post).
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。
文本输入框、密码输入框:
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
文本域：当用户需要在表单中输入大段文字时，需要用到。<textarea rows="行数" cols="列数">文本</textarea>
单选框和复选框:单选框中的选项用户只能选择一项，复选框用户可以任意选择多项，甚至全选。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio"时，控件为单选框
当 type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP使用
4、checked：当设置 checked="checked" 时，该选项被默认选中。
注意:同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才能起到单选的作用。
下拉列表框：有效的节省网页空间，既可以单选、又可以多选。
单选：<select>
<option value="提交值" selected="selected">选项</option>
...
</select>
设置selected="selected"属性，则该选项就被默认选中。
多选：只需在<select>标签中设置multiple="multiple"属性，就可以实现多选功能.
在windows操作系统下，多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。
表单中有两种按钮：提交、重置。
提交按钮：
<input type="submit" value="提交">
type:只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字
重置按钮：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用 value:按钮上显示的文字
form表单中的label标签：获得焦点，把鼠标移动到文字上(男、女),同样可以激活控件进行选择输入。但是如果不加label,鼠标就必须移动到控件上面。
<label for="控件id名称">
注意：标签的for属性中的值应当与相关控件的id属性值一定要相同。
CSS代码语法：css样式由选择符和声明组成，而声明又由属性和值组成.eg：p{color:blue}
其中p就是选择符，花括号里的内容就是声明，color是属性，blue是值。
选择符:又称选择器，指明网页中要应用样式规则的元素.
声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分隔。当有多条声明时,中间用英文分号";"分隔
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内。
CSS注释代码：/*注释语句*/
CSS样式:全称为“层叠样式表”，主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。从CSS样式代码插入的形式来看可以分为以下3种：内联式、嵌入式和外部式。
内联式:把css代码直接写在现有的HTML标签中。<p style="color:red;font-size:12px">这里文字是红色</p>
嵌入式:写在当前的文件中。
<style type="text/css">
span{
color:red;
}
</style>
外部式(外联式):把css代码写在一个单独的外部文件中，文件以“.css”为扩展名，在<head>内（不是<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css"/>
注意：
1、css样式文件名称以有意义的英文字母命名，如main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
总结三种css插入方式：
内联：<span style="color:red;font-size:10px;" >text</span>
嵌入：<style type="text/css">span{color:red;font-size:10px;}</style>
外部：<link href="style.css" rel="stylesheet" type="text/css">
优先级顺序：内联式 > 嵌入式 > 外部式(相同权值的情况下)
嵌入式>外部式的前提：就近原则（离被设置元素越近优先级别越高）。
HTML+CSS基础课程
选择器：每一条css样式声明（定义）由两部分组成，形式如下：选择器{样式;}“选择器”指明了{}中的“样式”的作用对象。
标签选择器:其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。
p{font-size:12px;line-height:1.6em;}
类选择器：在css样式编码中最常用到。
.类选器名称{css样式代码;}
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器：ID选择器类似于类选择符
1、为标签设置id="ID名称"。
2、ID选择符的前面是井号（#）号。
类和ID选择器的区别:
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次，而类选择器可以使用多次。
2、只能使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器不能使用ID词列表。
正确写法：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课</p>
错误写法：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课</p>
子选择器：即大于符号(>)用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
包含(后代)选择器：即加入空格,用于选择指定标签元素下的后辈元素。
.first span{color:red;}
子选择器和包含选择器的区别：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器：功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {color:red;}
伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}为a标签鼠标滑过的状态设置字体颜色变红。
关于伪选择符：
其实 :hover 可以放在任意的标签上，比如说 p:hover，但它们的兼容性不好，所以比较常用的还是a:hover 的组合。
分组选择符:当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符(,)
为h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}相当于下面两行代码
h1{color:red;}
span{color:red;}
继承：继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 这里子元素为span标签。
注意：有一些css样式是不具有继承性的。p{border:1px solid red;}
这段代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没作用的。
特殊性:为同一个元素设置了不同的CSS样式代码，浏览器根据权值大小来判断使用哪种css样式的。
权值的规则:标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：继承的权值最低。
层叠：当有相同权重的样式存在时，根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}
最后p中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
重要性:使用!important为某些样式设置最高权值
p{color:red!important;} 注意：!important要写在分号的前面
p{color:green;}
这时p段落中的文本会显示red红色。
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
文字排版--字体：设置网页中的文字字体为宋体。
body{font-family:"宋体";}
注意不要设置不常用的字体，现在一般网页喜欢设置“微软雅黑”
body{font-family:"Microsoft Yahei";} 兼容性更好一些
或body{font-family:"微软雅黑";}
文字排版--字号、颜色：
设置网页中文字的字号为12像素，颜色设置为#666(灰色)：
body{font-size:12px;color:#666}
文字排版--粗体：
p span{font-weight:bold;}
文字排版--斜体：
p a{font-style:italic;}
文字排版--下划线：
p a{text-decoration:underline;}
文字排版--删除线：
.oldPrice{text-decoration:line-through;}
段落排版--缩进：
p{text-indent:2em;}注意：2em的意思就是文字的2倍大小。
段落排版--行间距（行高）：
p{line-height:1.5em;}
段落排版--中文字间距、字母间距：
设置字母与字母之间的间距: h1{letter-spacing:50px;}
设置英文单词之间的间距: h1{word-spacing:50px;}
段落排版--对齐:
实现文本居中/居左/居右显示：h1{text-align:center/left/right;}
元素分类:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
元素分类--块级元素：
将内联元素a转换为块状元素 a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，和父元素的宽度一致。
元素分类--内联元素:
将块状元素div转换为内联元素 div{display:inline;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类--内联块状元素:
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型-边框(一)：
围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是border代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed(虚线)|dotted(点线)|solid（实线）。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin|medium|thick(但不常用),最常还是用象素(px)。
盒子模型-边框(二):
为标签单独设置下边框，而其它三边都不设置边框样式.css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒模型-宽度和高度:
css内定义的宽(width)和高(height)指的是填充以里的内容范围。
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度同理。
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。
盒模型--填充:
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒模型--边界:
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
padding和margin的区别：padding在边框里，margin在边框外。
css布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）
流动模型：
流动（Flow）是默认的网页布局模式。
流动布局模型具有2个比较典型的特征：
第一点：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型：
块状元素独占一行，设置元素浮动就可以实现让两个块状元素并排显示。
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
设置两个div元素一行显示向左/右浮动。
div{
width:200px;
height:200px;
border:2px red solid;
float:left/right;
}
设置两个元素一左一右浮动代码如下:
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
层模型：
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--绝对定位：
设置position:absolute(表示绝对定位)，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
层模型--相对定位:
设置position:relative（表示相对定位），首先按static(float)方式生成一个元素，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
层模型--固定定位：
与absolute定位类型类似，但它的相对移动的坐标是视图本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
如下代码实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用：
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了。这里注意参照物可以不是浏览器了,而可以自由设置。
盒模型代码简写:
外边距(margin)、内边距(padding)和边框(border)设置四个方向的边距是按照顺时针方向设置的：上右下左。
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同
margin:10px 10px 10px 10px;可缩写为margin:10px;
2、如果top和bottom值相同、left和right的值相同
margin:10px 20px 10px 20px;可缩写为：margin:10px 20px;
3、如果left和right的值相同：
margin:10px 20px 30px 20px;可缩写为：margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
颜色值缩写:
当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
p{color:#000000;}缩写为：p{color: #000;}
p{color: #336699;}缩写为：p{color: #369;}
字体缩写：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
缩写为：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式至少要指定font-size和font-family属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、缩写时font-size与line-height中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
颜色值：
字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色 p{color:red;}
2、RGB颜色 这个与photoshop中的RGB颜色是一致的,由R(red)、G(green)、B(blue)三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是0-255之间的整数，也可以是0%-100%的百分数。如:p{color:rgb(20%,33%,25%);}
3、十六进制颜色
比较普遍使用的设置方法，其原理其实也是RGB设置,只是其每一项的值由0-255变成了十六进制00-ff。
p{color:#00ffff;}
长度值：
目前比较常用的长度单位px(像素)、em、%百分比,其实这三种单位都是相对单位。
1、像素
像素指的是显示器上的小点（CSS规范中假设"90像素=1英寸"）。目前大家倾向于使用像素（px）作为单位。
2、em
如果元素的font-size为14px,那么1em=14px；如果font-size为18px,那么1em=18px。
p{font-size:12px;text-indent:2em;}实现段落首行缩进24px（也就是两个字体大小的距离）。
注意一个特殊情况：
当给font-size设置单位为em时，此时计算标准以p的父元素的font-size为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果span中的字体“例子”字体大小就为11.2px(14 * 0.8=11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12*1.3=15.6px)
水平居中设置:分为行内元素和块状元素.块状元素又分为定宽块状元素和不定宽块状元素.
水平居中设置-行内元素：
当被设置元素为文本、图片等行内元素时，通过给父元素设置text-align:center来实现水平居中。
父元素和子元素：div是“我想要在父容器中水平居中显示”这个文本的父元素。
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
<style>
.txtCenter{
text-align:center;
}
</style>
水平居中设置-定宽块状元素：定宽块状元素(块状元素的宽度width为固定值)
满足定宽和块状两个条件的元素通过设置“左右margin”值为“auto”来实现居中。
设置div这个块状元素水平居中：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
<style>
div{
border:1px solid red;/*为了显示居中效果明显为div设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/*margin-left与margin-right设置为auto */
}
</style>
也可以写成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin”是可以随意设置的。
水平居中设置-不定宽块状元素：不定宽块状元素(块状元素的宽度width不固定)。
设置不定宽元素居中的方式有三种：
1加入 table 标签
2设置 display:inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3设置 position:relative 和 left:50%：采用相对定位的方式，将元素向左偏移50%。
方法一：利用table标签的长度自适应性--table其长度根据其内文本长度决定，因此可以看做一个定宽度块状元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置居中的元素外面加入一个table 标签(包括<tbody>、<tr>、<td>)。
第二步：为这个table设置“左右 margin 居中”。
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
/ul>
</td></tr>
</tbody>
</table>
</div>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
方法二：改变块级元素的display为inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</body>
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;/*列表样式无*/
margin:0;
padding:0;/*消除文本与div边框之间的间隙*/
display:inline;
}
.container li{
margin-right:8px;/*设置li文本之间的间隔*/
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法三：通过给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative 和left:-50%来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中设置:分为父元素高度确定的单行文本和多行文本。
垂直居中设置--单行文本:
设置父元素的height和line-height高度一致来实现。弊端:当文字内容的长度大于块的宽时，就有内容脱离了块。
<div class="container">
hi,imooc!
</div>
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
垂直居中设置-多行文本：
方法一：插入table(包括tbody、tr、td)标签，同时设置vertical-align:middle(竖直居中)，父元素设置此样式时，会对inline-block类型的子元素都有用。
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
table td{height:500px;background:#ccc}
因为td标签默认情况下就默认设置了vertical-align为middle，所以不需要显式地设置。
方法二：设置块级元素的display为table-cell(表格单元显示)，激活vertical-align属性，这种方法的好处是不用添加多余的无意义的标签，但是它的兼容性不是很好，不兼容IE6、7这样修改。
隐性改变display类型：
当为元素(display:none除外)设置以下2个句之一：
1. position:absolute
2. float:left或float:right
元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
a标签是行内元素,设置width是没有效果的,但是设置为position:absolute就行了。
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
JavaScript
定义变量：使用关键字var。语法:var 变量名
变量名可以任意取名，但要遵循命名规则：
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
定义函数：使用关键字function
function 函数名()
{
函数代码;
}
document.write():用于直接在网页中输出内容。
第一种:输出内容用""括起，直接输出""号内的内容。
document.write("I love JavaScript！");
第二种:通过变量，输出内容。
var mystr="hello world!";
document.write(mystr);
第三种:输出多项内容，内容之间用+号连接。
var mystr="hello";
document.write(mystr+"I love JavaScript");
第四种:输出HTML标签，并起作用，标签使用""括起来。
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
警告(alert消息对话框)
语法:alert(字符串或变量);
注:alert弹出消息对话框(包含一个确定按钮)。
确认(confirm消息对话框)
语法:confirm(str);
参数说明:
str：在消息对话框中要显示的文本
返回值: Boolean值,当用户点击"确定"按钮时，返回true点击"取消"按钮时，返回false
注: 通过返回值可以判断用户点击了什么按钮
提问(prompt)消息对话框
用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)
语法:prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本,不可修改 str2：文本框中的内容,可以修改
返回值:
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null
打开新窗口(window.open)
open()方法可以查找一个已经存在或者新建的浏览器窗口。
语法：window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：在窗口中要显示网页的网址或路径。
窗口名称:被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top：、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。
4.name不能包含空格。
参数字符串：设置窗口参数，各参数用逗号隔开。
关闭窗口(window.close)
close()关闭窗口
用法：window.close(); //关闭本窗口 或
<窗口对象>.close(); //关闭指定的窗口
mywin=window.open('http://www.imooc.com'); //将新打开的窗口对象，存储在变量mywin中
mywin.close();
DOM(Document Object Model):文档对象模型,定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
<a href="http://www.imooc.com">JavaScript DOM</a>
通过ID获取元素
标签的id属性值是唯一的，通过身份证号就可以找到相对应的人。在网页中，通过id先找到标签，然后进行操作。
document.getElementById("id")
结果:null或[object HTMLParagraphElement]
注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
innerHTML属性
Object.innerHTML
注意:1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
改变HTML样式：
Object.style.property=new style;
显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
Object.style.display=value
value=none 此元素不会被显示(即隐藏)
value=block 此元素将显示为块级元素(即显示)
控制类名(className属性)
className属性设置或返回元素的class属性。
object.className=classname
作用:
1.获取元素的class属性
2.为网页内的某个元素指定一个css样式来更改该元素的外观
removeAttribute()方法删除指定的属性。
0 0
- HTML+CSS+JS的基础知识笔记
- html+css+js基础知识
- HTML JS CSS 基础知识
- HTML/CSS基础知识学习笔记
- HTML和CSS的基础知识
- html和css的基础知识
- css和javascript的一些笔记（二） js基础知识
- HTML学习笔记之CSS基础知识
- 一、HTML+CSS基础知识学习笔记
- [置顶]学习笔记：HTML+CSS 基础知识
- HTML+CSS+JS学习笔记
- HTML+CSS+JS学习笔记
- html+js+css+jsp笔记
- HTML+CSS+JS学习笔记
- JS+HTML+CSS 学习笔记
- 关于Js、jq css html常用属性的笔记
- HTML/CSS一些需要注意的基础知识
- 前端基础笔记HTML&CSS&JS
- VS2015下VOpenCV3.2 +Kinect V2 环境配置
- javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
- 趁着年轻应该完成的几件事儿
- iBET Adidas Yeezy 350 V2 Lucky Draw
- CSS布局 ——从display，position， float属性谈起
- HTML+CSS+JS的基础知识笔记
- CS231n: Convolutional Neural Networks for Visual Recognition
- 【Oracle】sql循环遍历查询结果
- 图标制作工具
- linux安装jdk及配置环境变量
- C# 连接 Oracle 的几种方式
- PHP取整数函数常用的四种方法
- Maven项目管理工具初体验
- Caffe中新建Layer--改写Faster-RCNN的proposal layer
