网页编程设计
目前软件行业大多数的项目都是基于 B/S 架构，即在浏
览器端实现效果展示。网页编程也是每个程序员必懂的技能。
本阶段课程主要讲解 HTML5、CSS3 和 JavaScript 语言，以
及 Jquery。对于 JAVA 程序员来说，不需要像前端程序员那
样精通这部分内容，但是也需要做到熟悉。
第一节：互联网的三大基石
1.1 概念
HTML(Hyper Text Markup Language)：超文本标记语言
HTTP(HyperText Transfer Protocol)：超文本传输协议
URL(Uniform Resource Location) ：统一资源定位符
第二节：HTML 入门
2.1 为什么学习 HTML？
需求：（生活中遇到问题）
随着技术的发展，信息量的增大网页的数据信息没有办
法完美的、漂亮的展现到用户的面前。
意义:(作用)：
HTML是一种专门对网页信息进行规范化展示的语言。
把网页的信息格式化展现的语言
2.2 什么是 HTML？
HTML(Hyper Text Markup Language)：超文本标记语言
超文本：文本信息 、图片、声音、视频、超链接等
标记：标签的体现
2.3 学习的网站
w3cschool在线教程(网址：http://www.w3school.com.cn/)
第三节：Head 标签的子标签
3.1 常用标签
<meta charset="utf-8" /> <title></title> <!--搜索引擎优化--> <meta name="author" content="朱自清，张三" /> <meta name="description" content="盼望着盼望着东风 来了" /> <meta name="keywords" content="东风，盼望" /> <!--自动刷新网页--> <meta http-equiv="refresh" content="5;http://www.bjsxt.com" /> <!--禁止网页缓存 (了解)--> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="expires" content="0" />
第四节：基本标签
4.1 基本标签
<!--标题标签 h1-h6 自动的加粗加黑 会自动的换行 align:调整标签的位置 （默认是left） --> 【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园 <h1 align="right">【新时代·幸福美丽新边疆】</h1> <h2>【新时代·幸福美丽新边疆】</h2> <h3>【新时代·幸福美丽新边疆】</h3> <h4>【新时代·幸福美丽新边疆】</h4> <h5>【新时代·幸福美丽新边疆】</h5> <h6>【新时代·幸福美丽新边疆】</h6> <!--分割线标签 width：宽度 500px:像素 color:颜 色 align:位置（默认center） size:垂直方向的大小 --> <hr width="500px" color="red" align="left" size="20px"/> <!--p段落标签 br:换行 空格--> <p> 新华网阿里5月11日电（张宸 雪珍）55岁 的白玛加布看着在<br /> 玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑 容。</p> <!--预文本标签 按照我们指定的格式输出 （灵活 性比较的大）--> <pre> 新华网阿里5月11日电（张宸 雪珍） 55岁的 白玛加布 看着在 </pre>
5.1 常用基本标签
<!--下划线标签--> <u>北京尚学堂</u> <!--斜体标签--> <i>北京尚学堂</i> <!--加粗加黑标签--> <b>北京尚学堂</b> <!--删除线标签--> <del>北京尚学堂</del> <!--上标标签--> 2<sup>3</sup> <!--下标标签--> log<sub>7</sub> <!--字体变小标签--> <small>北京尚学堂</small> <!--字体放大--> <big>北京尚学堂</big> <!--字体标签 face：指定字体的风格--> <font color="red" size="25px" face="宋体">北京尚学堂 </font> <!--列表标签{[1]有序列表，[2]无序列表，[3]自定义列 表}--> 作用： 【1】树形菜单 【2】导航栏的布局 <!--[1]有序列表--> <ol type="I"> <li>javaSE</li> <li>javaEE</li> <li>javaME</li> </ol> <!--[2]无序列表--> <ul type="square"> <li>javaSE</li> <li>javaEE</li> <li>javaME</li> </ul> <!--[3]自定义列表--> <dl> <dt>java</dt> <dd>javaSE</dd> <dd>javaEE</dd> <dd>javaME</dd> </dl> <!--跑马灯标签--> <marquee direction="right" scrollamount="40px"> 北京尚学堂</marquee>
第六节：超连接标签
6.1 超链接标签的作用
超链接标签的作用（不会自动换行） 【1】实现不同页面之间的跳转 href:指定跳转到目标资源的位置 target：打开网页的方式 【2】实现锚点功能 6.2 超链接标签的使用 <!--跳转到本地的资源位置--> <a href="02body中常用小标签.html" target="_blank">02小标签测试</a> <!--跳转到网络的位置--> <a href="http://www.bjsxt.com">北京尚学堂</a> 锚点功能 <a href="#bottom" name="top">返回底部</a> <a href="#top" name="bottom">返回顶部</a>
第七节：图片标签
7.1 图片标签的注意
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--相对路径--> <img src="img/2.jpg" /> <!--绝对路径--> <img src="C:\Users\my\Documents\HBuilderProjects\01HTML\img\1.jpg" /> <!--网络路径--> <img src="https://www.baidu.com/img/bd_logo1.png" /> <hr /> <p> 6666 <a href="#"> <img src="img/1.jpg" title="图片" width="200px" height="200px" border="2px" alt="图片显示错误" align="right"/> </a> 8888 </p> </body> </html> <!-- img (不会自动的换行) src:引入图片的位置{相对路径、绝对路径、网络路径 } title：图片的标题 原始 宽和高 400px 260px 200px 130px border:图片的边框 alt：图片无法正常显示的时候显示的属性 align:图片的位置 ，必须有参照物 -->
img (不会自动的换行)
src:引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
原始 宽和高
400px 260px
200px 130px
border:图片的边框
alt：图片无法正常显示的时候显示的属性
align:图片的位置 ，必须有参照物
7.2 图片标签的使用
<!--相对路径-->
<img src="img/2.jpg" />
<!--绝对路径-->
<img
src="C:\Users\my\Documents\HBuilderProjects\01
HTML\img\1.jpg" />
<!--网络路径-->
第八节：表格标签
8.1 表格标签的注意事项
table>tr*3>th*3 :声明3行3列的表格
table表格的自适应能力 (align="center")整个的表格整
体居中
width="300px" height="300px" cellpadding：内容和单
元格的距离 cellspacing：单元格和单元格的距离
tr：行 :height
td/th：列 width
td:普通的列
th:标题列:自动的居中，加黑效果
colspan:列合并
rowspan：行合并
bgcolor：背景颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1px" align="center" cellpadding="20px" cellspacing="30px"> <tr height="100px" align="center"> <td width="100px" align="center">11</td> <td width="100px">2</td> <td width="100px">3</td> </tr> <tr height="100px"> <th>4</th> <td>5</td> <td>6</td> </tr> <tr height="100px"> <td>7</td> <td>8</td> <td>9</td> </tr> <tr height="100px"> <th>11</th> <th>12</th> <th>13</th> </tr> </table> <hr /> <table border="1px" width="300px" height="300px" bgcolor="bisque"> <tr bgcolor="aqua"> <th colspan="2" bgcolor="blue">1--2</th> <!--<th>2</th>--> <th>3</th> </tr> <tr> <th>4</th> <th>5</th> <th rowspan="2">6--9</th> </tr> <tr> <th>7</th> <th>8</th> <!--<th>9</th>--> </tr> </table> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> <!-- table>tr*3>th*3 :声明3行3列的表格 table表格的自适应能力 (align="center")整个的表格整体居中 width="300px" height="300px" cellpadding：内容和单元格的距离 cellspacing：单元格和单元格的距离 tr：行 :height td/th：列 width td:普通的列 th:标题列:自动的居中，加黑效果 colspan:列合并 rowspan：行合并 bgcolor：背景颜色 -->
table>tr*3>th*3 按table键，自动生成。
第九节：表单标签学习 1
https://www.baidu.com/s？键1=值1&键2=值2
action：表单提交的位置
method（get/post）：表单提交的方式
GET:
- (1)参数会依附于url地址之后
- (2)利用get方式提交数据，数据的长度有限制
- (3)利用get方式提交数据，是不安全的
Post
- (1)请求不会依附于地址，
- (2)利用post处理参数不受限制
- （3）post提交数据比较安全
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="01body中的常用标签.html" method="get"> <!--普通文本框--> <input type="text" name="wd"/> <input type="submit" value="百度一下" /> </form> </body> </html> <!-- https://www.baidu.com/s？键1=值1&键2=值2 action：表单提交的位置 method（get/post）：表单提交的方式 get:(1)参数会依附于url地址之后，(2)利用get方式提交数据，数据的长度有限制(3)利用get方式提交数据，是不安全的 post(1)请求不会依附于地址，(2)利用post处理参数不受限制（3）post提交数据比较安全 -->
第十节：表单标签学习 2
- <!--普通文本框 value：文本框中值-->
- 账号： <input type="text" name="zh" value="123" />
- 密码：<input type="password" name="pwd" value="123"
- />
- <!--单选框 实现单选的效果必须指定同一个name属性
- checked：默认的选择-->
- 男：<input type="radio" name="sex" value="1"
- checked="checked"/>
- 女：<input type="radio" name="sex" value="0"/>
- <!--多选框-->
- 抽烟:<input type="checkbox" value="1"
- checked="checked">
- 喝酒:<input type="checkbox" />
- 烫头:<input type="checkbox" /><br />
- <!--多行文本框-->
- 个人介绍： <textarea rows="15" cols="20" value="">你
- 好</textarea><br />
- <!--文件选择框-->
- <input type="file" name="file" /><br />
- <!--隐藏框-->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> <!--普通文本框 value：文本框中值--> 账号： <input type="text" name="zh" value="123" /> <br /> 密码：<input type="password" name="pwd" value="123" /><br /> <!--单选框 实现单选的效果必须指定同一个name属性 checked：默认的选择--> 男：<input type="radio" name="sex" value="1" checked="checked"/> 女：<input type="radio" name="sex" value="0"/> <br /> <!--多选框--> 抽烟:<input type="checkbox" value="1" checked="checked"> 喝酒:<input type="checkbox" /> 烫头:<input type="checkbox" /><br /> <!--多行文本框--> 个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br /> <!--文件选择框--> <input type="file" name="file" /><br /> <!--隐藏框--> <input type="hidden" name="sno" value="20180607" /><br /> <!--下拉框 selected：默认的选择--> <select name="ch"> <option value="1">中国</option> <option value="2" selected="selected">美国</option> <option value="3">日本</option> <option value="4">新加坡</option> </select> <br /> <!--提交按钮--> <input type="submit" value="提交" /> <br /> <!--清除按钮,清空写好的内容--> <input type="reset" value="清除" /> <!--普通的按钮 没有提交数据的功能--> <input type="button" value="提交" /> </form> </body> </html>
iframe框架
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li><a href="http://www.baidu.com" target="ifm">百度</a></li> <li><a href="http://www.taobao.com" target="ifm">淘宝</a></li> <li><a href="http://www.jd.com" target="ifm">京东</a></li> </ul> <!--框架学习 width：宽度 height：高度 src:默认路径 --> <iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe> </body> </html>
frameset框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="150px,*,100px">
<!--顶部部分-->
<frame src="admin/top.html" noresize="noresize"/>
<!--中间的部分-->
<frameset cols="10%,*">
<!--左侧部分-->
<frame src="admin/left.html"/>
<!--右侧部分-->
<frame src="admin/right.html" name="rig"/>
</frameset>
<!--底部部分-->
<frame src="admin/bottom.html"/>
</frameset>
<!--<body>
</body>-->
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> bottom.html</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>left.html</h1>
<ul>
<li><a href="http://www.baidu.com" target="rig">百度</a></li>
<li><a href="http://www.taobao.com" target="rig">淘宝</a></li>
<li><a href="http://www.jd.com" target="rig">京东</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>right.html</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>top.html</h1>
</body>
</html>
第十三节：div 标签学习
13.1div 标签的注意事项
div本身是没有任何的含义
div：作用就是把网页进行模块化的划分
13.2div 标签的使用
<!--头部模块-->
<div class="top"></div>
<!--中间提示-->
<div class="tips"></div>
<!--中间的展现-->
<div class="center">
<div class="login">
</div>
</div>
<!--底部模块-->
<div class="bottom"></div>
第十五节：H5 中增强表单标签
- <form>
- <!--邮箱-->
- 邮箱: <input type="email" />
- <!--数字-->
- 年龄: <input type="number" />
- <!--滑动器-->
- 滑动器: <input type="range" />
- <!--搜索框-->
- 搜索: <input type="search" />
- <!--日期的框-->
- 日期: <input type="date" />
- <!--日期的框-->
- 日期: <input type="week" />
- <!--日期的框-->
- 日期: <input type="month" />
- <!--颜色-->
- 颜色: <input type="color" />
- <!--网址-->
- 网址: <input type="url" />
- </form>
- H5中表单增强的属性
- placeholder
- autofocus:自动的获得焦点
- max：最大值
- min：最小值
- minlength:最小长度
- maxlength:最大长度
- <form>
- 账号:<input type="text" placeholder="手机号/邮箱/账
- 号" autofocus/>
- 密码:<input type="number" max="130" min="0" />
- 密码:<input type="password" minlength="2"
- maxlength="4" />
- </form>
16HTML5 中新增结构标签
16.1 博客地址
https://www.cnblogs.com/fly_dragon/archive/2012/05/
25/2516142.html
16.2 标签的使用
- <!--头部模块-->
- <header></header>
- <!--中间提示-->
- <nav></nav>
- <!--中间的展现-->
- <div class="center">
- <div class="login">
- </div>
- </div>
- <!--底部模块-->
- <footer></footer>
17、HTML5 中音频视频标签
17.1 标签的使用
<!--引入音频的标签--><audio src="img/1.mp3" controls="controls">改网页不支持媒体标签</audio>
<audio><source src="img/1.mp3"></source>
<source src="img/1.ogg"></source>
改网页不支持媒体标签</audio>
<!--引入视频的标签-->
<video src="img/movie.mp4" controls="controls"width="300px" height="300px"></video>
<video><source src="img/movie.mp4"></source>
<source src="img/movie.ogg"></source>
<source src="img/movie.webm"></source>
改网页不支持媒体标签</video>
<hr /><!--多媒体标签 -->
<embed src="img/1.mp3"></embed>
<embed src="img/movie.mp4" width="500px"height="500px"></embed>
<!--引入音频的标签--><audio src="img/1.mp3" controls="controls">改网页不支持媒体标签</audio> <audio><source src="img/1.mp3"></source> <source src="img/1.ogg"></source> 改网页不支持媒体标签</audio> <!--引入视频的标签--> <video src="img/movie.mp4" controls="controls"width="300px" height="300px"></video> <video><source src="img/movie.mp4"></source> <source src="img/movie.ogg"></source> <source src="img/movie.webm"></source> 改网页不支持媒体标签</video> <hr /><!--多媒体标签 --> <embed src="img/1.mp3"></embed> <embed src="img/movie.mp4" width="500px"height="500px"></embed>
18HTML5 中的绘图标签
18.1 标签的使用
<figure>
<img src="img/1.jpg" />
<figcaption>IT程序员</figcaption>
</figure>
<!--展示文章的细节
mark：着重突出的内容-->
<details>
<summary>请选择</summary>
<p>中国1</p>
<p><mark>中国2</mark></p>
<p>中国3</p>
<p>中国4</p>
</details>
<!--刻度标签
max:规定的最大值
min:规定最小值
value：当前的值
low：自己定义的最小值
high：自己定义的最大值
-->
<meter max="100" min="0" value="10" low="20"
high="80"></meter>
<!--进度条-->
<progress max="100" value="40"></progress>
<input type="text" list="city" />
<datalist id="city">
<option value="IBM">IBM</option>
<option value="IBM1">IBM1</option>
<option value="IBM2">IBM2</option>
<option value="IBM3">IBM3</option>
</datalist>
<!--画布标签-->
<canvas id="mycat"></canvas>
<script>
var ca=document.getElementById("mycat");
var te= ca.getContext("2d");
//背景颜色
te.fillStyle="#FF0000";
//绘制图形的大小
te.fillRect(0,0,80,100);
</script>
<figure> <img src="img/1.jpg" /> <figcaption>IT程序员</figcaption> </figure> <!--展示文章的细节 mark：着重突出的内容--> <details> <summary>请选择</summary> <p>中国1</p> <p><mark>中国2</mark></p> <p>中国3</p> <p>中国4</p> </details> <!--刻度标签 max:规定的最大值 min:规定最小值 value：当前的值 low：自己定义的最小值 high：自己定义的最大值 --> <meter max="100" min="0" value="10" low="20" high="80"></meter> <!--进度条--> <progress max="100" value="40"></progress> <input type="text" list="city" /> <datalist id="city"> <option value="IBM">IBM</option> <option value="IBM1">IBM1</option> <option value="IBM2">IBM2</option> <option value="IBM3">IBM3</option> </datalist> <!--画布标签--> <canvas id="mycat"></canvas> <script> var ca=document.getElementById("mycat"); var te= ca.getContext("2d"); //背景颜色 te.fillStyle="#FF0000"; //绘制图形的大小 te.fillRect(0,0,80,100); </script>