开通博客，记录以后的知识积累
2017-05-24 21:00
295 查看
1、Web基础知识
1、Web 与 Internet
1、Internet
Internet是一个全球性的计算机互联网络
中文名称："因特网","国际互联网","网际网","交互网"
Internet 所提供的服务：
1、Telnet
2、Email
3、WWW(World Wide Web)
4、BBS
5、FTP
基本实现技术
1、分组交换原理
2、TCP/IP 协议簇
2、Web
又称为 万维网或环球网，WWW
其实就是网络环境下的一种程序-网页程序
将各类信息和服务进行无缝连接，并提供生动的图形用户界面
信息：文字，图片，音频，视频等...
服务：Telnet，BBS，Email
产物：
BBS：天涯论坛，百度贴吧
Email：QQ邮箱，网易邮箱(163)
2、Web的工作原理
Web 基于 浏览器/服务器 模式的程序
B/S : 浏览器 / 服务器 模式
Browser / Server 模式
浏览器 服务器
可以通过任意浏览器 就能访问 服务器程序的一种模式
C/S : 客户端 / 服务器 模式
必须通过 指定的 客户端 软件才能访问 服务器程序的 一种模式
ex : QQ,游戏... ...
由Web服务器，浏览器，通信协议组成
通信协议：http(Hyper Text Transfer Protocol)，超文本传输协议
规范了 数据是如何打包以及数据是如何传递的
WEB 服务器：
1、功能
1、存储WEB上的信息
2、响应浏览器请求并执行服务器端程序
3、具备基本的安全性功能
2、服务器产品
TOMCAT
IIS(Internet Information Service)
APACHE
……
WEB 浏览器
1、功能
1、提交请求(即用户代理User Agent 简称UA)
2、作为 HTML 和 JS的解释器
3、能以图形化的方式显示文档
2、浏览器产品
1、Microsoft IE
2、Mozilla Firefox
3、Google Chrome
4、Apple Safari
5、Opera(欧鹏)
3、Web的相关技术
1、服务器端技术
都提供数据库访问能力
PHP(Hypertext Preprocessor)
JSP(Java Server Page)
ASP(Active Server Page)
2、客户端技术
运行在客户端，由浏览器解释运行
1、HTML(Hyper Text Markup Language)
2、CSS(Cascading Style Sheets)
3、JS(JavaScript)
2、HTML快速入门
1、HTML概述
1、什么是HTML
HTML
Hyper Text Markup Language
超级 文本 标记 语言
普通文本 a : 无特殊意义
超级文本 a : 超链接
超文本：文本会具备特殊的功能
标记：超文本的组成形式 <a>
语言：拥有自己的语法结构
由html编写的web文件，以.html或.htm作为后缀的
2、HTML基础语法
1、标记
1、什么是标记
在HTML中，用于描述功能的符号，称之为 标记
2、语法
标记在使用时，必须使用 尖括号(<>)括起来
标记分为：
1、封闭类型标记
也称为 双标记 , 必须成对出现
<标记>内容</标记>
<a>网页</a>
注意：
封闭类型标记必须成对出现，如果没有被封闭的话(没有结束的话)，会产生意想不到的效果
<a>网页
.......
.......
ex:
1、封闭类型的 p 标记
<p></p>
2、封闭类型的 div 标记
<div></div>
3、封闭类型的 ol 标记
<ol></ol>
2、非封闭类型标记
也称为 ：空标记或单标记
语法：
<标记>或<标记/>
注意：
单标记不能包含内容，自己本身就是一个独立的功能
ex:
1、单标记 br - 表示换行
<br> 或 <br/>
2、单标记 hr - 表示横线
<hr> 或 <hr/>
3、单标记 img - 表示图像
<img> 或 <img/>
2、元素
元素，即标记
3、元素嵌套
元素之间可以相互嵌套，来形成更为复杂的页面结构
元素嵌套：在一个元素中，又出现了另外一个元素
<p>
<a>
<img/>
</a>
</p>
注意：
1、注意嵌套顺序(完整嵌套)
<p>
<a>
<img>
</a>
</p>
以上结构 正确
<p>
<a><img>
<\p>
</a>
以上结构是错误的，没有完整嵌套
2、注意嵌套代码的缩进关系
<p><a><img></a></p> 正确
<p>
<a>
<img>
</a>
</p>
正确
<p>
<a>
<img>
</a>
</p>
正确
标记 成对的打
<p>
<a>
<img>
</a>
</p>
<a>:超链接
<b>:加粗文本显示
<a>
<b>百度</b>
</a>
4、属性 和 值
1、什么是属性
属性是用来修饰元素的
2、语法
属性的声明必须位于开始标记里
<标记 属性="值" 属性="值"></标记>
ex:
1、设置 p 标记的 align 属性 ，值为center,设置 id 属性，值为p1
<p align="center" id="p1"></p>
3、标准属性
1、id
元素在页面中的唯一标识
2、title
鼠标移入到元素时，所提示的文本
3、class
css中，引入类选择器
4、style
css中，定义元素的行内样式的
5、注释
在页面中编写完成，但不会被浏览器解释运行的内容
可以将 代码的解释说明写在网页中以便被其他程序员查看
语法：
<!-- 该处内容，无论多少行，都是注释 -->
注意:
1、注释不能嵌套注释
<!--
<!-- -->
-->
以上结构是错误的，不能嵌套注释
2、注释不能写在<>中
<p <!-- 此处不能写注释 -->></p>
以上结构是错误的
6、HTML 和 XHTML 和 HTML5
W3C负责定制和推广HTML
W3C : World Wide Web Consortium
万维网联盟
1999年12月24日 W3C推出 HTML4.01 标准
2000年01月26日 W3C推出 XHTML1.0 标准
XHTML 与 HTML4.01 几乎相同
XHTML 是更纯净的HTML版本
如：
1、单标记必须要有结束
<br/>
<br>在xhtml中，就是错误
HTML5 目标，是为了实现更简洁的HTML代码
能不写，就不写，能少写，就少写
<br> 或 <br/> 都正确
<p align="center">正确
<p align=center>正确
<input readonly="readonly">
<input readonly> 正确,这是元素为只读
3、HTML文档结构
1、HTML文档结构
1、文档类型声明
作用：指定了HTML的版本和风格
HTML5文档类型声明：
<!DOCTYPE html>
2、HTML页面
语法：
<html></html>
注意：要位于 <!doctype>之下
练习：创建一个网页，名称为 01.html ,并且搭建网页结构(doctype , html)
2、HTML页面
1、页面头部内容
1、作用
定义页面的全局信息
2、语法
<head></head>
注意：
要紧在html之后，即html中的首个子元素
3、头部中所包含的内容
1、定义网页标题
<title>标题内容</title>
2、定义网页编码格式
utf-8 支持中文，网页，浏览器，服务器全部都支持 utf-8编码
<meta charset="utf-8">
注意：文件的编码格式也必须是 utf-8的
2、页面主体内容
语法：<body></body>
属性：
1、text
作用：控制当前网页文本的颜色
取值：表示 颜色英文单词(red)
2、bgcolor
作用：控制当前网页的背景颜色
取值：表示 颜色英文单词(green)
练习：
在已有的网页上，创建body标记，body中写上一句话:"我的第一个HTML练习",文本的颜色为红色(red),背景的颜色为绿色(green)
3、文本
1、特殊字符
在网页中，任意多的空格和回车，最终只会被解析成1个空格
1、 一个空格
2、> >
3、< <
4、© ©
5、¥ ￥
2、文本标记
1、文本样式
<i></i> ... 斜体
<u></u> ... 下划线
<s></s> ... 删除线
<b></b> ... 加粗
<sup></sup> ... 上标
<sub></sub> ... 下标
2、标题元素
以标题的形式显示文本内容
语法：<h#></h#>
#:1~6
<h1></h1> : 一级标题，加粗，字号最大，独自成行
……
<h6></h6> : 六级标题，加粗，字号最小，独自成行
3、段落元素
以段落的形式显示文本
形式：文字大小采用默认大小，段落元素独自成行，而且距离其他元素会有垂直空白
语法：<p></p>
4、换行元素
语法：<br>
5、分割线元素
语法：<hr>
属性：
1、size
取值以 px(像素) 为单位的数值，px可以省略
2、color
颜色
3、width
宽度
取值为 px 的数值，或者 % 作为单位
4、align
线条的水平对齐方式
6、预格式化
保留源文件中的格式，即保留源文件中的换行和空格的效果
语法：
<pre></pre>
7、分区元素
1、块分区元素
语法： <div></div>
形式：
1、独立成行
2、无任何文本显示效果
作用：
做布局
2、行内分区元素
语法：<span></span>
形式：
1、多个span会在一行内显示
2、无任何文本显示效果
作用：
处理同一行文字的不同格式
3、行内元素与块级元素
1、行内元素
多个元素会在一行内显示
ex:
span,i,b,s,u,sup,sub,a,img
作用：
大部分行内元素为了处理文本的显示效果
2、块级元素
每个块级元素会独占一行，即前后都有换行
ex:
div,h1~h6,p, ... ...
作用：做布局
1、Web 与 Internet
1、Internet
Internet是一个全球性的计算机互联网络
中文名称："因特网","国际互联网","网际网","交互网"
Internet 所提供的服务：
1、Telnet
2、Email
3、WWW(World Wide Web)
4、BBS
5、FTP
基本实现技术
1、分组交换原理
2、TCP/IP 协议簇
2、Web
又称为 万维网或环球网，WWW
其实就是网络环境下的一种程序-网页程序
将各类信息和服务进行无缝连接，并提供生动的图形用户界面
信息：文字，图片，音频，视频等...
服务：Telnet，BBS，Email
产物：
BBS：天涯论坛，百度贴吧
Email：QQ邮箱，网易邮箱(163)
2、Web的工作原理
Web 基于 浏览器/服务器 模式的程序
B/S : 浏览器 / 服务器 模式
Browser / Server 模式
浏览器 服务器
可以通过任意浏览器 就能访问 服务器程序的一种模式
C/S : 客户端 / 服务器 模式
必须通过 指定的 客户端 软件才能访问 服务器程序的 一种模式
ex : QQ,游戏... ...
由Web服务器，浏览器，通信协议组成
通信协议：http(Hyper Text Transfer Protocol)，超文本传输协议
规范了 数据是如何打包以及数据是如何传递的
WEB 服务器：
1、功能
1、存储WEB上的信息
2、响应浏览器请求并执行服务器端程序
3、具备基本的安全性功能
2、服务器产品
TOMCAT
IIS(Internet Information Service)
APACHE
……
WEB 浏览器
1、功能
1、提交请求(即用户代理User Agent 简称UA)
2、作为 HTML 和 JS的解释器
3、能以图形化的方式显示文档
2、浏览器产品
1、Microsoft IE
2、Mozilla Firefox
3、Google Chrome
4、Apple Safari
5、Opera(欧鹏)
3、Web的相关技术
1、服务器端技术
都提供数据库访问能力
PHP(Hypertext Preprocessor)
JSP(Java Server Page)
ASP(Active Server Page)
2、客户端技术
运行在客户端，由浏览器解释运行
1、HTML(Hyper Text Markup Language)
2、CSS(Cascading Style Sheets)
3、JS(JavaScript)
2、HTML快速入门
1、HTML概述
1、什么是HTML
HTML
Hyper Text Markup Language
超级 文本 标记 语言
普通文本 a : 无特殊意义
超级文本 a : 超链接
超文本：文本会具备特殊的功能
标记：超文本的组成形式 <a>
语言：拥有自己的语法结构
由html编写的web文件，以.html或.htm作为后缀的
2、HTML基础语法
1、标记
1、什么是标记
在HTML中，用于描述功能的符号，称之为 标记
2、语法
标记在使用时，必须使用 尖括号(<>)括起来
标记分为：
1、封闭类型标记
也称为 双标记 , 必须成对出现
<标记>内容</标记>
<a>网页</a>
注意：
封闭类型标记必须成对出现，如果没有被封闭的话(没有结束的话)，会产生意想不到的效果
<a>网页
.......
.......
ex:
1、封闭类型的 p 标记
<p></p>
2、封闭类型的 div 标记
<div></div>
3、封闭类型的 ol 标记
<ol></ol>
2、非封闭类型标记
也称为 ：空标记或单标记
语法：
<标记>或<标记/>
注意：
单标记不能包含内容，自己本身就是一个独立的功能
ex:
1、单标记 br - 表示换行
<br> 或 <br/>
2、单标记 hr - 表示横线
<hr> 或 <hr/>
3、单标记 img - 表示图像
<img> 或 <img/>
2、元素
元素，即标记
3、元素嵌套
元素之间可以相互嵌套，来形成更为复杂的页面结构
元素嵌套：在一个元素中，又出现了另外一个元素
<p>
<a>
<img/>
</a>
</p>
注意：
1、注意嵌套顺序(完整嵌套)
<p>
<a>
<img>
</a>
</p>
以上结构 正确
<p>
<a><img>
<\p>
</a>
以上结构是错误的，没有完整嵌套
2、注意嵌套代码的缩进关系
<p><a><img></a></p> 正确
<p>
<a>
<img>
</a>
</p>
正确
<p>
<a>
<img>
</a>
</p>
正确
标记 成对的打
<p>
<a>
<img>
</a>
</p>
<a>:超链接
<b>:加粗文本显示
<a>
<b>百度</b>
</a>
4、属性 和 值
1、什么是属性
属性是用来修饰元素的
2、语法
属性的声明必须位于开始标记里
<标记 属性="值" 属性="值"></标记>
ex:
1、设置 p 标记的 align 属性 ，值为center,设置 id 属性，值为p1
<p align="center" id="p1"></p>
3、标准属性
1、id
元素在页面中的唯一标识
2、title
鼠标移入到元素时，所提示的文本
3、class
css中，引入类选择器
4、style
css中，定义元素的行内样式的
5、注释
在页面中编写完成，但不会被浏览器解释运行的内容
可以将 代码的解释说明写在网页中以便被其他程序员查看
语法：
<!-- 该处内容，无论多少行，都是注释 -->
注意:
1、注释不能嵌套注释
<!--
<!-- -->
-->
以上结构是错误的，不能嵌套注释
2、注释不能写在<>中
<p <!-- 此处不能写注释 -->></p>
以上结构是错误的
6、HTML 和 XHTML 和 HTML5
W3C负责定制和推广HTML
W3C : World Wide Web Consortium
万维网联盟
1999年12月24日 W3C推出 HTML4.01 标准
2000年01月26日 W3C推出 XHTML1.0 标准
XHTML 与 HTML4.01 几乎相同
XHTML 是更纯净的HTML版本
如：
1、单标记必须要有结束
<br/>
<br>在xhtml中，就是错误
HTML5 目标，是为了实现更简洁的HTML代码
能不写，就不写，能少写，就少写
<br> 或 <br/> 都正确
<p align="center">正确
<p align=center>正确
<input readonly="readonly">
<input readonly> 正确,这是元素为只读
3、HTML文档结构
1、HTML文档结构
1、文档类型声明
作用：指定了HTML的版本和风格
HTML5文档类型声明：
<!DOCTYPE html>
2、HTML页面
语法：
<html></html>
注意：要位于 <!doctype>之下
练习：创建一个网页，名称为 01.html ,并且搭建网页结构(doctype , html)
2、HTML页面
1、页面头部内容
1、作用
定义页面的全局信息
2、语法
<head></head>
注意：
要紧在html之后，即html中的首个子元素
3、头部中所包含的内容
1、定义网页标题
<title>标题内容</title>
2、定义网页编码格式
utf-8 支持中文，网页，浏览器，服务器全部都支持 utf-8编码
<meta charset="utf-8">
注意：文件的编码格式也必须是 utf-8的
2、页面主体内容
语法：<body></body>
属性：
1、text
作用：控制当前网页文本的颜色
取值：表示 颜色英文单词(red)
2、bgcolor
作用：控制当前网页的背景颜色
取值：表示 颜色英文单词(green)
练习：
在已有的网页上，创建body标记，body中写上一句话:"我的第一个HTML练习",文本的颜色为红色(red),背景的颜色为绿色(green)
3、文本
1、特殊字符
在网页中，任意多的空格和回车，最终只会被解析成1个空格
1、 一个空格
2、> >
3、< <
4、© ©
5、¥ ￥
2、文本标记
1、文本样式
<i></i> ... 斜体
<u></u> ... 下划线
<s></s> ... 删除线
<b></b> ... 加粗
<sup></sup> ... 上标
<sub></sub> ... 下标
2、标题元素
以标题的形式显示文本内容
语法：<h#></h#>
#:1~6
<h1></h1> : 一级标题，加粗，字号最大，独自成行
……
<h6></h6> : 六级标题，加粗，字号最小，独自成行
3、段落元素
以段落的形式显示文本
形式：文字大小采用默认大小，段落元素独自成行，而且距离其他元素会有垂直空白
语法：<p></p>
4、换行元素
语法：<br>
5、分割线元素
语法：<hr>
属性：
1、size
取值以 px(像素) 为单位的数值，px可以省略
2、color
颜色
3、width
宽度
取值为 px 的数值，或者 % 作为单位
4、align
线条的水平对齐方式
6、预格式化
保留源文件中的格式，即保留源文件中的换行和空格的效果
语法：
<pre></pre>
7、分区元素
1、块分区元素
语法： <div></div>
形式：
1、独立成行
2、无任何文本显示效果
作用：
做布局
2、行内分区元素
语法：<span></span>
形式：
1、多个span会在一行内显示
2、无任何文本显示效果
作用：
处理同一行文字的不同格式
3、行内元素与块级元素
1、行内元素
多个元素会在一行内显示
ex:
span,i,b,s,u,sup,sub,a,img
作用：
大部分行内元素为了处理文本的显示效果
2、块级元素
每个块级元素会独占一行，即前后都有换行
ex:
div,h1~h6,p, ... ...
作用：做布局
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 今天开通了CSDN博客，决定以后将学习到的新知识记录下来
- 我的博客开通啦，以后会记录一位IT女的学习生涯
- 开通CSDN博客。记录对magento 105se模版的修改。以防以后忘记
- 正式开通博客，开始知识积累
- 开通博客，我要记录以后自己遇到的小问题
- 第一天开通csdn博客，以后坚持记录研究的点滴。
- 开通博客了，以后得多交流
- 第一篇 博客 记录一个自己写的性能超级差的方法 以后想办法找出原因
- 开通CSDN博客，记录学习历程
- SQL 随机抽取记录----知识积累
- 从此开通CSDN博客，记录技术笔记
- 开通博客记录研究生学习的点点滴滴！
- 刚刚开通了这个博客，专门为记录黑马学习日记之用
- 记录博客开通
- 开通这个博客，希望可以更好的学习网站开发知识
- 今天刚开通博客，接下来，我会把自己收集到的知识分享出来、、。
- 记录一下今天刚开通的博客
- 从今天开始我要陆续把工作中学到的知识发布到我的博客上，希望能对别人有些帮助，也用于记录我在工作中的点点滴滴。
- 从接触.net到开通博客至今的知识收获
- 以后要好好用这个博客把自己的东西记录下来