一、为什么要学习网页设计？

  1. 在 javaEE 应用最初的阶段，在 java 的程序中要生成网页的源码，把这份源码发送到客户浏览器。由浏览器去解释执行，用户就可以使用网页。此时对程序员的网页设计能力有比较高的要求。
  2. jsp 技术出现后， java 程序不需要生成网页的源码，只需要数据 + jsp 页面，然后转发并向客户端发送 jsp 页面。此时程序员不需要设计独立的网页，只需要在 jsp 页面中使用一些标签或表达式，就像填空一样，把数据在填空的位置能够呈现出来。
  3. ajax 技术出现，页面就可以直接向服务器程序发送请求，服务器程序只需要把页面所需要的数据交给页面去处理，在页面中可以利用 js 中的 DOM 技术把数据动态的在网页中呈现。
  4. 随着 Restful 的重新出现，服务器可以处理页面发出的 restful 风格的请求。另外，也随着分页式服务的出现，项目的规模越来越大，很多项目采用前后端分离的方式，此时在开发岗上出现了职位的明确划分，分成前端工程师（设计前端页面的代码），美工师（做页面的原型图），java 工程师。

二、现阶段学习的内容

  • html：用它提供的标记构造网页的骨架。
  • css：基于 html 的页面，进行排版及美化。
  • javascript：可以让网页与用户交互，并实现一些前端的动态效果。
  • jquery
  • UI 框架：bootstrap，ELementUI
  • VUE 框架
  • node.js
  • webpack
  • npm

三、学习 html

  1. html 称为超文本标记语言，它提供了一些标记供设计网页时使用，不同的标记对应不同的元素。
  2. 一个基础网页由文字及标记组成。
  3. html 的基本语法：
    （1）<标记 属性 = “ ”></标记> 双标记；
    （2）<属性 = “ ” 标记/> 单标记
  4. 标记间的关系
    （1）嵌套关系，一个标记内部有另外的标记。
    （2）并列关系，两个标记不存在包含关系，就是并列关系。
  • 如果页面上的标记不属于以上两种之一，一定有错误。
  1. 写标记时的基本要求
  1. 标记不区分大小写。
  2. 在 html 的网页中，标记不具有严格的语法要求，还是要求语法要正确。
  1. html 的版本
  • 现代的网页都基于 h5 的版本来设计。它与老版本的区别有几个方面：
  1. 文档的声明部分得到了简化。，老的版本比较复杂。
  2. h5 新增了一些排版要素， 等。
  3. 新增了 canvas 画布，可以实现复杂的动态变化的图形和图像效果。
  4. 在多媒体播放方面，统一了标准，播放效果要好很多。
  5. 新增了很多具有不同功能的表单控件，来丰富页面的交互效果。
  1. 网页的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 各种元素 -->
</body>
</html>
  • 学习标签要了解标签在页面中的点位，标签呈现出的形态，标签的功能，标签与其他标签的关系。

（1）标题标签：用来产生标题，一个标题独占一行，为以文字加粗加黑的形式呈现，从小到大分为六种，h1 到 h6。

（2）段落标记：生成一个文章中的段落，段落间有一个上下的间距，独占一行

  1. 。

（3）换行标记。

（4）划线标记。

（5）文字样式标记。

（6）符号实体，表示页面中的一些特殊的内容，比如空格，比如<>等。

（7）图像标记，不会独占一行，其它内容可以出现在图片左右两边。

（8）超链接标记，href 指向链接的资源，target 取值为 _self 则在当前页打开，取值为 _blank 则在新页面打开，如果取值为框架的 name 值，那么页面会在指定的框架内打开。

（9）清单标记

  1. ，用来排列多个元素，元素前可以带有符号。有序清单（ol），无需清单（ul）。

（10）表格标记

，属于复杂标记，作用：用来呈现二维数据，用来排版。

（11）层标记

  • div：主要作为容器使用，有利于实现页面的排版，可以针对 div 实现样式从而让其内部的元素也可以使用这些样式。现在流行的网页设计模式 div + css。默认情况下是不可见的，但又确实存在；另外 div 会独占一行。
  • span：作用比较小，可以针对局部内容添加不同的样式。不会独占一行，默认情况下不可见。

（12）框架集

  • 可以把整个页面分成多个部分，每个部分都可以指定一份网页或其它的资源，因此可以在一个页面中呈现多个网页的内容。主要用在应用系统中，可以把各组进行合理的分页。如果页面中使用框架集标记，body 标记就不需要了。
  • frameset：构造一个完整的框架布局。rows 定义行数及行高，cols 定义列数及列宽。
  • frame：产生其中的一个部分。

（13）内部框架（画中画）

  • 它可以在网页的某个位置挖出来一块，再给这一块指定一份网页。
  • iframe，它只作为网页的一个部分，所以 body 标记是需要的。也可以像框架集一样，完成一种结构布局。

（14）表单及表单控件

  • 表单：<form method = “get|post" action = "提交的目标” name = “xxx”>，它是不可见的，作用是很重要的，它可以把其中的表单控件的值提交到服务器程序，也可以用不同的提交方式，利用表单的相关事件，可以实现前端的数据验证。
  • 表单控件：有多种，有一部分的标记是 input，其中的 type 属性可以区别控件的类型，也有非 input 的标记控件。不同的控件起到的作用是不同的，比如文本框、密码框、单选框、多选框、多行文本框、下拉框，时间，数字，电话号码，email 等。不同的控件外在形式不同，操作的方式也不同，各适应于具有不同特征的数据的录入。