对文本添加动态html效果

html frame实现页面内容动态切换

万次阅读 2016-04-04 19:29:07

使用frameset可以进行布局，但是在使用frameset时，html文本中... 只需要在整体部分的html文本中对动态切换的frame添加name属性，并且在超链接中设置属性target 指向要改变的frame left.html内容如下 <ht...

    使用frameset可以进行布局，但是在使用frameset时，html文本中不能带有body标记。

    要实现如下效果(只是根据左侧链接，动态改变右侧的网页内容，其余部分都不变)。

  

 

  只需要在整体部分的html文本中对动态切换的frame添加name属性，并且在超链接中设置属性target 指向要改变的frame

  left.html内容如下

<html>
    <body bgcolor="pink">
        <a href="right1.html" target="right">山水之间</a></br>
        <a href="right2.html" target="right">宿敌</a></br>
        <a href="right3.html" target="right">想象之中</a>
    </body>
</html>

index.html(整体显示的html文本)内容如下

<html>
    <frameset rows="25%,*">
        <frame src="top.html"/>
        <frameset cols="20%,*">
            <frame src="left.html"/>
            <frame src="right1.html" name="right"/>
        <frameset>
    </frameset>
</html>

收起

展开全文

HTML简介/文本标签/列表标签/图片标签

2020-08-17 23:15:52

JavaScrip t: 给页面添加动态效果 jQuery: JavaScrip语言框架,提高了原生JavaScrip语言的开发效率.(写的更少实现的更多). 2. 数据库: 如何对数据进行增删改查 3. Servlet: 如何判断用户请求并做出正确响应 HTML概述...

HTML基础

每日复习要点

JAVA三大特性: 封装  继承  多态

阶段学习目标
**1. web前段: 如何开发页面 **

HMTL: 搭建页面结构和页面内容
CSS: 美化页面
JavaScrip t:  给页面添加动态效果
jQuery: JavaScrip语言框架,提高了原生JavaScrip语言的开发效率.(写的更少实现的更多).

2. 数据库: 如何对数据进行增删改查
3. Servlet: 如何判断用户请求并做出正确响应
HTML概述
1.什么是HTML

Hyper Text Markuo Language: 超文本标记语言


超文本:支持纯文本几字体效果和多媒体信息(图片,新品,视频等).
标记语言格式: <开始标签 属性=“xxx”>标签体</结束标签>

2.为什么需要HTML
HTML时当前网页页面显示信息的标准.基本所有页面显示都是用HTML.
3.创建一个HTML
HTML文件的基本格式
<!DOCTYPE html>  /*告诉浏览器以什么版本的HTML解析网页(HMTL5)*/1
<html> /*相当于HTML文件的根标签*/
<head> /*头标签*/
<meta charset="UTF-8"> //解析页面的字符编码
<title>Insert title here</title> //头标签的内容(网页选项卡显示的内容)
</head>
<body> //体标签,网页上显示的内容都在这里编辑
//大部分的标签都成对出现的
</body>
</html>

HTML标签
文本标签
1. 标题标签 <h1></h1>  h1->h6共6级标签.字体加粗,独占一行且自动上下间距,数字越大字体越小

3. 段落标签 <p></p>  独占一行,自带上下间距

4. 换行标签 <br>

5. 水平分割线标签 <hr>

6. 加粗标签 <b>

7. 斜体标签 <i>

8. 小字体标签 <small>
	<!-- 文本标签 -->
	<!-- 内容标签 h1-h6 字体加粗,独占一行且自动上下间距,数字越大字体余下 -->
	<h1 align="center">文本内容1 </h1>
	<h2 align="right">文本内容2</h2>
	<!-- 默认是靠左-->
	<h3>文本内容3</h3>
	<h4>文本内容4</h4>
	<h5>文本内容5</h5>
	<h6>文本内容6</h6>
	<!-- ctrl +shift+/ html注释的快捷键 -->
	<!-- 段落标签  独占一行,自带上下间距 p-->
		<p>今天第一天学习html</p>
		<p><b><i>今天第一天学习html</i></b></p>
	<!-- 换行标签 br -->
	感时花溅泪<br>
	恨别鸟惊心<br>
	<!-- 水平分割线标签  hr-->
	<hr>
	<hr color="red" width="1000">
	<hr size="40" width="50%" color="blue" >
	<!-- 加粗标签 b -->
	感时花溅泪<br>
	<b>感时花溅泪</b><br>
	<!-- 斜体标签 i -->
	<i>感时花溅泪</i><br>
	<small>感时花溅泪</small><br>
	<b><i>感时花溅泪</i></b><br>

显示效果:


列表标签
1. 无序列表 ul(unordered list) <ul></ul>为父标签,<li></li>为子标签.默认形式是以圆点形式显示的(type=“disc”).

2. 有序标签 ol(ordered list) <ol></ol>为父标签,<li></li>为子标签.默认子标签序号默认送1开始,一直增加.属性reverse,子标签序号为从大到小,此属性只有google浏览器支持IE不支持.属性 Start="?",子标签序号从?开始.

3. 自定义标签 dl(definite list) <dl></dl>为父标签,<dt></dt>为子标签.
标签可以嵌套使用
<!-- 列表标签 -->
	<!-- 无序列表 ul(unordered list) 默认形式是以圆点形式显示的(type="disc") -->
	<ul >唐朝诗人
	<!-- list item (列表项) -->
	<li>李白</li><li>杜甫</li><li>白居易</li>
	</ul>
	<ul type="square">唐朝诗人<!--方形形式 -->
	<!-- list item (列表项) -->
	<li>李白</li><li>杜甫</li><li>白居易</li>
	</ul>
	<ul type="circle">唐朝诗人<!--空心圆方式 -->
	<!-- list item (列表项) -->
	<li>李白</li><li>杜甫</li><li>白居易</li>
	</ul>
	<!-- 有序标签 ol(ordered list)-->
	<ol>考试排名
	<li>张三</li><li>李四</li><li>王二麻子</li>
	</ol>
	<!-- 倒序输出 属性reverse 此属性只有google浏览器支持IE不支持-->
	<ol reversed="reversed">考试排名倒数计数
	<li>张三</li><li>李四</li><li>王二麻子</li>
	</ol>
	<!-- 序号从几开始 属性start -->
	<ol start="2">考试排名
	<li>张三</li><li>李四</li><li>王二麻子</li>
	</ol>
	<!-- 自定义标签 dl为父标签 dt为子标签 -->
	<dl>DOT2
	<dt>骷髅王</dt><dt>沙王</dt><dt>末日</dt><dt>斯文</dt>
	</dl>
	<!-- 标签嵌套 -->
	<ol>游戏
		<li><ul>DOTA2
		<li>骷髅王</li><li>沙王</li><li>末日</li>
		</ul></li>
		<li><dl>王者荣耀
		<dt>亚瑟</dt><dt>鲁班七号</dt><dt>黄忠</dt>
		</dl></li>
	</ol>

