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 概述
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等
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:[email protected]">发送邮件</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>
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;同理可用于其他元素