网页编程----HTML网页编程
文章目录
- 网页编程设计（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 常用基本标签
北京尚学堂
北京尚学堂
北京尚学堂
北京尚学堂
23
log7
北京尚学堂
北京尚学堂
北京尚学堂
作用：
【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提交数据比较安全
<html>
<head>
<meta charset="utf-8">
<title>My Webtitle>
head>
<body>
<form action="01HTML.html" method="post">
<input type="txt" name="wd"/>
<input type="submit" value="百度一下" />
form>
body>
html>
第十节：表单标签学习 2
账号：
密码：
男：
女：
抽烟:
喝酒:
烫头:
个人介绍： 你
好
第十一节：框架签学习
1、iframe 框架学习：
<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>
<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com">iframe>
body>
html>
2、frameset 框架学习
<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>
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 标签的使用
IT程序员 请选择中国1
中国2
中国3
中国4
IBM IBM1 IBM2 IBM3