显示效果

图片标签以及相对路径和绝对路径
相对路径 以网页所在的文件夹开始.

1. 获取本级目录内容:"./文件名"或者"文件名",

2. 获取下级目录内容:"./‘下级目录文件名’/文件名"

3. 获取上级目录内容:"…/‘下级目录文件名’/文件名"

绝对路径

1. 文件在电脑上中保存的位置

2. 文件在网络上的地址
图片标签 <img src:=“图片地址”>  width及height属性,当图片width及height都设置时,图片按照设置值显示.当图片只设置其中一个属性时,图片将按照该属性现在的值原值得比例进行缩放
<!-- 图片标签 及相对路径及据对路径展示-->
<!-- 图片标签 img 图片src:="图片地址"-->
<!-- width及height 当图片width及height都设置时,图片按照设置值显示,当图片只设置其中一个属性时,图片将按照该属性现在的值原值得比例进行缩放 -->
	<img src="1.png"><br>
	<img width="100" src="./2/2.png">
	<img width="100" height="100" src="../lost.png"><br>
	<img src="D:\java\wy\html\WebContent\web\1.png"><br>
	<img src="http://cdn.tmooc.cn/bsfile//courseImg///83acc43bd0f648b98c041c4713aa8980.jpg"><br>

显示效果

收起

展开全文

java

第8章添加多媒体-HTML CSS JavaScript 网页制作从入门到精通第3版.ppt
2020-11-24 20:13:41
教学内容在网页中除了之前讲到的可以插入文本和图像外还可以插入动画声音视频等媒体元素如滚动效果Flash及Midi声音文件等通过对本章的学习读者可以学习到多媒体文件的使用从而丰富网页的效果吸引浏览者的注意第8章 ...
收起
动态网页设计与实践报告
2019-04-22 00:56:44
本节课的实验内容主要分为三个板块：HTML,CSS,JavaScript,其中，我对HTML技术的应用得到了熟练运用，并对其他动态网页设计方法进行了大致的了解。HTML是Hypertext Markup Language的英文缩写，即超文本标记语言。它...
收起
jquery实现直播弹幕效果
2020-12-13 23:41:26
1.获取到评论文本框的值，对文本内容进行处理 2.动态创建一条弹幕，将创建的弹幕动态的添加到需要显示的页面，并同时创建一条新的评论消息，动态添加到评论列表 3.利用数组将每次添加的弹幕保存起来，使用定时器让...
收起
HTML开发王
2013-01-03 11:33:09
4.4.8 设置网页转场效果 4.4.9 设置网页分级 4.5 元数据纲要和元数据架构 4.5.1 使用元数据纲要(profile属性) 4.5.2 使用元数据架构(scheme属性) 4.6 巩固与自测第5章文字与段落 5.1 结构化的文本 5.1.1 用于强调...
收起

Web前端基础（01）

2020-07-30 21:39:35

JavaScript 学习如何给页面添加动态效果 jQuery JS语言框架,简化原生JS开发 Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率项目页面 HTML HyperTextMarkupLanguage: 超...


web前端学习  10节


HTML   学习如何搭建页面结构和内容 (盖房子 毛坯房)
CSS    学习如何美化页面 (装修)
JavaScript 学习如何给页面添加动态效果
jQuery JS语言框架,简化原生JS开发
Bootstrap  前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
项目页面


HTML
HyperTextMarkupLanguage: 超文本标记语言

超文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频)
标记语言格式: <开始标签 属性=‘xxx’>标签体</结束标签>
学习HTML主要学习有哪些标签 以及标签的使用方式.     

###创建HTML页面

###常见的文本标签

内容标题h1-h6     align=“left/right/center”;

独占一行, 字体加粗, 自带上下间距
段落标签p

独占一行,自带上下间距
水平分割线hr
加粗 b
斜体 i
小字 small
删除线 s
下划线 u
换行 br    在html页面中回车不是换行 只能识别成一个空格

###列表标签
无序列表 ul:type(控制图标) li
有序列表 ol:type(序号类型) start(起始值) reversed(降序)    li
列表嵌套: 有序列表和无序列表可以任意无限嵌套

###图片标签img



src:路径

相对路径:访问站内资源时使用

页面和文件同级目录:直接写图片名
文件在页面的上一级:…/图片名
文件在页面的下一级:文件夹名/图片名


绝对路径:访问站外资源时使用

图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片)



alt: 图片不能正常显示时显示的文本


title: 鼠标在图片上悬停时显示的文本


width/height: 两种赋值方式:1. 像素   2. 百分比


支持的图片格式: jpg/jpeg   png     gif

###超链接a


a标签包裹文本是文本超链接,包裹图片是图片超链接


href:路径  可以指向页面也可以指向其它文件(如果浏览器支持浏览此文件则直接浏览,如果不支持则下载)


页面内部跳转: 回到顶部<a href="#top">回到顶部</a>     

###表格标签table


相关标签: table tr td th caption


属性: table:border边框  cellspacing单元格间距  cellpadding单元格距内容的距离  td:colspan跨列   rowspan跨行

###表单


作用: 获取用户输入的各种信息并提交给服务器


学习表单主要学习的就是表单中有哪些控件(文本框 密码框 提交按钮 单选 多选 下拉选等)



