文章目录

网页编程设计（HTML）
- 第一节：互联网的三大基石
- - 1.1 概念
  - 1.2 理解示意图
- 第二节：HTML 入门
- - 2.1 为什么学习 HTML？
  - 2.2 什么是 HTML？
  - 2.3 学习的网站
  - 2.4HTML 的基本结构
- 第三节：Head 标签的子标签
- - 3.1 常用标签
- 第四节：基本标签
- 第五节：基本标签 2
- 第六节：超连接标签
- 第七节：图片标签
- 第八节：表格标签
- 第九节：表单标签学习 1
- 第十节：表单标签学习 2
- 第十一节：框架签学习
- - 1、iframe 框架学习：
  - 2、frameset 框架学习
- 第十二节：div 标签学习
- 第十三节：H5 中增强表单标签
- 第十四节、HTML5 中新增结构标签
- 第十五、HTML5 中音频视频标签

网页编程设计（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 理解示意图

[外链图片转存失败(img-yMKZulXy-1564666966476)(C:\Users\Administrator\Documents\HTML基本结构.jpg)]

第二节：HTML 入门

2.1 为什么学习 HTML？

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

2.2 什么是 HTML？

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

2.3 学习的网站

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

2.4HTML 的基本结构

[外链图片转存失败(img-CXXgHXqn-1564666966478)(C:\Users\Administrator\Documents\互联网.jpg)]

第三节：Head 标签的子标签

3.1 常用标签

#### 实例

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

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

实例 3 - 定义页面作者：

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

第四节：基本标签

4.1 基本标签

【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园

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

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

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

第五节：基本标签 2

5.1 常用基本标签

北京尚学堂

北京尚学堂

北京尚学堂

~~北京尚学堂~~

2³

log₇

北京尚学堂

作用：
【1】树形菜单
【2】导航栏的布局

javaSE
javaEE
javaME

javaSE
javaEE
javaME

java: javaSE; javaEE; javaME

北京尚学堂

第六节：超连接标签

6.1 超链接标签的作用
超链接标签的作用（不会自动换行）
【1】实现不同页面之间的跳转
href:指定跳转到目标资源的位置
target：打开网页的方式
【2】实现锚点功能
6.2 超链接标签的使用

02小标签测试

北京尚学堂
锚点功能
返回底部
返回顶部

第七节：图片标签

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

6666 图片显示错误 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

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>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 博客地址
https://www.cnblogs.com/fly_dragon/archive/2012/05/
25/2516142.html
16.2 标签的使用

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

17.1 标签的使用

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

### 第十六节、HTML5 中的绘图标签

18.1 标签的使用

请选择

中国1

中国2

中国3

中国4

IBM IBM1 IBM2 IBM3

网页编程----HTML网页编程相关推荐

html网页和cgi程序编程,CGI 编程方式学习
1.大家都知道CGI是通用网关接口,可以用来编写动态网页.而且CGI可以用很多种语言来写,用perl来编写最常见, 我这里就是用perl来编写做例子.讲到编写CGI编程方式,编写CGI有两程编程风格. ...
《安富莱嵌入式周报》第280期：支持在线仿真编程的网页版电子开发，CAN总线防攻击实现，BigFAT 规范打破了 FAT 每个文件 4GB 的限制
往期周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - P ...
asp.net摄影网站系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 ASP.NET C# 摄影网站系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发.开发环境为vs2010,数据库为sqlser ...
asp.net毕业生信息管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 asp.net 毕业生信息管理系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发.开发环境为vs2010,数据库为sqlse ...
计算机毕业设计asp.net考勤管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 ASP.NET C# 考勤管理系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发,开发环境为vs2010,数据库为sqlser ...
C# 网络编程之网页自动登录 (一).使用WebBrower控件模仿登录
C# 网络编程之网页自动登录 (一).使用WebBrower控件模仿登录最近学习C#网络编程中,想实现网页自动登录并提交GET/POST信息,再实现循环登录不断发送报文给服务器,服务器发送消息给客户 ...
asp.net医院信息管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 asp.net 医院信息管理系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发,开发环境为vs2010,数据库为sqlserve ...
asp.net网上商城系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 asp.net 网上商城系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发,开发环境为vs2010,数据库为sqlserver2 ...
计算机毕业设计asp.net电脑彩票销售管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 asp.net 电脑彩票销售管理系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发,开发环境为vs2010,数据库为sqlse ...
asp.net练车管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
一.源码特点 ASP.NET C# 练车管理系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发,开发环境为vs2010,数据库为sqlser ...

网页编程----HTML网页编程

文章目录

网页编程设计（HTML）

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

1.1 概念

1.2 理解示意图

第二节：HTML 入门

2.1 为什么学习 HTML？

2.2 什么是 HTML？

2.3 学习的网站

2.4HTML 的基本结构

第三节：Head 标签的子标签

3.1 常用标签

第四节：基本标签

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