08-29
1. HTML简介
概述: Hyper Text MarkUp Language, 超文本标记语言.
超文本:
比普通文本的功能更加强大, 里边可以放: 图片, 音频, 视频等.
标记语言:
由标签组成, 可以被浏览器识别.
作用:
用来设计(静态)页面的.
静态页面: 指的是页面中的内容是固定不变的, 不管什么时候看到的内容都是一样的.
//例如: html, js
动态页面: 指的是页面中的内容是 由程序自动生成(读取数据库, 然后展示) , 不同时间点看到的数据不一样.
//例如: 12306卖票
//JSP, Servlet这些技术是用来开发动态页面的.
特点:
1) HTML不区分大小写, 但是为了阅读方便, 建议小写.
2) HTMl是由标签组成, 可以被浏览器识别.
//例如: <font color="red" size='6'>我是字体标签</font>
3) 上述的标签中, 前边的标签叫: 开始标签(也叫开放标签), 后边的标签叫结束标签(也叫闭合标签)
4) 没有闭合标签的标签叫: 自闭合标签.
//例如: <br />, <hr />
5) 标签可以有属性, 属性值用引号引起来. //单双引均可.
6) html文件的后缀名可以是.htm, .html, 前者是老的命名规范, 后者是新的命名规范.
7) HTML的基础格式是: 有<html>标签包裹, 由头标签<head>和体标签<body>组成.
<html>
<head>
<title>这里写标题</title>
</head>
<body>
//俗称的页面的大白部分
这里写的是给用户展示信息的地方
</body>
</html>
8) HTML中注释的写法:
<!--注释的内容-->
9) 如果涉及到标签的嵌套了, 建议包裹嵌套, 不建议交叉嵌套.
2. HTML标签之字体标签: <font>
属性:
size: 设置字体大小的, size的值的范围是:1-7, 字体最小的是1.
//实际开发中, 我们都是通过样式去设置字体大小的, 上述的设置方式一般不用.
color: 设置字体颜色.
//可以通过 英文字母 进行设置.
//也可以通过 RGB 三原色进行设置. Red:红色, Green:绿色, Blue:蓝色
face: 设置字体格式的.
3. HTML标签之排版标签:
<h数字>: 标题标签, 数字的范围是:1-6
<p>: 段落标签
<b>: 加粗
<i>: 斜体
<u>: 下划线
<br /> 换行符
<hr /> 分割线(自带换行功能)
4. HTML标签之列表标签: <ul>,<ol>
无序列表: <ul>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
type属性:
disc: 实心圆点.
circle: 空心圆点.
square: 实心正方形.
有序列表: <ol>
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
属性:
type:
数字,
大小写字母,
大小写罗马数字.
strat: 设置从哪个数字开始, 只针对数字类型有效.
5. HTML标签之图片标签: <img>
属性:
src: 设置图片的路径.
注意: 图片路径的问题.
如果图片在该html文件的上级: ../表示上一级.
如果图片和该html文件在同一级: 直接文件名即可.
如果图片是该html文件的子集: 也是直接写路径即可.
border: 设置图片的边框.
height: 设置图片的高度.
width: 设置图片的宽度.
alt: 图片不存在的时候显示的内容.
6. HTML标签之超链接标签: <a>
属性:
href: 超链接的路径.
相对路径: 跳转项目内部的页面.
绝对路径: 跳转到外部页面. 需要写: http://
target: 页面的打开方式
_self: 在自身页面中打开.
_blank: 新建页面打开.
_parent:在指定的界面中打开.
注意: parent是标签名字, 写哪个名字就在哪个标签中打开.
7. HTML标签之表格标签: <table>
属性:
border:
height:
width:
align: 设置表格居中(center),左对齐(left), 右对齐(right).
bgcolor: 设置表格的背景色
<tr>: 表示行
<td>: 表示列
colspan: 跨列.
rowspan: 跨行.
<th>: 表示列, 在<td>的基础上,多了居中和加粗的功能.
案例:
单表格标签的使用.
表格的嵌套使用.
8. HTML标签之框架标签: <frameset>
<frameset>
属性:
cols: 纵向切割.
rows: 横向切割.
<frame>: 切割后的每一个模块.
页面布局:
空格
> 大于号
< 小于号
08-30
1. HTML标签之表单标签: <form>
概述: 就是将现实生活中的表单变为"页面形式"的表单.
A: 表单标签是<form>标签, 写在<form>标签中的标签是: 表单项.
B: 表单项必须放在<form>标签中才能提交.
表单项分类:
1.输入项: //输入项都是<input>标签, 根据输入项的类型不同, 输入项也不同.
//格式: <input type="输入项的类型"/>
text: 文本框
password: 密码框
radio: 单选框 //根据name属性区分是否是同一组数据.
checkbox: 复选框 //根据name属性区分是否是同一组数据.
file: 文件框(就是让你选择文件的路径的)
submit: 提交按钮
reset: 重置按钮
image: 图片按钮
button: 普通按钮, 没有任何自带的功能, 功能需要用户自定义.
hidden: 隐藏域, 例如: 某些信息是指向给后台(程序员)看, 不想提示给用户, 就可以用该输入项.
2.下拉列表: <select>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
3.文本输入域: <textarea>
属性: rows:设置行数 cols:设置列数
2. 表单项的属性:
name: 表单项的名称(用于接收数据)
value: 表单项的值.
readonly:只读
默认被选中:
单选框和复选框: checked
下拉列表: selected
3. 表单标签的属性:
action: 要提交数据到哪个页面, 默认是提交到当前页面.
路径的划分:
绝对路径: 网站外部的页面, 必须写http://
相对路径: 网站内部的页面.
method: 提交方式
get: 提交方式不安全, 数据会显示在地址栏中.
提交的数据有大小限制.
post: 提交方式相对安全, 数据封装在"请求体"中.
提交的数据没有大小限制.
扩展:
标准Http协议支持六种请求方法，即：
1、GET
2、POST
3、PUT
4、Delete
5、HEAD
6、Options
但其实我们大部分情况下只用到了GET和POST。如果想设计一个符合RESTful规范的web应用程序，则这六种方法都会用到。不过即使暂时不想涉及REST，了解这六种方法的本质仍然是很有作用的。大家将会发现，原来web也是很简洁明了的。下面依次说明这六种方法。
1，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。
2，HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。
3，PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。
举个例子：如一个用于提交博文的URL，/addBlog。如果用PUT，则提交的URL会是像这样的”/addBlog/abc123”，其中abc123就是这个博文的地址。而如果用POST，则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然，PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。
4，DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。
5，POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。
6，OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。
以上的六种方法，我们可以跟数据库的CRUD增删改查操作对应起来： CREATE ：PUT READ：GET UPDATE：POST DELETE：DELETE 这样一来就实现了HTTP和数据库操作（其实不光是数据库，任何数据如文件图表都是这样）的完美统一，这也是REST的精髓之一
4. CSS的简介
概述: Cascading Style Sheets, 层叠样式表.
作用:
用来美化页面的.
//html相当于人的骨骼, css是给人化妆, js是让人(局部)动起来.
分类:
行内样式: //直接写在元素(html的标签)中的样式.
内部样式: //写在<head>标签的,<style>标签中.
外部样式: //写在后缀名为.css的文件中.
5. CSS的引入方式之: 行内样式.
格式:
<div style="属性名:属性值; 属性名:属性值"></div>
作用: 只针对于当前元素有效.
6. CSS的引入方式之: 内部样式.
格式: //写在<head>标签的,<style>标签中.
选择器{
属性名:属性值;
属性名:属性值;
}
作用: 针对于当前页面内的部分元素有效.
7. CSS的引入方式之: 外部样式.
格式: //后缀名为.css的文件中
选择器{
属性名:属性值;
属性名:属性值;
}
作用: 可以用来统一整个网站的风格.
8. CSS中的选择器:
元素选择器:
格式:
元素名{
属性名: 属性值;
属性名: 属性值;
}
作用: 针对于该类元素有效.
id选择器:
格式:
#选择器名{
属性名: 属性值;
属性名: 属性值;
}
作用: 给指定id(id名和选择器名一样的元素)设置样式的.
//记忆: 每个标签都有id属性, id属性尽量保证唯一.
类选择器:
格式:
.选择器名{
属性名: 属性值;
属性名: 属性值;
}
作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的.
后代选择器: //理解
(元素,id,类)选择器 元素名{
//样式
}
作用: 设置指定的元素内的 指定的"子标签"的样式的.
伪类选择器: //理解
a:link{} //未选中连接
a:active{} //选定的链接
a:visited{} //已访问的链接
a:hover{} //鼠标移动到链接上
作用: 主要用来操作超链接的.
9. CSS的样式
背景:
background-color: 设置背景色
字体:
font-size: 设置字体大小
文本:
text-decoration:将其值设置为:none,可以取消超链接字体的下划线.
color: 设置字体的颜色
边框:
border: 1px solid blue; //1像素, 蓝色实线
//solid: 单实线, double:双实线 dotted:(点)虚线 dashed:(-)虚线
width: 设置标签的宽度
height: 设置标签的高度
10. CSS的浮动
概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局,
就需要用到: 窗体浮动.
float: //设置浮动.
属性值: left, right
clear: //清除浮动.
属性值: both
11. CSS的盒子模型
概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素
(元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距).
外边距: margin
内边距: padding
margin: 值1 值2 值3 值4; //离上,右,下,左的间距分别是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右); //离上,右,下,左的间距分别是: 值1 值2 值1 值2;
margin: 值1; //离上,右,下,左的间距分别是: 值1 值1 值1 值1;
如果说不足以满足四个边距的值, 参考: 上左.