练习
1.列表练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="square">
			<li>裴擒虎</li>
			<li>上官婉儿</li>
			<li>吕布</li>
			<li>马超</li>
			<li>苏烈</li>
		</ul>
		<ol type="1" start="10" reverse="reversed">
			<li>打开冰箱门</li>
			<li>把大象装进去</li>
			<li>关上冰箱门</li>
			<li>该吃饭了</li>
		</ol>
		<ul>
			<li>凉菜
				<ol>
					<li>拍黄瓜</li>
					<li>芥末鸭掌</li>
					<li>花毛一体
						<ul>
							<li>花生</li>
							<li>毛豆</li>
						</ul>
					</li>
				</ol>
			</li>
			<li>热菜
				<ol>
					<li>红烧肉</li>
					<li>水煮鱼片</li>
					<li>地锅鸡</li>
				</ol>
			</li>
		</ul>
	</body>
</html>

显示效果：


2.超链接练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="top" href="01第一个页面.html">01第一个页面</a>
		<a href= "http://www.baidu.com">百度</a>
		<a href="1.jpg">图片</a>
		<a href="http://www.tmooc.cn"><img  width="20%" height="20%"src="1.jpg"></a>
		<img width="20%" height="20%" src="../imgs/1.jpg">
		<img width="20%" height="20%" src="../imgs/2.jpg">
		<img width="20%" height="20%" src="../imgs/3.jpg"> 
		<img width="20%" height="20%" src="../imgs/4.jpg">
		<img width="20%" height="20%" src="../imgs/5.jpg">
		>
		<!-- #代表当前页面-->
		<a href="#top" >回到顶部</a>
	</body>
</html>

显示效果：



3.表格练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- border边框
		 cellspacing单元格间距
		 cellspacing单元格距内容的距离-->
		<table align="center" border="1" cellspacing="10" cellpadding="10">
			<caption>表格标题</caption>
			<!-- tr表示行 th表头 td表示列 -->
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>28</td>
			</tr>
			<tr>
				<td>2</td>
				<td>尼古拉赵四</td>
				<td>29</td>
			</tr>
		</table>
		<table border="" cellspacing="" cellpadding="">
			<!--colspan跨列-->
			<tr><td align="center"colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
			<tr><td rowspan="2">2-1</td><td>2-2</td></tr>
			<tr><td align="center"colspan="2">3-2</td></tr>
		</table>
	</body>
</html>

显示效果：



4.表单练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- action服务器地址 method提交方式 -->
		<form action="http://www.tmooc.cn" method="get">
			<!-- 文本框 name是对传递过去的参数做介绍 id唯一标识
			value值设置文本框的值-->
			名字：<input type="text" name="username"
			placeholder="请输入用户名" id="" value=""/>
			<br/>
			密码：<input type="password" name="pwd"
			placeholder="请输入您的密码" id="" value=""/>
			<hr>
			性别：<input type="radio" checked="checked" name="gender" id="" value="m" />男
			<input type="radio" name="gender" id="" value="f" />女
			<hr>
			<!-- 多选和单选类似 -->
			爱好: <input type="checkbox" checked="checked" name= "hobby" id=""
			value="cy" />抽烟
			<input type= "checkbox" name="hobby" id=""
			value="hj" />喝酒
			<input type="checkbox" name= "hobby" id=""
			value="tt" />烫头
			<!-- label扩充点击范围 -->
			<input type="checkbox" name="hobby" id="dbj" value="dbj"/>
			<label for="dbj">大保健</label>
			<hr >
			<!-- 日期选择器 -->
			生日：<input type="date" name="birthday" id="birthday" />
			<input type="submit" value="注册"/>
			<hr >
			<!-- 文件选择器 -->
			靓照：<input type="file" name="pic" id="pic" />
		</form>
	</body>
</html>


显示效果：


5.图片练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- alt：图片不能显示时显示文本 -->
		<img alt="这显示不出来" src="a1.jpg">
		<!-- title：鼠标悬停时显示的文本 -->
		<img width="100" height="100" title="这是个头像" src="../2.jpg">
		<img width="100" height="100" src="abc/3.png">
		<img width="20%" height="20%" src="../imgs/4.jpg">
		<!-- 绝对路径访问站外资源，又称为图片盗链
		好处：节省本站资源
		坏处：有可能找不到图片-->
		<img width="20%" height="20%" src="http://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg">
	</body>
</html>

显示效果：

代码已打包,连接如下https://download.csdn.net/download/qq_44273429/12700036

未完待续…
下一节链接:

Web前端基础（02）

收起

展开全文

web

