html+css+js(未完待续)
1、 HTML简介
HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。
2、 HTML的标记组成
HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如<body></body>、<p></p>等
1) 单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫单标记。XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。常见的单标记如<br />、<hr />等。
2) 双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线，语法形如：<标记>内容</标记>。例如：<p>段落</p>
3) XHTML要求所有标记均为小写，且所有标记属性必须添加双引号
4) 标记对不能交叉
3、 HTML基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!--下面是网页的正文-->
</body>
</html>
1) <title>标记对不能放在<body>标记对中，同理，其它表示内容的标记也不能放在<head>标记对中
2) <html></html>表示HTML语言，在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。
3) HTML注释表示为<!--注释内容-->
html文字与图像
1、 设置文字字体、大小与颜色
语法：<font face=”宋体” size=”1” color=”red”>文字</font>
1) 设置文字的字体、大小、颜色需要使用<font>标签
2) Face属性设置文字字体，多种字体用逗号隔开
3) Size属性设置文字大小
4) Color属性设置文字颜色，参数值可以是RGB颜色值，如#000000，也可以用颜色的单词表示，如red
2、 设置正文的标题
语法：<h#>主题文字</h#>，其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排列由大到小(数字越大，标题字号就越小)。
3、 设置段落
语法：<p>这里表示段落</p>
4、 强制换行与不换行
1) 强制换行：<br />
2) 强制不换行：<nobr />
5、 字体标记
1) 物理字体
<b>…</b> 设置成粗体 <i>…</i> 设置成斜体
<u>…</u> 增加下划线 <s>…</s> 增加删除线
<sup>…</sup> 设置成上标字体 <sub>…</sub> 设置成下标字体
<tt>…</tt> 设置成打字机字体
2) 逻辑字体
<em>…</em> 强调文字 <strong>…</strong> 字体加重
<code>…</code> 显示编程代码 <samp>…</samp> 显示救命文字
<kbd>…</kbd> 显示键盘按键文字 <small>…</small> 缩小文字
<big>…</big> 放大文字
6、 文字对齐
1) 文字对齐使用标签的align属性，例如：<p align=”#”>对齐文字</p>，其中“#”代码表示方位，可选择”left”(向左)、”right”(向右)、”center”(居中)。Align属性可用于<p>、<div>、<table>、<td>等标签。
2) 居中对齐可使用<center>标签，例如：<center>居中文字</center>
7、 列表
1) 无序列表
<ul type=”#”>
<li>表项一</li>
<li>表项二</li>
</ul>
Type=”#”取值可为disc(默认，实心黑点)、square(实心黑方块)、circle(空心圆)
2) 有序列表
<ol type=”#”>
<li>表项一</li>
<li>表项二</li>
</ol>
Type=”#”取值可为A、a、I、i、1等
3) 定义列表
<dl>
<dt>项目</dt>
<dd>描述一</dd>
<dd>描述二</dd>
</dl>
<dt>标签定义了定义列表中的项目，<dd>标签在定义列表中定义条目的定义部分，可以理解为对定义条目进行特征描述。
4) 无序列表、有序列表、定义列表间可以相互嵌套，但一定要注意嵌套时不能交叉
8、 其它方式修饰文本
1) 欲格式化文本：<pre>…</pre>
2) 代码样式斜体字渲染：<var>…</var>
3) 表示它所包含的文本对某个参考文献的引用：<cite>…</cite>
9、 图像
1) 插入图像基本语法：<img src=”#” />，其中#代表图像的URL路径，示例：<img src=”c.jpg” />
2) 图像无法显示时的提示信息，使用alt属性，如：<img src=”c.jpg” alt=”风景” />
3) 图像的大小：<img src=”c.jpg” width=”400px” height=”300px” />，width属性定义图像的宽度，height属性定义图像的高度
4) 图像和文字对齐：<img src=”c.jpg” align=”top” />，align属性的取值为top(顶部)、middle(中间)、bottom(默认，底部)
5) 图像的边框：<img src=”c.jpg” border=”0” />，border设置为0时表示图像不显示边框，否则设置成需要的边框大小
10、移动的字体和图片
1) 移动基本语法：<marquee>移动文字或图片</marquee>，默认是向左循环移动，移动范围在其父对象的有效区域内。
2) 文本移动的方向：<marquee direction=”#”>…</marquee>，其中#可以选择left、right、up、down
3) 文本的滚动循环：<marquee behavior=”#”>…</marquee>，其中#可以选择scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
4) 如果设置文本来回移动，还可以设置循环次数：<marquee loop=”#”>…</marquee>，其中#为代表循环的次数。
5) 文本的移动速度：<marquee scrollamount=”#”>…</marquee>，其中#设置移动的速度，取正整数。数值越大，速度越快。
6) 移动对象的延时：<marquee scrolldelay=”1000”>我走一走，停一停</marquee>，scrolldelay以时间为单位，用毫秒表示。
7) 移动的区域和背景：<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>
超级链接
1、 基本概念
1) 统一资源定位器(URL)：每一个网页的唯一地址，一个URL构成为protocol://machinename[:port]/directory/filename。其中protocol是访问协议，如http、https、ftp等，machinename是存放资源的主机IP地址，通常以域名的形式出现，port是服务器使用的端口，directory和filename是资源的路径和文件名。
2) 绝对路径：HTML绝对路径指带有域名文件的完整路径
3) 文档相对路径：当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的上一级目录。
4) 站点根目录相对路径：提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始，表示站点根文件夹。
2、 文字链接
语法：<a href=”URL” target=”target”>链接文字</a>
1) href属性表示链接跳转地址
2) target属性定义链接网页的打开方式，其值可以为_blank(新窗口)、_parent(父框架)、_self(当前窗口)、_top(清除所有被包含的框架并将文档载入整个浏览器窗口)
3、 链接的注释title属性
<a href=”URL” title=”注释信息”>链接文字</a>
4、 图片链接
<a href=”URL”><img src=”c.jpg”></a>将链接文字改成插入图像即可
5、 锚点链接
定义锚点：<a name=”锚点”></a>
链接锚点：<a href=”#锚点”>链接文字</a>
6、 邮箱地址链接mailto
<a href=”mailto:邮箱地址”>链接文字</a>
7、 图像映射
<img src=”1.jpg” usemap=”#map” />
<map name=”map”>
<area shape=”rect” href=”1.html” coords=”140,20,280,60”>
<area shape=”poly” href=”2.html” coords=”100,100,180,50,200,140”>
<area shape=”circle” href=”3.html” coords=”80,100,60”>
</map>
1）图像映射实现单击同一图像中的不同位置，出现不同的链接，有矩形、圆形和多边形，分别用rect、circle、poly表示。
2）图像映射有分为两步：
² 在图像标签中使用usemap属性，其值为#号加上map标签的名称，即map标签的name属性（如#map）。
² 定义<map>标签，并使用name属性命名，方便其它地方调用。然后用<area>标签定义图片上的热区形状(shape属性)、位置(coords属性)及链接地址(href属性)。
表单
1、 创建表单
语法：<form name=”form” action=”url” method=”post”></form>
Form中的name属性给form表单命名，action属性表示表单提交后发送的URL地址，发送的方式用method属性表示，可选择的参数有Get和Post。Get传输量比较小，Post传输量比较大。
2、 文本框和密码框
1) 文本框：<input type=”text” name=”text” size=”6” maxlength=”6” value=”文字” disabled=”disabled” readonly=”readonly” />
说明：name属性给文本框命名，size属性设置文本框的显示大小，maxlength属性设置文本框最大可接受的字符数，value属性设置文本框默认显示值，disabled属性设置文本框是否可用，readonly属性设置文本框是否只读。
2) 密码框：<input type=”password” />
密码框的属性除了type设置成password，与文本框不一致外，其它属性与文本框一致。
3、 单选框和复选框
1) 单选框：<input type=”radio” name=”radio” checked=”checked” value=”v” />
说明：设置checked属性表示单选框被选中
2) 复选框：<input type=”checkbox” name=”ck” checked=”checked” value=”v” />
4、 下拉列表和文本域
1) 下拉列表：
<select name=”select” size=”2” multiple=” multiple”>
<option value=”1” selected=”selected”>列表项一</option>
<option value=”2”>列表项二</option>
</select>
说明：select标签的size属性表示下拉列表的可见选项数，默认为1，multiple属性规定可以选择多个选项。Option标签的selected标签表示当前选被默认选中，即在1个可见选项数时下拉列表显示此值。
2) 文本域
<textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea>
说明：textarea标签的rows属性表示文本区内的可见行数，cols属性表示文本区内的可见宽度。
5、 按钮
1) 普通按钮：<input type=”button” name=”bt” value=”按钮” />
<button name=”bt”>普通按钮</button>
2) 提交按钮：<input type=”submit” name=”sm” value=”提交” />
3) 重置按钮：<input type=”reset” name=”rs” value=”重置” />
6、 图像域与文件域
1) 图像域：<input type=”image” name=”image” src=”c.jpg” alt=”描述” />
2) 文件域：<input type=”file” name=”file” />定义输入字段和浏览按钮，用于文件上传
7、 隐藏表单
<input type=”hidden” name=”hi” value=”v” />隐藏表单用于在浏览器与服务器之间传递一些必要的参数或选项，而这些参数或选项不需要显示在页面中。
表格
1、表格的基本语法
<table width=”100” border=”1” height=”100”>
<caption>表格标题</caption>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>单元格一</td><td>单元格二</td></tr>
<tr><td cols=”2”>表尾</td></tr>
</table>
² 在HTML中创建表格使用<table>标签对，可对其设置宽度、高度、边框、背景等。
² <caption>标签为整个表格的标题，它不占用表格行，是位于表格外的一个对整个表格进行说明的大标题，可以使用align属性设置标题相对于表格的位置，值为left、right、top、bottom。
² 使用tr定义表格行，然后用th或td定义表格单元格。
² 可以使用thead定义表头，tbody定义表格主体，tfoot定义表尾，只需要把相应的行（tr和td都需要）放置在标记对中即可。
2、跨多行、多列表元
1) 跨多行表元
<td rowspan=”3”>…</td>
² 跨多行表元语法是在th和td上加rowspan表示，rowspan后面的值是数字，数字表示跨多少行表元。
2) 跨多列表元
<td colspan=”3”>…</td>
² 跨多列表元与跨多行表元一样，也是放在th和td上，表示在一行中跨多少列表元，语法是用colspan表示。
3、设置表格大小
1) 设置表格宽度和高度
<table width=”100” height=”100”>…</table>
² 表格宽度用width属性定义，表格高度用height属性定义，其取值可以为像素值或百分比。
2) 设置表格边框
<table border=”1”>…</table>
² 表格边框使用table标记的border 属性定义，其后面的值是宽度值，表示对象的边框宽度，数值越大，宽度越大。
4、设置表格背景
1) 设置整个表格背景
<table bgcolor=”#ff0000”>…</table>
² 设置整个表格的背景是定义<table>标签的bgcolor属性，其值可为颜色名、十六进制颜色值或者rgb代码的背景颜色。
2) 设置表格中单元格的背景
<td bgcolor=”#ff0000”>…</td>
² 设置单元格的背景颜色只需在td和th标签上定义bgcolor属性，如果设置某一行的背景颜色，也可以在tr标签中定义bgcolor属性。
5、设置单元格边距
1) 设置单元格与内容之间的距离
<td cellpadding=”10”>…</td>
² 设置单元格与内容之间的距离只需在td和th标签上定义cellpadding属性，其值为像素值。
2) 设置两个单元格之间的距离
<td cellspacing=”10”>…</td>
² 定义两个单元格之间的空白在td和th标签上使用cellspacing属性，其值同样为像素值。
6、表格对齐
1）表格内文字对齐
<tr align=#>…</tr>
<td align=#>…</td>
² 文字对齐使用align属性定义，取值可为left、center、right。
² 在表格内，文字对齐有在tr、th、td中对齐，在tr设置对齐方式后，tr内的th和td都按设置的要求对齐，同理在多行中可以设置不同的tr对齐方式，th和td都可以设置其里面的文字或图片的对齐。
2）表格在网页中对齐
<table align=#>…</table>
² 表格在网页中的对齐是在<table></table>标记对中使用align属性定义。
框架
1、 框架基本语法
<frameset cols=”50%,50%”>
<frame scr=”1.html” />
<frame src=”2.html” />
</frameset>
² 框架的基本语法是由<frameset></frameset>标记对表示，标记对放在<head></head>标记对后面，使用了框架，就不再需要使用<body></body>标记对，即<frameset>与<body>标记对不能同时出现在一个页面中。
² <frame>标记对表示在框架内载入什么文件，用src属性指定。
2、 框架分栏
2) 垂直分栏
<frameset cols=”50%,*”>…</frameset>
² 垂直分栏是在<frameset>中使用cols属性表示，后面的数字表示列宽，可用数值、百分比和通配符*（只能用于最后一个数字）表示
3) 水平分栏
<frameset rows=”50%,*”>…</frameset>
² 水平分栏是在<frameset>中使用rows属性表示，注意一个框架不能同时出现垂直分栏和水平分栏，即cols和rows不能同时出现，如果想又有垂直分栏又有水平分栏，可以使用框架嵌套实现
3、 框架的常用属性
1） 设置不可调节框架大小
<frameset noresize=”noresize”>…</frameset>
² 默认框架大小是可以调节的，如果不需要用户去对框架窗口进行大小调节，必须设置框架的noresize属性
2） 浏览器不支持框架
<noframes>对不起，您的浏览器不支持框架！</noframes>
² <noframes>标记对用在<frameset>标记对之外，当浏览器不支持<frameset>标记时，将不显示框架内容，而是显示<noframes>标记对中的内容。
3） 设置框架边框
<frameset frameborder=# border=#>
² 框架的边框设置可由frameborder属性来完成，默认有边框，它有两种表示方法，英语表示法：yes(有边框)、no(无边框)，数字表示法：1(有边框)、0(无边框)
² 当设置了框架的边框时，可用border属性来设置边框的宽度
4） 设置滚动条
<frame src=”1.html” scrolling=”no” />
² 设置滚动条是在<frame>标签里，用scrolling属性，可取值auto(默认，自动)、yes(有滚动条)、no(无滚动条)
4、 框架链接
1） 导航框架
<frameset cols=”20%,*”>
<frame src=”导航框架链接.html” />
<frame src=”main.html” name=”myFrame” />
</frameset>
<a href=”1.html” target=”myFrame”>导航框架链接</a>
² 导航框架链接是在网页框架的<frame>中加入name属性，表示该<frame>的名称，然后通过用<a>标记的链接，并用target等于<frame>的名称，那所得到的链接地址网页会显示在该<frame>中
2） 内联框架（浮动框架）
<iframe src=”1.html” width=”400” height=”300”></iframe>
² 内联框架存在于<body></body>的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容。
² 浮动框架用<iframe></iframe>标记对或<iframe />表示，可以用width和height属性设置其大小。
网页多媒体
1、 插入网页多媒体
基本语法：<embed src=”1.mp3” />，src指定插入网页的多媒体路径
2、 设置自动播放
<embed src=”1.mp3” autostart=”true” />
Autostart表示自动播放，可取值true(默认值，自动播放)、false(不自动播放)
3、 设置循环播放
<embed src=”1.mp3” loop=”true” />
Loop属性用来设置多媒体文件的循环播放，可取值true(无限次数)、false(不循环播放)、<数值>(规定循环的次数)
4、 隐藏控制面板
<embed src=”1.mp3” hidden=”true” />
Hidden属性用来设置多媒体控制面板的显示与隐藏，可取值true(隐藏)、false(显示)、no(效果与false一样)
5、 设置面板大小
<embed src=”1.mp3” width=”400” height=”300” />
6、 对齐方式
<embed src=”1.mp3” align=”left” />
Align属性可以设置多媒体控制面板的对齐方式，取值为：
² Center：控制面板居中
² Left：控制面板居左
² Right：控制面板居右
² Top：控制面板的顶部与当前行中的最高对象的顶部对齐
² Bottom:控制面板的底部与当前行中的对象的基线对齐
² Baseline：控制面板的底部与文本的基线对齐
² Texttop：控制面板的顶部与当前行中的最高的文字顶部对齐
² Middle：控制面板的中间与当前行的基线对齐
² Absmiddle：控制面板的中间与当前文本或对象的中间对齐
² Absbottom：控制面板的底部与文字的底部对齐
Css 部分
基本格式：
三种格式：（CSS 语法由三部分构成：选择器、属性和值）
例：body {color: blue}
1、派生选择器
例：
Css部分：
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
Html文件部分:
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
2、id 选择器（选择器以 "#" 来定义）：
例：
Css部分：
#red {color:red;}
#green {color:green;}
Html 文本：
<p
id="red"
>这个段落是红色。</p>
<p
id="green"
>这个段落是绿色。</p>
3、类选择器
例：
Css部分：
.center {text-align: center}
Html文本：
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
如何插入样式表
1、外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
3、内联样式
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
4、多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
css背景
1、背景色
background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
例：这条规则把元素的背景设置为灰色：p {background-color: gray;}
2、背景图像
background-image 属性为元素设置背景图像。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
例：如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
3、背景重复
background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。
例：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
4、背景定位
background-position 属性改变图像在背景中的位置：
例：在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
background-position 属性提供值有很多方法
a) background-position属性后面的值可为关键字：
b) background-position属性后面的值可为百分数：
例background-position:50% 50%;
c) background-position属性后面的值可为长度值：
例：background-position:50px 100px;
5、背景关联
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
css文本
1、文本颜色：text-indent 属性：
例：p {background-color: gray;}
a) 使用负值：
例：{text-indent: -5em;}
注意：在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
b) 使用百分比值
例：p {text-indent: 20%;}
2、水平对齐：text-algin属性：
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
3、字间隔：word-spacing 属性
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">This is a paragraph. The spaces between words will be decreased.</p>
<p class="tight">This is a paragraph. The spaces between words will be increased.</p>
5、字符转换text-transform 属性
text-transform 属性处理文本的大小写。这个属性有 4 个值：none 、uppercase 、lowercase 、capitalize 。
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
例：h1 {text-transform: uppercase}
6、文本装饰
text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：none 、underline、overline 、line-through、blink。
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
a {text-decoration: none;}
7、direction 属性规定文本的方向 / 书写方向。
该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。
实例：
把文本方向设置为“从右向左”：div { direction: rtl }
CSS 字体
1、 font 属性
解释：简写属性在一个声明中设置所有字体属性。
可以按顺序设置如下属性：
u font-style
u font-variant
u font-weight
u font-size/line-height
u font-family
可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
实例：
在一个声明中设置所有字体属性：
p.ex1 {
font:italic arial,sans-serif;
}
p.ex2 {
font:italic bold 12px/20px arial,sans-serif;
}
2、 font-family 属性
定义： font-family 属性用于设置字体系列
例：如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
body {font-family: sans-serif;}
3、 font-style 属性
定义：font-style 属性定义字体的风格
可能值：
|
normal |
默认值。浏览器显示一个标准的字体样式。 |
|
italic |
浏览器会显示一个斜体的字体样式。 |
|
oblique |
浏览器会显示一个倾斜的字体样式。 |
|
inherit |
规定应该从父元素继承字体样式。 |
实例：
h1 {
font-size:250%;
}
4、 font-variant 属性
定义：设置小型大写字母的字体显示文本，这意味着所有的小写字母均换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
可能值：
|
normal |
默认值。浏览器会显示一个标准的字体。 |
|
small-caps |
浏览器会显示小型大写字母的字体。 |
|
inherit |
规定应该从父元素继承 font-variant 属性的值。 |
实例：
p.small
{
font-variant:small-caps;
}
5、 font-weight 属性
定义：设置文本的粗细
可能的值：
|
normal |
默认值。定义标准的字符。 |
|
bold |
定义粗体字符。 |
|
bolder |
定义更粗的字符。 |
|
lighter |
定义更细的字符。 |
|
100 200 300 400 500 600 700 800 900 |
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
|
inherit |
规定应该从父元素继承字体的粗细。 |
实例：
p.normal {font-weight:normal;}
6、 font-size 属性
定义：可设置字体的尺寸
可能的值：
|
xx-small x-small small medium large x-large xx-large |
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。 |
|
smaller |
把 font-size 设置为比父元素更小的尺寸。 |
|
larger |
把 font-size 设置为比父元素更大的尺寸。 |
|
length |
把 font-size 设置为一个固定的值。 |
|
% |
把 font-size 设置为基于父元素的一个百分比值。 |
|
inherit |
规定应该从父元素继承字体尺寸。 |
实例：
h1 {font-size:250%;}
7、 line-height 属性
定义：设置行间的距离（行高）
可能值：
|
normal |
默认。设置合理的行间距。 |
|
number |
设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
|
length |
设置固定的行间距。 |
|
% |
基于当前字体尺寸的百分比行间距。 |
|
inherit |
规定应该从父元素继承 line-height 属性的值。 |
实例
p.small {line-height:90%}
CSS 列表
1、 设置所有的列表属性
定义：list-style 简写属性在一个声明中设置所有的列表属性。
可能值：
|
list-style-type |
设置列表项标记的类型。参阅：list-style-type 中可能的值。 |
|
list-style-position |
设置在何处放置列表项标记。参阅：list-style-position 中可能的值。 |
|
list-style-image |
使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。 |
|
inherit |
规定应该从父元素继承 list-style 属性的值。 |
实例：
ul{
list-style:square inside url('/i/arrow.gif');
}
2、 list-style-type 属性
定义：设置列表项标记的类型
可能值：
实例：
ul.circle {list-style-type:circle;}
3、 list-style-position 属性
定义：设置在何处放置列表项标记
可能值：
实例：
ul { list-style-position:inside;}
4、 list-style-image 属性
定义：使用图像来替换列表项的标记
可能值：
实例：
ul { list-style-image:url("/i/arrow.gif");}
CSS 表格
所有属性列表：
1、 border-collapse 属性
定义：设置表格的边框是否被合并为一个单一的边框
可能值：
实例：
table { border-collapse:collapse; }
2、 border-spacing 属性
定义：设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
可能值：
实例：
table { border-spacing:10px 50px; }
3、 caption-side 属性
定义：设置表格标题的位置
可能值：
实例：
caption { caption-side:bottom; }
4、 empty-cells 属性
定义：设置是否显示表格中的空单元格（仅用于“分离边框”模式）
可能值：
实例：
table { empty-cells:hide; }
5、 table-layout 属性
定义：用来显示表格单元格、行、列的算法规则
可能值：
实例：
table { table-layout:fixed; }
CSS 框模型概述
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
CSS 内边距
单边内边距属性：
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
u padding-top
u padding-right
u padding-bottom
u padding-left
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
例：h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
CSS 边框
1、 border 简写
定义：属性在一个声明设置所有的边框属性（给4个边框设置相同的值）
可以按顺序设置如下属性：
l border-width
l border-style
l border-color
实例：
p { border:5px solid red;}
2、 4个边框分别设置
以上边框为例：
可以按顺序设置如下属性
l border-top-width
l border-top-style
l border-top-color
实例
p {
border-style:solid;
border-top:thick double #ff0000;}
CSS 外边距
margin 属性
定义：属性在一个声明设置所有的外边框属性（给4个边框设置相同的值）
可以按顺序设置如下属性：
u margin-top
u margin-right
u margin-bottom
u margin-left
实例：
p {margin: 20px 30px 30px 20px;}
Javascript 部分
javascript简介
概念：js是一门基于对象和事件驱动的并且具有安全性能的弱类型脚本语言
作用：处理页面控件的动态效果
处理数据输入以及提交前的数据验证
特点：简单性 安全性 动态性 跨平台 面向对象 解释执行
跨平台通过浏览实现 与操作系统无关
通常被嵌入到html网页中
运行环境：浏览器(firefox ie chrome sufrue opera)
编写js的方式：
①、外部导入式 *.js 语法<script type=”text/jaascript” src=’路径……js’></script>
②、直接嵌入到html标签中
<script type=”text/javascript”>
js代码
</script>
js中的输出语句：
document.write(参数或者字符串);
alert(“”);弹出消息框
区别：document.write()会解析html标签
alert()将html当成字符串处理
javascript基本语法
定义变量统一用var关键字
语法：var 变量名称=变量值
标示符：①、由字母数字下划线构成 不能以数字开头 不能是关键字 严格区分大小写
数据类型：
数值型：number
字符串：string
布尔型：boolean
特殊数据类型：undefined 空的 未定义的 未赋值的
空值：null
引用类型object function
检测参数的数据类型：typeof（）返回该数据类型对应的字符串
两个等号==和三个等号===的用法
==：比较值相等 与数据类型无关
===：比较全等 与数值和数据类型都有关
布尔环境：遇到if自动转换成布尔值
字符串string中的布尔环境：空为假 非空为真
数值number中的布尔环境：0为假 非0为真
number与string之间的关系
①、遇到+做拼接操作
②、需要做运算操作时，要把字符串转换成数值型
转换方法1、字符串*1 变成数值型
转换方法2：Number(字符串) 转换成数值型
javascript函数
关键字：function
语法：function 函数名称([参数])
{
函数体
}
无参数无返回值
function f()
{
…………..
}
无参数有返回值
function f()
{
return ‘XXX;
}
有参数无返回值
function f(参数名称){ 函数体 }
有参数有返回值
function f(参数名称)
{
return 返回值;
}
在函数中，当局部变量名称与全局变量冲突时 函数体内选用的是局部变量
javascript类型转换
NaN:非数值 非number或者undefined与number做运算操作时会返回NaN
isNaN：判断是否是非数值，是非数值返回true 不是则返回false 与参数的数据类型无关
parseInt:解析字符串或者数值转换成一个整数，只能解析以number开头的数值或者字符串
解析以非number类型开头的返回NaN
parseFloat：解析字符串或者数值转换成一个小数，只能解析以number开头的数值或者字符串
解析以非number类型开头的返回NaN
javascript内置对象
数组对象Array 存储任意类型的数据
属性：length属性 获取数组的长度
var a = [‘zhangsan’,19,true];
var b = new Array(“”,””,””);
var c = new Array(length) length只能是一个整数
空数组 var d = [] / var d = new Array()
没有赋值的数组元素或者越界访问数组元素值统一为undefined
js中数组长度是可变的，也就是说我们可以任意的去给length赋值
数组的最大下表为length-1 长度为最大下标+1
concat() 数组与数组或者字符串拼接返回一个更长的新数组
join()将数组中的所有元素组成一个长得字符串（将数组转换成字符串的方法）
pop()移除数组的最后一个元素 并返回该元素 移除之后数组长度-1
push()向数组的尾部追加一个新的元素 返回新数组的长度
reverse()数组元素逆序
sort()数组元素值按照ASIIC从小到大排序
字符串对象String
属性:length获取字符串的长度
charAt()根据索引找字符
indexOf()查找字符串第一次出现的位置 没有返回-1
lastIndexOf（）查找字符串最后一次出现的位置 没有返回-1
substr(a,b)从a索引截取b个字符
substring(a,b)从a索引截取到b索引 包括a不包括b
replace(old,new)用新的喜欢旧的 直接写的时候只替换第一个
replace(/要替换的内容|ZZ|XXX/gmi ,new)
split()字符串分割 返回数组
toLowerCase()转换成小写字母
toUpperCase()转换成大写
数学对象Math
abs()绝对值 max()最大值 min()最小值 ceil()向上取整 floor()向下去整
round()四舍五入 random()随机数 0--1之间的随机小数 sqrt() pow()
日期对象Date
var date = new Date();//获取当前日期
var date = new Date(‘2013/12/21’);
toLocaleString()将格林威治时间格式转换成北京时间格式
getTime()获取从1970年到指定日期之间所经过的毫秒数
getYear()获取年份
getDate()获取日期
getDay()获取星期几 返回0--6之间的整数
getMonth()获取月份 返回0--11之间的整数
getHours()获取小时数
getMinutes()获取分钟数
getSeconds()获取秒数
javascript之window对象
定时器：
setTimeout:多少秒之后执行一次
语法：setTimeout(“js/函数名称”,毫秒数)
clearTimeout(定时器的名称)
setInterval:每隔多少时间执行一次
语法：setInterval(“js/函数名称”,毫秒数)
clearInterval(定时器)
属性：
name：名称
status：状态栏的信息
方法：
alert()弹出消息框
confirm() 确认对话框
prompt(提示信息,默认值) 输入对话框
open(地址,name, 参数规格设置)弹出一个新的窗口
showModalDialog(地址,name, 参数规格设置)
javascript之window其他窗口对象
location地址对象
属性：href 获取或者设置当前页面的url
方法：
href(地址);跳转到某一个指定的页面
reload()页面刷新
replace(地址)页面替换
history历史对象
go() 去 go(1) 前进 go(0)刷新 go(-1)后退
back()后退 forward()前进跳转
navigator浏览器对象
属性:navigator.appName 获取当前浏览器的名称
navigator.appVersion 获取当前浏览器的版本
screen屏幕对象
screen.width获取分辨率的水平宽度
screen.height获取分辨率的垂直高度
javascript之document文档对象
属性：bgColor背景颜色 title标题
方法：
document.write()输出信息
document.getElementById(‘id’) 根据id找对象 返回一个对象 id唯一
document.getElementsByName(“name”)根据name找对象 返回对象数组
document.getElementsByName(“name”)[下标] 找到某一个指定的对象
document.getElementsByTagName(“tag”)根据标签名称找对象 返回对象数组
document.getElementsByTagName(“tag”)[下标]
javascript之event对象与事件
event对象
event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
event对象的属性
1）clientX或x
返回当事件被触发时，鼠标指针的水平坐标
2）clientY或y
返回当事件被触发时，鼠标指针的垂直坐标
3）keyCode
获取键盘事件发生时键盘的按键值。为一个int型数据。比如字母A的keyCode值为65，回车键的 keyCode值为13。
案例
1）当鼠标在一下区域移动时，在状态栏输出其所在的坐标
查看源代码
2）当按键抬起时，提示除按键码
查看源代码
一般事件
页面事件
1）onload 载入页面事件
2）onunload 卸载页面事件
鼠标事件
1）onclick 鼠标单击事件
2）ondblclick 鼠标双击事件
3）onmousemove 鼠标移动事件
4）onmousedown 鼠标按下事件
5）onmouseup 鼠标抬起事件
6）onmouseover 鼠标移入事件
7）onmouseout 鼠标移出事件
键盘事件
1）onkeydown 键按下事件
2）onkeyup 键抬起事件
表单事件
1）onsubmit 表单提交事件
其他事件
1）onfocus 获得焦点事件
2）onblur 失去焦点事件
3）onchange 内容改变事件
---------promise 源码（手写）
let promise = function(executor){
let self = this;
//c处于等待状态
this.status = 'pending';
//值
this.value = undefined;
//原因
this.reason = undefined;
function resolve(value){
if(self.status == "pending"){
self.status = "resolve";
self.value = value;
}
}
function reject(reason){
if(self.status == "pending"){
self.status = "reject";
self.reason = reason;
}
}
executor(resolve, reject);
}
promise.prototype.then = function(infulfilled, inrejected){
if (this.status === 'resolved') {
infulfilled(this.value);
}
if (this.status === 'rejected') {
inrejected(this.reason);
}
}
html+css+js(未完待续)相关推荐
- 学习前端的实用网站——未完待续
学习前端的实用网站--未完待续 一.学习类网站 1.视频教程 2.技术分享 3.大牛博客 4.参考手册 二.功能类网站 1.颜色 2.图标 3.字体 4.素材 三.辅助类网站 一.学习类网站 1.视频 ...
- javascript有用小功能总结(未完待续)
1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...
- Spring Boot web开发（未完待续）
addViewController请求 attention: 想要把网站的图标换掉就在static下放一个 favicon.ico 的图标图片即可 Spring MVC 5.0.5官方文档 stati ...
- GKCTF(MISCCRYPTO部分）（未完待续。。）
写在前面: 嘎嘎,又是被比赛虐的一天(连续虐了三天呜呜呜,安恒月赛等等在写嘎嘎) 部分wp,剩下的一题目前还不会,这次可能会标未完待续嘎嘎 crypto 0x01小学生的密码学 嘎,看到题目描述 e( ...
- 总结2019，规划2020，未完待续
在这么一个生活富足.世界和平的年代时间总是那么短暂,2019也成为了过去式,2020新的一年也到来了,所以这是一篇总结文,写给迷茫的我自己,不知道自己要干什么的时候看看这篇博文,总结2019,展望20 ...
- 《今日简史》读书笔记（未完待续）
<今日简史>读书笔记(未完待续) 这本书是尤瓦尔·赫拉利的简史三部曲的最后一本,前2本书是<未来简史>和<人类简史>.根据豆瓣上网友的评价,这本书是尤瓦尔·赫拉利写 ...
- linux引数列项目过长,Linux 命令个人总结====== 未完待续 个人认为比较重要
Linux 命令个人总结====== 未完待续 man [功能说明]: 查看帮助 [语法格式]: man [123456789]命令.文件. [选项参数]: 数字"1"表示用户命令 ...
- CC2530学习路线-基础实验-串口通讯发送字符串(4 未完待续)
目录 1. 前期预备知识 1.1 串口通讯电路图 1.2 实验相关寄存器 1.2 常用波特率设置 本章未完待续..... 原来写的文章已经丢失了,只能找到这一小部分,看什么时候有时间再补上. 1. 前 ...
- Paper之BigGAN：ICLR 2019最新论文《LARGE SCALE GAN TRAINING FOR HIGH FIDELITY NATURAL IMAGE SYNTHESIS》(未完待续)
Paper之BigGAN:ICLR 2019最新论文<LARGE SCALE GAN TRAINING FOR HIGH FIDELITY NATURAL IMAGE SYNTHESIS> ...
- Windows x64内核学习笔记（五）—— KPTI（未完待续）
Windows x64内核学习笔记(五)-- KPTI(未完待续) KPTI 实验一:构造IDT后门并读取Cr3 参考资料 KPTI 描述:KPTI(Kernel page-table isolati ...
最新文章
- 计算机控制面板没有笔和触摸,如何通过注册表或者 命令 或者服务 关闭 控制面板笔和触摸里面的笔势操作(控制面板-笔和触摸-笔势) ！急！...
- tensorflow实战google深度学习框架在线阅读
- linux启动服务器ftp监听,Linux redhat6.5开启ftp服务
- Dart 流中的 listen 和 forEach 有什么区别？
- Android 项目框架
- 俄亥俄州立大学计算机专业排名,美国俄亥俄州立大学各专业的排名情况介绍
- 第1篇：Flowable快速工作流脚手架Jsite_克隆项目
- tokengetall php,token_get_all Split given source into PHP tokens php函数分享
- 第九十五题（推断一字符串是不是对称的）
- python的科学计算库总结
- 对于函数式编程的新理解
- python自动化框架(unnitest+selenium+htmlreport)
- AES方式加解密的简单介绍
- 令程序员们夜不能寐的“噩梦”除了改需求，还有这些…...
- SAP 资产分类的配置方法
- X264编码h264
- 【操作系统原理-陈渝老师】第七章 进程与线程
- java银行项目_javabank项目
- 设计师们如何高调拒绝免费工作
- linux mtd - mtdpart.c