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

最新推荐文章于 2024-05-25 11:43:24 发布

奔腾的小野马~~

最新推荐文章于 2024-05-25 11:43:24 发布

阅读量9.7k

点赞数 5

分类专栏：网页编程

本文链接：https://blog.csdn.net/weixin_44342108/article/details/98109656

版权

网页编程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

网页编程设计（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

奔腾的小野马~~

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
网页编程----HTML网页编程

网页编程设计（HTML）目前软件行业大多数的项目都是基于 B/S 架构，即在浏览器端实现效果展示。网页编程也是每个程序员必懂的技能。本阶段课程主要讲解 HTML5、CSS3 和 JavaScript 语言以及 Jquery。对于 JAVA 程序员来说，不需要像前端程序员那样精通这部分内容，但是需要做到熟悉。第一节：互联网的三大基石1.1 概念HTML(Hyper Text Markup...
复制链接

扫一扫