疯狂HTML5+CSS3+JavaScript讲义-代码光盘（全）
热门讨论 2013-11-27 17:14:25
10.3.2 对表格及单元格添加阴影 10.4 CSS 3的多栏布局 10.4.1 CSS 3新增的分栏功能 10.4.2 使用盒模型实现多栏布局 10.5 本章小结第11章表格、列表相关属性及media query 11.1 表格相关属性 11.2 列表相关...
收起
HTML与CSS入门经典(第7版
热门讨论 2012-09-03 21:50:17
7.9生成过渡和文本效果 7.10总结 7.11问与答 7.12作业 7.12.1测验 7.12.2答案 7.13练习第8章将图像放到网页中 8.1将图像放到网页中 8.2使用文本描述图像 8.3将图像变为链接 8.4对齐图像 8.4.1水平对齐...
收起

JAVA学习之路——WEB前端

2020-04-23 11:48:10

3.javaScript：负责给页面添加动态效果和内容 4.iQuery：对JavaScript的封装，可以写的更少但实现更多 5.bootstrup：前端页面框架 HTML XML：可扩展标记语言 HTML(HyperTextMarkupLanguage)：超文本标记语言，超文本...

网站数据传输流程

WEB前端
1.html：负责搭建页面结构和内容

2.css：负责美化页面

3.javaScript：负责给页面添加动态效果和内容

4.iQuery：对JavaScript的封装，可以写的更少但实现更多

5.bootstrup：前端页面框架
HTML
XML：可扩展标记语言

HTML(HyperTextMarkupLanguage)：超文本标记语言，超文本指不仅仅是纯文本还包括文本样式、多媒体相关（图片、音频、视频）

学习HTML：主要学习的就是HTML里面有哪些标签，标签有哪些属性，标签和标签之间的嵌套关系
创建第一个HTML页面
new——other…——HTML files

添加注释：CTRL+SHIFT+/
页面结构介绍
略
常用的文本标签
1.文本标题标签：h1~h6

字体加粗，独占一行，有上下的间距

align = left/right/center

2,段落标签：p

独占一行，有上下的间距

3.水平分割线：hr

4.换行：br
列表标签
1.无序列表

ul type li

2.有序列表

ol type start设置起始值 reversed降序 li

3.定义列表

dl dt dd

4.列表嵌套

有序和无序可以任意无序嵌套
图片标签 img
src路径

1.相对路径 :当访问站内资源

a.页面和文件同目录：直接写文件名

b.文件在页面的上级目录：…/文件名

c.文件在页面的下季目录：文件夹名/文件名

2.绝对路径 ：当访问站外资源时使用

alt:当图片不能正常显示时显示的文本

width/height:1.像素 2.上级元素的百分比

如果只设置宽度，高度会等比缩放

title：当鼠标在图片上悬停时显示的文本

支持的图片格式：jpg/jpeg png gif
超链接a
如果不写href属性就是一个纯文本

href：资源路径

1.页面资源：可访问站内和站外资源

2.文件资源：如果浏览器支持浏览则浏览

不支持则下载

target=_blank：从新的窗口中显示页面，默认是从当前窗口跳转

页面内部跳转，先往目的地添加一个空的a标签作为锚，通过另外一个a标签跳转到这个a标签的位置 ：
<a id="top"></a>   
<a href="#top">回到顶部</a>

图片可点击：
<a href=“”> <img src=“...”></a>

表格标签table
标签：table表格 tr行 td列 th表头 caption表格标题

属性：

1.table：	border边框粗细 ，cellspacing单元格间距，cellspadding单元格内边距

2.td rowspan跨行，colspan跨列
<table border="1" cellspacing="0" align="center" widyh="50%">
	<caption>购物车</caption>
	<tr>
	<!-- table header 表头，字体加粗并居中 -->
		<th>编号</th>
		<th>商品名称</th>
		<th>商品单价</th>
	</tr>
	<tr>
		<td>1</td>
		<td>鼠标</td>
		<td>25</td>
	</tr>
	<tr>
		<td>2</td>
		<td>键盘</td>
		<td>80</td>
	</tr>
	<tr>
		<td>总价</td>
		<td colspan="2" align="center">105</td>
	</tr>
</table>

表单form
用户获取用户的各种信息，然后将各种数据提交到服务器
<!--action路径 数据提交路径
	默认请求方式为get(请求参数在地址的后面)
	任何控件都必须要有name属性 作用是对请求参数的介绍
	如果不写则不会提交该控件的内容
  -->
<form action="http://www.baidu.com">
</form>

学习表单主要学习的就是有哪些控件：

文本框、密码框、单选、多选、下拉选、文本域等

各种控件：

1.文本框
<!-- value文本框设置默认值 placeholder占位文本 
	 maxlength最大长度    readonly 只读 -->
用户名:<input type="text" name="usename" value="aaa" 
	  	  maxlength="5" placeholder="请输入用户名" 
	  	  readonly="readonly">

2.密码框
密码:<input type="password" name="password">

3.单选
<!-- checked：默认选中 label：标签扩充点击范围 -->
性别:<input type="radio" name="gender" value="men" 
		checked="checked" id="r1"><label for="r1">男</label>
		<input type="radio" name="gender" value="women"
		id="r2"><label for="r2">女</label>

4.多选
爱好:<input type="checkbox" name="hobby" value="smoke" id="c1"><label for="c1">抽烟</label>
	<input type="checkbox" name="hobby" value="drink" id="c2"><label for="c2">喝酒</label>
	<input type="checkbox" name="hobby" value="tangtou" id="c3"><label for="c3">烫头</label>

5.日期
生日:<input type="date" name="birthday">

6.文件
照片:<input type="file" name="pic">

7.隐藏域
<!--隐藏域:当需要给服务器提交数据，但是这个数据不需要给用户展示时使用 -->
	<input type="hidden" name="xxx" value="yyy">

8.下拉选
所在地:<select name="city">
		<option>请选择</option>
		<option value="bj" selected="selected">北京</option>
		<option value="sh">上海</option>
		<option value="gz">广州</option>
	</select>

9.文本域
自我介绍:<textarea name="intro" rows="3" cols="20" placeholder="随便说点啥"></textarea>

10.提交按钮
<input type="submit" value="注册">

11.重置按钮
<input type="reset">

12.自定义按钮
<input type="button" value="按钮">

分区标签
作用：分区标签可以理解成是一个容器，用于将多个相关标签进行统一管理

div：独占一行

span：共占一行

HTML5新增的分区标签：header头、footer脚、nav导航、aside边、section块、article正文（块和正文效果相似）
实体引用（特殊转义字符）
1.空格：&nbsp

2.小于号：&lt

3.大于号：&gt
CSS
Casecading层叠Style样式Sheet表

用于美化页面
CSS的引入方式
1.内联样式：在标签的style属性中添加样式代码；

弊端：不能复用

2.内部样式：在head标签里面添加style标签，在标签体内通过选择器给标签添加样式

弊端：只能当前页面复用

3.外部样式：在单独的CSS文件中写样式代码，通过link标签引入到页面中，可以多页面复用
<link rel="stylesheet" href="first.css">

三种引用方式的优先级：内联>内部=外部(后执行覆盖先执行的)
选择器
1.标签名选择器

格式：标签名{样式代码}

选取页面中所有同名标签

2.id选择器

页面中id需要是唯一的

格式：#id{样式代码}

3.类(class)选择器

格式：.class{样式代码}

选取页面中同一类标签

4.分组选择器

将多种选择器通过逗号合并为一个选择器

格式：div,#abc,.c1{样式代码}

5.属性选择器

格式：标签名[属性名=‘属性值’]{样式代码}

6.子孙后代选择器

格式：div span{}

选取div里面所有的span（包括子元素span和所有后代span）

7.子元素选择器

格式：div>span

选取div里面所有的span子元素

8.伪类选择器

用于选择元素的状态：未访问状态 / 访问过状态 / 悬停状态 / 点击状态

格式：a:visited访问过 / link未访问 / hover悬停 / active点击

9.任意元素选择器

选中页面中所有元素

格式： *{样式代码}
颜色赋值方式
三原色：红绿蓝   0-255(16进制0-ff)

颜色单词：red

6位16进制：#ff0000

3为16进制：#f00

3位十进制：rgb(0-255,0-255,0-255)  rgb(255,0,0)

4位十进制：rgba(0-255,0-255,0-255，0-1)  a=alpha透明度
背景图片
设置图片路径：

background-image:url("…/…/img/a.jpg");

设置图片大小：

background-size:100px 200px;

禁止重复：

background-repeat:no-repeat;

控制位置（横向和纵向百分比）：

background-position:50% 50%;
显示方式display
block：块级元素默认值（独占一行的元素称为块级元素：div、h1-h6、p、hr）

可以修改宽高，不能多个元素显示在一行

inline：行内元素默认值（共占一行的元素称为行内元素：span）

不可以修改宽高

inline-block：行内块元素默认值（共占一行，可以修改宽高：img）

既可以共占一行，也可以修改宽高
盒子模型
盒子模型=宽高+外边距(margin)+内边距(padding)+边框(border)

1.宽高：width/height

赋值方式：1.像素px ；2.上级元素的百分比

行内元素不能修改宽高，宽高只能由内容决定

2.外边距：margin   元素上级元素或相邻兄弟元素的距离称为外边距

赋值方式：margin-left/right/top/bottom:10px;

margin:10px;

margin:10px 20px;   //上下10px，左右20px

margin:0 auto;  //水平居中

margin:10px 20px 30px 40px;  //顺时针上右下左

行内元素上下外边距无效

相邻行内元素上下外边距相加，相邻块级元素外边距取最大值

粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现粘连问题，给上就安苏添加overflow:hidden;解决问题

3.边框：border

赋值方式：border:边框粗细 边框样式 颜色;

单独给某个边赋值：border=left/right/top/bottom:边框粗细 边框样式 颜色;

行内元素四个方向边框全部生效，影响元素所占宽度但不影响元素所占的高度

4.内边距：padding  元素边框距内容的距离

赋值方式：padding-left/right/top/bottom:10px;

padding:10px;

padding:10px 20px;

padding:10px 20px 30px 40px;

行内元素上下内边距不影响元素所占高度
文本相关
水平对齐方式：text-align:center/left/righr;

文本修饰：text-decoration:overline(下划线)/underline(上划线)/line-through(删除线)/none

文本阴影：text-shadow:颜色 x偏移值 y偏移值 透明度;

行高：line-height:像素;

文本样色：color:red;
/* 文本对齐方式 left righr center */
		text-align:center;
		/* 文本修饰 
			underline下划线
			overline上划线
			line-through删除线
			none去掉文本修饰
		*/
		text-decoration:underline;
		/* 文本阴影 :颜色 x偏移值 y偏移值 浓度*/
		text-shadow:green 15px 15px 2px;
		line-height:150px;
		color:blue;

字体相关
字体大小：font-size:20px;

字体加粗：font-weight:bold/normal;

斜体：font-style:italic;

字体设置：font-family:xxx xxx xxx

字体大小+字体设置：font:20px xxx xxx xxx;
CSS的三大特性
1.继承：元素可以继承上级元素的文本和字体相关的样式，部分标签自带效果不受继承影响，比如：超链接a的字体颜色，h1-h6的字体大小

2.层叠性：多个选择器如果选择到同一个元素，作用的样式不同则全部层叠到一起全部生效，如果作用的样式相同则由优先级决定

3.优先级：作用范围越小，优先级越高，id>class>div>继承(属于间接选中)
溢出设置overflow
hidden：隐藏

visible：显示（默认）

scroll：滚动显示
行内元素垂直对齐方式 vertical-align
baseline：基线对齐（默认）

top：上对齐

middle：中对齐

bottom：下对齐
定位方式4+1
position定位  4
1.静态定位（文档流定位,默认定位方式）：static

特点：块级元素从上到下排列，行内元素从左到右排列，静态定位不能实现元素层叠效果，通过外边距控制元素的位置

2.相对定位：relative

特点：元素不脱离文档流，通过left/right/top/bottom让元素相对于初始位置做偏移

当需要移动页面中某一个元素，并且其他元素不受影响时，使用相对定位

3.绝对定位：absolute

特点：元素脱离文档流，通过left/right/top/bottom让元素相对于窗口（默认）或某一个上级元素做位置偏移。如果希望相对于上级窗口的话需要在上级元素加relative

当需要网某一个页面元素里面添加标签，并且不希望影响其他元素位置时使用绝对定位

4.固定定位：fixed

特点：脱离文档流，通过left/right/top/bottom让元素相对于窗口做偏移，元素会固定在窗口的某个位置

当需要将某个元素固定在窗口的某个位置时使用
浮动定位 float
特点：脱离文档流，元素从当前文档行向左或向右浮动，当撞到上级元素边框或其他浮动元素时停止

clear:both;进制两侧有浮动元素

浮动到一行时如果装不下会自动换行

当元素的所有子元素全部浮动时，则元素自动浮动的高度为0，通过给元素添加overflow:hidden解决问题

应用场景：当需要将纵向排列的uansu改成横向排列时，使用浮动定位
JavaScript
JS历史：95年由NetScape公司发布LiveScript，同年改名JavaScript，和java语言没有任何关系

JS特点：

1.属于脚本语言，不需要编译，由浏览器解析执行

2.JavaScript可以嵌入到HTML页面中

3.基于面向对象

4.属于弱类型语言

5.交互性强

6.安全性强（JS只能访问浏览器内部的程序，不能访问其他程序和磁盘上的数据）
如何在HTML中引入JavaScript
三种引入方式：

1.内联：在标签内部的事件属性中添加JS代码，当事件触发时，JS代码执行

2.内部：在HTML页面中的任意位置添加script标签，标签体内写JS代码，当页面加载时执行

3,.外部：在单独的JS文件中写JS代码，在HTML标签中通过script标签引入
语法
数据类型
JS语言中只有对象类型

常用的对象类型：

1.数值类型：number

底层去拿时浮点数，在使用过程中会自动转换整数和小数

2.字符串类型：string

var s = “abc”  /  ‘abc’;

3.布尔值类型：boolean

var s = true  /  false;

4.未定义类型：underfined

当变量值声明不赋值饿时候变量类型为未定义类型

5.自定义对象：object

Hero person student;
变量的声明和赋值
JS属于弱类型语言

var x = 10;

var s = “abc”;

x=“xxx”;  //可以
运算符 + - * / % > < >= <= = ==
双等 和 三等：

双等：先统一类型，再比较是否相等

三等：先比较类型，如果类型相同再比较值
"666"==666; //true
"666"===666;  //false

除法运算会自动转换整数和小数

typeof 变量；获取变量的类型

typeof 66+6 = “number6”;
语句 if else while for switch case do while
if和while括号内的内容，如果不是布尔值，会自动转换成布尔值

for循环中的int i改成var i，不支持新for循环
方法声明
Java：public 返回值类型 方法名 (参数列表){方法体}；

JS：function 方法名(参数列表){方法体}；

声明常见的四种方法：

1.无参无返回值

2.无参有返回值

3.有参无返回值

4.有参有返回值

方法声明的三种方式：

1.function 方法名(参数列表){方法体}；

2.var 方法名 = function(参数列表){方法体};

3.var 方法名 = new Function(“参数1”,“参数2”,…,“方法体”);  //Function大写
和页面标签相关的方法
1.通过id获取元素对象

var obj = document.getElementById(“id”);

2.获取和修改元素的文本内容

d.innerText = “abc”

d.innerText;

3.获取和修改文本框的文本内容

//得到文本框对象

var i = document.getElementById(“i1”);

i.value = “xxx”; //赋值

i.value;  //取值

4.获取和修改元素的HTML内容

d.innerHTML=“
xxx
”;

d.innerHTML+=“yyy
”;
字符串相关
1.创建字符串

var s1 = “abc”/‘abc’;

var s2 = new String(“abc”);

2.把字符串转成数值

parseInt(“18.6”) //18

perseInt(20.5) //20

parseFloat(“18.6”)  //18.6

parseFloat(“18”)  //18

Number()作用和parseFloat类似

3.转大小写

“abc”.toUpperCase();

"ABC"toLowerCase();

4.获取字符串出现的位置

str.indexof()  //从前面查找

str.lastIndexOf();  //从后面查找

5.替换字符串 只替换出现的第一个

str.replace(old,new);

6.截取字符串

str.substring(start,?end);

7.拆分字符串

var arr = str.split(“拆分参照”);
数组相关
1.创建数组

var arr1 = [“acd”,true,20];

var arr2 = new Array();

2.往数组中添加内容

var arr = new Array();

arr.push(“xxx”);

arr.push(true);

3.获取和修改数组长度（JAVA中数组长度不可变）

var arr =  [“acd”,true,20];

arr.length;  //获取长度

arr.length = 1;  //修改长度

4.数组遍历（和java一样）

for(var i=0;i<arr.length;i++){

alert(arr[i]);

}

5.数组反转

arr.reverse();

6.数组排序

默认排序规则是通过Unicode编码进行排序

var arr = [21,8,4,13];

arr.sort();  //13,21,4,8

自定义排序：
	var arr = [21,8,4,13];
	function mysort(a,b){
		return a-b;
	}
	//执行方法时需要加括号，把方法当做某个方法的参数时不用加括号
	arr.sort(mysort);
	alert(arr);

日期相关
服务器时间和客户端时间

1.获取当前客户端时间

var d = new Date();

创建指定时间的时间对象

var d2 = new Date(“2019/7/2 10:10:10”);

2.获取和设置时间戳（时间戳：距1970年1月1号）

var d1 = new Date();

d1.getTime();  //获取时间戳

d1.setTime(1000);  //设置时间戳

3.获取时间分量

var d1 = new Date();

d1.getFullYear();  //年

d1.getMonth();  //月

d1.gatDate();  //日

d1.getDay();  //星期

d1.getHourse();  //时

d1.getMinutes();  //分

d1.getSeconds();  //秒

4.获取年月日 和 获取时分秒

d1.toLocaleDateString();  //获取年月日

d1.toLocaleTimeString();  //获取时分秒
正则表达式
应用场景：1.查找内容 ；2.校验文本



1.JS中创建正则对象

模式：i忽略大小写 	g全局查找

第一种：var reg = /规则/模式;

var reg = /^\w{6,10} $KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲$ /);

