一、web相关知识
1、web
是Internet环境下的一个具体网页应用
简称:网页、web页面、页面
Internet:互联网,由若干个终端以及特殊的连接介质所组成
2、web的工作原理
1、B\S模型(结构)
B : Browser 浏览器
S : Server 服务器
PC: Personal Computer
将web应用全部保存在服务器(Server)上,由浏览器(Browser)发起请求进行访问
C/S 结构(模型)
C: Client
S: Server
通过指定的客户端来访问服务器的应用程序。eg:QQ、各种游戏
3、WEB 相关技术
1、服务器端技术
都提供了数据库的访问技术
php
jsp(JavaServer Page)
asp(Active Server Page)
asp.net
2、客户端(浏览器端)技术
由浏览器负责解释运行
1、HTML
2、CSS
3、Javascript
二、HTML快速入门
1、HTML
Hyper Text Markup Language
超级文本标记(标签) 语言
a : 26个英文字符中的第一个字符
b : 26个英文字符中的第二个字符
超文本 a : 链接
超文本 b : 加粗
<> : 标记
Language : 语言,语法
web 页面是由 html组成的,并且以.html或.htm作为后缀的文档文件,各个页面间,是通过超链接组织到一起的。
开发web应用所使用的工具:
1、记事本(能编辑文字的工具)
2、浏览器(IE、Google Chrome、Firefox、Safari、Opera(欧朋))
2、HTML基础语法
1、标记语法
标记又称为元素
语法:<标记内容>
注意:不同的标记,会有不同的表现结果。主要用于描述功能
分类:
1、封闭标记(双标记)
语法:<标记>内容</标记>
<b>内容</b>
<s>内容</s>
2、非封闭标记(单标记、空标记)
语法:<标记>或<标记/>
特点:不能包含内容,每一个独立的空标记就是一段独立的功能
<br/>: 换行
<hr/>: 水平线
2、标记的嵌套
在一个标记中出现另一对标记,形成更复杂的语法,或者让功能进行叠加
<标记1>
<标记2>
</标记2>
</标记1>
注意:
1、代码缩进
具备嵌套标记的标签,子级内容一定要通过若干(一个制表符) 空格来表示缩进
<标记1>
<标记2>
</标记2>
</标记1>
<a>
<b>内容</b>
</a>
<a>这是一个超链接</a>
<a>这是一个超链接</a>
2、注意嵌套顺序
<a>
<b></b>
</a>
<a><b></a></b>
3、属性和属性值
可以通过属性和属性值,对标签的功能加以修饰
<p>一个段落</p>
语法:
1、属性的声明必须位于开始的标记里面
2、一个元素可能有多个属性,多个属性间用空格区分
3、多个属性之间,排名不分先后
属性值:
1、属性和属性值之间通过 = 连接属性=值
2、属性值尽量用引号引起来
<p属性名=值></p>
<p属性名="值"></p>
<p属性名='值'></p>
<palign="right" >段落</p>
标准属性:
又称为通用属性,基本上每个标签都会具备的属性。
id:标签在页面中的唯一标识
title:鼠标移入到标签上时所显示的文字
class:定义(引用)样式表中的类样式
style:定义当前标签的行内样式
eg:<pid="p1" title="I'm a p markup" class="testp"style="color:red;"></p>
4、注释
1、什么是注释:指的是允许出现在html中,但不被浏览器所翻译执行的内容
2、注释的作用
1、对代码进行解释说明
2、整理思路
3、注释的语法
<!--这
是
注释
区域 -->
<a<!--写在这里就是错 -->>
<!--该处写注释是允许的-->
</a>
3、html文档结构
1、html文档组成
1、文档类型声明
声明当前的html文档的版本以及类型的。
版本:
html5
xhtml1.0
html4.01
html3
html2
类型:
strict : 严格类型
transitional : 过渡类型
frameset : 框架集
出现的位置:位于整个html 文档的最顶端
HTML5的文档类型声明:
<!doctype html>
2、html页面组成
1、文档根标记
<html></html>
2、出现在根标记里面的结构
1、网页的头部
<head></head>
2、网页的主体内容
<body></body>
3、head 元素
包含的都是全局信息
title : 网页的标题
meta :单标记,编码格式、关键字、描述....相关的全局信息
script : 定义或引入 Javascript文件
link : 单标记,引入外部css样式表
style:定义内部样式表
4、body元素
1、body出现的位置在 head元素之后,html元素之内。包含了网页要显示给用户去看的信息,称之为主体内容。
2、特殊字符的表示
回车、若干空格,最终都会被解析成一个空格
特殊字符通过转义字符来实现的。
空格:
> :> --> greater than
< :< --> less than
© :© --> Company
3、文本标记
1、文本样式相关
<b></b> : 加粗
<i></i>: 倾斜
<s></s>: 删除线
<u></u>: 下划线
<sub></sub>: 下标
<sup></sup>: 上标
2、标题元素
以醒目的方式进行显示,通常用作文章的标题
<hn></hn>
n:1-6
<h1></h1>
<h2></h2>
...
<h6></h6>
3、段落元素
提供了结构化文本的一种方式。
<p></p>
4、换行元素
<br>或<br/>
可以出现在任意需要换行的位置处
5、分区元素
常用于元素的分组,以及页面的布局
1、块分区元素
<div></div>
所有的效果需要开发者自己定义,主要通过 css 实现布局
2、行内分区元素
<span></span>
多个span会在一行内显示
span很少用在布局中。主要功能是包含普通文本并且自定义样式。
6、行内元素和块级元素
块级元素:自己会独占一行,前后的内容会自动换行。
div、p、h1~h6
块级元素作用:多数都会用作布局中。
行内元素:可以和其他元素位于同一行。
s,b,u,i,span,
行内元素的作用:多数都会包裹文本,去实现文本的不同样式
注意:块级元素可以嵌套行内元素,但行内元素不允许嵌套块级元素。
<div>
<span></span>
<s></s>
<b></b>
</div>
<b>
<div></div>
</b>
注意:没强调的情况下,任何标记不允许嵌套div
<p>
<div></div>
</p>
7、水平线
<hr>
属性:
size:高度
width:宽度
align:水平对齐方式
color :颜色
8、预格式化
作用:保留文档中的格式,即保留文档中的换行和空格
<pre></pre>