1 WEb基础知识
1.1 Web与Internet
1.1.1 Internet简介
Internet是全球性计算机互联网络,“因特网”;
主要提供Telnet、Email、WWW、BBS、FTP等服务;
基本实现技术:
分组交换原理:信息在Internet上被分成多组小数据包(分组)进行传输,到达目的地后将数据包重组为信息
TCP/IP协议簇
1.1.2 Web与Internet
Web是运行在Internet之上一种B/S结构的应用程序,Internet为Web提供网络环境;
Web的出现极大地推动Internet的普及与推广
1.1.3 Web简介
万维网,WWW,把各种类型信息和服务无缝连接,提供生动的图形用户界面
信息:文字、图片、声音、视频;
服务:News、FTP、Telnet、Mail等;
万维网是无数文档的集合,文档按文档编写方式、传输方式驻留在因特网的某个地方;
1.2 Web的工作原理
1.2.1 Web的工作原理
Web是基于Internet的多媒体信息服务系统:
1)基于浏览器/服务器模式(B/S);
2)由Web服务器、浏览器(Browser)和通信协议三部分组成实现数据的传输和展示;
3)通信协议采用的是HTTP协议:超文本传输协议(Hypertext Transfer Protocol),规范数据如何打包和传输
4)在Web服务器上主要以网页(采用超文本标记语言HTML编写)的形式来发布多媒体信息
5)浏览器连接到Web服务器并获取网页,负责解释HTML网页文档并显示在用户的屏幕上;
1.2.2 Web服务器
主要功能:
存储数据,接收并响应浏览器的请求;
提供程序运行环境;
安全功能;
1.2.3 Web浏览器
主要功能:
代表用户发送请求;
作为HTML解释器和内嵌脚本程序执行器;
用图形化的方式显示HTML文档;
1.3 Web的相关技术
1.3.1 Web的相关技术
1.3.2 服务器端技术
运行于服务器端,大多提供数据库访问的能力;PHP、JSP、ASP
1.3.3 客户端技术
运行于客户端,由浏览器解释运行;HTML、CSS、JavaScript
2 HTML入门
2.1 概述
标签闭合,标签小写,不乱嵌套,能提高搜索概率;
使用外链接css和js脚本,结构与表现分离,文件下载与页面的速度更快,内容能被更多用户和更广泛的设备访问,需要的代码和组件更少,容易维护,提高网站的易用性。
2.1.1 超文本
Web是超文本文件的集合;
超文本文件是Web的基本组成单元,通常是以.html为后缀的文件;
Web网页之间通过超文本中的超级链接形成联系;
2.1.2 HTML定义
- HTML:超文本标记语言HyperText Markup Language,纯文本类型语言,使用标记<>将网页中内容逐一标识出来;
- 设计网页的标记语言,常以.html或.htm为后缀;
- 由浏览器解析执行;
- 在HTML页面上可以嵌套使用脚本语言编写的程序
2.2 HTML基础语法
2.2.1 标记语法
- HTML用于描述功能的符号称为“标记”(标签,元素,节点,对象),<h1>等;
- 标记在使用时必须使用尖括号<>;
- 标记也分封闭类型和非封闭类型的标记;
- 封闭类型标记(双标记)成对出现<></>,否则导致后续后所有内容都为该标签;
- 非封闭类型标记(单标记)不能包含内容;<>或</>
2.2.2 元素
元素即每一对尖括号包围的部分,<body></body>包围的部分叫做body元素;
元素相当于标识网页文档的不同部分的小标签;
元素可以包含文本内容和其他元素,也可以是空标记;
2.2.3 元素嵌套
元素之间互相嵌套可以形成更复杂的语法,但需要注意嵌套顺序;
2.2.4 属性和值
属性用来修饰元素,在开始标记里声明,不同属性之间用空格隔开;
每个属性都有值,用引号包含。
<关键字 属性1=“值” 属性2=“值2”…></关键字>
2.2.5 标准属性
每个元素都有特有的属性,部分属性是大多数元素支持的称为标准属性(通用属性);
id:唯一标识,id值不能重复;
title:鼠标悬停在元素上所提示的文本;
class:在css中使用,引用类选择器;
style:在css中使用,定义元素的行内样式
2.2.6 注释
语法:<!- -注释内容- ->;
注释本身不能嵌套
2.3 文档结构
2.3.1 HTML文档结构
文档类型说明+html页面;
html页面:文件头+文档主体;
2.3.2 文档类型声明
作用:告诉浏览器HTML的版本类型;
语法:<!doctype html>
2.3.3 <html>元素
作用:表示整个网页的开始和结束;
语法:<html></html>
在html中分为两部分:
1)<head></head>表示网页头部定义全局信息;
< style>< /style>定义内部样式
< link/>引用外部样式文件
2)<body></body>定义网页主题内容;
2.3.4 <head>元素
<head>元素用于为页面定义全局信息,紧跟在<html>之后,是所有其他头元素的容器;
可包含:title、meta、script、style、link等
- link在网页head标记中引入css文件还可以引入rss/rel连接属性,import一般定义在css文件头部,是css定义的语法规则,只能导入样式表;
- 加载页面时,link引入的样式被同时加载,@import引入的样式在文件加载完成后加载; link标签作为HTML元素不存在兼容性问题;
- DOM方法基于文档,所以不能使用@import的方法插入样式,可以通过js插入link标签来改变样式;
所以建议使用link引入css文件
2.3.5 头部内容<title>
<title></title>为网页标题,内容出现在浏览器顶部;只能有一个标题元素必须出现在<head>元素中
2.3.6 头部内容<meta>
元数据<meta>用于定义网页基本信息,空标记
< meta charset = “UTF-8”>Chrome62以上的版本支持中文自动识别
< meta name=“Keywords” content="">
< meta name=“Description” content="">
< meta http-equiv="" content="">
2.3.7 元素<body>
可以包含除了html、head外所有元素,显示网页主体内容;
属性:text-修饰文本颜色,bgcolor-背景颜色,background-背景图片
lorem假文,lorem*5可以生成5个div块,用于测试排版
3 文本
3.1文本标记概述
3.1.1 文本标记的作用
文本是网页上重要组成部分,直接书写的文本以默认样式显示;
包含在标记中的文本被显示为标记所拥有的样式;
3.1.2 文本与特殊字符
注释、标题元素、段落元素、换行元素、分区元素…
特殊字符:以&开头,;结尾
空格 、’<'字符<(less than)、‘>'字符>(great than)、版权©、'¥’字符¥、注册商标®、关闭x号×
3.2 使用文本标记
3.2.1 文本样式
作用是对文本进行修饰,如:加粗、倾斜等;
<b></b>,<strong><strong/>:加粗
<i></i>,<em></em>:倾斜
<u></u>:下划线
<s></s>,<del></del>:删除线
<sup></sup>:上标(p的圈在上)
<sub><sub>:下标(b的圈在下)
H5推荐使用带有语义的写法,能在搜索时被优先排列
3.2.2 标题元素<h#>
标题元素让文字以醒目的方式显示,往往用于文章标题;
语法:<h#>…</h#>,#=1,2,3,4,5,6
特点:
1独占一行,上下文有间距;
2加粗,字体大小改变;
属性:align->设置内容水平对齐方式,left/center/right
3.2.3 段落元素<p>
<p>元素中的文本会用单独的段落显示,提供了结构化文本的方式;
语法:<p></p>
特点:与前后文本换行分开,上下垂直空白距离->段落间距;不能自己嵌套
常用属性:align
3.2.4 换行元素<br>
<br>或<br/>任何地方进行手动换行
3.2.5 分隔线元素<hr>
<hr>或<hr/>在网页中显示一根水平线
属性:size高度px为单位、width宽度px为单位(可以用百分比)、align对齐方式left/center/right、color颜色
3.2.6 预格式化<pre>
<pre>或<pre/>保留HTML中回车和空格,其他标签默认将多个回车和空格渲染成一个空格(空格折叠现象);一般直接使用< br>进行换行,& nbsp;进行空格
3.2.7 分区元素<span>和<div>
块分区元素:<div></div>常用于页面布局,独立成行;
行分区元素:<span></span>处理同一行文本的不同样式
3.2.8 行内元素与块级元素
块级元素:块级元素会独占一行,前后自动换行;可以嵌套行内元素
<p><div><h#>
行内元素:可以和其他行内元素位于同一行
a/b/u/i/s/sub/sup/span/strong/del/em/img
区别:块级元素可以设置宽高,除自带宽高的部分行内元素外,行业元素不能设置宽高;行内元素的垂直边距不生效
3.2.9 行内块
显示成行内元素的效果,但是具备块级元素的特点
<input type=“submit”>
3.2.10 表格
表格的宽高根据内容决定,所有数据预读到内存,一次性显示
4 图像和链接
4.1 URL
4.1.1 目录结构
目录是Web站点中文件夹的名称,包含多个目录,每个目录包含站点不同部分;
位于根目录下的其他文件夹称为子目录
4.1.2 URL
URL:Uniform Resource Locator统一资源定位器,即路径,用来标识网络中任何资源
表现形式:绝对路径、相对路径、根相对路径
4.1.3 绝对路径
绝对路径:从最高级目录下开始的完整路径
网络资源:通信协议+主机名称+文件目录结构+文件名称
使用网络资源(如大量图片使用图床网站存储)时必须使用绝对路径
优点:不占用本地存储空间;缺点:不稳定
本地资源:从最高盘符C:\xampp\htdocs\Day01
项目不可能使用本地资源的写法
4.1.4 相对路径(参照物是html文件本身)
相对路径:相对于当前文件的位置,从它出发所经过的路径
同级目录:直接引用文件;子级目录:先进入文件夹再引用;父级目录:先返回上一级再引用src = “…/file_name”
4.1.5 根相对路径:
从根目录寻找"/codeboy.com/index/logo.jpg"
4.2 图像
盗图:F12->左上角箭头选中元素会显示对应代码->获取对应地址
4.2.1 图像格式
JPEG:有损压缩算法
GIF:使用256色的方法来压缩,色彩会有较大失真;主要用于以线条为主或者面幅很小的图像;支持动画和透明图像;
PNG:无损压缩,8位、24位、32位3种格式;支持透明色(PNG24位不支持),不支持动画;显示颜色高达1670万中;
4.2.2 图像元素<img>
<img src = “URL” alt="">
属性:
- src设置图片资源路径;
- alt图片路径出错提示的文本;
- width以px为单位的数字;
- height以px为单位的数字;
为了防止图片失真,宽高只写一个,让另外一个自适应;
4.3 链接
4.3.1 链接元素<a>
<a href = “” target=""></a>
属性:
href链接URL,访问网站需要带协议;
target指定打开链接的方式,取值_self在当前标签页打开新网页;_blank在新标签页打开网页;
name锚点名称
4.3.2 链接的表现形式
1.下载资源<a href=“01.zip”>下载</a>
2.电子邮件<a href="mailto:zhenhuan@163.com">发送邮件</a>
3.返回页面顶部的空链接<a href = “#”></a>
4.链接到JavaScript中<a href =“javascript:方法名称”></a>
4.3.3 锚点
锚点是文档中某行的记号,用于链接到文档中某个位置
1.定义锚点
任意标签的id属性<ANY id =“archor_name”></ANY>
<a>标签的name属性 <a name=“archor_name”></a>
2.链接锚点
同一页面:<a href ="#archor_name"></a>
不同页面:<a href =“页面URL#archor_name”></a>
src和href的区别:
href是HyperText Reference的缩写,超文本引用,建立当前元素与文档之间的链接;异步下载文档,不会停止对当前文档的处理;
src指向内容会嵌入到文档标签所在位置,img,script,iframe;当浏览器解析到该元素,会暂停浏览器的渲染直到资源加载完毕;
都要避免空src和空href的出现,影响加载速度
5 表格
5.1 表格的作用
表格用来组织结构化的信息,数据保存在单元格里;
显示表格数据、设置页面布局;
现在只用来显示数据,不再使用来布局,因为执行速度慢,不符合用户需求
5.2 使用表格
5.2.1 创建表格
表格<table></table>;行<tr></tr>;列<td><\td>
5.2.2 表格的常用属性
- table属性:
width设置表格宽度,
height设置表格高度
align设置表格对齐方式
border设置表格边框宽度
cellpadding设置内边距
cellspacing设置外边距
bgcolor设置表格背景颜色 - tr属性:
align设置水平对齐方式
valign设置垂直对齐方式
bgcolor当前行背景颜色 - td属性(一般不直接设置宽高):
align设置水平对齐方式,(left/center/right)
valign设置垂直对齐方式(top/middle/bottom)
width设置宽度
height设置高度
colspan设置单元格跨列
rowspan设置单元格跨行
5.2.3 表格标题
元素<caption></caption>,默认标题在表格上方居中显示;
必须紧随<table>标签,每个表格只有一个标题;
行、列的标题:<th></th>字体加粗,水平居中
5.3 表格的复杂应用
5.3.1 行分组
根据行内容,表格可以分为表头、表主体、表尾进行统一管理
表头行分组<thead></thead>;
表主体行分组<tbody></tbody>;
表尾行分组<tfoot></tfoot>
将tr放入对应行分组中进行管理
5.3.2 不规则表格
设置单元格<td>的跨行或者跨列属性colspan、rowspan
5.3.3 表格嵌套
表格中所有嵌套只能放在td标签中
补充:使用子代+编辑器tab快捷输出如:table>tr4>td4;同理可用于其他元素