2.正则对象的相关方法

1)查找内容的方法：exec()

var str = “you can you up no can no bb”;

var reg =/no/g;

alert(reg.ecex(str));  //no

alert(reg.ecex(str));  //no

alert(reg.ecex(str));  //null

2)校验方法 test()

var str = “you can you up no can no bb”;

var reg = /^you/;

alert(reg.test(str));

3.字符串和正则对象的方法

1)查找内容：match();

var str = “you can you up no can no bb”;

var reg =/no/g;

var arr = str.match(reg);

2)替换：replace(reg,new)

var str = “you can you up no can no bb”;

var reg =/no/g;

str.replace(reg,“不”);
隐藏元素的两种方式
1.display:none

让元素隐藏，并脱离文档流

2.visibility:hidden/visible;

hidden隐藏（不脱离文档流）； visible显示
通过JS代码给元素添加样式
格式：d1.style.样式名 = 样式值;
文本框的失去焦点事件
onblur
事件取消
在事件属性中执行 return false;则会取消掉当前事件
DHTML
简介：Dynamic(动态) HTML = HTML+CSS+JS

对象分类：

1.JS语言内置对象，包括：number,string,boolaen,onject,array等

2.BOM：Browser Object Model(浏览器对象模型)，包含和浏览器相关的内容

