Web:
什么是Web?
Web就是网页 是一种基于B/S的应用程序
Web应用程序是由多个Servlet、JSP页面、HTML文件以及图像文件等组成
B:Browser 浏览器
S:Server 服务器
——————————————————
C/S
C:client
客户端
S:Server
服务器
Web组成:
浏览器:代替用户向服务器发送请求
服务器:接受用户响应
通信协议:规范数据在网络中是如何打包即传递的
HTTP:HyoerText transfer portocal
超文本传输协议
Web服务器:
作用;
接受用户请求并且响应
存储Web信息
具备安全性
产品:
Apache
Tomcat
IIS -Internet Information Server
Nginx
....
技术:
JSP - Java Server page
PHP
ASP.net
Python Web (Django、Flask..)
Web浏览器:
作用:
代替用户向服务器发送请求
作为响应用户的解释引擎,向用户呈现界面
主流产品:
根据浏览器内核/引擎划分
Microsoft IE
Google
Chrome
Mozilla FireFox
Apple Safari
Opera Opera
浏览器引擎:
渲染引擎 - 解析 HRML、CSS 控制页面渲染效果
JS引擎 - 解释网页脚本文件
前段开发技术:
HTML CSS JavaScript
HTML:
HTML概述:
什么是HTML?
HyperText Markup language
超文本标记语言
作用:
书写网页结构
超文本:
具备特殊功能的文本 例如超链接
标记:
也叫标签 主要是用来标记网页中的内容
实现网页的布局和JS操作
HTML在技术算中的表现:
所有的网页文件在计算机中都是以.html、.htm文件储存的
开发工具:
记事本
Editplus、DreamWeaver
sublime、Webstorm、Hbuilder、VSCode、Atom
运行工具:
Chrome 浏览器
调试工具:
开发者工具 快捷键:F12
HTML基础语法:
标签/标记/元素:
在网页中具有特殊功能的符号
HTML所有的标签都以<>为标致区分
标签分类:
双标记:
成对出现 有开始有结束
语法:
<开始> 内容 </结束>
<h1> hello world </h1>
单标记:
只有开始没有结束 可以手动添加/表示结束
语法:
<标签名>
或
<标签名/>
<br> --- <br/>
<hr> --- <hr/>
标签的嵌套:
在双标记中出现其他的标记
超链接:
<a>首页</a>
文本加粗:
<b>首页</b>
加粗超链接:
<a>
<b>首页</b>
</a>
嵌套结构中 外层元素成为父元素 内层元素叫子元素
文档结构:
<html>
<head> </head>
<body>
hello world!
</body>
</html>
书写规范:
HTML不区分大小写
推荐用小写
保持适当的缩进 增强代码可读性
标签属性:
主要用来修饰标签的显示效果
语法:
属性由属性名和属性值组成:
属性名=“属性值”
属性的声明须写在开始标签中
<开始 属性名=“属性值”> ... </结束>
每个标签都可以设置多个属性, 属性之间使用空格隔开
HTML注释:
<!--
注释内容
-->
注意:
注释不能写在标签里 注释不能嵌套
HTMl的换行于空格:
HTML会忽略多余的 空只显示一个空格
如果需要多个空格或者<>
都需要使用特殊符号来代替
HTML结构组成:
文档类型声明:
<!doctype html> //H5的声明方式
作用:
告诉浏览器当前使用的HTML版本
以便浏览器能正确解析HTML的标签和渲染样式
书写位置:
文档的第一行代码
文档的开始和结束:
在文档类型声明之后使用 <html></html> 表示文档的开始和结束
在HTML标签中包含连个子元素
<head> </hesd>:
网页的头部信息 包含网页的标题,选项卡的图标
网页的关键字 作者 描述信息等 还可以引用外部的资源文件
子元素:
1.设置网页的标题:
<title> 我的第一个网页 </title>
2.设置字符编码:
<meta charset="utf-8">
浏览器按照utf-8编码格式解析网页
<body> </body>:
网页的主体信息 网页所呈现的内容
都要写在body里
文本相关的标签:
字符实体(具有
特殊意义的符号)
表示一个空格
< 表示小于号 <
> 表示大于号 >
©
表示版权符号 @
¥;
表示人民币符号 ¥
文本样式标签:
斜体显示文本:
<i> </i>
斜体显示
<u> </u>
文本添加下划线
<b> </b>
文本加粗
<s> </s>
删除线
<sup> </sup>上标
<sub> </sub>下标
这些标签可以与其他的标签或文本共行显示
标题标签:
可以以不同的文字大小和加粗方式显示文本
语法:
<hn> </hn> n:取值1~6
可以改变文字大小和自动加粗
每个标题都会具备垂直的空白距离
每个标题都独占一行 不与其他元素共行显示
每个标题都可以添加属性align
取值:
left center right
默认左对齐
段落标签:
突出显示一段文本 每一段的文本都独占一块/行
不与其他元素共行 并且具备垂直空白距离
语法:
<p> </p>
属性:
align 设置文本水平对齐方式
left center right
格式标签:
<br> --- <br/>
换行标签
<hr> --- <hr/>
水平线
分区标签:
块分区:
<div> </div>
划分页面结构 配合CSS实现页面布局
独占一块/行显示
行内分区元素:
<span> </span>
设置同一行文本的不同样式(结合CSS)
可以与其他元素或文本共行显示
允许一行文本中使用span元素
标签分类:
块级元素:
只要是在网页中独占一行 不予其他元素共行显示
的元素都是块级元素
都可以来做布局
所有的块级元素都可以添加align属性设置内容的水平对齐方式
行内元素:
可以与其他元素共行显示
列表标记:
按照重是上到下的方式排列数据
并且能够显示项目符号在数据前面
列表的组成:
列表的类型:
有序列表 <ol> </ol>(ordered list)
默认按照数字排列
无序列表 <ul> </ul> (unordered list)
默认以实心原点作为标识
列表项:
列表中的每一天数据都是一个列表项
语法:
<li> </li>
列表项需要嵌套在列表标签中使用
列表属性:
有序列表---
ol
type属性:设置项目符号
1:按照数字排列(默认)
a:按照小写字母顺序排列
A:按照大小字母顺序排列
i:罗马数字排列(分大小写)
start属性:设置从第几个字符开始排列
只能取值数字
无序列表---
ul
type属性:设置项目符号
disc:实心原点(默认)
circle:空心圆的
square:空心方框
none:不显示项目符号
列表嵌套:
在一个列表中又出现了其他的列表
图像与超链接:
URL(Uniform resource Locator)
统一资源定位符
用来表示网络中资源的位置 俗称路径
URL的组成:
协议、域名、主机名、文件
URL分类:
绝对路径:
从根目录开始查找
常用于网络文件路径
相对路径:
从当前所在的目录开始查找
根相对路径:
从Web程序所在的目录开始查找资源文件
URL中不能出现中文
URL严格区分大小写
图像标签:
在网页中插入一张图片
语法:
<img>
属性:
src:指定文件路径
width:设置宽度以像素为单位px
height:设置高度(px)
sorc必填 宽高可以省略
省略为图片默认大小
title:
用来设置图片的标题
当鼠标悬停在图片上方时显示
alt:
用来设置显示文件加载失败提示
非常简单没什么东西.............