第1章 HTML语言基础
HTML是一种描述性标记语言，用来描述页面内容的显示方式；
HTML是一种纯文本文件，以“.html”或“.htm”为后缀；
HTML的基本组成单元是元素，语法结构如下
<div>
一个简单页面
</div>
- HTML具体结构
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个简单页面</title>
</head>
<body>
网页正文部分
<img src="images/logo.jpg" />
<table>
<tr><td>Hello,HTML!</td></tr>
</table>
</body>
</html>
-
< head >中可以包含以下子元素：< title >、< meta >、< base >、< link >、< script >以及< style >等
-
< title >标签：在浏览器中的标题栏显示标题
<html>
<head>
<title>魁首</tile>
</head>
<body>
<div></div>
</body>
</html>
- < meta >标签：用于向客户的浏览器传递信息和命令，不显示内容。
- 一个< head >标签中可以包含一个或多个< meta >标签。
| 属性名 | 属性值 | 描述 |
|---|---|---|
| name | keywords | 定义页面的关键词，关键词之间用英文“,”隔开。 |
| name | description | 定义页面的描述内容，简短的文字描述网站或网页的主要内容。 |
| name | robots | 用来告诉搜索引擎页面是否允许索引与查询。 |
| name | author | 标注网页的作者。 |
| http-equiv | content-type | 设定页面使用的字符集。 |
| http-rquiv | refresh | 自动刷新并跳转到新页面。 |
| http-equiv | set-cookie | 设置页面缓存过期时间。 |
| http-equiv | expires | 设置网页到期时间。 |
| content | text | 文本内容，用于描述name和http-equiv属性相关内容。 |
- 文本修饰标签
| 标签 | 描述 |
|---|---|
| < font > | 用于设置文本的字体样式。 |
| < b > | 以加粗的方式显示，效果和< strong >相同。 |
| < i > | 以斜线的方式显示。 |
| < s > | 被添加一条删除线。 |
| < u > | 被添加一条下划线。 |
| < sup > | 以上标的形式显示。 |
| < sub > | 以下标的形式显示。 |
| < strong > | 以加粗的方式显示，效果和< b >相同。 |
- 特殊字符
| 特殊字符 | 实体引用 | 特殊字符 | 实体引用 |
|---|---|---|---|
| 双引号（"） | & quot; | 左箭头（←） | & larr; |
| &号 | & amp; | 上箭头（↑） | & uarr; |
| 空格 | & nbsp; | 右箭头（→） | & rarr; |
| 小于号（<） | & lt; | 下箭头（↓） | & darr; |
| 大于号（>） | & gt； | 左右箭头（↔） | & harr; |
| 小于等于（≤） | & le; | 左下箭头（↵） | & crarr; |
| 大于等于（≥） | & ge; | 左双箭头（⇐） | & lArr; |
| 版权号（©） | & copy; | 上双箭头（⇑） | & uArr; |
| 商标符号（™） | & trade; | 右双箭头（⇒） | & rArr; |
| 注册商标 （®） | & reg; | 下双箭头（⇓） | & dArr; |
| 分数（¼） | & frac14; | 交集（∩） | & cap; |
| 分数（½） | & frac12; | 并集（∪） | & cup; |
- < p > 标签用于对网页内容提供块级格式。
- < br />标签用于在文本内容不结束的情况下对文本进行换行。
- < hr />标签在页面中产生一条水平线，将文本区域内容分开。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title></title>
</head>
<body>
<h3>内容展示</h3>
<hr size="3" noshade="noshade" color="boue" width="400px; align="right" />
<p>文本内容1
<br />文本换行内容2 </p>
<p>文本内容3</p>
</body>
</html>
- 列表元素
| 列表元素 | 描述 |
|---|---|
| ul | unordered lists的缩写 (无序列表) |
| li | list item的缩写（列表项目） |
| ol | ordered lists的缩写（有序列表） |
| dl | definition lists的英文缩写 (自定义列表) |
| dt | definition term的缩写 (自定义列表组) |
| dd | definition description的缩写（自定义列表描述） |
| nl | navigation lists的英文缩写 （导航列表） |
| tr | table row的缩写 （表格中的一行） |
| th | table header cell的缩写 （表格中的表头） |
| td | table data cell的缩写 （表格中的一个单元格） |
- 有序列表：使用数值或者字母作为编号。
<ol>
<li>列表项1 </li>
<li>列表项2 </li>
</ol>
- 通过type属性可以指定有序列表编号的样式，取值方式有以下几种:
| 编号样式 | 描述 |
|---|---|
| “1” | 代表阿拉伯数字（1、2、3） |
| “a” | 代表小写字母（a、b、c） |
| “A” | 代表大写写字母（A、B、C） |
| “i” | 代表小写罗马数字（i、ii、iii） |
| “I” | 代表大写罗马数字（I、II、III） |
- 通过start属性指定列表序号开始的位置，例如start="3"表述从C开始
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表</title>
</head>
<body>
<ol type="A" start="3">
<li>购物区</li>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>休闲装</li>
<li>运动装</li>
</ol>
</body>
</html>
- 无序列表：使用项目符号作为编号。
<li type="类型">
<li>列表项1 </li>
<li>列表项2 </li>
</li>
- type属性用于设置图形前缀，取值可以是circle(圆)、disc(点)、square(方块)、none等，默认为disc(点)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无序列表</title>
</head>
<body>
<ul type="square">
<li>购物区</li>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>休闲装</li>
<li>运动装</li>
</ul>
</ul>
</body>
</html>
- 定义列表：列表中的每个项目与描述匹配显示。
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
- 每一个子项都由：标题（dt）和描述（dd）组成。
- 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义列表</title>
</head>
<body>
<dl>
<!-- 第一项开始 -->
<dt>购物区</dt>
<dd>近年来，随着经济社会和现代物流业的快速发展，带动了电子商务的快速发展……</dd>
<!-- 第一项结束 -->
<dt>影视区</dt>
<dd>能够在线收看高清电影电视剧、体育直播、游戏竞技视频、动漫视频、综艺视频、财经资讯视频播放流畅、完全免费，是网民喜爱的休闲娱乐区。</dd>
<dt>餐饮区</dt>
<dd>通过互联网使消费者及时了解餐厅营运、在线点菜、优惠套餐等方式进行网络销售传播，便利充分地实现餐厅服务价值交换。</dd>
</dl>
</body>
</html>
- 图像标签
<img src="url" alt=" " .../>
| 属性名 | 描述 |
|---|---|
| src | 图像的地址，可以是绝对路径，也可以是相对路径。 |
| alt | 图像的描述，浏览器无法显示图像时，改文本作为图像的替代； |
| align | 图像的对齐方式：top、bottom、middle、left、right. |
| border | 指定图像边框的宽度。 |
| height | 指定图像的高度，可以是固定值，也可以是百分比（占外层容器的百分比）。 |
| weight | 指定图像的宽度，可以是固定值，也可以是百分比（占外层容器的百分比）。 |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标签的使用</title>
</head>
<body>
<img src="logo.jpg" alt="魁首的logo" />
<img src="images/logo.jpg" />
<img src="images/logo.jpg" alt="魁首的ogo" width="200" height="200" />
<img src="images/logo.jpg" border="2" width="50%" />
</body>
</html>
- 超链接标签
<a href=“url” name=" " target=" "></a>
- target属性可以改变目标文档的显示窗口。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被连接的文档。（用的比较多） |
| _self | 默认值，在当前窗口打开被连接的文档。 |
| _parent | 在父框架集中打开被连接的文档。 |
| _top | 在整个窗口中打开被连接的文档。 |
| frameName | 在指定的框架中打开被连接的文档。 |
<a href="http://www.baidu.com" target="_blank">打开目标链接</a>
第2章 表格与框架
<table border="1" >
<!--行是表格的水平元素，使用tr表示-->
<tr>
<!--单元格是表格的基本元素，使用td表示-->
<td>姓名</td>
<td>部门</td>
<td>邮箱</td>
<td>电话</td>
</tr>
<tr>
<td>张三</td>
<td>市场部</td>
<td>zhangsan@qq.com</td>
<td>18966882233</td>
</tr>
<tr>
<td>李四</td>
<td>研发部</td>
<td>lisi@qq.com</td>
<td>13688995566</td>
</tr>
</table>
- 表格基本标签
| 属性 | 取值 | 描述 |
|---|---|---|
| align | left、center、right | 设置表格相对周围元素的对齐方式 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorName | 设置表格的背景颜色 |
| border | 像素 | 设置边框的宽度 |
| cellpadding | 像素和百分比 | 设置单元格与内容之间的距离 |
| cellspacing | 像素和百分比 | 设置单元格之间的距离 |
| height | 像素和百分比 | 设置表格的高度 |
| width | 像素和百分比 | 设置表格的宽度 |
| rules | none、groups、rows、cols、all | 设置表格中的表格线显示方式，默认all |
- 单元格标签
| 属性 | 描述 |
|---|---|
| align | 设置单元格内容的水平对齐方式：left、center、right |
| valign | 设置单元格内容的垂直对齐方式：top、middle、bottom、baseline |
| rowspan | 设置单元格跨行数 |
| colspan | 设置单元格跨列数 |
- 行标签
| 属性 | 描述 |
|---|---|
| align | 设置单元格内容的水平对齐方式：left、center、right |
| valign | 设置单元格内容的垂直对齐方式：top、middle、bottom、baseline |
| bgcolor | 设置单元格背景颜色 |
| bordercolor | 设置行内单元格的边框颜色 |
-
行分组
< thead >标签定义表头，用于创建表格的头部信息
< tfoot >标签定义表尾，用于创建表格的脚注部分
< tbody >标签定义表格主体，用于表示表格的主体部分
< caption >标签定义表格标题，显示在整个表格的上方 -
列分组
| 属性 | 描述 |
|---|---|
| align | 设置单元格内容水平对齐方式：left、center、right、justify |
| valign | 设置单元格内容垂直对齐方式：top、middle、bottom、baseline |
| span | 规定该列组应该横跨的列数，默认为1 |
| width | 设置列的宽度 |
- frame框架
<frameset rows="行高度所占窗口的像素或比例,.."
cols="列宽度所占窗口的像素或比例,.." >
<frame src="..."/>
......
</frameset>
- frame框架的属性
| 属性 | 描述 |
|---|---|
| name | 框架名，在设置超链接时用作框架的标记,frame |
| src | 设置在框架中显示页面的URL |
| frameborder | 框架边框是否显示，取值为0或1，frameset |
| marginheight | 定义内容与框架的上下边缘高度，默认为1，frame，设置2独立本地页面观察效果 |
| marginwidth | 定义内容与框架的上下边缘宽度，默认为1，frame，设置2独立本地页面观察效果 |
| scrolling | 设置框架中是否显示滚动条，取值为yes、no、auto、fraame |
| noresize | 设置框架不能调整大小，需要设置frameborder=1的时候可测试 |
- iframe内联框架
<iframe src="url" name=" " width=" " height=" " ></iframe>
- iframe 内联框架的属性
| 属性 | 描述 |
|---|---|
| align | 设置iframe与周围文本对齐方式，取值left、right、top、middle、bottom |
| frameborder | 设置iframe的边框是否显示，取值0或1 |
| marginheight | 定义iframe的顶部和底部的边距 |
| marginwidth | 定义iframe的左部和右部的边距 |
| scrolling | 设置iframe中是否显示滚动条，取值yes、no、auto |
| scr | 设置iframe中显示页面的URL |
第3章 表单
- 表单标签
<form action="处理数据程序的URL地址" method="get|post" name="表单名称">
</form>
| 属性 | 描述 |
|---|---|
| action | 当提交表单时，向何处发送单中的数据 |
| accept-charset | 服务器可处理的表单数据字符集 |
| enctpe | 表单数据内容类型，可以为application/x-www-form-urlencoded、text/plain、multipart/form-data |
| id | 表单对象的唯一标识符 |
| name | 表单对象的名称 |
| target | 打开处理URL的目标位置（不建议使用） |
| method | 规定向服务器端发送数据所采用的方式，取值可以为get、poost |
| onsubmit | 向服务器提交数据之前，执行其指定的JavaScript脚本程序 |
| onreset | 重置表单数据之前，执行其指定的JavaScript脚本程序 |
- 表单域
<input type="text" name="…" size="…" maxlength="…" value="…" disabled="disabled" readonly="readonly"/>
| 属性 | 描述 |
|---|---|
| id | 设置当前控件的唯一ID，在界面设计时，CSS、JavaScript中可以引用 |
| name | 设置当前控件的名称，在向服务器发送数据时，服务器根据name属性获取对应表单域的值 |
| value | 设置表单域的初始值，网页加载过程中，默认显示该值 |
| type | 该属性是必须的，用来说明当前控件的类型，取值可以是text、password、radio、checkbox、file、hidden、button、submit、reset、image等 |
| maxlength | 设置输入到文本框的最大字符数；输入达到最大数后，用户按下更多键，也不会添加新的字符 |
| size | 设置文本输入控件的宽度，单位为字符 |
- 密码域
<input type="password" name="..." size="..." maxlength="..." value="..." />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单域-密码框</title>
</head>
<body>
<form>
用户名：<input type="text" name="userName" id="userName" value="请输入用户名"/> <br/><br/>
密 码： <input type="password" name="userPwd" id="userPwd"/><br/><br/>
确认密码：<input type="password" name="userRePwd" id="userRePwd" size="25" disabled="disabled" value="请输入确认密码"/><br/><br/>
</form>
</body>
</html>
- 单选按钮
<input type="radio" name="..." value="..." checked="checked" />
<form>
性别：<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女<br />
专业：<input type="radio" name="major" value="computer" />计算机
<input type="radio" name="major" value="physics" />物理
<input type="radio" name="major" value="chemical" />化学
</form>
- 复选框
<input type="checkbox" name="..." value="..." checked="checked" />
<form>
爱好：<input type="checkbox" name="hobby" value="music" />音乐
<input type="checkbox" name="hobby" value="swimming" />游泳
<input type="checkbox" name="hobby" value="football" checked/>足球
选修：<input type="checkbox" name="choice" value="computer" checked />计算机
<input type="checkbox" name="choice" value="physics" />物理
<input type="checkbox" name="choice" value="chemical" checked />化工
</form>
- 文件选择框
<input type="file" name="..." accept="..." />
- 隐藏域
<input type="hidden" name="..." value="..." />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单域-隐藏域</title>
</head>
<body>
<form>
<input type="hidden" name="hiddenData" value="不显示的数据"/>
</form>
</body>
</html>
- 多行文本框
<textarea name="..." rows="..." colos="..." wrap="...">文本内容</textarea>
| 属性 | 描述 |
|---|---|
| off | 默认值，文本域中内容足够多的时候，会在文本域中添加滚动条 |
| virtual | 实现文本区内的自动换行，以改善对用户的显示；但在传输给服务器时，文本只在用户按下Enter键的地方进行换行，其他地方没有换行的效果 |
| physical | 实现文本区内的自动换行，并以这种形式传送给服务器 |
- 列表选择框
<select name="…" size="…" multiple="multiple">
<option value="…" selected="selected">选项描述内容</option>
</select>
< select >标签的属性列表
| 属性 | 描述 |
|---|---|
| name | 设置列表名称 |
| size | 设置列表中可见选项的数目 |
| multiple | 设置列表是否允许按住Ctrl键进行多选，默认只能选择一项 |
| disabled | 设置列表是否被禁用 |
< option > 标签的属性列表
| 属性 | 描述 |
|---|---|
| value | 设置选项的值，如果选中该项，则该项的值发送给服务器 |
| selected | 当页面加载时，该项是否被选中 |
| disabled | 该项在首次加载时被禁用 |
< optgroup >标签：用于对列表进行分组
| 属性 | 描述 |
|---|---|
| label | 指定每个分组的名称，且分组名不能被选择 |
| disabled | 用于设置该分组是否被禁用 |
<form>
请选择国家：
<select name="country">
<option>中国</option>
<option>俄罗斯</option>
<option>德国</option>
</select><br />
请选择省份：
<select name="province" size="4" multiple="multiple" >
<option value="HN">湖南</option>
<option value="HB">湖北</option>
<option value="GD">广东</option>
<option value="SH">上海</option>
<option value="TW">台湾</option>
</select><br />
请选择城市：
<select name="city">
<option value="cs">长沙<option>
<option value="zz">株洲<option>
<option value="xt" selected="select">湘潭<option>
</select ><br />
请选择日期：
<select name="day">
<optgroup label="-----工作日-----">
<option value="monday"> 星期一</option>
<option value="tuesday"> 星期二</option>
<option value="wednesday"> 星期三</option>
<option value="thursday"> 星期四</option>
<option value="friday"> 星期五</option>
</optgroup>
<optgroup label="-----休息日-----">
<option value="saturday">星期六</option>
<option value="sunday" >星期日</option>
</optgroup>
<optgroup label="-----节假日-----">
<option value="NewYear">春节</option>
<option value="MayDay">五一</option>
<option value="OctoberDay">十一</option>
</optgroup>
</select>
</form>
- 按钮控件
<button type="submit | reset | button" value="..." name="...">按钮</button>
<from action="https://www.baidu.com" method="post">
<button type="submit" value="提交内容">提交内容</button>
<button type="reset" value="重置内容">重置内容</button>
<button type="button" value="普通按钮" onclick="alert('调用javascript脚本')">普通按钮</button>
<button type="submit" value="提交内容">
<img src="../images/submit.jpg" width="100"/>
</button>
</form>
- 分组控件
<fieldset>
<legend>请选择个人爱好</legend>
<input type="checkbox" value="music" />音乐<br />
<input type="checkbox" value="swimming" />游泳<br />
<input type="checkbox" value="football" />足球<br />
</fieldset>
第4章 CSS语言基础
- CSS基本语法结构
CSS三种格式：内嵌样式、内部样式、外部样式
- 内嵌样式(行内式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<h4 style="color:red;font-weight:bold;">内嵌样式的使用</h4>
<span style="color:red;font-weight:bold;">内嵌样式</span>是混合在HTML标记里使用，这种方法可以很简单的对某个元素单独定义样式。
- 内部样式表
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
- 外部样式表（外联式）
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
<link type="text/css" rel="stylesheet" href="url" />
CSS选择器：基本选择器、组合选择器、属性选择器
- 基本选择器
| 类型 | 示例 |
|---|---|
| 通用选择器 | *{ } |
| 标签选择器 | p{font-family:宋体;} |
| 类选择器 | .classname{backgroundcolor:red;} |
| ID选择器 | #id{color:red;} |
优先级：ID选择器 > 类选择器 > 标签选择器 > 通用选择器
- 组合选择器
| 类型 | 示例 |
|---|---|
| 多元素选择器 | p.div{font-size:14px;color:bule;} |
| 后代选择器 | div p{background-color:#ccc;} |
| 子元素选择器 | div > p {font-weight:bold;} |
| 相连兄弟选择器 | h3+p{font-size:24px;color:red;} |
| 普通兄弟选择器 | .content ~ span{color:bule;} |
- 属性选择器
| 类型 | 示例 |
|---|---|
| 存在选择器 | p[id] |
| 相等选择器 | p[name="teaName] |
| 包含选择器 | p[name ~ = "stu"] |
| 连字符选择器 | p[name="zh"] |
| 前缀选择器 | p[lang|^="zh" |
| 子串选择器 | p[title*="zh" |
| 后缀选择器 | p[title$="zh"] |
<h3 id="se">属性选择器，选择语法</h3>
<p><span attr='attr-se'>s属性选择器，选择语法span[attr='attr-se']</span><br>
<span attr='attr-se se attr'>类有多个的时候，使用span[attr~='attr']</span><br>
<span name='sele'>类为sele选择器，可以使用span[name|=sele]</span><br>
</P>
- 伪类选择器
| 选择器 | 示例 | 描述 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父元素的第一个p元素 |
| :in-tange | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :list-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个P元素 |
| :not(selector) | :not§ | 选择所有p元素以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有p元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-cild | 选择所有兼有一个子元素的p元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个< p > 元素的第一个字母 |
| :first-line | p:first-line | 选择每个< p > 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 < p > 元素 |
| :before | p:before | 在每个< p >元素之前插入内容 |
| :after | p:after | 在每个< p >元素之后插入内容 |
| :lang(language) | p:lang(it) | 为< p >元素的lang属性选择一个开始值 |
a:link{color:#ff0000;}/*未访问的连接*/
a:visited{color:#00ff00;}/*已访问的连接*/
a:hover{color:#ff00ff;}/*鼠标划过的连接*/
a:active{color:#0000ff;}/*已选中的连接*/
- CSS样式属性
| 属性名 | 功能 | 描述 |
|---|---|---|
| 缩进文本 | text-indent | 设置行的缩进大小或负值，单位可以用em、px或百分比（%） |
| 水平缩进 | text_align | 设置文本的水平对齐方式，取值left、right、center、justify |
| 垂直缩进 | vertical-align | 设置文本的垂直对齐方式，取值bottom、top、middle、baseline |
| 字间距 | word-spacing | 设置字（单词）之间的标准间隔，默认normal（或0） |
| 字母间隔 | letter-spacing | 设置字符或字母之间的间隔 |
| 字符转换 | text-transform | 设置文本中字母的大小，取值none、uppercase、lowercase、capitalize |
| 文本修饰 | text-decoration | 设置段落中强调的文字，取值none、underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁） |
| 空白字符 | white-space | 社会源文档中多余的空白，取值normal（忽略多余）、pre（正常显示）、nowrap（文本不换行，除非遇到< br/ >标签） |
- 字体属性
| 功能 | 属性名 | |
|---|---|---|
| 文本颜色 | colro | 设置文本颜色 |
| 字体类型 | font-family | 设置文本字体 |
| 字体风格 | font-style | 设置字体样式，取值normal（正常)、italic（斜体）、oblique（倾斜） |
| 字体变形 | font-variant | 设定小型大写字母，取值normal（正常）、small-caps（小型大写字母） |
| 字体加粗 | font-weight | 设置字体的粗细，取值bolder（特粗）、bold（粗体）、normal（正常）、lighter（细体）或100~900之间的9个等级 |
| 字体大小 | font-size | 设置文本的大小，值可以是绝对值或相对值，其中绝对值从小到大以次xx-small、x-small、small、medium（默认）、也可以采用百分比（%）的形式 |
| 行间距 | line-height | 设置文本的行高，即两行文本基线之间的距离 |
| 字体简写 | font | 属性的简写可以ongoing以次设置元素字体的两个或更多的方面，书写顺序font-style、font-variant、font-weight、font-size、line-height、font-family |
- 背景属性
| 功能 | 属性 | 描述 |
|---|---|---|
| 背景颜色 | background-coor | 设置元素的背景色 |
| 背景图像 | background-image | 设置背景图像 |
| 背景重复 | background-repeat | 设置背景平铺的方式，取值no-repeat(不平铺)、repeat-x(横向平铺)、repeat-y(纵向平铺)、repeat（x/y双向平铺） |
| 背景定位 | background-position | 设置图像在背景中的位置，取值top、bottom、left、right、center或具体值、百分比 |
| 背景关联 | background-attchment | 设置背景图像是否随页面内容一起滚动，取值scroll（滚动）、fixed（固定） |
| 背景尺寸 | background-size | 用来设置背景图片的尺寸 |
| 背景区域 | background-origin | 规定background-position属性相对于什么位置来定位 |
| 填充区域 | background-clip | 规定background-position属性相对于什么位置来定位 |
| 背景简写 | background | 在一个声明设置所有的背景属性 |
- 伪类
| 伪类名 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :readonly | 向只读元素添加样式 |
| :checked | 向被选中的元素添加样式 |
| :disabled | 向被禁用的元素添加样式 |
| :enabled | 向可用的元素添加样式 |
- 伪元素
| 伪元素 | 描述 |
|---|---|
| :first-line | 向文本的首行添加特殊样式 |
| :first-letter | 向文本的第一个字母或汉字添加特殊样式 |
| :before | 在元素之间添加内容 |
| :after | 在元素之后添加内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box,.a-box{
color:red;
width:200px;
height:200px;
background-color:red;
}
.box:hover:after{
content:'';
display:block;
width:200px;
height:200px;
background-color:greed;
position:relative;
left:200px;
}
.a-box:hover:before{
content:'';
display:block;
width:0px;
height:0px;
border-top:100px solid transparent;
border-bottom:100px solid green;
border-bottom:100px solid transparent;
position:relative;
left:200px;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>当我鼠标移动上去到box,它可以产生一个新的box</p>
<div class="a-box">
</div>
<p>当我鼠标移动上去到a-box,它可以产生一个新的三角形</p>
</body>
</html>
第5章 CSS页面布局
- 盒子模型
盒子模型由：内容（content)、边框（border）、内边距（padding）和外边距（margin）四部分组成
- 内容区content
| 值 | 描述 |
|---|---|
| Visible | 默认值，溢出的内容不会被修剪，会呈现 在元素框之外 |
| hidden | 溢出的内容将不可见 |
| scroll | 溢出的内容会被修剪，但是可能通过滚动条查看隐藏部分 |
| auto | 由浏览器决定如何处理溢出部分 |
<style type="text/css">
div{
width:400px;
height:200px;
overflow:scroll;/*浏览器会自动添加一个滚动条*/
}
</style>
- 边框border属性列表
| 值 | 描述 |
|---|---|
| border-width | 设置元素所有边框的宽度 |
| border-style | 设置元素所有边框的样式 |
| border-color | 设置元素所有边框的颜色 |
| border-radius | 圆角边框的简写形式，用于设置四个border-*-radius属性 |
| box-shadow | 向边框添加一个或多个阴影 |
- 边框样式取值
| 值 | 描述 |
|---|---|
| none | 无边框 |
| hidden | 隐藏边框 |
| dotted | 定义点状边框，在大多数浏览器中呈现为实线 |
| dashed | 定义虚线 |
| solid | 定义实线 |
| double | 定义双线，双线的宽度定于border-width的值 |
| groove | 定义3D凹槽边框 |
| ridge | 定义3D菱形边框 |
| inset | 定义3D凹边 |
| outset | 定义3D凸边 |
- 圆角边框
边角边框的圆线是椭圆的一条弧线，HR代表椭圆的水平半径，VR代表椭圆的垂直半径
当border-top-left-radius具有一个参数时，水平半径和垂直半径相同；border-top-left-radius:8px;
当border-top-left-radius具有两个参数时，第一个参数时水平半径，第二个是垂直半径;border-top-left-radius：8px 20px;
当border-radius属性只有一个参数时，top-left,top-right,bottom-right,bottom-left取值相同；border-radius:10px;
当boder-radius属性有两个参数时，border-radius:10px 20px;说明左右为10px,上下为20px;
- 边框阴影
| 值 | 描述 |
|---|---|
| h-shadow | 水平阴影的位置 |
| v-shadow | 垂直阴影的位置 |
| blur | 模糊距离 |
| spread | 阴影的尺寸 |
| color | 阴影颜色 |
| inset | 内部阴影 |
box-shadow:[水平阴影的位置] [垂直阴影的位置] [blur模糊的距离] [spread阴影的距离] [颜色] [3D凹边]
box-shadow:[h-shadow] [v-shadow] [blur] [spread] [color] [inset]
box-shasow:10px 6px 10px 5px #AAAAAA;
.imageDiv{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #FFFFFF;
background-color:white;
/*添加边框阴影box-shadow*/
box-shadow:10px 6px 10px 5px #aaaaaa;
}
第6章 JavaScript语言基础
- 行内JavaScript脚本
在HTML中嵌入js脚本，例如鼠标时间和超链接等
<body>
<h1>行内JavaScript</h1>
<img scr="..." onclick="alert('你点击了一张图片')"/>
<a href="javascript:alert('你点击了一个a标签')"></a>
</body>
- 内部JavaScript脚本
统一放在< script>< /script>标签中,< script>< /script>标签位于< head>或< body>标签中
<head>
<script type="textr/javascript">
alert("head中的JavaScript");
</sctript>
</head>
<body>
<script type="text/JavaScript">
alert("body中的JavaScript");
</script>
</body>
- 外部JavaScript脚本
<script type="text/javascript" src="js/main.js"></script>
- 转换语句
使用转换语句来控制程序执行的方向，包括break、continue、return
switch中，遇到break语句时，就会跳出switch分支结构；
continue当程序执行过程中，遇到continue时，仅仅跳出当前本次循环。
<script type="text/javascript">
function count(){
var sum=0;
for(var i=100;i<1000;i++){
sum+=i;
if(sum<10000){
document.write("<br/>已统计到："+i);
continue;
}
if(i>200){
break;
}
return sum;
}
document.write("不会被执行到的代码！");
}
document.write("<br/>统计结果为："+count());
</script>
- 函数
| 函数 | 描述 |
|---|---|
| parseInt() | 将字符串转成整型 |
| parseFloat() | 将字符串转成浮点型 |
| isNaN() | 测试是否不是一个数字(全称：is not a number） |
| isFinite() | 测试是否是一个无穷，如果是，返回一个false,否则返回true |
| eval() | 用于将JavaScript中字符串作为脚本代码来执行 |
| unescape() | 解码由escape函数编码的字符 |
| escepe() | 将字符串转成Unicode码 |
第7章 JavaScript对象
- Array数组对象
var goodsType = new Array();
goodsType[0] = "远动装";
goodsType[1] = "休闲装";
var foods= new Array["牛肉","羊肉","鸡肉"];
- 常用的方法
| 方法 | 描述 |
|---|---|
| concat() | 用于连接两个或多个数组 |
| join() | 把数组中所有元素放入一个字符串，并用指定的分隔符割开 |
| push() | 可向数组中的末尾添加一个或多个元素，并返回新的长度 |
| pop() | 用于删除并返回数组中最后一个元素 |
| shift() | 用于删除并返回数组中第一个元素 |
| reverse() | 在原有数组的基础上，颠倒数组中元素的顺序，此过程中不会创建新的数组 |
| slice() | 可从已有数组返回选定的元素 |
| sort() | 用于对数组元素进行排序 |
| splice() | 向数组添加/删除一个/多个元素，并返回被删除的元素 |
concat()方法：返回的是合并后的新数组，原数组保持不变。
var a = [1,2,3];
document.write(a.concat(4,5));/*输出：1,2,3,4,5*/
join()方法：用于把数组中的所有元素放入一个字符串中，并通过指定的分隔符割开。
var arr = new Array(3);
arr[0] = "zhangsan";
arr[1] = "lishi";
arr[2] = "wangwu";
document.write(arr.join()); /*输出：zhangsan,lishi,wangwu*/
push()方法：用于向数组的末尾添加一个或多个元素，返回数组的长度
var arr = new Array('zhangsan','lishi','wangwu');
document.write(arr + "<br />");
document.write(arr.push("James") + "<br />");/*输出：4*/
document.write(arr);/*输出：zhangsan,lishi,wangwu,James*/
reverse()方法：用于颠倒数组中元素的顺序（反转数组）
var arr = new Array(1,2,3);
document.write(arr+"<br />");/*输出：1,2,3*/
document.write(arr.reverse());/*输出：3,2,1*/
shift()方法：用于删除数组的第一个元素，并返回第一个元素的值
var arr = new Array(1,2,3);
document.write(arr+"<br />");/*1,2,3*/
document.write(arr.shift()+"<br />");/*1*/
document.write(arr);/*2,3*/
slice()方法：从某个已有的数组返回选定的值
var arr = new Array('zhangsan','lishi','wangwu');
document.write(arr.slice(1)+"<br />");/*lishi,wangwu*/
**sort()**方法：用于对数组的元素进行排序（排序数组）
var arr = new Array(6);
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr+"<br />");/*10,5,40,25,1000,1*/
document.write(arr.sort());/*1,10,1000,25,40,5*/
------------------------------------------------
var arr = ["C","B","E","D","A"];
document.write(arr+"<br />");/*C,B,E,D,A*/
arr.sort();
document.write(arr);/*A,B,C,D,E*/
sclice()方法：向数组添加/删除一个/多个元素，并返回被删除的元素
var arr = new Array(1,2,3,4,5);
document.write(arr+"<br />");/*1,2,3,4,5*/
arr.splice(2,1,'6');/*2代表删除数组中第二位也就是‘3’；1代表从数组2的位置开始删除多少元素；‘6’代表要替换的值*/
document.write(arr);/*1,2,6,4,5*/
forEach()方法：为每个数组元素调用一次函数（回调函数）
var txt = "";
var numbers = [1,2,3,4,5];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value,index,array){
txt = txt + value + "<br/>";
}
map()方法：对每个数组元素 执行函数来创建新数组
var numbers1 = [1,2,3,4,5];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value,index,array){
return value * 2;
}
filter()方法：创建一个包含通过测试的数组元素的新数组
var numbers = [1,2,3,4,5]
var over = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over;
function myFunction(value,index,array){
return value > 3;
}
reduce()方法：在每个数组元素上远行函数，以生成单个值
var numbers = [1,2,3,4,5];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和："+sum;
function myFunction(total,value){
return total + value;
}
reduceRight()方法：在每个数组元素上运行函数，以生成单个值。
—到此结束，perfect
1828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
