1 使用属性修饰网页
1.1背景
[1]背景颜色
使用属性bgcolor设置背景颜色。所有容器类型的元素都可以设置背景颜色。
例如：body，table，tr，td等等。
案例：
一个容器的内部的元素的背景会覆盖容器的背景。
[2]背景图片
使用属性background设置背景图片。
背景图片是平铺的。 无法使用属性调整背景图片的位置和大小。
设置一个表格的背景图片:
图片只显示表格大小的部分，不会被压缩或者拉升。
1.2边框
使用border相关设置边框相关特征。（table，img）
通过border设置边框的厚度，通过borderColor设置边框的颜色。
案例：
1.3尺寸
通过width和height设置元素的宽度和高度。
宽度是可以使用百分比设置的。 高度理论上不能使用百分比。
2 表单
2.1网页的功能是什么？
①展示各种信息（文本，图片，视频，音频等等）
②获取用户提交的数据。
展示信息的技术已经学习过了。
获取用户提交的信息的技术就是表单。
2.2表单
是由标签form组成的，里面有各种表单域。
<form action=”” method=””>
各种表单域
</form>
Action:指向表单内容提交的位置。目前可以理解为超链接的位置。
Method：设置请求的方法（GET/POST）。
案例：
表单域：
[1] 文本输入框
<input type=”text” name=”uname”/> 通过type的值设置input的展示形式
Size：设置输入框的大小。
Maxlength：设置输入框的最大字符长度。
readOnly 设置输入框是只读的。
只要存在属性 readonly 输入就是只读的，不在乎值是什么？
常见的写法是：readonly="readonly"
Value属性设置输入框的默认值.
Disabled属性禁用表单域
HTML5属性placeholder 做输入提示
[2]密码框
<input type=”password” name=”upass”/> 使用type:password设置input为密码库，功能是将输入的值加密显示为:…
密码框适用文本输入的所有属性。
[3]日期和时间
<input type=”date” /> 是HTML5新增的type类型，表现为一个日历。
几乎使用text的所有属性。
<input type=”time” /> 也是HTML新增的type类型，表示为时间。
几乎使用text的所有属性。
[4]单选按钮
<input type=”radio” />
只有同一组的单选按钮才会出现单选的情况。
Name属性相同的单选按钮是同一组的。
适用单选按钮的属性：Disabled
Value：在单选按钮中就是设置一个单选按钮的值。
Checked ： 设置单选按钮默认选中。
Checked和readonly，Disabled一样，不需要明确值是什么，只要存在属性就灵。
[5]复选框
<input type=”checkbox” name=”enjoy” value=”1”/>
Type属性为checkbox， 和单选按钮一样，name相同的checkbox为一组。 Value表示一个按钮的值。
适用属性Disabled，checked。
[6]下拉列表
<select>
<option value=”1”>选择内容</option>
。。。。。
</select>
Select：表示一个下拉列表。
Option是选项。其中value表示此选项的值。
适用的属性：Disabled
Multiple 属性设置下拉列表可以多选。设置方式和Disabled一致，只要属性存在即可。
Size属性设置下拉列表展示的选项个数。
通过设置option的 selected属性设置默认选中。
[7]多行文本框
< textarea rows=”5” cols=”30”>哈哈哈</textarea>
Rows: 展示出来的行数。不代表最大行数
Cols：展示出来的列数（宽度）。不代表最大宽度。
哈哈哈：就是默认值。
Disabled，Readonly同样适用。
[8]按钮
提交按钮<input type=”submit” value=”提交”/>
提交按钮的作用就是将表单的内容提交到action指向的位置。
Type是submit value是按钮上展示的文本内容。
图片按钮<input type=”image” src=”” value=””/>
图片按钮的作用也是提交表单。
Type是image， src指向图片的位置，value按钮上展示的内容。
重置按钮:<input type=”reset” value=”重填”/>
作用是将表单恢复到初始状态。
普通按钮：<input type=”button” value=”按钮”/>没有任何作用，需要使用JS添加响应事件。还有一种写法<button>按钮</button>
Tips:所有的按钮都支持尺寸设置。背景设置。边框设置。
用户注册的案例：
| <!DOCTYPE html> <html> <head> <title>用户注册</title> <meta charset="utf-8"> </head> <body> <form> <table align="center" border="0" cellpadding="5" cellspacing="5"> <tr> <td colspan="3" align="center"> <p align="center"><h3>用户注册</h3></p> </td> </tr> <tr> <td align="right">用户名：</td> <td align="left"> <input type="text" name="uname"/> </td> <td> *用户名必须是数字，字母和下划线组成 </td> </tr> <tr> <td align="right">密码：</td> <td align="left"> <input type="password" name="upadd"/> </td> <td> *密码必须是数字，字母和下划线组成 </td> </tr> <tr> <td align="right">电话：</td> <td align="left"> <input type="text" name="uphone"/> </td> <td>
</td> </tr> <tr> <td align="right">邮箱：</td> <td align="left"> <!-- html5的type属性值 --> <input type="email" name="uemail"/> </td> <td>
</td> </tr> <tr> <td align="right">性别：</td> <td align="left"> <input type="radio" sex value="1">男 <input type="radio" sex value="2">女 <input type="radio" sex value="3">不明 </td> <td>
</td> </tr> <tr> <td align="right">职业：</td> <td align="left"> <select name="type"> <option value="0">选择职业</option> <option value="1">战士</option> <option value="2">刺客</option> <option value="3">法师</option> <option value="4">坦克</option> </select> </td> <td>
</td> </tr> <tr> <td align="right">爱好：</td> <td align="left"> <input type="checkbox" name="enjoy" value="1"/>打野 <input type="checkbox" name="enjoy" value="2"/>团战 <input type="checkbox" name="enjoy" value="3"/>偷袭 </td> <td>
</td> </tr> <tr> <td align="right">备注：</td> <td align="left"> <textarea cols="30" rows="3" name="mark"></textarea> </td> <td>
</td> </tr> <tr> <td colspan="3"> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html> |
效果：
3 框架
3.1frameSet的作用
Freamset框架
常见的页面架构。
使用表格实现此架构：
| <table border="1" cellpadding="0" cellspacing="0" align="center" width="100%" height="600"> <tr><td colspan="2" height="100"> top </td></tr> <tr> <td width="15%"> <p><a href="http://www.igeekhome.com">极客营</a></p> <p><a href="http://www.baidu.com">百度</a></p> </td> <td>主页面部分</td> </tr> <tr><td colspan="2" height="50">版权部分</td></tr> </table> |
表格布局实现了布局效果，但是不能局部刷新。
这个时候就可以使用FreamSet实现页面分割。
Tips:
[1]使用frameSet就不能有body标签。有了body之后frameSet失效。
[2]最外层是frameSet。其中 rows=“20%,30%,*” 将也按照20%，30%，剩下所有的比例分割成3分。
[3]frame就是每个部分，frame中的src就指向子页面。
案例：
使用cols属性可以将页面纵向分割。
实现需求：
在菜单部分加入菜单测试：
在第二个网页中添加菜单
| <p><a href="http://www.igeekhome.com">极客营</a></p> <p><a href="http://www.baidu.com">百度</a></p> |
点击菜单：
超链接有一个属性 target 可以指定连接的资源显示的位置：
_safe(默认值):显示在自己当前的位置，覆盖当前的页面。
_parent : 现在父窗口中，将父页面内容覆盖。
_top: 现在最外层的页面，将最外层页面覆盖。
_blank: 显示在空白页面中，不影响当前的页面。
自定义的frame的名称：会显示在指定的frame中。
测试自定义的frame，
将存储第三个网页的frame的name属性设置为 content.
修改超链接的target指向content；
测试：
通过测试发现，使用frameSet和frame组合可以实现一定意义上的局部刷新。
3.2frameset的属性
[1]边框 通过border调整边框的厚度。
[2]调整frame的大小
通过noresize设置一个frame不能被调整大小。
3.3iframe活动框架
需求：上面的案例中希望top,menu,right部分就是整体，只要求主页面部分是frame。
使用frameSet无法实现。
Iframe是活动框架，可以嵌套在任何的容器中，不需要frameSet。
实现需求：
依然使用前面的表格布局的方式布局页面：
修改代码添加iframe。
查看效果：
嵌入的iframe大小不合适。调整大小：
效果：
给iframe命名，让菜单的超链接的target指向iframe。
测试：
4.CSS快速入门
4.1什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS相当于华丽衣服，HTML就是网页的骨架。可以通过CSS调整网页的展示风格。
4.2 CSS规则
编写一段HTML
使用CSS样式表将P标签中的所有的文本修改为红色的24号字体大小，隶书。
样式规则：
4.3简单文本样式
CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
[1]文本的大小 使用font-szie属性设置。
[2]字体的颜色 使用 color 属性设置字体的颜色
[3]文本的字体 使用 font-family设置文本的字体
[4]缩进文本 p {text-indent: 5px;}
Tips:缩进的距离可以使用负值和百分比。
[5]文本对其方式 text-align: (left|right|center)
text-align:不止能设置文本的对其方式，而且也会影响子元素的对其方法。
[6]设置文本的字间距 word-spacing设置
[7]设置字母的间距 letter-spacing
[8] text-transform 属性处理文本的大小写。这个属性有 4 个值：
- none
- uppercase
- lowercase
- capitalize
[9]文本的修饰 text-decoration
取值
None:什么修饰都没有。
Underline：下划线
Overline：上划线
line-through：删除线
blink：闪烁
[10]文本的方向 direction
| 值 |
描述 |
| ltr |
默认。文本方向从左到右。 |
| rtl |
文本方向从右到左。 |
| inherit |
规定应该从父元素继承 direction 属性的值。 |
未完待续。。。