3.DOM：Document Object Model(文档对象模型)，包含和页面相关的内容
BOM
window对象：该对象的属性和方法称为全局属性和全局方法，访问时可以省略window

window里面常见的方法：

1.window.alert();  提示框

2.window.confirm();  确认框

3.prompt();  弹出文本框

4.isNaN();  判断变量是否是数值

5.window.parseInt(); /parseFloat();转整数和转小数

window里面常见的属性：

1.history：历史

history.length();  历史页面数量

history.back();  返回上一页面

history.forword();  前往下一页面

history.go(n);  n正值前进，负值后退，0刷新

2.location：位置

location.href  //获取和修改浏览器的访问地址

location.reload()  //刷新地址

3.screen：屏幕

screen.width/height

screen.availWidth/availHeight

4.navigator：导航/帮助

navigator.userAgent  //获得浏览器相关信息

window相关的事件：

1.窗口点击事件：window.onclick

2.页面加载完成事件：onload

3.获取焦点事件：onfocus

4.失去焦点事件：onblur
定时器
setInterval(方法,时间间隔);
通过标签名获取元素中的对象
var arr=document.getElementsByTagName(“img”);
停止定时器
var timer = setInterval(方法,时间间隔);

clearInterval(timer);
只执行一次的定时器
setTimeout(方法,时间间隔);
DMO
DOM文档对象类型
和页面相关的内容
查找页面元素的方式
1.通过id查找元素

