HTML5BASIC_day01
1、HTML+CSS+UI
2、Javascript
3、HTML5CORE+AJAX+Jquery
4、Bootstrap,Angular JS+其他框架
1、HTML+CSS3BASIC+PRO+UI+PRO+CSS3CORE
============================================
1、Internet
1）什么是Internet？
---是全球性计算机互联网络，是由若干终端(PC,移动端)以及
特殊的传输介质而组成的一个网络结构。
--PC：Personal Computer
--移动端：手机、pad
2）提供的服务
---信息共享
--Telnet：远程连接（黑客时，会用到。或者给服务器端时，可能会用到。）
--Email：电子邮件
--WWW：万维网 www.baidu.com 指所访问到的网页
--BBS：电子公告板，论坛。（第一大论坛:百度贴吧；第二大：天涯论坛；各大高校的论坛）
--FTP：上传和下载服务
3）实现技术
--3.1 分组交换原理：数据通过数据包进行传递的。到达目的地后，对数据包进行重组。
（两台计算机互连在进行数据传递的时候，某一台计算机需要将数据进行拆分， 俗称叫做拆包。做成一个数据包。）
--3.2 TCP/IP 协议簇
（如何找到你要交互的那台计算机，互联网上两台计算机要交流并不难，就好比茫茫人海中， 你想找到两个人对话一样。不可能大马路上随便抓一个咋俩聊会天。所以一定会找一个认识 的人，要么有他门牌地址，要么有手机号/姓名。如何找到这个人，就相当于协议。）
（簇：想找事，光里面的pc机ip还不够，还有若干个协议一起来完成找人这件事。）
（在互联网上，没有合法身份，是不容易找到的。就是黑户。
黑户---上不了学，就不了业，领不了低保，拿不了保险。）
2、WEB
1、什么是WEB
一定是在Internet这个范围内而产生的一组应用。要依托于Internet
就是WWW（World Wide Web）
W3C：www consortium 万维网联盟 是一个组织机构，是由民间的一些企业联合组成的。
不是官方机构。
旗下的企业都是世界知名的大企业：
微软、SUM（java原来所在的公司，现在叫做Oracle被收购了）、IBM、APPLE.
专门制定web的规范。
web写好了之后，最终是要拿到浏览器中去运行的。
2、能干什么
能够将各类的信息和服务进行连接，并且提供图形用户界面。
信息：文字、图片、音频、视频、数据包
服务：Telnet、FTP、Mail、HTTP......
3、万维网就是无数的文档集合（网页文档），文档会驻留在世界（互联网）的任何一个角落。
三、WEB的工作原理
WEB是基于Internet的多媒体信息服务系统
1、基于浏览器/服务器 模式
B/S: Browser/Server
在服务器上，主要以网页的形式发布多媒体信息。
2、由WEB服务器、浏览器、通信协议组成，缺一不可。
服务器：提供服务的机器，把网页放在Internet互联网上，指所在的服务器要处在互联网中。
服务器几十个T，个人电脑8核，服务器能60多核。支持多个CPU。
配置越高接收的访问就越多。
浏览器：IE、谷歌、火狐
通信协议：HTTP协议，超文本传输协议。主要管理你的数据是如何传递的。
一个用户来访问网页，我们怎么把网页展示给用户看。
3、WEB 相关技术
1）服务器端技术(后台)
PHP\JSP\ASP....
2）客户端技术（前端技术）
HTML;
CSS;
Javascript
=================================PM=============================================
1、HTML 入门的知识
1）什么是HTML
---HTML（Hyper Text Markup Language）,超级文本标记语言。
超文本：超文本文件核心组成内容。超越了普通文本，自己包含另外一层含义。
a是什么？a就是普通英文字符，在网页上就是网页链接
（在超文本中a就是超链接的组成元素。）
标记：超文本都是由标记组成的。（页面的超文本的组成形式。）
<a> 尖括号+超文本=超文本标记
语言：包含自己独特的语法。
---HTML最终由浏览器负责解释。
---HTML总可以嵌入一些脚本语言编写的程序段：Javascript、VBScript
2）HTML版本
超级文本标记语言（第一版）
HTML2.0
HTML3.2
HTML4.0
HTML4.01
XHTML1.0 （较严格）
-->X可扩展的：可以使用规范好的东西，还可以自己创造出一部分东西出来。（很少用）
HTML5(最新、现在用、严格度放低了)
3）标签（标记）
3.1 标签的语法
3.1.1 必须使用尖括号括起来
<a>,<div>...
<A>,<a>
HTML5中标签是不区分大小写的。
3.1.2 有封闭类型的标签，也有非封闭类型的标签
（1）封闭类型
也称作双标记，则必须成对出现
<标记>文本内容</标记>
不同的标记，决定了“文本内容”的不同表现形式。
eg:<a></a>,<p></p>,<div></div>
(2)非封闭类型
也称作单标记、空标记
<标记>
或者
<标记/>
eg:
<hr>,<br>,<img>
一条横线，回车换行，图片
（3）元素
标记就是元素，元素也称为标记。标记或元素是可以嵌套的。
（4）元素嵌套（标签嵌套）
标签之间相互嵌套，形成复杂的语法结构。
嵌套一定产生在双标记里，单标记没有。
p是body的子元素，出现在内部。p会受到body的样式控制，里面可以有自己的东西。
做分区、做布局时就是通过标签的嵌套来完成的。
注意嵌套的语法规范性。切记父层和子层标签在同一垂直水平线上。
在子元素的位置处（外层是父，内层是子），直接按TAB键来形成一个制表符。
（说白了，就是几个空格而已）。--缩进。
<body>
<p>
<a></a>
</p>
</body>
(5)属性
属性是出现在标记中的内容，作用是修饰元素
<p 属性名="属性值"></p>
<p 属性名='属性值'></p>
<p 属性名=属性值></p> --->在HTML4.0之前的版本中使用完全没有问题，
1.0之后不行啦！所以记住前两种。
属性名：颜色color
标准属性：每个元素都会具备的通用属性。
id:定义每个标签的唯一标识。就是给标签取个名
title:提示文本
class：样式祥光，类样式
style：样式相关，行内样式
操作1：定义一对p标签，id属性设置为program
<p id="program"></p>
多属性：
<p 属性1="值" 属性2="值"></p>
注意：多属性之间，排名不分先后。
3.2）创建HTML文档
开发工具：任何一个文字编辑软件都可以开发HTML
EditPlus:超级记事本
运行环境：任何一个浏览器都能运行网页HTML。
Google Chrome, Mozilla Firefox,Microsoft IE,Safari,Opera。。。
中国人的360哈哈哈，和IE使用的是相同的内核。
Chrome（贯彻W3C的规范很好）主要用的较多，IE最讨厌用。
IE在浏览器大战中第一次干掉了网景，网景浏览器。
第二次浏览器世界大战，谷歌，火狐新型浏览器的出现，把IE打掉。
微软想搞垄断，在中国行，国外不行。反垄断。
学习中主要以谷歌为主。
任何一台电脑都可以开发网页。只要装了操作系统就可以。
超文本文件：
是一个以.html或.htm结尾的文档。
3、文档结构
3.1）文档类型声明
声明使用的html版本和风格
（以后写网页面临的问题：浏览器所支持规范不一样，
相同的代码放在不同的浏览器上会出现不同的效果。--浏览器的兼容性）
Strict DTD
<!DOCTYPE html Public""...XHTML 1.0 Strict//...> 版本/风格：严格
Transitional DTD 风格：过度
。。。
Frameset DTD 风格：框架集（不用）
。。。
HTML5
<!DOCTYPE HTML> 浏览器会按照HTML5规则去解析。
<!DOCTYPE html> 不区分大小写
3.2）html页面
3.2.1 文档根元素
每个文档有且仅有一对根元素。根：最外层的那一对。<html></html>
3.2.2 在根元素的内部，包含两对子元素
1、head：页面的头部内容。定义网页页面的全局信息。
全局信息：网页的标题；网页内容的文本编码格式。
编码：告诉浏览器按照哪种编码去解析我的文本内容。
如果编码和写的文本对不上，会导致问题乱码。
例如：用英文的编码来解析汉语的文字，就会解释不通。
包含：
<title></title>:网页标题
<meta/>:声明元数据（编码，关键字，描述）
<style></style>:声明内部样式表
<link/>:引入外部样式表
<script></script>:定义或引入脚本文件
2、body：页面的主题内容（身体）
任何一个标签都可能会出现在body中。
3.3.3 head元素
1、声明网页标题 --->当没有文件名时，Chrome自性将文件名变为标题。
<title></title>
eg:<title>我的第一个HTML网页My First HTML</title>--->会出现乱码
UTF-8
2、定义网页文本编码格式
默认：ISO-8859-1，只支持英文以及英文状态下的标点符号
UTF-8:支持中英文，以及标点符号。
<meta charset="utf-8"/>
3、......
3.3.4 body元素
属性：
text：文本的颜色（not color）
bgcolor：背景颜色（background）
练习1：
1、为body添加两个属性，text，bgcolor
2、文本颜色：红色（red）
背景颜色：银色（silver）
3、在body中随意写上一段文本，观察页面显示效果。
3.3.5 文本标记
1、特殊的文本
空格：&与--->
< 小于: < less than
> 大于: > greater than
版权标识： ©
<p>在body里，浏览器显示不出来。
必须写成这样： <p>© 2016 by Tarena
2、文本标记
1、文本样式
<b>...</b>:加粗文本
<i>...</i>:斜体文本
<u>...</u>:下划线
<s>...</s>:删除线
<sup>...</sup>:上标
<sub>...</sub>:下标
2、标题元素
1-6级6个标题
<hn></hn> n:1-6
一级最大
六级最小
3、段落元素
提供了结构化文本的表现方式
语法：<p></p>
注意：
1、每对p标签的内容都会单独成为一个段落。
2、段落与其他元素有垂直的空白距离,段落间距。
常用属性：
align:水平对齐方式
取值：left center right
4、换行元素
在代码的任何位置处，实现回车的效果
<br/>
换行是没有段落间距的。
5、水平线
又叫做分割线
<hr />
属性：
5.1 size：水平线的粗细，通常以像素（px）为单位
5.2 width:宽度
5.3 align：水平线的水平对齐方式
5.4 color：颜色
6、分区元素
目的：为元素进行分组，多数用在布局中
块分区元素：<div></div> 层
行内分区元素：<span></span>
注意：
div：主要用在布局上
span：修改其内部内容的样式
7、预格式化
保留源文档中的空格和回车
<pre>
文本内容
</pre>
3、注释
可以写在html源码中，但不被浏览器注释的文本
语法：
<!-- 注释内容 -->
注释是浅绿色；
能够识别的都是蓝色;
属性：红色；
不能识别的都是绿色，转移符号；
文本：黑色。
4、行内元素与块级元素
块级元素：默认情况下，块级元素独占一行，元素的前后都会自动换行。
自动换行的有：div,hn,hr,p
块级元素作用：布局
行内元素：默认情况，多个元素位于同一行，不会换行。
span,文本标记 ... ...
行内元素的作用：修改内部内容的样式
------------------------------------------------------------------------
创建一个新文件夹。
--->01_HTML5BASIC--->Day01.txt
新建一个文本文档--->01.html
点击01.html 右键一定会有EditPlus
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML网页---My First HTML</title>
<meta charset="UTF-8" />
</head>
<body text="red" bgcolor="silver">
这是 一段HTML文本... ...<br/>
你是谁，你就会遇见谁。0911，0913？
<!-- hr表示的是一条水平线 -->
<hr />
普通文本
<!-- 1.声明b标签 -->
<b>粗体</b>
<!-- 2.声明i标签 -->
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
上<sup>标</sup>
下<sub>标</sub>
<!-- 标题元素 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落元素 -->
<p>第一个段落</p>
<p align="center">第二个段落</p>
<p>第<br>三<br>个<br>段<br>落</p>
<!-- 粗细为3px，宽度为50%，颜色为绿色，并且居中显示的一条水平线 -->
<hr size="3px" width="50%" color="green" align="center"/>
<!-- 块分区 div-->
普通文本
<div>div普通文本</div>
<!-- 行内分区 span -->
普通文本
<span>span普通文本</span>
<!-- 预格式化 -->
<pre>
这是一段普通的文本
function test(){
alert("Welcome");
}
</pre>
<p>
<p>© 2016 by Tarena
</body>
</html>
*************************************************************************
作业：
页面
HTML5 <Day01> 居中Day01 为红色
有一条水平线
1 HTML 文档片段
1.1 问题
创建如图 1所示的 HTML 页面。
1.2 方案
使用 HTML 标记来完成该页面效果。
1.3 实现
建立一个文本文件，并修改文件名名称为 first.html ,然后使用文本编辑器打开该文件，并未该文本添加代码，以创建标准格式的 HTML 文档。
然后，在 body 元素中添加代码，以创建居中显示的段落文本。代码如下所示：
<p align="center" title="段落">
居中显示的段落。
</p>
----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>我的第一天HTML作业</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 align="center">HTML5 <Day01></h1>
<!-- 一条水平线 -->
<hr/>
<h2>1 HTML 文档片段</h2>
<h3>1.1 问题
<p>创建如图1所示的 HTML 页面。</p>
</h3>
<h3>1.2 方案
<p>使用 HTML 标记来完成该页面效果。</p>
</h3>
<h3>1.3 实现
<p>建立一个文本文件，并修改文件名名称为 first.html ,然后使用文本编辑器打开该文件，并未该文本添加代码，以创建标准格式的 HTML 文档。</p>
<p>然后，在 body 元素中添加代码，以创建居中显示的段落文本。代码如下所示：</p>
</h3>
<!-- 预格式化 -->
<pre>
<p align="center" title="段落">
居中显示的段落。
</p>
</pre>
</body>
</html>
--------------------------------------------------------------------------------------
给了效果图，先分析里面由哪些标签组成。
红色不需要你实现，目前。
一级标题<h1>
一条横线</hr>
二级标题<h2>
三级标记<h3> 3个
首选<p>文本上下都有垂直空白。
最后面的<pre>预格式处理
只要效果出来，不违反HTML5的规则，就都是对的.
------------------------Teacher--------Perfect------------------------------------------
<!-- 1.文档类型声明 -->
<!doctype html>
<!-- 2.html文档结构 -->
<html>
<!-- 1.定义头部信息 -->
<head>
<!-- 1.1 文档编码 -->
<meta charset="utf-8"/>
<!-- 1.2 标题 -->
<title>我的第一个练习</title>
<!-- 1.3 关键字、描述... -->
<meta name="keywords" content="HTML5,WEB前端"/>
<meta name="discription" content="这是一个全新的HTML5的网页，老牛了！"/>
</head>
<!-- 2.定义网页内容 -->
<body>
<!-- 2.1 标题 -->
<h1 align="center">HTML5 <span style="color:red"><Day01></span></h1>
<!-- 2.2 水平线 -->
<hr />
<!-- 2.3 段落标题 -->
<h2>1 HTML 文档片段</h2>
<!-- 2.4 内容标题 -->
<!-- 2.5 文本内容 -->
<h3>1.1 问题</h3>
<p>创建如图 1所示的 HTML 页面。</p>
<h3>1.2 方案</h3>
<p>使用 HTML 标记来完成该页面效果。</p>
<h3>1.3 实现</h3>
<p>建立一个文本文件，并修改文件名名称为 first.html ,然后使用文本编辑器打开该文件，并未该文本添加代码，以创建标准格式的 HTML 文档。</p>
<p>然后，在 body 元素中添加代码，以创建居中显示的段落文本。代码如下所示：</p>
<!-- 2.6 预格式化pre -->
<pre>
<p align="center" title="段落">
居中显示的段落。
</p>
</pre>
</body>
</html>
*******************************END*****************************************************
