网站与网页
一个网站包含N个网页, 网站与网页是1对N的关系
服务器
服务器本质就是一台电脑
服务器的特点:
- 配置比较高(用户量、数据访问量越大, 对服务器性能要求越高)
- 24小时不关机
服务器的作用:
- 存放网站
- 实时为客户端提供数据服务
服务器死机 —– 宕机
客户端
客户端指PC端、移动端、只能设备等联网设备
在浏览一个网页时, 客户端起码向服务器发送一个请求缓存(cache)技术
缓存指第一次访问网页后在本地电脑存放的一些数据
好处:
- 减少网络请求次数
- 节省用户流量
- 加快网页的响应速度
- 提升用户体验
坏处:
- 占用本地电脑内存空间
- 服务器更改数据后，客户端可能没有得到及时响应
解决缓存问题 —– 清除缓存
URL
URL全称 uniform resource locator 统一资源定位符
ERL就是资源的地址, 位置, 互联网上每个资源都有一个唯一的URL
即通过一个URL能找到全球唯一一个资源
URL的基本格式: protocol://hostname/path 协议 :// 主机地址 / 路径
常见协议:
- http 超文本传输协议 https是http协议的安全版 格式：https://
- file 访问本地主机的资源, 不用加主机地址 格式：file://
- mailto 访问电子邮件地址 格式：mailto://
- ftp 访问共享主机的资源 格式：ftp://
- ed2k
- thunder
网页的组成
- HTML — 内容结构 (文字、图片、表格)
- CSS — 视觉体验 (视觉效果、美观)
- JavaScript — 交互处理 (动态显示)
HTML标签元素的书写格式
非替换元素(有实际内容的, 双标签), 如 html、head、title、body等
格式:
<起始标签></结束标签>如<title>网页标题</title>替换元素(没实际内容的, 单标签), 如 a、img、input
格式:
标签不区分大小写, 建议使用小写<标签名>如<br>转行标签
元素的嵌套
意义: 将多个功能相似的的元素包装成一个整体来使用，方便对它们进行归类、统一操作
元素的属性
作用: 属性可以增强元素的功能
语法: <起始标签 属性名="属性值">
HTML文档的注释
作用: 一般用来解释某段代码的具体含义、作用
意义:
- 只给开发者看，方便回忆，检查旧代码，方便团队协作
- 可将暂时不需要(或出错)的代码注释掉
html中的注释语法: <!-- 注释 -->
网页基本结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<link rel="icon" href="图标URL">
<style>CSS样式</style>
<script>javascript<script>
</head>
<body>
HTML标签
</body>
<html>
文档声明
作用: 告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
语法: <!DOCTYPE html>
标准模式下: 页面排版及JS解析是以该浏览器支持的最高标准来执行
怪异模式下: 向后兼容, 模拟老浏览器模式行为, 防止页面无法正常工作
html元素
html元素是HTML文档的根元素，其他所有元素都是html元素的子元素，W3C标准建议html有一个lang属性
语法: <html lang="zh"></html>
离线存储资源
manifest 属性, 规定文档的缓存manifest的位置
HTML5 引入了应用程序缓存, 这意味着 Web 应用程序可以被缓存, 然后在无互联网连接的时候进行访问(即 离线存储资源 ):
在线 的情况下, 浏览器发现<html>元素有manifest属性, 就会请求 manifest文件, 如果是第一次访问 App, 浏览器根据 manifest 文件的内容下载相应资源并进行离线存储, 再次访问时, 会使用离线资源加载页面, 对比新旧 manifest 文件, 如有变动, 重新下载资源并进行离线储存
离线 的情况下, 如果有离线存储资源, 浏览器直接使用并加载页面
head元素
head元素里面的内容是HTML文档的一般信息(元数据)
语法:
<head>
<meta chatset="UTF-8">
<title>网页标题</title>
</head>
head元素中常见的子元素:
title(必须), 语法:
<title>网页标题</title>meta, 辅助性标签, 提供网页的原信息(针对搜索引擎和更新频度的描述和关键词、定义页面使用的语言), 放在head元素的最前面
a)
<meta charset="UTF-8">设置网页的字符编码 常见字符编码:
UTF-8 万国码 包含多国文字
GBK/GB2312 汉字/数字/英文字母
ISO-8859-1 只包含数字和英文字母
b)
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE浏览器以最新的解析器 , 去解析当前的页面
快捷键: meta:compat
c)
<meta name="viewport" content="width=device-width, initial-scale=1"> 客户端屏幕尺寸适配
快捷键: meta:vp
link, 引入外部资源, 常用于引CSS样式表
a)
<link rel="icon" href="图标URL">引入网站图标b)
<link rel="stylesheet" href="外联样式表URL">引入外联样式表style, 创建一个书写文档样式表的环境, 语法:
<style>书写CSS样式</style>script, 定义(创建JS环境/引入外联JS)客户端脚本
base, 定义HTML文档内部a标签的默认行为
noscript, 在不支持JS的浏览器中显示替换的内容
body元素
body元素里面的内容是网页的具体内容和结构
语法: <body>网页内容</body>
元素分类
- 按显示类型分: 块级元素, 行内级元素
- 按内容类型分: 替换元素, 非替换元素
注意点
块级元素理论上可以嵌套其他任何元素, 特殊: p元素不能包括其他块级元素
行内级元素一般只能包含行内级元素
行内级替换元素
a) width、height、margin-top、margin-bottom 等属性不起作用
b) padding-top、padding-bottom、border-top、border-bottom 等属性不占实际位置