var b =document.getElementById(“id”);

2.通过标签名查找元素

var arr = document.getElementsByTagName(“标签名”);

3.通过name查找元素

var arr = document.getElementsByName(“name属性值”);

4.通过class属性查找元素

var arr = document.getElementsByClassName(“class属性值”);

5.获取页面的body

document.body
创建元素对象
var i = document.createElement(“img”);

//设置图片路径

i,src="";
添加元素
格式：父元素.appendChild(子元素);
插入元素
格式：父元素.insertBefore(新元素,弟弟元素);
删除元素
格式：父元素.removeChild(被删除的元素);
获取和修改元素文本内容
格式：元素对象.innerText = “xxx”;
获取和修改元素HTML内容
格式：元素对象.innerHTML = “xxx”;
修改元素的样式
格式：元素对象.style.样式名= “值”;
事件
什么是事件：事件就是一些系统提供的特定时间点，事件分为鼠标事件，键盘事件和改变状态事件

1.鼠标事件：

onclick  点击事件

onmouseover  移入事件

onmouseout 移出事件

onmousedown  按下事件

onmouseup  抬起事件

onmouseover  移动事件

event.clientX/Y  获取鼠标位置

2.键盘事件：

onkeydown  按键按下事件

onkeyup  按键抬起事件

event.keyCode  获取按键字符编码

String.fromCharCode(event.keyCode);

3.状态改变事件：

onload  页面加载完成事件

onsubmit  表格提交

onfocus  获取焦点

onblur  失去焦点

onchange  值改变

onresize  窗口尺寸改变
事件对象event
事件对象中保存着和事件相关的信息

1.鼠标事件中可以获得鼠标的坐标

event.clientX/clientY

2.键盘事件中可以获得键盘的编码

event.keyCode;

String.fromCharCoad(keyCoad);

3.任何事件里面都可以获得事件源（事件源：指触发事件的标签）

var obj = event.target || event.srcElement;
事件的动态绑定
在标签的动态属性中添加事件称为非动态绑定，通过JS代码给元素添加事件称为动态绑定

格式：元素对象.事件名=function(){方法体};
事件的传递（事件冒泡）
如果一个范围有多个元素的事件需要触发，则事件的传递顺序是从最底层元素往上级元素传递

如果某一个范围内多个元素都需要添加事件，则只需要将事件添加在最上层

收起

展开全文

css js web javascript

