- Web -网页开发
- 网页是基于浏览器的应用程序
B/S : Browser/Server 浏览器与服务器交互模式
C/S :Client/Server 客户端与服务器交互 - 组成
- 浏览器
1. 代替用户发请求(用户代理)
2. 解析数据并呈现给用户 - 服务器
1. 存储数据
2. 处理并响应请求 - 协议
通信协议,规范数据在传输过程中以何种形式传递
http(s) : HyperText Transfer Protocal
超文本传输协议
- 浏览器
- 产品
- 浏览器
Chrome - Google
IE / Edge - Microsoft
Safari - Apple
FireFox - Mozilla
Opera - Opera
引擎 :
渲染引擎:关系整个页面的渲染
JS引擎:对JS代码的处理 - 服务器
Apache
Tomcat
IIS - Internet Information Service
Nginx
- 浏览器
- HTML介绍
- 超文本标记语言(HyperText Markup Language)
是浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容 - 标签
也称为标记或元素,标记内容
语法 :标签以<>为标志,标签名不区分大小写(建议小写)
分类 :
双标签 :有开始有结束,成对出现
单标签 :只有开始标签,没有结束标签 - 使用
- 网页文件都以.html 或 .htm 为后缀
- 添加网页基本结构
<!doctype html> //文档类型声明 <html> //文档开始 <head> //文档头部 <title>网页标题</title> <meta charset="utf-8"> //字符编码 </head> <body> //文档主体 </body> </html>//文档结束
- 标签嵌套(在双标签中嵌套添加其他标签,称为标签嵌套)
- 外层元素称为父元素,内层元素称为子元素
- 多层嵌套中,外层元素称为祖先元素,内层元素称为后代元素
(祖先元素) (祖先/父元素)
html -> head -> title
(直接子元素) (间接子元素) - 兄弟元素,同级元素之间称为兄弟关系
head body 兄弟关系
meta title兄弟关系 - 单标签与标签属性
- 标签的闭合以 / 为标志,单标签只有开始没有结束,可以书写为 : 手动在末尾添加/表示闭合
- 标签属性
由属性名和属性值组成,属性值使用"" / ''表示,书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果
同一个标签中可以添加几组标签属性,使用空格间隔
示例 :<meta charset="utf-8"> <img src="" width="" height="">
- HTML语法规范
- 标签名不区分大小写
<html> <HTML> <Html> 建议全小写
- 双标签如果缺少闭合,不报错,自动添加闭合标签
- 标签名书写有误,不报错,对标签的解析会出现问题
- 适当缩进和注释增加代码的可读性
注释 :<!-- 注释内容 --> 注意 :注释不能嵌套使用
- 标签名不区分大小写
- 常用标签
- head中常用标签
字符集设置,网页标题设置,选项卡图标设置 - body中常用标签
1)标题
2)段落
3)普通文本
4)格式标签
5)图片与超链接- 图片
默认按照原始尺寸显示
标签属性:
width/height:手动调整图片大小,取像素值,如果某个方向缺省 ,图片会等比例拉伸。
title:设置图片标题,鼠标悬停在图片上方时显示
alt:设置图片加载失败时的提示文本 - 超链接
通过用户点击,能够跳转至其他的资源文件<a href="">百度</a> 标签属性: href 必填,设置目标文件的URL target 设置目标文件的打开方式,默认为_self,在当前窗口打开;可设置为_blank表示新建窗口打开 特殊取值: href="" 为空会造成页面刷新 href="#" 不刷新页面,但是修改当前页面的URL href="javascript:void(0)" 阻止超链接默认的跳转行为,可以自定义添加
7)列表<div></div>用于页面结构的划分,结合CSS实现网页基本结构和布局
1.有序列表(ordered list)<ol> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ol> ``` 2.无序列表(unordered list) <ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ul> 3.列表嵌套 在列表中嵌套添加内层列表,常见于下拉菜单。注意使用父子关系的嵌套 例: <li> <ol> <li></li> </ol> </li> 8)表格 通过结构化的行和单元格显示数据或辅助排版 标签: <table></table>:外围结构标签 <tr></tr>:table row 表格中的行 <td></td>:table data 行中的单元格 单元格合并: 属性只能添加在单元格上 跨列合并:colspan="3" 包含自身在内合并3个单元格 跨行合并:rowspan="4" 包含自身在内合并4个单元格 注意:一旦发生单元格合并,删除多余的单元格,保证表格结构 表格行分组标签: 可以将表格中的若干行划分为一组,表示表头,表尾,表格主体。默认情况下,所有的行都会自动加入表格主体中<tbody></tbody>. 表头行分组:<thead></thead> 表尾行分组:<tfoot></tfoot> 表格主体:<tbody></tbody> th标签的使用: th与td用法一致,表示单元格,自带加粗与居中效果 9)表单 采集用户信息并且提交给服务器 1.组成:表单元素和表单控件 2.表单元素: 表单负责发送数据 <form action="" method="" enctype=""> 表单控件 </form> 标签属性: action:设置数据的提交地址 method:设置数据的提交方式,默认使用get提交,涉及二进制数据或加密数据必须使用post方式提交 enctype:设置数据传输时的编码类型。默认编码类型对应get方式,将数据转换成字符串以键值对的形式拼接在URL后面,携带传输;涉及二进制数据提交,必须指定post,同时设置编码类型"multipart/form-data". 3.表单控件: 负责收集用户信息或提交功能,重置,普通按钮
- 图片
- head中常用标签