整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML(Hyper Text Mark-up Language )即是超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。HTML标签是网页构成的基础，我们所见到的几乎所有网页都离不开HTML，所以学习HTML可以算是基础中的基础了。
/一、网页
//a:什么是网页？
网站是指因特网根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站的一‘页’，通常是HTML格式的文件，它要通过浏览器阅读。
网页是构成网站的基本元素，它通常由图片，链接，文件，声音，视频等元素组成，通常我们看到的网页。
常以.htm 或 .html后缀结尾的文件，因此将其俗称为HTML文件
//b:什么是html?
HTML指的是超文本标记语言，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签
所谓超文本，有2层含义
1、它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）。
2、它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件连接（超级链接文本）。
//c:网页的形成？
网页是由元素组成，这些元素利用html标签描述出来，然后通过浏览器解析来显示给用户的
网页总结：网页是图片，链接，文字，声音，视频等元素组成，其实就是一个html文件（后缀名为html ）
//d:常用的浏览器
网页是通过浏览器来展示的，关于浏览器我们要介绍下面两点：
1、常用浏览器
浏览器是网页显示，运行平台，常用的浏览器有IE、火狐、谷歌、safari和Opera等。平时称为五大浏览器。
2、浏览器内核
浏览器内核:负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
//e:Web标准
Web标准是由W3C组织和其他标准化组织制定一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。
接下来围绕web标准，我们学习以下两点：
1、我们需要web标准
浏览器不同，它们显示页面或者排版有些许差异
遵循Web标准除了可以让不同的开发人员写出的页面更加标准，更统一外，还有以下优点：
让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度
2、Web标准的构成
主要包括结构，表现和行为三个方面
Web标准提出的最佳体验方案：结构，样式，行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
、web概念概述
1.1 JavaWeb：使用Java语言开发基于互联网的项目
1.2 软件架构：
1.2.1 C/S: Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序
如：QQ，迅雷...
优点：用户体验好
缺点：开发、安装，部署，维护 麻烦
1.2.2 B/S: Browser/Server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：开发、安装，部署，维护 简单
缺点：如果应用过大，用户的体验可能会受到影响，对硬件要求过高
二、B/S架构详解
2.1 资源分类：
2.1.1 静态资源：使用静态网页开发技术发布的资源。
特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
HTML：用于搭建基础网页，展示页面的内容
CSS：用于美化页面，布局页面
JavaScript：控制页面的元素，让页面有一些动态的效果
2.1.2 动态资源：使用动态网页及时发布的资源。
特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
2.1.3 注意：我们要学习动态资源，必须先学习静态资源！
三、HTML
3.1 概念：是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言
3.2 快速入门：
3.2.1 语法：
1. 创建html文档，后缀名为.html 或者 .htm
2. 标签分类：
围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。
3.2.2 代码：
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
3.3 标签学习：
3.3.1 文件标签：构成html最基本的标签
1、html:html文档的根标签
2、head：头标签。用于指定html文档的一些属性。引入外部的资源
3、title：标题标签。
4、body：体标签
5、<!DOCTYPE html>：html5中定义该文档是html文档
3.3.2 文本标签：和文本有关的标签
1、注释：<!-- 注释内容 -->
2、<h1> to <h6>：标题标签，h1~h6:字体大小逐渐递减
3、<p>：段落标签
4、<br>：换行标签
5、<hr>：展示一条水平线
文本标签属性：
color：颜色
width：宽度
size：高度
align：对其方式
center：居中
left：左对齐
right：右对齐
6、<b>：字体加粗
7、<i>：字体斜体
8、<font>:字体标签
9、<center>:文本居中
字体标签属性：
color：颜色
size：大小
face：字体
属性定义：
color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3.3.3 图片标签：
img：展示图片
属性：src：指定图片的位置
相对路径：以.开头的路径
./：代表当前目录
../:代表上一级目录
代码举例：
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
3.3.4 列表标签：
有序列表：
ol:
li:
无序列表：
ul:
li:
3.3.5 链接标签：
a:定义一个超链接
属性：
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开
代码：
<a href="http://www.baidu.com">点我</a>
<a href="http://www.baidu.com" target="_blank">点我</a>
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
3.3.6 div和span：
div:每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签 内联标签
3.3.7 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
<header>：页眉
<footer>：页脚
3.3.8 表格标签：
table：定义表格
属性：
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分
*请认真填写需求信息，我们会在24小时内与您取得联系。
