两种框架
如果你喜欢用(或希望能够用)模板搭建应用，请使用Vue
如果你喜欢简单和“能用就行”的东西，请使用Vue
如果你的应用需要尽可能的小和快，请使用Vue
如果你计划构建一个大型应用程序，请使用React
如果你想要一个同时适用 于Web端和原生App的框架，请选择React
如果你想要最大的生态圈，请使用React
前端作用举例
会适配不同的设备
电脑
手机
水池特效网站
https://www.html5tricks.com/demo/webgl-water/index.html
为什么选择html5
1、自从2010年htmI5正式推出以来， 它立刻受到了世界各大浏览器的热烈欢迎和支持。根
据世界上各大IT界知名媒体的评论，新的web时代，html5的时代马 上就要到来。
2、跨平台运行
3、硬件要求低
3、flash之外的选择
HTML .5的新特性:
用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地离线储存的更好支持
新的特殊内容元素
如: article、 footer、 header、 nav、 section
基础知识
1、声明: <!DOCTYPE>
HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器
才能完全正确地显示出HTML页面。这就是<!DOCTYPE>的用处
HTML 5:
HTML 4.01:
XHTML 1.0:
| 基础标签 | 标题 | 段落 | 超链接 | 图片 |
|---|---|---|---|---|
| <head> <bdy> | <h1…h6> | <p> | <a> | <img> |
超链接
测试
<p>和<br/>（空元素）的对比：
元素简介
1、元素指的是从开始标签到结束标签的所有代码
2、HTML元素语法:
元素的内容是开始标签与结束标签之间的内容
空元素在开始标签中进行关闭
大多数HTML元素可拥有属性
3、嵌套的HTML元素
大多数的HTML元素都是可以嵌套的
HTML属性
1、标签可以拥有属性为元素提供更多的信息
2、属性以键/值对的形式出现，如: href= “www.jikexueyuan.com”
3、常用标签属性:
<h1>:align对其方式
<body>:bgcolor背景颜色
<a>: target规定 在何处打开链接
4、通用属性:
class :规定元素的类名
id:规定元素唯一ID
style :规定元素的样式
title : 规定元素的额外信息
HTML格式化
| 标签 | <b> | <big> | <em> | <i> | <small> | <strong> | <sub> | <sup> | <ins> | <del> |
|---|---|---|---|---|---|---|---|---|---|---|
| 描述 | 定义粗体文本 | 定义大号字 | 定义着重字 | 斜体 | 小号字 | 加重 | 下标 | 上标 | 下划线 | 删除字 |
HTML样式，链接，表格
html的样式
1.标签：
<style>:样式定义
<link>:资源引用
2.属性：
rel = “stylesheet”：外部样式表
type = “text/css”：引入文档类型
margin-left：边距
样式表的三种插入方式：
1.外部样式表
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
2.内部样式表
<style type=“text/css”>
body{background-color:red}
p{margin-left: 20px}
</style>
3.内联样式表
<p style=“color:red”>
测试
HTML链接
1、链接数据:
文本链接
图片链接
2、属性:
href属性:指向另一个文档的链接
name属性:创建文档内的链接
3、img标签属性:
alt:替换文本属性（就是图片加载出错时的提示文字）
width:宽
height:高
文字和图片的链接
跳转测试，点击超链接会跳转到上面
HTML表格
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题 |
| <tr> | 定义表格的行 |
| <th> | 定义表格表头 |
| <td> | 定义表格的单元 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <col> | 定义表格的列属性 |
<table> 里面可以添加的属性
border 单元格的边缘的线
cellpading 单元格的边距
cellspacing 单元格之间的距离
bgcolor 单元格的背景颜色
background 单元格的背景图片
HTML的块元素
1、HTML块元素
块元素在显示时，通常会以新行开始如: <h1>、<p>、<ul>。
2、HTML内联元素
内联元素通常不会以新行开始如: <img>、<a>、<b>。
3、HTML的<div>元素
<div>元素也被成为块元素，其主要是组合HTML元素的容器。
4、HTML<span>元素
元素是内联元素，可作为文本的容器。
<div id = “divid”>标签
css #divid{ 这里面填 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head Lang="en">
<meta charset="UTF-8">
<title>块元素</title>
<style type="text/css">
#divid{
color: red;
}
span{
color: blue;
}
#hhh{
color:green;
}
</style>
</head>
<body>
<p>孙创昱</p>
<h1>孙创昱</h1>
<b>孙创昱</b>
<a>孙创昱</a>
<div id="divid">
<p>孙创昱</p>
<a>孙创昱</a>
</div>
<div id="hhh">
<a>孙创昱<a>
<p><span>这是一个测试效果</span>span是一个什么样子</p>
</div>
</body>
</html>
测试代码
HTML布局
代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head Lang="en">
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin:0px;
}
div#container{
width:100%;
height:900px;
background-color:yellow;
}
div#heading{
width:100%;
height:10%;
background-color:aqua;
}
div#content_menu{
width:30%;
height:80%;
background-color:red;
float:left;
}
div#content_body{
width:70%;
height:80%;
background-color:blue;
float:left;
}
div#footing{
width:100%;
height:10%;
background-color:green;
float:left;
}
</style>
</head>
<body>
<div id = "container">
<div id = "heading">头部</div>
<div id = "content_menu">内容菜单</div>
<div id = "content_body">内容主体</div>
<div id = "footing">底部</div>
</div>
</body>
</html>
结果
HTML表单
| 符号 | 类型 |
|---|---|
| <form> | 表单 |
| <input> | 输入域 |
| <textarea> | 文本域 |
| <label> | 控制标签 |
| <fieldset> | 定义域 |
| <legend> | 域的标题 |
| <select> | 选择列表 |
| <optgroup> | 选项组 |
| <option> | 下拉列表的选项 |
| <button> | 按钮 |
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单</title>
</head>
<body>
<form>
用户名：
<input type="text">
<br/>
密码：
<input type="password">
<br/>
你喜欢的水果有？(复选框)
<br/>
香蕉<input type="checkbox">
西瓜<input type="checkbox">
葡萄<input type="checkbox">
<br/>
请选择性别：（单选框）
男<input type="radio" name=“sex”>
女<input type="radio" name=“sex”>
<br/>
下拉列表：
<select>
<option>孙</option>
<option>创</option>
<option>昱</option>
</select>
<br/>
<input type="button" value="按钮 ">
<input type="submit" value="确定 ">
</form>
<textarea name="textarea" cols="50" rows = "20">
填写个人介绍
</textarea>
</body>
</html>
运行结果
php环境的搭建
P18没做
P19没做
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>frame测试</title>
</head>
<body>
Untitled1
<a href = "http://www.baidu.com"></a>
<iframe src="frame1.html" frameborder="0" width="800px" height="800px"></iframe>
</body>
</html>
frame1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body bgcolor = "red">
<iframe src="frame2.html" frameborder="0" width="600px" height="600px"></iframe>
</body>
</html>
frame2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body bgcolor = "blue">
<iframe src="frame3.html" frameborder="0" width="400px" height="400px"></iframe>
</body>
</html>
frame3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<a href = "http://www.baidu.com" target="_self">测试self</a>
<br/>
<a href = "http://www.taobao.com" target="_blank">测试blank</a>
<br/>
<a href = "http://www.4399.com" target="_parent">测试parent</a>
<br/>
<a href = "https://www.icourse163.org/" target="_top">测试top</a>
<body bgcolor = "yellow">
</body>
</html>
HTML的框架
<iframe>框架可以实现在界面上嵌套其他页面，根据超链接<a target=“参数”>里参数的不同，设实现不同的效果。参数是self时，打开的时本iframe。blank打开的时新的页面，parent打开的时他的父级，top打开的是最顶层的。
HTML5背景
Background 背景图片
Bgcolor 背景颜色
都可以作为body的属性
颜色是由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成(RGB)
颜色值最小值: 0(#00)
颜色值最大值: 255(#FF)
红色: #FF0000
绿色: #00FF00
蓝色: #0000FF
HTML实体
实体：HTML中预留字符串必须被替换成字符实体。
比如<>
https://www.w3school.com.cn/html/html_entities.asp
XHTML简介
1、什么是XHTML?
XHTML指的是可扩展超文本标记语言
XHTML与HTML 4.01几乎是相同的
XHTML是更严格更纯净的HTML版本
XHTML是以XML应用的方式定义的HTML
XHTML得到所有主流浏览器的支持
2、为什么使用XHTML?
为了代码的完整性和良好性
3、文档声明:
DTD:规定了使用通用标记语言的网页语法
4、三种XHTML文档类型
STRICT(严格类型)
TRANSITIONAL (过渡类型)
FRAMESET (框架类型)
5、 <XHTML 1.0 Strict:!DOCTYPE htmIPUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://
www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd” >
该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素(比如font)。不
允许框架集(Framesets) 。
XHTML元素语法:
XHTML元素必须正确嵌套
XHTML元素必须始终关闭
XHTML元素必须小写
XHTML文档必须有一个根元素（放在body或者head里）
XHTML属性语法规则:
XHTML属性必须使用小写
XHTML属性值必须用引号包围
XHTML属性最小化也是禁止的(填写完整)
HTML5和HTML4的区别
优点
HTML5的出现，对于Web来说意义是非常重大的，因为他的意图是想要把目前Web上存在的各种问题一并解决掉了。
●Web浏览器之间的兼容性很低
●文档结构不够明确
●Web应用程序的功能受到了限制世界知名浏览器厂商对HTML5的支持：微软、Google、 苹果、Opera、 Mozilla
语法的改变
●内容类型
●DOCTYPE声明
指定字符编码
●可以省略标记的元素
●具有boolean值的属性
●省略引号
新增的元素和废除的元素
新增的结构元素
section页面中的模块比如页眉页脚、article与上下文不相关的独立内容、 aside与article相关的其他信息、 header页面中内容区域块通常做标题、 hgroup区域块的合集、 footer页面底部、 nav页面中导航链接、 figure内容独立的单元。
新增的其他元素
video、audio、 embed、 mark、 progress、 meter、 time、 ruby、 rt、 rp、 wbr
canvas、command、 details、 datalist、 datagrid、 keygen、 output、 source
menu
新增的input元素的类型
email、url、 number、range、 Date Pickers
废除的元素
● 能使用CSS替代的元素: basefont、 big、 center、 font、 S、 tt、 u等
●不再使用frame框架 只有部分浏览器支持的元素
● 其他被废除的元素
新增的属性和废除的属性
新增的属性和废除的属性略
全局属性
●contentEditable属性 决定元素是否可以编辑
●designMode属性 决定整个页面是否可编辑
●hidden属性 是元素处于不可见状态
●spellcheck属性 检查输入的单词是否有拼写错误
●tabindex属性 点回车键切换按钮的顺序
元素介绍
●article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。article元素是可以嵌套使用的。article元素可以用来表示插件。
●section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
●nav元素
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。
nav元素应用场景:
传统导航条 侧边栏导航 页内导航 翻页操作
●aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
●time元素与微格式
●pubdate属性
●header元素
是一种具有 引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
●hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1 ~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
●address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
artical测试
<!DOCTYPE html>
<htmL>
<head Lang="en">
<meta charset="UTF-8">
<title>article元素</title>
</head>
<body>
<article>
<header>
<p>这是头部</p>
</header>
<p>主要内容</p>
<footer>
<p>这是底部</p>
</footer>
</article>
</body>
</htmb>
article也可以嵌套，比如一个atricle的主要内容部分再加个article，表示
section测试
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>section元素</title>
</head>
<body>
<section>
<h1>苹果</h1>
<p>这是一个水果，可以吃。且很好吃</p>
</section>
<article>
<h1>苹果</h1>
<p>这是一个水果，可以吃。且很好吃</p>
<section>
<h2>红富士</h2>
<p>这是- 种外表很红的草果，吃起来也不错</p>
</section>
<section>
<h2>青苹果</h2>
<p>这是- 种外表很青的草果，吃起来也不错</p>
</section>
</article>
</body>
</html>
nav测试
<!DOCTYPE html>
<htmL>
<head Lang="en">
<meta charset="UTF-8">
<title>nav元素</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">主 页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3的历史</h1>
<nav>
<ul>
<li><a href="#">HTML5历史</a></li>
<li><a href="#">css3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>....</p>
</section>
<section>
<h1>css3历史</h1>
<p>....</p>
</section>
<footer>
<a href="#">删除</a>
<a href="#">修改</a>
</footer>
</article>
<footer>
<p><smalL>版权声明:</small></p>
</footer>
</body>
</html>
aside测试
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章正文</p>
<aside>
<h1>名词解释</h1>
<p>语法:这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">2015-3-10</a></li>
<li><a href="#"> 大牛:真希望能好好学一下 </a></li>
</ul>
</nav>
</aside>
</body>
</html>
网页编排规则
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#">首页</8></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<hl>文章主标题</hl>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section>
<div>
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</div>
</section>
</article>
<footer>
<smalL>版权所有:...</small>
</footer>
</body>
</htmb>
编排效果
暂时没学的：
formmethod和formenctype属性
formtarget属性和autofocus属性
required属性和labels属性
control属性与placeholder属性
list属性和AutoComplete属性
pattern属性和SelectionDirectio…
indeterminate属性和image提交.
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
