- 客户端分为手机客户端和浏览器客户端 - 在客户端点完之后(各种链接,搜索等),就会发送请求,请求从客户端发送到服务端上(web服务器) - 服务器就是一台高性能的电脑 - web服务器就是电脑上安装了web服务软件 - 我们在一台电脑上安装了web服务软件,这台电脑就可以被称之为是web服务器 - 我们开发的网站实际上就是部署在web服务软件中,tomcat中的 - 业务逻辑是判断发送的请求的目的 - 数据存储是在数据库服务器 - 数据库服务器是电脑上安装了数据库软件 - 安装了数据库软件的电脑被称为数据库服务器 在手机上点击首页的完整流程: 1. 手机客户端点击首页,会给服务端发送一个请求 2. 服务端根据自身的业务逻辑,判断出请求的目的是请求首页 3. 服务器会在数据库服务器中去提取响应的数据 4. 数据库服务端把web服务器想要的数据返回给web服务器,数据返回的形式是纯数据 5. web服务器会把从数据库服务器中返回的纯数据装到相应的页面中,这里是首页的页面中 6. 最后web服务器会把这个首页的页面返回给客户端,也就是手机,此时手机就会得到想要的首页
所以以后我们想要实现一个完整的网站:
需要写页面,服务器端的代码,数据库服务器端的代码
- h1-h6 文本标题,特点:独占一行,自带上下间距,字体加粗,文本标签中可以用属性align指定文本标题的位置:
内容标题1
- p 段落标签,特点:独占一行,自带上下间距,即使两个段落标签写在了同一行中,在页面中也都是分别独占一行
- hr 水平分割线
- br 换行
- b 加粗
- i 斜体
- u 下划线
- s 删除线
- 无序列表: ul和li 组合 unodered list list item列表项
- 有序列表: ol和li 组合 ordered list
- 列表嵌套: 有序列表和无序列表可以任意无限嵌套
- src: 资源路径
- 相对路径:访问站内资源
- 图片和页面在同级目录:直接写图片名
- 图片在页面的上级目录:
../图片名
- 图片在页面的同级目录中的下级目录:文件夹名/图片名
- 绝对路径:访问站外资源,图片盗链(复制图片地址),有找不到图片的风险
- alt :图片不能正常显示时显示的文本
- title : 图片标题(鼠标停在图片上显示的文本)
- width/height : 设置宽高,只设置宽度时高度会自动等比例缩放(图片的宽高比是不变的)
- 图片大小的两种显示方式: 1像素px 2.上级元素的百分比
补充:body是比整个窗口的各个方向小了8个像素,为了让页面好看一点
四.表格table-
相关的标签:
-
tr : table row 行
-
td : table data 列:元素中的文本通常是普通的左对齐文本。
-
th : 表头:元素中的文本通常呈现为粗体并且居中
-
caption : 标题,表格的标题,会出现在该表格的正上方
-
相关属性
-
border : 边框
-
colspan : 跨列
-
rowspan : 跨行
补充：跨行和跨列都是设置在先出现的行或者列中，然后删除其他被合并的行或者列
| 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | |
|---|---|---|---|---|---|
| 上午 | 语文 | 语文 | 语文 | 语文 | 语文 |
| 数学 | 数学 | 数学 | 数学 | 数学 | |
| 午休 | |||||
| 下午 | 物理 | 物理 | 物理 | 物理 | 物理 |
| 化学 | 化学 | 化学 | 化学 | 化学 | |
- 作用:获取用户输入的各种信息,并且提交给服务器
- 学习form表单主要学习的就是有哪些控件
- input type = "text" 文本框
- input type = "password" 密码框
- input type = "radio" 复选框
- input type = "checkbox" 多选框
- input type = "date" 时间表
- input type = "file" 选择上传文件
- input type = "submit" 提交按钮
重点：下拉列表
Title
六.分区标签
- 作用：可以理解为是一个容器，将多个有相关性的标签进行统一管理
- 块级分区标签div:特点是独占一行
- 行内分区标签span:特点是共占一行
1. 页面如何划分?至少分为三大区(头,体,脚)每个大的区域再划分为n个小的区域 2. HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性,这几个标签的作用和div一样都是块级分区标签 - header 头 - footer 脚 - main 主体 - section 区域 - nav 导航七.Css层叠样式表
- Cascading Style Sheet
- 作用:美化页面(装修)
如何在HTML页面中添加CSS样式代码
- 三种引入方式
- 内联样式:在标签的style属性中添加样式代码,弊端:不能复用
- 内部样式:在head标签中添加一个style标签,在标签体内用标签名选择器指定页面中所有同名标签中写样式代码,可以实现复用但是只能本页面使用
- 外部样式:在单独的css样式文件中写样式代码,在html页面d的head中通过link标签引入,可以实现多页面复用,可以将html代码和css样式代码分离:
Title
内联样式1
内联样式2
内部样式1
内部样式2
外部样式1
外部样式2
八.选择器
作用:通过选择器找到页面中的元素之后再添加样式
1.标签名选择器:选取页面中所有同名标签覆盖的范围太广,没法做到精确实现
格式:标签名{样式代码}
Title
样式1
样式2
2.id选择器:当需要选择页面中某一个元素时使用
id选择器可以单独的选择页面中某一个标签
格式:#id{样式代码}
Title
样式1
样式2
3.类选择器:当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择
格式: .class{样式代码}
Title
苹果
香蕉
橘子
洗衣机
电视机
冰箱
4.分组选择器:分组选择器可以将多个选择器合并成一个
实际上就是在style中将多个选择器写在一起,统一设置样式格式
格式:h4,#id.class
Title
苹果
香蕉
橘子
洗衣机
电视机
冰箱
5.属性选择器:通过元素的属性选择元素
格式:标签名[属性名="属性值"]{样式代码}
Title
6.任意元素选择器:选择页面中所有标签
选取页面中的所有元素
格式: *{样式代码}
Title
苹果
香蕉
橘子
洗衣机
电视机
冰箱
练习题:选择器练习
题目要求:
- 把张学友改成绿色
- 把刘德华和悟空改成蓝色
- 修改取经3人和刘备的背景为黄色
- 修改密码框的背景为红色
- 给所有元素添加红色的边框
Title
- 张学友
- 刘德华
- 郭富城
