HTML&CSS再出发—在线教育从后端到APP全链路学习实战

1 Web概念概述

1.1 javaWeb

Java Web，是用Java技术来解决相关web互联网领域的技术栈。web包括：web服务端和web客户端两部分。Java在客户端的应用有java applet，不过使用得很少，Java在服务器端的应用非常的丰富，比如Servlet，JSP和第三方框架等等。Java技术对Web领域的发展注入了强大的动力。
就是使用Java语言开发基于互联网的项目。

1.2 软件架构

C/S：Client/Server 客户端/服务器端：在用户本地有一个客户端程序，在远程有一个服务端程序，如QQ等；
B/S：Browser/Server 浏览器/服务器：只需要一个浏览器，用户通过不同的网址可以访问不同的服务器端程序。

Column 1	Column 2	Column 2
C/S	用户体验好	开发、安装、部署、维护麻烦
B/S	开发、安装、部署、维护简单	1、如果应用过大，用户体验可能会受到影响如网页游戏，体量大时，受带宽限制，会发生卡顿；2、对硬件要求过高；

1.3 B/S架构详解

静态资源：使用静态网页技术发布的资源，比如看到的新闻，图片；其特点：

• -》所有用户访问，得到的结果是一样的；
• -》如：图片、文本、音频、视频，HTML、CSS、JavaScript；
• -》若用户请求的是静态资源，服务器会直接将静态资源发送给浏览器，浏览器内置了静态资源的解析引擎，可以展示这些静态资源。
  动态资源：使用动态网页技术发布的资源。其特点：
• -》所有用户访问的结果可能不一样；
• -》如：jsp/servlet,php,asp…
• -》如果用户请求的是动态资源，服务器会去执行这些动态资源，转化为静态资源再发送给浏览器。
  
  以上分析可知，我们要学习动态资源，必须要先学习静态资源。静态资源三剑客，各自的作用：
  HTML：用于搭建基础网页的，展示页面内容；
  CSS：用于美化页面，布局页面；
  JavaScript：控制页面 的元素，让页面有动态的效果。

2 网页的组成

2.1 HTML：结构

HTML 是用来描述网页的一种语言，是超文本标记语言 (Hyper Text Markup Language)；超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素；HTML不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)，HTML使用标记标签来描述网页。
学习网站：https://www.w3school.com.cn/index.html。

2.2 CSS：样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体等。

2.3 JavaScript：交互

JavaScript是一种有着较强生命力和发展潜力的脚本语言，可被直接嵌入到HTML文档中，供浏览器解释执行；直接响应客户端事件，如验证数据表单合法性等，并调用相应的处理方法，迅速返回处理结果并更新页面，实现 Web交互性和动态的要求。同时将大部分的工作交给客户端处理，将Web服务器资源消耗降到最低。

3 HTML

3.1 HTML基本结构

为HTML页面中的根标签，所有的HTML网页中的标签都在中。
标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、

3.2 HTML常用的标签

标签由英文尖括号 < 和 > 括起来，如：;
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多一个/，…；还有一些是自结束标签，如：
；
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

里嵌套

，那么

必须放在

的前面。如：

..

注释是不可以嵌套的,如：
HTML标签不区分大小写，

和

是一样的，但建议小写。

3.2.1 标题标签

<h1>...h1> ~ <h6>...h6>

3.2.2 div标签

...

，相当于一个容器,可以把一些独立的逻辑部分(如网页中独立的栏目版块)划分出来,如下图：

注意：Visual Studio要想方便运行html文件，需要安装插件，如下图所示：

3.2.3 段落标签

<p>...p>

3.2.4 无序列表

<ul>
	<li>...li>
	<li>...li>
ul>

3.2.5 图片标签

<img alt="" src="" title=""/> 
     alt:图片无法显示时显示的描述性文字
     src:图片的地址
     title:鼠标放在图片上时显示的描述性文字

路径文件：

• 目标文件与当前文件在同包，直接查找目标文件
• 目标文件与当前文件不在同包，先找目标文件的父包，再找目标文件。
• 返回上一级：…/

3.2.6 超链接

<a href="" target="">a>
    href:指向一个链接地址
    target:目标窗口 
    值为”_self”时在向当前窗口(默认)打开新的网页
    值为”_blank”时在新的窗口打开

3.2.7 表格

* 语法
	<table>
		<tr>
			<th>th>|<td>td>
		tr>
	table>
* 跨行跨列
	* 跨行：rowspan
	* 跨列：colspan

3.2.8 表单

* 语法
	<form action="表单提交路径" method="提交方式（get|post）">
		<input>
		<select>
			<option>option>
		select>
	form>
* input标签中的属性
	type表单项的类型：text|password|radio|checkbox|reset|submit  
		file文件域
		hidden隐藏域
	name名称：无name，就无法提交该数据
	value值：text|password默认值，sumbit按钮的文本值
	checked: radio&checkbox:默认选中
	id:唯一

4 CSS

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体等。

4.1 基本语法

4.1.1 CSS样式的基本组成

CSS样式由选择符(选择器)和声明组成，而声明又由属性和值组成，如下图所示：（当有多条声明时，中间用英文分号”;”分隔）

4.1.2 选择器

标签选择器：p|h2
类选择器：
    定义：.类名{}
    调用：class="类名"
ID选择器：
    定义：#ID名{}
    调用：id="ID名"

4.2 CSS嵌入方式

4.2.1 写在标签的style属性中

字体大小用px表示

注：多个属性间用分号;分割。

style标签一般写在head标签与title标签之间。
   

4.2.3 引入外部CSS文件