杨燕 g-yangyan@tedu.cn qq:445190209
一.第二阶段学习内容
1.HTML5（2天）
搭建网页结构，实现内容的体现
http://www.cssmoban.com/
高性能网站建设指南
2.AJAX(3天)
实现数据异步交互
3.AJAX项目（2天）
完成用户表数据的增删改查（从前端页面发起异步请求）
4.CSS3（6天）
美化HTML页面
5.Bootstrap（4天）
6.Boot项目（3天）
二.HTML5
HTML： HTML4.01 版本（1999.12-2014）
HTML5：H5
三.web基础知识（了解）
1.web与Internet
Internet:全球性的计算机互联网络，简称因特网，互联网，交互网。
提供的服务：
www服务：world wide web通过网络的方式去访问网站（万维网）
Email:电子邮件
BBS：电子公告板，俗称论坛
FTP:文件的上传下载
telnet:远程登录
2.Internet上的应用程序
1.c/s 程序
c:client
s:server
通过指定的客户端连接服务器的程序（桌面应用程序）
代表：qq,网络游戏，.exe程序
2.b/s 程序
b:browser 浏览器
s:server 服务器
通过浏览器去访问服务器
代表：网站
3.web应用程序
web:运行在internet之上的一种B/S结构的应用程序，俗称网站。
web的作用：将各类信息和服务进行无缝的连接，并提供生动形象的用户界面。
web的工作原理：基于浏览器和服务器以及通信协议来实现数据的传输和展示。
通信协议：规范了数据是如何传递和打包。
服务器：
1.功能
存储web信息，并提供程序的运行环境
接收用户请求并给出响应
具备一定的安全功能
2.服务器产品
1.TOMCAT(JAVA)
2.APACHE
3.IIS
3.服务器技术
1.java
2.php
3.ASP.NET
4.python
5.NODE.JS(前端技术：操作数据库)
浏览器：
1.功能
1.代理用户提交请求（UA：User Agent）
2.解析HTML,CSS,js,以图形化的方式展示给用户
2.浏览器产品
1.Chrome
2.IE
3.Firefox
4.Safari
5.Opera
3.浏览器
1.HTML
2.CSS
3.JS
四.HTML快速入门
1.什么是HTML？
HTML：HyperText Markup Language 超文本标记语言
a：普通字母
:超级文本，超链接
HTML的特点：
1.用带有尖括号的“标记”来标识
2.以.html或.htm为后缀
3.由浏览器解析执行
4.可以嵌套脚本语言（javascript）
2.HTML基础语法
1.标记
标记，又称元素或标签，在网页中表示一些功能。
标记在使用时，必须使用<>括起来，标记分为两种：
1.封闭类型（双标记）
必须成对出现，有开始和结束标记
语法：<标记>内容</标记>
ex:
百度 正确
百度 错误
2.非封闭类型（单标记）
也称为空标记，只有一个标记，既表示开始又表示结束。
语法：<标记>或<标记/>
ex:
<img>或<img/>
练习：
新建一个txt文档，将文档的后缀改为.html，然后在文档中编写如下代码
1.写一对<html></html>
2.写一对<head></head>
3.写一对<title></title>
4.写一个<meta>
2.标记的嵌套
1.什么是嵌套
在一对标记中出现另外一对（个）标记，从而形成功能的层叠。
2.语法
<标记>
<标记>
<标记/>
</标记>
</标记>
ex:
<a>
<b>
<img>
</b>
</a>
<a><b><img></b></a> 正确，不推荐
<a>
<b>
</img>
</a>
</b> 错误
嵌套注意问题：
1.嵌套顺序，换行缩进
2.成对出现，去嵌套其它的标记
3.属性和值
属性作用：修饰标记
语法：
<标记 属性名称1="值1" 属性名称2="值2"><标记/>
要求必须写在开始标记中，属性和值之间用等号连接，如果有多个属性，属性之间用空格隔开。
ex:
设置段落标记对齐方式为居中对齐
<p align="center"></p>
标准属性（通有属性）：
id:定义元素在页面中独一无二的标识
style:在css中，定义行内样式
class:在css中，引用类选则器
title:鼠标悬停时元素上所提示的文字
4.注释
语法：<!--注释内容-->
注意：
1.注释不能嵌套
2.也不能出现在标记中
3.HTML文档结构
1.HTML文档的声明
文档的声明:<!doctype html>
作用：告诉浏览器HTML的版本类型
2.HTML页面结构
根标记:
在根标记中包含网页头和网页主体：
网页头： 定义网页的全局信息
网页主体： 显示网页的所有内容
练习：2分钟
在上午练习一的基础将网页结构整理完善。
3.head元素
head是其它头元素的容器
:定义全局信息，如：编码格式，关键词，描述内容，元标签等等。
:定义内部样式
:定义/引用js脚本
:引入css文件
4.body元素
显示网页的所有内容
修饰body的属性：
text:定义整个网页的文字颜色
bgcolor:定义网页的背景颜色
4.文本标记(重点)
1.特殊字符
用一些转义字符来表示特殊的符号
空格
< 表示<
> 表示>
© @
¥ ￥
® ®
× 关闭符号x
练习：完成以下版权设置 3分钟
Copyright @ 2004 - 2018 京东<JD.com> 版权所有
2.文本样式标记
<b></b> 加粗
<i></i> 倾斜
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标
<sup></sup> 上标
3.标题元素
语法：<hn></hn> n:1-6
<h1>内容</h1>
...
<h6>内容</h6>
特点：
1.改变字体的大小
2.加粗显示
3.标题元素自带上下空白间距
4.独占一行
属性：
align:设置内容水平对齐方式
取值：
left:左
center:中
right:右
练习：在页面中设置一级标题中的内容靠左显示，三级标题的内容居中显示，五级标题中的内容靠右显示。（3分钟）
4.段落标记
语法：<p>内容</p>
特点：
1.独占一行，并且上下文之间有空白间距
2.字体无加粗和大小变化
属性：
align:设置内容在水平方向的对齐方式
取值:left/center/right
5.换行标记
语法：<br>或<br/>
6.分割线
语法：<hr>或</hr>
属性：
1.width 宽度，表示水平线的宽度，取值为px或%的数值。
2.align 水平线对齐方式，取值：left/center/right
3.size 表示水平线的尺寸（高度），取值为px或%的数值。
4.color 水平线的颜色，取值为合法的颜色值
练习：页面中添加一个水平线，设置尺寸为3px,宽度为50%，颜色为绿色，并居中对齐
7.预格式化
作用：用于保留html代码中回车和空格
语法：<pre></pre>
8.分区元素
1.块分区元素
作用：用于页面的布局
语法：<div></div>
特点：单独成行
2.行分区元素
作用：处理同一行文本的不同样式
语法：<span></span>
特点：包裹的内容在一行中显示
9.行内元素与块级元素
1.块级元素
在页面中独占一行，从上往下排列的元素
常见的块级元素：
h1-h6,p,div,列表,结构标记
2.行内元素
多个元素在一行中显示，从左往右排列的元素
常见的行内元素：
span,i,b,u,s,sup,sub
5.图像和链接
1.URL
1.目录结构
文件目录：文件夹嵌套结构
2.URL
URL：Uniform Resource Locator统一资源定位器
3.路径的表现形式
1.绝对路径
网络资源：协议+主机+文件目录结构+文件名称
本地绝对路径：C:\xampp\htdocs\yy\01-HTML\Day01
2.相对路径
3.根相对路径
课后作业：
1.用思维导图整理今天所学内容
2.完成Day01中“作业”文件夹中效果图所示练习
3.复习nodejs项目为后面的ajax做准备
快捷键：ctrl+B 运行网页
windows+D 回到桌面
alt+Tab 切换工作窗口
ctrl+shift+N 创建网页模板
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
