杨燕 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 创建网页模板