本帖最后由 麻绛 于 2018-8-24 21:58 编辑
DAY07_HTML
一.Web概念概述
* JavaWeb：
* 使用Java语言开发基于互联网的项目
* 软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷...
* 优点：
1. 用户体验好
* 缺点：
1. 开发、安装，部署，维护 麻烦
2. B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
1. 开发、安装，部署，维护 简单
* 缺点：
1. 如果应用过大，用户的体验可能会受到影响
2. 对硬件要求过高
* B/S架构详解
* 资源分类：
1. 静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！
* 静态资源：
* HTML：用于搭建基础网页，展示页面的内容
* CSS：用于美化页面，布局页面
* JavaScript：控制页面的元素，让页面有一些动态的效果
二.HTML的概念
1. 概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言
2. 快速入门：
* 语法：
1) html文档后缀名 .html 或者 .htm
2) 标签分为
a. 围堵标签：有开始标签和结束标签。如 <html> </html>
b. 自闭和标签：开始标签和结束标签在一起。如 <br/>
3) 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4) 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5) html的标签不区分大小写，但是建议使用小写。
3.标签入门:
1)文件标签：构成html最基本的标签
| <html></html> | html文档的根标签 | | <head></head> | 头标签。用于指定html文档的一些属性。引入外部的资源 | | <title></title> | 标题标签,在该标签内输入标题 | | <body></body> | 体标签,该标签内输入网页显示内容 | | <!DOCTYPE html> | html5中定义该文档是html文档,自闭和标签 |
2)文本标签：和文本有关的标签
| <!-- 注释内容 --> | 在两个横岗内填写注释内容 | | <h1></h1> to <h6></h6> | 标题标签,h1~h6:字体大小逐渐递减
| | <p></p> | 段落标签,表示该标签内的文字是一个段落 | | <br/> | 换行标签.自闭和标签 | | <hr/> | 展示一条水平线,自闭和标签
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right: 右对齐
| | <b></b> | 字体加粗 | | <i></i> | 字体斜体 | | <font></font> | 字体标签 color：颜色
size：大小
face：字体
| | <center></center> | 文本居中 |
* 属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3)图片标签：
| <img/> | 展示图片,自闭和标签
* 属性：
* width: 改变图片的宽度
* height: 指定图片的高度
* alt: 当图片加载失败时显示的文字
* src：指定图片的路径,该路径为相对路径,相对于当前HTML文件路径的相对路径
* ./ 代表当前目录 如 ./image/1.jpg
* ../ 代表上一级目录
|
4.)列表标签：
<ol>
<li></li>
</ol>
| 有序列表,会在列表每个元素前增加序号
属性:type设置序号的类型,如:1,a,i
start设置序号的起始值
| <ul>
<li></li>
</ul>
| 无序列表,不会在元素前添加序号可添加圆点和方框和圆圈
属性:type设置添加标记 disc 圆点, square 方框, circle 圆圈
|
5)超链接标签
<a href="要跳转的路径"target="跳转的方式"></a>
| href：指定访问资源的URL
target：
_self:在当前页面打开连接
_blank:在新窗口打开连接
|
6)div和span
| <span></span> | 文本信息在一行展示,行内标签,内联标签,本身没有任何效果,结合css使用 | | <div></div> | 每一个div占满一整行.块级标签.本身没有任何效果,结合css使用
|
7) 语义化标签
html5中为了提高程序的可读性，提供了一些标签。本身没有效果
| <header></header> | 页眉 | | <footer></footer> | 页脚 |
8. 表格标签：
| <table></table> | 定义表格
属性:
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
| | <tr></tr> | 定义行
属性:
bgcolor：背景色
align：对齐方式
| | <td></td> | 定义单元格
colspan：合并列
rowspan：合并行
| | <th></th> | 定义表头单元格,会将格内字体加粗 | | <caption><c/aption> | 表格表格的标题 | <thead>
<tbody>
<tfoot>
| 表示表格的头部分,本身没有什么效果
表示表格的体部分
表示表格的脚部分
|
DAY08_HTML&CSS
一.表单标签
概念:用于采集用户输入的数据,上传给服务器
| 标签<form></form> | 用于定义表单.可以定义一个范围,范围代表采集用户数据的范围
属性:
action: 指定提交数据的URL,#代表提交给自己
method: 指定提交方式,默认为get方式
提交方式共7种,2种开发较常用
get:
1.请求参数会在地址栏中显示.封装到请求行中
2.请求参数大小有限制
3.安全性差
post:
1.请求参数不会在地址栏中显示.会封装在请求体中
2.请求参数没有大小限制.
3.较为安全
注:表单中的数据要想被提交,必须定义name的值
注:地址栏请求参数的手动拼接: ...html?请求参数名1=参数值&请求参数2=参数值&.....
|
1.表单项标签
| <input/> | 输入项标签
可以通过type属性值,改变元素展示的样式并且输入项一般都会有文字描述自闭和.
注:表单中的数据要想被提交,必须定义name的值
id属性:每个标签都可以定义一个单独的id
type属性:
text: 文本输入框,默认值
placeholder:指定输入框的提示信息,当输入框的内容发生变化时
用户名<input type="text" placeholder="请输入用户名">
password: 密码输入框,输入的文字会变成密文
密码<input type="password" palsceholder="请输入密码">
注意:text和passord的value值为文本框默认展示的值,如不进行更改就会将value值提交
radio:单选框
注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 必须给每一个单选框提供value属性，指定其被选中后提交的值(选中哪个提交哪个的值)
3. checked属性，可以指定默认值,写法 checked="checked"
性别: 男 <input type="radio" name="sex" value="man" checked="checked">
女 <input type="radio" name="sex" value="woman">
checkbox：复选框
注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
爱好: 逛街<input type="checkbox" name="hobby" value="mai">
学习<input type="checkbox" name="hobby" value="java" checked="checked">
睡觉<input type="checkbox" name="hobby" value="sleep">
file: 文件选择框
暂时还无法提交服务器文件,以后学习先做了解
请选择文件<input type="file" name="file">
hidden: 隐藏域
提交一些隐藏信息,value会被提交
隐藏域<input type="hidden" name="yc" value="被提交的值">
按钮:按钮一般不需要文字描述该标签,也不需要name
submit: 提交按钮.
表示提交该form表单内的所有信息,一个表单想要提交必须有submit按钮,value="按钮上显示的文字"
<input type="submit" value="登录">
button: 一个按钮.
目前没有实际左右,将来回合JavaScript结合使用value="按钮上显示的文字"
<input type="button" value="一个按钮">
image: 将一个图片作为提交按钮
讲一个图片显示成为提交按钮,需要一个src属性的支持,指定图片的相对路径
<input type="image" src="image/regbtn.jpg">
H5新类型:
color:取色器
将选择的颜色提交,实现一些功能
选择颜色<input type="color" name="color">
date datetamp-local: 提交时间
date表示不带时分秒的选择,datetamp-local会有日期和包括时分秒
生日<input type="deta" name="birthday"> 不带时分秒
生日<input type="detatamp-local" name="birthday"> 带时分秒
email: 邮箱输入框
表示只能输入一个带@关键字的邮箱才能提交
邮箱<input type="email" name="email">
number: 定义数字
表示输入框只能输入数字
年龄<input type="number" name="age">
| <select>
<option></option>
<option></option>
<option></option>
</select>
| 注:表单中的数据要想被提交,必须定义name的值
下拉标签
属性:
name: 表示提交的数据的名称必须有,不然不会提交
子标签option: 选择项
value: 表示选择该项时提交的值,一般第一个提交值为--请选择--的option选择项标签,
该选择项value可以写成一个空字符串,表示选择该项不会提交任何值,其他value值表示选择该项后提交的value值
selected: 表示该选项为默认项
省份<select name="province">
<option value="" selected="selected">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
| | <textarea></textarea> | 注:表单中的数据要想被提交,必须定义name的值
文本域标签
属性:
cols: 列数
rows: 行数
name: 表示提交的数据的名称必须有,不然不会提交
自我介绍<textarea cols="10" rows="50">默认值</textarea>
注意:该标签的默认值直接写进<textarea></textarea>标签之内即可,不需要定义value值
| | <label></label> | 指定输入项的文字描述信息标签
for属性:
for属性一般会和input的id属性值对应.如果对应了，则点击label区域，会让input输入框获取焦点。
<label for="name">姓名<label/><input type="text" name="user" placeholder="请输入姓名" id="name">
| | 总结 | 按钮前面不需要文字描述,input,select,textarea都需要文字描述 |
二.CSS
概念cascding style sheets 层叠样式表
层叠:多个样式(显示效果)可以作用在同一个HTML元素(标签)上,同时生效
好处:
1.功能强大
2.将内容展示和样式控制分离,降低耦合,解耦,让分工协作更容易,提高开发效率
语法:
选择器 selector
1.基础选择器
1)id选择器
#id属性值{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
| 选择器选择具体的id属性值为元素
建议html页面元素的id唯一
|
2)元素选择器
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
| 选择具有相同标签名称的元素
id选择器的优先级高于元素选择器
|
3)类选择器
.class值{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
| 选择具有相同的class属性值的元素
a) 类选择器优先级高于元素选择器
b) 类属性值和id在HTML里本质上一样,都是"身份证"
c) 一个元素的class值可以有多个,如果写多个class值需要用空格隔开
d) 如果一个标签定义多个class值并给每个class值赋予属性,会只有一个生效
|
2. 扩展选择器：
1) 选择所有元素：
2) 并集选择器：
| 选择器1,选择器2{} | 一次选择多个HTML元素,注意与后代选择器区分 |
3) 后代选择器
| 选择器1 选择器2{} | 选择选择器1下的所有辈分选择器2元素
注意与后代选择器区分
|
4) 子元素选择器
| 选择器1 > 选择器2{} | 注意: 选择选择器1下的儿子辈选择器2选择的元素 |
5) 属性选择器
| 元素名称[属性名="属性值"]{} | 选择元素名称，属性名=属性值的元素签
注意: 一般用来查找不同type类型的input标
|
6) 伪类选择器：
| 元素:状态{} | 选择一些元素具有的状态
* 如： <a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
|
3.选择器中的属性
1) 字体、文本
| font-size | 字体大小
font-size: 30px;
| | color | 文本颜色
color: #FF0000;
| | text-align | 对其方式:
text-align: left;
right
center
| | line-height | 行高,该文本每行的高度
line-right: 100px;
|
2) 背景
| background | 该方法可用一张图片来修饰一个元素当做背景
background: URL(图片的相对路径);
修改图片为不重复填充和居中显示:
background: URL(图片的相对路径) no-repeat center;
|
3) 边框
| border | 设置边框，复合属性
border: 3px solid red;
属性分别为 线的粗细 实线 颜色
|
4) 尺寸
| width | 宽度
width: 10px
| | height | 高度
height: 50px
|
5) 盒子模型：控制布局
| margin | 外边距
当前标签距离父标签的边距
margin: auto; 水平居中
| | padding | 内边距
padding: 100px;
默认情况下内边距会影响整个盒子的大小
解决方法:
box-sizing: border-box;
设置盒子的属性，让width和height就是最终盒子的大小不会因为内边距的变化而改变盒子的变化
| | float | 浮动设置标签显示的位置,浮动的先后顺序按照元素定义的先后顺序
float: left;
right;
|
CSS的使用:
注:三种方式的生效顺序为就近原则
1.内联样式,行内样式
<div style="color:red;">hello css</div> 不推荐使用,无法解耦
2.内部样式,页面内样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
<style>
div{
color:red;
}
</style>
3.外部样式
外部定义css文件,然后在页面中通过<link herf="路径">引入
* a.css文件：
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
|
|
收藏
淘帖
踩
