1、Web基础知识(了解)
1、Web 与 Internet
1.1 Internet
互联网、网络、因特网 ...
服务：
Telnet，Email，WWW，BBS，FTP
资源共享
基本实现技术：
1、分组交换原理
2、TCP/IP协议簇
1.2 WEB与Internet
1、WEB
是一种应用在Internet上的一种流行的应用程序-网页应用程序
www(World Wide Web)
W3C-World Wide Web Consortium(万维网联盟)
功能：将信息和服务连接
服务：Telnet,Email,BBS
信息：文字，图片，音频，视频
2、WEB的工作原理
1、基于 浏览器/服务器 模式(B/S)
1、B/S
B : Browser 浏览器
S : Server 服务器
通过 浏览器 来访问 服务器信息的一种方式-WEB
2、C/S
C : Client 客户端
S : Server 服务器
通过 指定的客户端 来访问 服务器信息的一种方式
QQ
2、组成
由 WEB服务器、浏览器、通信协议 组成
WEB服务器：配置高的电脑
浏览器：客户端工具
通信协议：http(Hyper Text Transfer Protocol)-超文本传输协议
3、WEB的相关技术
1、WEB服务器
1、功能
存储WEB上的内容信息，并且提供管理环境
响应浏览器的请求，执行服务器端程序
安全性功能
2、产品
TOMCAT
IIS
APACHE(php)
...
3、技术
php
jsp(Java Server Page)
asp
asp.net
2、WEB浏览器
1、功能
1、代理用户提交请求
(User Agent --> UA)
2、作为HTML解释器和内嵌脚本的执行器
3、用图形化的方式显示HTML文档
2、产品
1、IE -> Microsoft Internet Explor
2、Firefox -> Mozilla Firefox
3、Safari -> Apple
4、Chrome -> Google
5、Opera -> 欧鹏
3、技术
1、HTML
2、CSS
3、Javascript
2、HTML快速入门(重点)
1、HTML概述
1、什么是HTML
HTML : Hyper Text Markup Language 超文本标记语言
超文本：超级文本
a : 第一个字符
超文本a : 超链接
标记：<a>
语言：表现形式，语法规范
HTML用来设计网页的语言
由HTML所编写的文件，以.html或.htm作为后缀
2、HTML基础语法
1、标记语法
1、什么是标记
HTML中用于描述功能的符号称之为"标记"
ex:
<p></p> - 段落
<a></a> - 超链接
... ...
2、语法
标记在使用时必须用尖括号<>括起来
分类：
1、封闭类型标记
也叫作 双标记，必须成对出现
语法
<标记></标记>
<p></p>
<a></a>
<div></div>
2、非封闭类型标记
也叫作 空标记或单标记
语法
<标记>或<标记/>
ex:
<img> - 图像
<br> - 换行
<hr> - 水平线
2、元素
也称之为 标记
标记：实际上是语法规范
元素：强调的是标记中的内容
<div>这是一个div</div>
3、元素嵌套
元素之间可以实现嵌套，从而表现出更为复杂的页面结构
<div><p>这是一个被嵌套的段落</p></div>
注意：
1、嵌套位置和顺序
<div><p></div></p>
2、被嵌套的内容要通过"代码缩进"来表示层级结构
<div><p>这是一个p</p></div>
<div>
<p>这是一个p</p>
</div>
<div>
<p>这是一个p</p>
</div>
4、属性 和 值
1、作用
修饰元素
2、语法
1、属性的声明必须位于开始标记中
2、一个元素可以有多个属性，多个属性之间用空格隔开，并且排名不分先后
3、每个属性都可以有值，值和属性之间用 = 连接。值最好要放在引号中('' 或 "")
ex :
align 属性 ：控制文本的水平对齐方式，
取值：
1、left ：左对齐
2、center ：居中对齐
3、right：右对齐
问题：控制 一个p标记的文本，是水平居中对齐
<p align='center'>This is a p</p>
在以上的基础上，设置 p元素的id属性值为 p1
<p align='center' id="p1">This is a p</p>
3、标准属性
所有的元素都具备的属性，称之为标准属性或通用属性
id:定义元素在网页中独一无二的标识
title:鼠标移入到元素上的时候，所弹出的文字
class:定义元素所引用的类选择器(CSS中使用)
style:定义元素的内联样式(CSS中使用)
5、注释
1、什么是注释
允许出现在网页源码中，但是不会被浏览器所解释的文本，称之为注释。
通常情况下，会将 对代码的解释文本放在注释中，以便让其他的开发者去看。
2、注释的语法
<!-- 注释内容 -->
注意：
1、注释不能嵌套
<!--
<!-- -->
-->
2、注释不能出现在<>中
<p <!-- align="center" -->></p>
以上写法是错误的。
6、HTML 和 XHTML
1999年12月24日 W3C推出HTML4.01标准规范
2000年1月26日 W3C推出XHTML1.0标准规范
XHTML1.0 版本 以 HTML4.01几乎相同，但是它是更严格更纯净的HTML版本
比如：
1、要求标记必须要关闭
<p></p>
<br/>
2、要求属性值必须用引号引起来
<p align=center></p>(html4.01和html5中都可以)
7、HTML5(H5)
h5的目标，为了实现更加简洁的HTML代码
1、空标记有无结束均可
<br>
<br/>
2、属性值可以被引号括起来
<p align="center"></p>
<p align='center'></p>
<p align=center></p>
3、有些属性可以不给值
<input readonly="readonly">(h5之前的写法)
<input readlony>(h5写法)
3、文档结构
1、HTML文档结构
由两大部分组成
1、文档类型声明
用于指定网页的版本和风格
2、html页面
要显示在页面给别人去看的内容
2、文档类型声明
<!doctype html>
该段代码要出现在网页的最顶端
3、HTML页面
1、由一对 html 元素表示，位于 文档类型声明之后
2、在 <html>元素中，包含两个直接子元素
1、<head></head>
网页头部
作用：定义页面全局信息
包含：
<title></title> 定义网页标题
<script></script> 定义或引入JS文件/代码
<style></style> 定义内部样式表
<link/>:引入外部样式表文件
<meta/>:定义网页元数据
比如：
1、编码格式
设置网页编码格式为utf-8
<meta charset="utf-8">
2、网页关键字
3、描述
2、<body></body>
网页主体，所有显示给用户去看的东西都写在body中
属性：
1、text
取值：颜色
作用：控制整个页面中所有文本的颜色
2、bgcolor
作用：设置页面的背景颜色
取值：颜色
3、文本(重点)
1、文本标记的作用
会让文本有不同的显示方式
2、特殊字符表示方式
文档中的 空格和回车 最终只会被解释成为一个空格
如果想表示特殊的字符效果，如 空格，<,>, ... 需要进行转义
1、< --> less than
表示 <
2、> --> greater than
表示 >
3、
空格
4、©
©
5、¥
￥
3、文本标记
1、文本样式
1、作用
对文本进行修饰，比如加粗，斜体，线条样式等...
2、标记
1、<b></b>
加粗
2、<i></i>
斜体
3、<u></u>
下划线
4、<s></s>
删除线
5、<sup></sup>
上标
6、<sub></sub>
下标
2、标题元素
1、作用
以醒目(改变字体大小、加粗方式、垂直空白)的方式显示文本
2、语法
<h#></h#>
#:1~6
一级标题(<h1></h1>)字最大
...
六级标题(<h6></h6>)字最小
3、属性
align ：文本的水平对齐方式
取值：
1、left
2、center
3、right
3、段落元素
1、作用
以特殊的方式来显示文本即段落的上和下都有垂直的空白
2、语法
<p></p>
3、属性
algin
4、换行元素
语法：
<br>或<br/>
5、块分区元素
分区：可以对元素进行分组，多数用于页面布局上
语法：<div></div>
作用：独占一行，做布局!!!
6、行内分区元素
语法：<span></span>
作用：包裹文本，灵活的设置文本的样式
7、分割线元素
1、作用
在网页中显示一条水平线
2、语法
<hr>或<hr/>
3、属性
1、size
尺寸，相当于设置 水平线的 高度
取值 以 px 为单位的数值，px可以省略
2、width
宽度，以px为单位的数值，px可以省略
3、color
颜色
4、align
水平线自己的水平对齐方式
8、预格式化
1、作用
保留源文档中的格式，即保留原来的换行和文本中的空格
2、语法
<pre>内容</pre>
9、元素分类
1、行内元素
不会换行，可以和其他的行内元素位于同一行
使用场合：包裹文本，去设置文本的显示效果
display:inline
注意：所有的行内元素都不具备 align属性
2、块级元素
默认的情况下，每个元素独占一行，适用场合，多数都会用于 布局上
display:block;
ex:
<div></div>
<p></p>
<h1>~<h6>
注意：
1、不要让行内元素嵌套块级元素
<span>
<div></div>
</span>
错误的。
2、p标记
p标记是不能嵌套块级元素
<p>
<p></p>
</p>
4、图像和链接
1、URL
1、目录结构
目录：文件夹名称，保存网页内容的文件夹
2、URL
URL(Uniform Resource Locator)统一资源定位器,俗称 路径,用来表示 网络资源的地址
资源：图片，音频，视频，文件等...
路径：从当前位置到目标资源位置所经过的路线。
三种表现形式:
1、绝对路径
1、什么是绝对路径
从文件最高级路径下开始的完整路径。
1、访问网络资源
由 协议名称、主机名(域名/IP地址)、目录路径、文件名
ex ：获取 百度 LOGO
协议名称：https
主机名:www.baidu.com
目录路径：img
文件名：bd_logo1.png
<img src="//www.baidu.com/img/bd_logo1.png" width="270" height="129">
2、访问本机资源
文件所在的最高级目录路径：？--文件所在的盘符
2、相对路径
1、什么是相对路径
从当前文件所在的位置处开始，去查找资源文件所经过的路径就是相对路径
1、同目录
直接通过 资源文件名称 进行引用即可
2、子目录
先进入，再通过资源名称进行引用
images/1.jpg
3、父目录
先返回，在通过资源文件的名称或路径进行引用
返回:../
3、根相对路径
特点：永远都是从网站所在的服务器根目录处开始查找
表现方式：/作为开始
2、图像
1、图像格式
1、jpeg
图像图像联合专家组
.jpg 作为后缀来存储的
2、gif
图形接口格式
特点：支持动画
.gif 作为后缀来存储的
3、png
可移植网络图形
采用 无损压缩，有8位，24位，32位三种形式
支持 透明色(PNG24位不支持)
.png 作为后缀存储的
2、图像元素
1、语法
<img>
2、属性
1、src
要引用的图像URL(绝对，相对，根相对)
注意：URL 要严格区分大小写,服务器路径 严格区分大小写。本机路径则无所谓
2、width
宽度
3、height
高度
以 px 或 % 为单位的数值，如果省略单位不写，默认为 px
<img src="../Images/a.jpg" height="300">
注意：width 和 height 如果只给一个属性的话，那么另外一个属性会跟着等比缩放
<img width="100px" src="a.jpg">
3、链接
1、作用
链接又叫超链接，允许用户通过点击的操作完成页面的跳转。
2、语法
<a>内容</a>
属性：
1、href
链接URL，只有设置了 href 属性之后，才是真正的超链接。
2、target
目标，打开新页面的方式
取值：
_blank : 在新标签页中打开
_self:默认值，在当前页中打开
3、链接的表现形式
1、目标文档为下载资源
href 属性值，指定的文件名称，就是下载操作(rar,zip)
2、电子邮件链接
前提：计算机中必须安装 邮件客户端，并且配置好了 邮件信息。
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
3、返回页面顶部的空链接
<a href="#">内容</a>
4、链接到Javascript
<a href="javascript:">内容</a>
扫一扫
2028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
