Web技术-1 Web前端总结

Web开发的学习是建立在掌握了Java基础上的，通过学习Web前端、jQuery+AJAX 、MySql数据库、Oracle数据库、Java Web技术，实现网页的制作和功能的开发。本部分总结的是Web前端的知识，主要包括HTML制作网页、CSS设计样式、JavaScript添加网页动态特效、表单验证等。

                                                                 HTML制作网页
一、HTML(超文本标记语言)

W3C标准（World Wide Web Consortium）

结构化标准语言（XHTML/XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

基本结构：

主体内容

       
二、HTML标签

1、标签规范（XHTML标签规范）：

• 签名应小写
• HTML标签应闭合
• 标签应正确嵌套
• 应添加文档类型声明

1、定义标签meta（用于定义文件信息）可设置字符编码格式，关键字，跳转网页 （看demo-1）

2、标题标签

至

3、字体样式标签： 斜体标签， 粗体标签

4、水平线标签

---

换行标签
（自闭合,没有结束标签）

5、段落标签

6、图像标签   超链接标签

7、其他： （空格标签）  ©（版权符号@）

8、注释：

2、图像标签

3、超链接标签

1、链接文本图片

href：表示链接路径

target：链接在哪个窗口打开，_self(当前页面打开)、_blank（新页面打开）

2、锚链接

从A页面的甲位置跳转到本页中的乙位置（同一页面）

从A页面的甲位置跳转到B页中的乙位置（两个页面）

创建步骤：

• 建跳转标记乙位置
• 创建跳转链接甲位置
• 跳转到另一个页面在的#前面加上要跳转的页面路径

4、HTML列表

• 无序列表
  ，用于导航、侧边栏新闻列表等

  • 列表项内容1
  • 列表项内容2
  • 列表项内容3

  注：默认

• 标签项前有实心小圆点，可更换为（type=“小方块，小圆圈”）
  • 有序列表

  1. 列表项内容1
  2. 列表项内容2
  3. 列表项内容3

  注：注：默认

• 标签项前有123，可更换为（type=“a，A，I”）
  • 定义列表

    无序，没有标记

  标题

  描述

  注：没有顺序，没有默认标记

  5、表单标签

  1、

  标签—表单提交

     …适合文本框、按钮等表单元素…

  注：

  action属性：处理表单数据的目标地址

  method属性：规定提交方式  可选值post/get

  get方法提交参数在地址栏可见

  post方法提交参数在地址栏不可见（密码）

   2、标签—文本框，按钮等。。

  适用的表单元素有：文本框、复选框、文件选择框、按钮等

  name属性：表单元素名称

  type属性：类型、域

  value属性：值

  size属性：文本框显示宽度

  maxlength属性：内容最大长度

  checked属性：是否选中，仅与checkbox 和radio配合使用，选中为checked

  3、下拉列表框 通过  标签实现

  4、多行文本框 通过标签实现

  5、表单结构标签：

  结构标题标签：

  6、标签 实现关联表单元素

  名字:

  或者名字:

  无需id关联

  点击label标签 如：名字,鼠标聚焦文本框中

  6、表格标签

  1、表格基本语法：

  表示   行         表示  单元格

  border 表示边框

  bgcolor表示背景色    width 表示表格的框

  cellpadding表示单元格中的内容和边框的距离

  cellspacing表示单元格之间的距离

  align表示水平对齐方式   valign 表示垂直对齐方式

  • 表格高级标签

  标题

  页眉

  表头标签表示和功能一样，以标题形式显示

  数据主体

  页脚

  3、表格的跨行与跨列

  跨行标签的rowspan属性，值为数字，代表合并几行

  跨列标签的colspan属性，值为数字，代表合并几列

  7、HTML框架结构（