2019-07-10

网页编程和设计

1.为什么要学习网页编程？

目前软件行业大多数的项目都是基于 B/S架构，即在浏览器端实现效果展示。 网页编程也是每个程序员必懂的技能。

2. 网页编程都包括那些？

HTML5、CSS3和 JavaScript语言，以及 Jquery。

3.HTML5、CSS3和 JavaScript语言，以及 Jquery之间的关系？

HTML是网页的结构，CSS是在结构的基础上用来静态装饰HTML结构，形成静态的网页，JS将静态的网页做成动态的效果。Jquery是封装了JS,固和JS基本一样.

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

1.1互联网的三大基石有哪些？

HTML(Hyper Text Markup Language)：超文本标记语言

HTTP(HyperText Transfer Protocol)：超文本传输协议

URL(Uniform Resource Location) ：统一资源定位符

1.2为什么说HTML,HTTP,URL是互联网的三大基石？

运行机制：浏览器要想向服务器发送请求，必须知道服务器的地址，及url,和服务器进行通信必须遵守一定的规范才能通信，及HTTP,服务器做出的响应怎么样展现给浏览器，及HTML.

第二节：HTML入门

2.1为什么学习 HTML？

随着技术的发展，信息量的增大网页的数据信息没有办法完美的、漂亮的展现到用户的面前。

HTML就是一种专门对网页信息进行规范化展示的语言。 把网页的信息格式化展现的语言。

2.2什么是 HTML？

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

2.3学习的网站

(网址：http://www.w3school.com.cn/

2.4HTML的基本结构 

:HTML5的文档约束，对标签的顺序和书写进行约束

head会书写一些和浏览器中的配置信息

charset="utf-8告诉浏览器按照UTF-8编码解析该网页-

第三节：Head 标签的子标签

书写一些和浏览器中的配置信息：例对HTML的解码格式，搜索引擎优化，自动刷新网页，禁止网页缓存等进行配置。如下：

第四节：基本标签

标题标签 h1-h6 自动的加粗加黑 会自动的换行align:调整标签的位置 （默认是left）

hr:分割线标签 width：宽度 500px:像素 color:颜色  align:位置（默认center）  size:垂直方向的大小.

p段落标签 br:换行  空格

 -预文本标签 按照我们指定的格式输出 （灵活性比较的大)
 
 

 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
效果：
 
 

 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
 
第五节：基本标签 2
 
 

 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
效果如下：
 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
第六节：超连接标签 
 
 
6.1什么叫超链接？
 
 
超链接是Web页面区别于其他媒体的重要特征之一，网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象，且超链接的数量是不受限制的。超链接的载体可以是文本，也可以是图片。
 
 
6.2超链接标签的作用 
 
 
超链接标签的作用（不会自动换行） 
 
 
【1】实现不同页面之间的跳转
 
 
    href:指定跳转到目标资源的位置
 
 
    target：打开网页的方式
 
 
【2】实现锚点功能
 
 
第七节：图片标签 
 
 
7.1图片标签 作用？
 
 
可以插入图片到网页。
 
 
7.2图片标签的使用 
 
 

 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
7.3图片标签的注意
 
 
img (不会自动的换行) 
 
 
src:引入图片的位置{相对路径、绝对路径、网络路径  }
 
 
title：图片的标题
 
 
width和height进行设置时，如果只只设置一个，则会按原始宽和高比例进行缩放，两者都写，则会按照写入的缩放。
 
 
border:图片的边框 
 
 
alt：图片无法正常显示的时候显示的属性
 
 
align:图片的位置  ，必须有参照物
 
 
第八节：表格标签
 
 
8.1表格标签的注意事项
 
 
table>tr*3>th*3 :声明3行3列的表格 
 
 
table表格的自适应能力 (align="center")整个的表格整体居中
 
 
 cellpadding：内容和单元格的距离  cellspacing：单元格和单元格的距离
 
 
height，Width：放在table 标签下，是定义表的宽,height放在tr行标签下，表示这一行的高度，自动适应能力没有，width放在td列标签下，表示定义此列宽度，自动适应能力没有。
 
 
tr：行 :height 
 
 
td/th：列  width
 
 
td:普通的列
 
 
th:标题列:自动的居中，加黑效果
 
 
colspan:列合并 
 
 
rowspan：行合并 
 
 
bgcolor：背景颜色
 
 
第九节：表单标签学习 
 
 
 

 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
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提交数据比较安全
 
 
第十节：iFrame标签学习
 
 
 
作用：可以嵌套另一个网页的框架，使之显示在自己的框架内
 
 
实现方式：
 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
第十一节：frameset标签学习
 
 
 
给网页构建，可以引用网页的地址在自己的框架上输出网页。
 
 
第十二节：div标签学习 
 
 
 
div标签的使用
 
 

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

 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
总结技巧：
 
 
1.插入n个换行：快捷键的使用：换行：br*n按Tab键
 
 
 
2.创建一个三行三列的表格：创建表格：table>tr*3>th*3按Tab键