前端css+html+布局笔记
2017-09-14 20:03:59
一般内联元素都是用来为文本来设置效果常见的内联 span a img 包裹规则一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素 a元素可以包含任意元素，除了a本身 p元素不能包含任何...
收起
web01
2020-07-08 16:27:31
JavaScript（学习如何给页面添加动态效果） jQuery框架（简化原生JavaScript） Bootstrap框架（综合的前端框架，简化前端开发） ###HTML Hyper Text Markup Language: 超文本标记语言超文本：不仅仅是纯文本...
收起
移动互联网之路：HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通.李晓斌(带详细书签).pdf
2019-01-09 22:27:24
7.3.3 浏览器对HTML 5表单的支持情况 126 7.4 HTML 5新增表单输入类型 126 7.4.1 url类型 126 7.4.2 email类型 126 7.4.3 range类型 126 7.4.4 number类型 127 7.4.5 tel类型 127 7.4.6 search类型 127 ...
收起
[HTML开发王].张亚飞.扫描版
热门讨论 2011-09-13 12:45:04
4.4.8 设置网页转场效果 4.4.9 设置网页分级 4.5 元数据纲要和元数据架构 4.5.1 使用元数据纲要(profile属性) 4.5.2 使用元数据架构(scheme属性) 4.6 巩固与自测第5章文字与段落 5.1 结构化的文本 5.1.1 用于强调...
收起
003 JavaWeb之JavaScript入门
2017-06-30 11:55:22
JavaScript的作用使用JavaScript添加页面动画效果，提升用户体验，主要应用有：嵌入动态文本于HTML页面、对浏览器事件作出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。3. JavaScript的引入方式在...
收起
JavaEE
java script（一）
2018-07-25 18:59:00
　作用：使用js添加页面动画效果，提供用户操作体验，主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览信息等。　js本地实际用来向HTML页面添加交互行为 ...
收起
Web前端-01
2020-07-01 21:08:37
web前端课程介绍web前端HTML标签文本相关标签列表标签图片标签img超链接a表格标签table分区标签表单form实体引用(特殊字符)...JavaScript (学习如何给页面添加动态的效果) jQuery 这是一个JavaScript语言框架, 作用是简
收起
web
JavaScript 入门知识概念
2020-07-17 14:12:20
JavaScript 是一种属于网络的脚本语言，被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。应用场景嵌入...
收起
javascript
工程硕士学位论文基于Android+HTML5的移动Web项目高效开发探究
2017-02-28 21:22:19
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改 Android 一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放...
收起
10.27学习心得
2017-10-27 17:58:00
Django的相关知识琐碎整理 js：JavaScript一种直译式脚本语言，是...常用：1）嵌入动态文本于HTML页面2）对浏览器事件作出相应3）读写HTML元素4）数据被提交到服务器之前验证数据5）检测访客的浏览器信息6）控制coo...
收起
一、JavaScript简介 || 标签使用和输出语句 || 语法构成、关键字、保留字
2020-05-31 08:49:28
JavaScript是一种属于网络的脚本语言,为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 (2).js能干什么嵌入动态文本于HTML页面。对...
收起
javascript
网页制作基础教程
2019-01-06 17:34:02
5、在网站建设中，HTML用于搭建页面结构，CSS用于设置页面样式，_______用于为页面添加动态效果。二、判断题 1、因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。（） 2、网页主要...
收起
C#开发实战1200例（第一卷+第二卷）+源码下载地址.txt
2019-05-17 09:24:24
　实例123 使用迭代器实现文字的动态效果 151 　实例124 使用分部类实现多种计算方法 153 　实例125 使用分部类记录学生信息 155 5.5 泛型的使用 156 　实例126 使用泛型存储不同类型的数据列表 156 　实例127 ...
收起
.net c#
Adobe Dreamweaver CS5中文版经典教程.陈宗斌(带详细书签) PDF
2018-01-30 18:38:01
它涵盖了Dreamweaver CS5的基础知识、HTML基础、CSS基础、创建页面布局、使用层叠样式表、使用模板、处理文本、处理图像、处理导航、创建交互式页面、使用Flash、处理表单、处理在线数据、利用数据构建动态页面、...
收起
C#开发实例大全（基础卷）.软件开发技术联盟(带详细书签) PDF 下载
2018-02-20 01:26:55
实例123 使用迭代器实现文字的动态效果 151 实例124 使用分部类实现多种计算方法 153 实例125 使用分部类记录学生信息 155 5.5 泛型的使用 156 实例126 使用泛型存储不同类型的数据列表 156 实例127 通过泛型查找...
收起
Adobe.Dreamweaver.CS5中文版经典教程
热门讨论 2013-09-12 11:16:19
它涵盖了dreamweaver cs5的基础知识、html基础、css基础、创建页面布局、使用层迭样式表、使用模板、处理文本、处理图像、处理导航、创建交互式页面、使用flash、处理表单、处理在线数据、利用数据构建动态页面、...
收起
Web前端工程师修炼之道（第4版），完整扫描版
千次下载 热门讨论 2015-12-29 10:00:17
你是否也曾想过自己创建网页，但却苦于没有经验？那么从现在开始学习吧！本书由浅入深地讲解了Web设计的一些重要...利用JavaScript做出常用的网页动态效果。第五部分介绍了网页图形制作，包括Web图形制作的基础知识。
收起
C#开发实战1200例(第1卷).(清华出版.王小科.王军.扫描版).part1
2016-06-16 20:55:43
实例123　使用迭代器实现文字的动态效果 实例124　使用分部类实现多种计算方法实例125　使用分部类记录学生信息 5.5　泛型的使用实例126　使用泛型存储不同类型的数据列表实例127　通过泛型查找不同数组中的值 ...
收起
C#
C#开发实战1200例(第1卷).(清华出版.王小科.王军.扫描版).part2
2016-06-16 20:59:52
实例123　使用迭代器实现文字的动态效果 实例124　使用分部类实现多种计算方法实例125　使用分部类记录学生信息 5.5　泛型的使用实例126　使用泛型存储不同类型的数据列表实例127　通过泛型查找不同数组中的值 ...
收起
C#

html frame实现页面内容动态切换

HTML简介/文本标签/列表标签/图片标签

HTML基础

阶段学习目标

HTML概述

1.什么是HTML

2.为什么需要HTML

3.创建一个HTML

HTML标签

文本标签

列表标签

图片标签以及相对路径和绝对路径

第8章 添加多媒体-HTML CSS JavaScript 网页制作从入门到精通 第3版.ppt

动态网页设计与实践报告

jquery实现直播弹幕效果

HTML开发王

Web前端基础（01）

HTML

练习

疯狂HTML5+CSS3+JavaScript讲义-代码光盘（全）

HTML与CSS入门经典(第7版

JAVA学习之路——WEB前端

网站数据传输流程

WEB前端

HTML

创建第一个HTML页面

页面结构介绍

常用的文本标签

列表标签

图片标签 img

超链接a

表格标签table

表单form

分区标签

实体引用（特殊转义字符）

CSS

CSS的引入方式

选择器

颜色赋值方式

背景图片

显示方式display

盒子模型

文本相关

字体相关

CSS的三大特性

溢出设置overflow

行内元素垂直对齐方式 vertical-align

定位方式4+1

position定位 4

浮动定位 float

JavaScript

如何在HTML中引入JavaScript

语法

数据类型

变量的声明和赋值

运算符 + - * / % > < >= <= = ==

语句 if else while for switch case do while

方法声明

和页面标签相关的方法

xxx

yyy

字符串相关

数组相关

日期相关

正则表达式

隐藏元素的两种方式

通过JS代码给元素添加样式

文本框的失去焦点事件

事件取消

DHTML

BOM

定时器

通过标签名获取元素中的对象

停止定时器

只执行一次的定时器

DMO

DOM文档对象类型

查找页面元素的方式

创建元素对象

添加元素

第8章添加多媒体-HTML CSS JavaScript 网页制作从入门到精通第3版.ppt

工程硕士学位论文基于Android+HTML5的移动Web项目高效开发探究