2. it
  3. Day035 网页编程设计（HTML）

Day035 网页编程设计（HTML）

mac2025-08-23  4

网页编程设计（HTML）

​ 目前软件行业大多数的项目都是基于 B/S 架构，即在浏览器端实现效果展示。网页编程也是每个程序员必懂的技能。本阶段课程主要讲解 HTML5、CSS3 和 JavaScript 语言以及 Jquery。对于 JAVA 程序员来说，不需要像前端程序员那样精通这部分内容，但是需要做到熟悉。

第一节：互联网的三大基石

1.1 概念

HTML(Hyper Text Markup Language)：超文本标记语言 HTTP(HyperText Transfer Protocol)：超文本传输协议 URL(Uniform Resource Location) ：统一资源定位符

1.2 理解示意图

第二节：HTML 入门

2.1 为什么学习 HTML？

需求：（生活中遇到问题） 随着技术的发展，信息量的增大网页的数据信息没有办法完美的、漂亮的展现到用户的面前。 意义(作用)： HTML是一种专门对网页信息进行规范化展示的语言。把网页的信息格式化展现的语言。

2.2 什么是 HTML？

HTML(Hyper Text Markup Language)：超文本标记语言 超文本：文本信息 、图片、声音、视频、超链接等 标记：标签的体现

2.3 学习的网站

w3cschool在线教程(网址：w3school.com.cn/)

2.4HTML 的基本结构

第三节：Head 标签的子标签

3.1 常用标签

实例

实例 1 - 定义文档关键词，用于搜索引擎：

实例 2 - 定义web页面描述：

实例 3 - 定义页面作者：

实例 4 - 每30秒刷新页面：

第四节：基本标签 4.1 基本标签 【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园

【新时代·幸福美丽新边疆】

【新时代·幸福美丽新边疆】

【新时代·幸福美丽新边疆】

【新时代·幸福美丽新边疆】

【新时代·幸福美丽新边疆】

【新时代·幸福美丽新边疆】

新华网阿里5月11日电（张宸 雪珍）55岁 的白玛加布看着在 玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑 容。

新华网阿里5月11日电（张宸 雪珍） 55岁的 白玛加布 看着在

第五节：基本标签 2 5.1 常用基本标签 北京尚学堂 北京尚学堂 北京尚学堂 北京尚学堂 23 log7 北京尚学堂 北京尚学堂 北京尚学堂 作用： 【1】树形菜单 【2】导航栏的布局

javaSEjavaEEjavaME javaSEjavaEEjavaME

javajavaSEjavaEEjavaME

北京尚学堂

第六节：超连接标签 6.1 超链接标签的作用 超链接标签的作用（不会自动换行） 【1】实现不同页面之间的跳转 href:指定跳转到目标资源的位置 target：打开网页的方式 【2】实现锚点功能 6.2 超链接标签的使用 02小标签测试 北京尚学堂 锚点功能 返回底部 返回顶部

第七节：图片标签 7.1 图片标签的注意 img (不会自动的换行) src:引入图片的位置{相对路径、绝对路径、网络路径 } title：图片的标题 原始 宽和高 400px 260px 200px 130px border:图片的边框 alt：图片无法正常显示的时候显示的属性 align:图片的位置 ，必须有参照物 7.2 图片标签的使用

6666 zhuanlan.zhihu.com/writ

zhuanlan.zhihu.com/writ 8888

第八节：表格标签 8.1 表格标签的注意事项 table>tr3>th3 :声明3行3列的表格 table表格的自适应能力 (align="center")整个的表格整 体居中 width="300px" height="300px"

cellpadding：内容和单元格的距离

cellspacing：单元格和单元格的距离 tr：行 :height td/th：列 width td:普通的列 th:标题列:自动的居中，加黑效果 colspan:列合并 rowspan：行合并 bgcolor：背景颜色

第九节：表单标签学习 1 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>My Web</title> </head> <body> <form action="01HTML.html" method="post"> <input type="txt" name="wd"/> <input type="submit" value="百度一下" /> </form> </body> </html>

第十节：表单标签学习 2

账号： 密码： 男： 女： 抽烟: 喝酒: 烫头: 个人介绍： 你 好

中国 美国 日本 新加坡

第十一节：框架签学习

1、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>

2、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>

第十三节：div 标签学习

13.1div 标签的注意事项 div本身是没有任何的含义 div：作用就是把网页进行模块化的划分 13.2div 标签的使用

第十五节：H5 中增强表单标签

邮箱: 年龄: 滑动器: 搜索: 日期: 日期: 日期: 颜色: 网址:

H5中表单增强的属性 placeholder autofocus:自动的获得焦点 max：最大值 min：最小值 minlength:最小长度 maxlength:最大长度

账号: 密码: 密码:

第十六节、HTML5 中新增结构标签

16.1 博客地址 cnblogs.com/fly_dragon/ 25/2516142.html 16.2 标签的使用

第十七、HTML5 中音频视频标签

17.1 标签的使用

改网页不支持媒体标签 改网页不支持媒体标签 改网页不支持媒体标签

第十八节、HTML5 中的绘图标签

18.1 标签的使用

IT程序员

请选择

中国1

中国2

中国3

中国4

IBMIBM1IBM2IBM3 var ca=document.getElementById("mycat"); var te= ca.getContext("2d"); //背景颜色 te.fillStyle="#FF0000"; //绘制图形的大小 te.fillRect(0,0,80,100);

最新回复(0)