一、web基础知识
-
web与Internet
-
Internet
-
是一个全球性的计算机互联网，中文名称：‘因特网’，‘国际互联网’，‘国际网’，‘交互网’
-
Internet 所提供的的服务
telent Email www(world wide web) BBS FTP
-
基本实现技术
分组交换原理
TCP/IP协议簇
-
-
web
万维网或环球网，其实就是网络环境下的一种程序---网页程序，将各类信息和服务进行无论连接，并提供生动的图形用户界面
信息：文字、图片、音频、视频.....
-
-
web的工作原理
基于浏览器/服务器模式的程序
B/S 浏览器与服务器的模式
可以通过任意浏览器就能访问服务器的程序
C/S 客户端与服务端的模式
-
web的相关技术
服务器端技术
PHP jsp asp
客户端技术
html css js
二、HTML快速入门
-
html概述
-
html（Hyper Text Markup Language）：超文本标记语言
-
文件以html为后缀
-
-
html语法
-
标记：用于描述功能的符号
-
语法：
-
标记在使用时必须用尖括号(<>)括起来
标记分为：
封闭类型标记：
也叫双标记，必须成对出现
<标记>内容</标记>
非封闭类型标记:也叫单标记
<标记>或<标记/>
单标记不能包含内容，自己本身就是一个独立的功能
-
元素
标记+标记内的内容
-
元素的嵌套
元素之间可以相互嵌套
<p>
<a>
<img>
</a>
</p> -
属性和值
定义：属性是用来修饰元素的
语法：
属性的声明必须位于开始的标记里，多个属性之间用空格隔开
<标记 属性=“值”><标记/>
标准属性：
id 元素在页面的唯一标识
class css中引入类的样式
title 鼠标移入页面中的唯一标识
style 定义元素的行内样式
-
注释
对代码的解释说明
-
版本
w3c(万维网联盟)负责定制和推广的html
html xhtml html5
1999年12月24日 w3c推出 html4.01
2000年1月26日 w3c推出 xhtml1.0
xhtml与html几乎相同，xhtml中，单标记必须要有结束
html5的推出是为了实现更简洁的代码
-
-
-
html文档结构
-
文档结构
文档类型声明：
语法：<! DOCTYPE html>
作用：指定了html的版本和风格
-
html页面
语法：<html></html>
注意：位于文档类型声明之下
<html></html>内部内容：
-
<!doctype html>
<html>
<!-- 定义页面的头部信息-->
<head>
<!-- 页面的标题内容-->
<title>标题内容</title>
<!--定义页面的编码格式-->
<meta charset="utf-8">
</head>
<!--页面的主体内容-->
<body text="red" bgcolor="pink">
今天是个好日子，心想的事儿都能成
</body>
</html>
-
-
三、文本
-
特殊字符
-
空格： 大于号：> 小于号：< 版权符号©：© 钱币符号¥
-
-
文本标记
-
文本样式相关的标记
<i></i>:斜体 <u></u>:下划线 <s>删除线</s> <b>加粗</b> <sub>下标</sub> <sup>上标</sup>
-
标题元素
h1-6:一级标题----六级标题 独占一行
-
其他元素
<p> </p>段落元素，独占一行 与其他元素有垂直的距离
<br> 换行元素
<hr> 分割线元素，一条水平线
属性：size=xxpx color width:xxpx xx%(父级元素的百分之多少) align 水平对齐方式
<pre></pre>预格式化，保留源文件中的格式，即保留源文件的换行和空格的效果 - 分区元素
1.块级分区元素
语法：<div></div>
形式：独立成行 无任何文本显示效果
作用：做布局
2.行内分区元素
语法：<span></span>
形式：多个span在一行显示，无任何文本显示效果
作用：处理同一行文字的不同格式
3.块级元素与行内元素
1.行内元素：多个元素会在一行内显示
ex:span,i,b,s,u,sup,sub,a,img
作用：大部分函内元素为处理文本的显示效果
2.块级元素：每个块级元素会独占一行，即前后都有换行
ex:h1~h6,div,p
作用：做布局
-
嵌套问题
行内元素尽量不要嵌套块级元素
p元素不能嵌套块级元素
-
span元素的宽高由内容来撑开的，所以为其设置align、宽、高等属性是无效的
-
meta的使用
1.<meta name='description' content='描述内容'>
2.<meta name='keywords' content='关键字1，关键字2，。。。'>
二者主要针对搜素引擎，不是针对用户
四、图像和连接
-
URL
-
目录结构
目录：web站点中文件夹的名称
web站点的主目录，称之为 网站的根目录
-
URL
URL：统一资源定位器
作用：标识网络中的资源位置
路径的三种表现形式：
绝对路径：从文件所在的最高级目录下开始的完整路径的表现形式
网络资源：通过四个部分来获取网络资源文件的路径
协议名：http 主机名（域名或ip地址） 目录路径 资源文件名称
本机资源：从盘符开始，一直到资源文件所在的目录，所经过的路径
相对路径：从当前文件位置开始，一直到资源文件所在的位置处所经过的路径就是相对路径
-
-
图像
-
图像的格式：JPEG、GIF(支持动画和透明图像)、PNG（支持透明色，但不支持动画）
-
语法：<img>
-
属性：
src:描述图像的地址
width：宽度
height：高度
title：鼠标悬浮
-
-
超链接
-
语法：<a></a>
-
属性：
href:链接的URL
若href的取值为#，则表示链接到页面的顶部
target：目标，打开新网页的方式
取值：_blank:在新页面中打开
_self：在当前页（本页面）打开
name：定义锚点的名称
-
超链接的表现形式
下载资源
<a href="xxx.rar"></a>
电子邮箱链接
用户机器中必须配好一个邮件的客户端（outlook,foxmail）
<a href="mailto:zhaoxu@tedu.cn"></a>
-
返回页面的顶部
<a href="#"></a>
-
锚点
定义：在页面当中去标记一个记号，允许超链接跳转到该记号处
使用方式：
定义锚点：
链接到锚点：
<a href="页面的URL#锚点名称"></a>#其他页
<a href="#锚点名称"></a>#本页
五、表格
-
表格的作用
通常用来组织结构化的信息
-
使用表格
-
创建表格
定义表格：<table> </table>
定义行：<tr></tr>
定义列：<td></td>
-
表格的常用属性
-
table
width 宽度，以px或%为 单位，%为外层容器宽度的%之多少
height 高度，以px为单位
border 边框，默认为0，以px为单位
align：表格的对齐方式 取值：left、center、right
bgcolor:背景颜色
cellpadding:表格的内边距，即单元格边框与内容之间的距离
cellspacing:表格的外边距，即单元格与单元格之间的距离
-
tr
align：当前行数据在单元格中的水平对齐方式
valign:当前行数据在单元格中的垂直对齐方式（取值：top、middle、bottom）
bgcolor:当前行的背景颜色
-
td
align：当前列数据在单元格中的水平对齐方式
valign:当前列数据在单元格中的垂直对齐方式（取值：top、middle、bottom）
bgcolor:当前列的背景颜色
width:宽，宽度一旦设置好，则所有行的当前列的宽度，都将保持一致
height:高，高度一旦设置好，则当前行的所有列的高度，都将保持一致
rowspan：设置单元格的跨行
colspan：设置单元格的跨列
-
-
表格的标题
表格的标题会显示在表格的正上方，中间位置处
语法：<caption>标题内容</caption>
-
th
th与td相似，也要放在tr当中，以加粗、居中的方式显示数据，可称为行标题或列标题
-
-
表格的复杂应用
-
行分组
表头：<thead></thead>
表主体:<tbody><tbody>
表尾:<tfoot></tfoot>
-
创建不规则的表格
通过td的跨行和跨列属性来实现
跨列：当前单元格横向向右合并指定个数的单元格
特点：同一行中，改变列数
属性：colspan
跨行：当前单元格纵向向下合并指定个数的单元格
特点：同一列中，改变行数
属性：rowspan
-
表格的嵌套
在td中嵌套另一个表格
-
六、列表
-
类型：有序列表（ol）、无序列表（ul）
-
列表项：<li>,用于指示具体的列表内容
-
ol
-
语法：
<ol><li>内容</li></ol>
-
属性
type
取值：
1：默认，以数字方式显示
a:小写字母
A:大写字母
i:小写罗马数字
I:大写罗马数字
start
取值：type的取值从哪开始
-
-
ul
语法：<ul><li>内容</li></ul>
属性：
type
取值：
disc:实心圆（默认）
circle：空心圆
square方块
none：无
-
列表的嵌套
li中可嵌套另一个列表
-
列表的定义
语法:
<dl>定义列表
<dt></dt>列表标题
<dd></dd>对标题的解释
</dl>
七、结构标记
-
结构标记的作用：使页面的布局更加清晰
-
结构标记的分类
1.header：定义网页的头部信息、页面的标题、logo。可在网页上出现多次
<header></header>==》<div id=head></div>2.nav元素：定义页面的导航链接部分
<nav></nav>==><div id="nav"></div>
3.second:定义页面主提中的某一模块
<second></second>==><div id="main"></div>
4.articale元素：描述页面中的文章、帖子、用户评论、博客、等文字性较强的内容
<article></article>==><div id="article"></div>
5.<aside>元素：表示网页主体内容中的边栏部分
<aside></aside>==><div id=left_side></div>
6.footer元素：定义网页文档的页脚的内容
<footer></footer>==><div id="foot"></div>
八、表单
-
表单的作用：用于显示、收集信息并将信息提交到服务器
-
表单的两大部分：
1.实现数据交互的可见界面元素，即表单控件
2.提交表单后的处理操作
-
表单的实现
语法：<form></form>
属性：
1.action：表单要提交的服务器处理程序地址
<form action="test.php"></form>
2.method:提交方式，默认get
取值：get、post....
get会将提交的信息全部显示在地址栏上(明文提交)，大小限制为2kb
使用场合：向服务器索取信息时，推荐使用get
post隐式提交，所提交的数据不会显示在地址栏上，安全性较高，无大小限制
使用场合：提交数据量较大时，上传头像、文档等；提交安全性要求较高的数据时；想提交数据 给服务器处理时.
3.name:定义表单的名称
4.id定义表单唯一标识
5.enctype:表单数据进行编码的方式
1.application/x-www-form-urlencoded:默认值，能够提交普通数据（包含特殊的字符），无法提交 文件
2.multipart/form-data:将所有的内容都拆分成二进制进行提交，支持文件上传st
3.test/plain:只负责提交基本数据，不包含任何特殊字符的数据
-
表单控件
-
具备可视化外观的html元素，并且能够接受用户输入的信息。而且表单控件中的数据允许提交给服务器
-
控件
1.input元素
语法：<input/>
属性：
type：根据不同的type的值，创建各种类型的控件
value：控件的值，显示在文本框内，value的值提交给服务器
name:控件的名称，服务器使用
id:控件的唯一标识，本页面使用
disabled:禁用控件，可以不给值
type取值：
1.文本框与密码框
文本框：<input type="text">
密码框：<input type="password">
属性：
maxlength:限制输入的字符数
readonly:只读
2.单选框和复选框
单选框：<input type="radio">
复选框：<input type="checkbox">
属性：
checked,默认被选中
name，一组单选框或复选框name属性要设置为一致的
3.按钮
提交按钮：<input type="submit" value="按钮上的文字">
重置按钮：<input type="reset" value="按钮上的文字">将表单控件的值设置为默认值
普通按钮：<input type="button" value="按钮上的文字">
<button>内容</button>
4.隐藏域和文件选择框
隐藏域：表单中包含不希望用户看到的并且需要提交给服务器的信息
<input type="hidden">
文件选择框：允许用户选择要上传的文件
<input type="file">
注意：表单的method属性值必须为post。enctype的值必须为multipart/form-data
2.其他元素
<label>元素：关联文本与表单元素，点击文本的时候相当于点击了表单元素一样
语法：<lable>文本</lale>
属性：for,表示与该lable相关联的控件的id值，与id值相同
选项框（下拉列表框）
下拉选项框
滚动列表
语法：<select></select>
属性：
name
id
size:默认为1，如果大于1则为滚动列表
multiple:多选
选项：
<option value="选项的值" selected>显示的文本</option>
selected：默认被选中
textarea元素：文本域，多行文本框元素
语法：<textarea>多行文本</textarea>
属性：
name
cols:指定文本区域的列数（宽度）
rows:指定文本区域的行数（高度）
readonly：只读
为控件分组
语法：
<fiedset></fiedset>分组
<legend></legned>标题
-
九、其他
-
其他元素
iframe
作用：在一个页面中同时显示多个html文档内容
语法：<iframe>该浏览器不支持iframe</iframe>
属性：
src:引入的网页URL
width：
height
frameborder：浮动框架边框，不需要设置为0
摘要与细节：
语法：
<details></details>定义细节
<summary></summary>包含<details>元素的标题
度量元素meter
语法：<meter>文本</meter>
属性：
min：范围的最小值，默认值0
max：范围的最大值，默认为1
value：度量值，默认值为0
时间元素time
语法：<time>文本</time>
属性：
datetime：规定日期/时间，日期与时间之间用“T”文字分割
高亮文本显示mark元素
作用：用于定义页面元素中带有记号的文本
语法：<mark>文本</mark>
-