web前端基础知识-20170428

来源：互联网发布：java实现二叉树字典编辑：程序博客网时间：2024/05/19 13:59

学习方法：
1、练习
2、课上以“听”为主
3、背英语，练打字

1、HTML5 Basic（基础）
1、web基础知识
1、web与internet
1、intenet
因特网，是一个全球性的计算机互联网络
主要服务：
Telnet，Email,www,BBS,ftp,"资源共享"
基本实现技术：
1、分组交换原理
2、TCP/IP协议簇
2、web
web是运行在Internet上的一种应用（Application）
web就是（world wide web）宗旨就是将各类的信息和服务进行连接
宏观上看，web值得是网页应用程序
微观上看，一个web表示的就是一个具体的网页
2、web的工作原理
1、工作原理
基于浏览器/服务器模式的程序，简称为B/S结构
B：Browser:浏览器
S:Server:服务器
服务器（Server）：是能够为其它计算机提供服务的一台计算机，

由web服务器，浏览器，通信协议三部分组成
通信协议：HTTP协议
Hyper text Transfer Protocal(超级文本传输协议)
规范了数据在互联网中是如何打包以及如何传输
2、web的组成
web网页，在服务器中，是一文件的形式存放的
3、web—服务器
1、主要功能
1、存储web也上的内容信息
2、相应浏览器的请求，执行服务器端程序
3、安全性功能的保障
2、主要产品
Apache
Tomcat
IIS...
能够完成request和respose的操作
3、主要技术
1、php
2、JSP
3、ASP.NET
4、web-浏览器
1、主要功能
1、代替用户提交强求（用户代理）
User Agent:UA
2、作为HTML和JS的解释器
3、用图形化的方式显示文档
2、主要产品
Microsoft IE
Mozilla Firefox
Goole Chrom
Apple Safari
Opera Opera
3、主要技术
1、HTML-制作网页
2、CSS-美化网页
3、Javascript-交互
2、HTML入门（重点）
1、HTML介绍
1、WEB
web就是一个以.html或.htm作为结尾的文本文件，
HTML是编写web的一款语言
2、什么是HTML？
Hyper Text Markup Language超级文本标记语言
超级文本：具备特殊功能的字符
普通文本 a：26个英文字符首字符
超文本 a:超链接
普通文本 b:第二个字符
超文本 b:字体加粗

超文本的表现形式：<>,如：<a>,
语言：一定会有语法
文件后缀：一定是.html或.htm
2、HTML基础语法
1、标记语法
在网页中用于描述功能的符号，称为“标记”
在HTML中，使用<>将标记括起来
标记的分类：
1、双标记
也称为封闭类型标记，必须成对出现，有开始，有结束
<标记></标记>
ex:
a 标记
<a></a>
div标记：
<div></div>
2、单标记
也称为空标记，非封闭类型标记
语法：
<标记>或<标记/>
ex:
1、br标记
 
1、hr标记
<hr><hr/>
2、元素
元素即标记
<a>内容</a>
1、元素嵌套
元素之间可以相互嵌套，从而形成更为复杂的页面结构
<元素>
<元素></元素>
</元素>
ex:
<a>
加粗的文本显示
</a>
注意：
1、成对的标记成对的打
2、被嵌套的内容，独立成行，加缩进
3、完整嵌套
2、属性
属性是用来修饰元素的
语法：
<标记属性=“值” 属性=“值”></标记>
ex：

html中的标准属性：所有元素都会具备的通用属性
1、id 表示元素在页面中独一无二的名称
2、title 鼠标移入到元素上时，提示的文本
3、style 定义元素的内联样式
4、class 定义元素的类选择器
3、注释
允许出现在代码中，但不会被浏览器所解析的内容。
语法：
注意：
1、注释不能被嵌套
2、注释不能出现在标记中
3、HTML文档结构
1、文档类型声明
<!doctype html>
2、html页面
<html></html>
3、html页面结构
<html></html>结构
1、head元素
<head></head>
作用：html头元素，定义html页面的全局信息
包含：
1、网页标题
<title></title>
2、指定网页编码格式
<meta charset=“utf-8”>
注意：必须要保证网页文件的编码也是utf-8
2、body元素
<body></body>（1、text 定义文本颜色 2、bground定义页面颜色）
3、文本
1、特殊字符表现
html源文档中的回车和空格一律会被解析成一个空格
在html中，空格，<,>等都是由转义字符进行表示的
1、  表示一个空格
2、< <
3、> >
4、&copy；© 版权符号（SOGO下打banquanfuhao）
5、¥ ￥
6、× × （SOGO下打cha）
2、文本标记
1、文本样式相关标记
：加粗显示文本
：斜体
：下划线
<s></s>：删除线
：下标
：上标
2、标题元素
在页面中以突出（字号，加粗，垂直的空白距离）的方式显示文本标记
<hn></hn> n:1~6
特点：
1、独立成行
2、改变字号
3、加粗显示
4、具备垂直的空白间距
3、段落元素
页面中独自成行，并且具备垂直的空白间距的元素
语法：
属性：
1、align 文本水平对齐方式
取值：
left 左对齐
center 居中对齐
right 右对齐
4、换行元素
在页面中表示一个换行的效果
语法： 或 
5、分割线元素
在页面中，表示一条水平线
语法：<hr>或<hr/>
属性：
1、size：尺寸以px为单位
2、width：宽度，以px或%为单位
3、align：水平线的水平对齐方式（left/center/right）
4、color：水平线的颜色
6、预格式化
作用：保留源文档中的回车和空格
语法:<pre></pre>
7、行分区元素
语法：
作用：用于包裹文本，并为文本定义样式（配合着css一起定义样式）
特点：多个span元素和文本都会在一行内显示
8、块分区元素
作用：用于实现页面的“布局”
语法：<div></div>
特点：独占一行
9、行内元素与块级元素
1、行内元素
多个元素与文本可以在一行中显示
如：i,b,s,u,sub,sup,span
特点：控制文本样式
2、块级元素
每个块级元素都会独占一行
如:h1~h6,div,p,pre
作用：做布局

0 0