XIAOMING820

A030_JavaWeb&HTML&CSS

- - 1.内容介绍
  - 2.JavaWeb概述（阶段掌握，门清）
  - - 2.1.访问web的原理
    - 2.2.C/S软件和B/S软件区别
    - - 2.2.1.CS与BS引入
      - 2.2.2.CS与BS
    - 2.3.静态网页与动态网页
    - - 2.3.1.引入
      - 2.3.2.静态页面&动态页面
    - 2.4.最近今天JavaWeb学习思路
  - 3.HTML
  - - 3.1.HTML概述
    - 3.2.HTML语法
    - - 3.2.1.HTML文档结构
      - 3.2.2.HTML注释和标签
      - 3.2.3.表格标签
      - 3.2.4.图片标签[路劲]
      - 3.2.5.超链接标签
      - 3.2.6.表单标签[提交数据]
      - 3.2.6.1.表单元素
        
        3.2.6.2.input标签
        
        3.2.6.3.textarea标签：定义多行文本域
        
        3.2.6.4.select标签：定义下拉框
      - 3.2.7.DIV和SPAN
  - 4.CSS
  - - 4.1.CSS概述
    - 4.2.CSS使用
    - - 4.2.1.CSS语法
      - 4.2.2.CSS三种写法
      - 4.2.2.1.行内样式
        
        4.2.2.2.内部样式
        
        4.2.2.3.外部引入
      - 4.2.3.CSS选择器
      - 4.2.3.1.选择器语法
        
        4.2.3.2.通用选择器
        
        4.2.3.3.标签选择器/元素选择器
        
        4.2.3.4.类选择器
        
        4.2.3.5. ID选择器
  - 5.课程总结
  - - 5.1.重点
    - 5.2.难点
    - 5.3.如何掌握
    - 5.4.排错技巧
  - 6.常见问题
  - 7.课后练习
  - 8.面试题
  - 9.扩展知识或课外阅读推荐（可选）
  - - 9.1.扩展知识
    - 9.2.课外阅读

HTML文件&CSS

1.内容介绍

1. 表格；（掌握）
2. 表单；（掌握）
3. 超链接；（掌握）
4. 图片标签；（掌握）
5. CSS三种写法；（掌握）
6. CSS选择器；（掌握）

2.JavaWeb概述（阶段掌握，门清）

在前面的课程中我们已经完整的学会了Java 基础，数据库数据操作，从今天开始我们来学些javaweb，什么是javaWeb，就是通过java来开发网站，就像淘宝、京东那种，之前我们绘制的学习线路就是javaweb。

2.1.访问web的原理

2.2.C/S软件和B/S软件区别

2.2.1.CS与BS引入

上面的访问模式，这个其实就是通过浏览器访问web资源的方式，其实就是经典的BS架构，接下来我们详细的讲讲BS和CS架构

2.2.2.CS与BS

1.问题：什么是C/S
C/S架构：客户端和服务器端架构，比如我们使用的QQ、Foxmail等；

2.问题：什么是B/S
B/S架构：浏览器和服务器结构，比如我们使用淘宝、京东、百度等；
3.BS/CS的优缺点
(1)C/S : 更加安全（面向相对固定的用户群），速度更快（专用服务器），但是需要单独安装客户端，而且每次升级都要重新安装客户端；
(2)B/S : 不用安装任何专门的软件，只要有一个浏览器就可以，客户端不必维护。但是安全性和稳定性相对CS架构的软件较弱；

2.3.静态网页与动态网页

2.3.1.引入

1．上面我们访问的web资源中，最常见的页面就是静态页面，和动态页面

2.3.2.静态页面&动态页面

1．静态页面：静态页面一旦写好之后，页面的内容就不会改变了，如果想要改变，只有手动的去修改页面的代码才会发生改变，常见的静态页面开发技术html
2．动态页面：动态页面一旦写好了，即使我们不去改变页面的代码页面也会随着时间、代码、以及数据库的操作而发生改变。常见的动态页面技术，JSP/Servlet，ASP，PHP。

2.4.最近今天JavaWeb学习思路

1．DAY1：第一天HTML文档(静态网页技术)html css js(后面学),直接编写,本地运行测试
2．DAY2：网络编程模拟服务器.把html也买你放入到服务器,多个人都可以访问
3．DAY3：Tomcat服务器(第三方web服务器)和Servlet(动态网页技术).把html内容放入到第三方服务器软件(tomcat)上面,多个用户都能访问
4．DAY4：Jsp(Java动态页面技术)动态网页技术
5．DAY5、6：使用web开发简单网站实战.项目实战

3.HTML

3.1.HTML概述

1.HTML(Hypertext Markup Language)超文本标记语言，是一种编写网页的技术；
2.HTML文件浏览器解析
3.标签:学会用:W3CSchool.chm

3.2.HTML语法

3.2.1.HTML文档结构

<html>
	<head>head>
	<body>body>
html>

1.html: 告知浏览器其自身是一个HTML文档；
2.head: 用于定义文档的头部（描述文档的属性和信息：例如标题、编码集、引用其他文件等）；
3.body: 用于定义文档的主体（用于编写文档的主体内容）；

3.2.2.HTML注释和标签

HTML中的注释：
	
HTML中的标签：单标签、双标签
	<标签名 属性名="值" />
	<标签名 属性名="值">内容标签名>
	<标签名 属性名1="值" 属性名2="值">内容标签名>

3.2.3.表格标签

语法：

一般来说，定义表格之后需要指定宽高，使用border指定表格的边框：
<table width="200" height="200" border="1" >
	<tr>
		<th>表头1th>
		<th>表头2th>
	tr>
	<tr>
		<td>数据1td>
		<td>数据2td>
	tr>
table>

1.table：定义一个表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 、td 组成；
2.tr：定义表格中的行，表格行中包含一个或多个th或td元素；
3.th：定义表格内的单元格；
4.td：定义普通单元格；
表格行列合并：
【注意】因为表格中的单元格构成了表格，所以表格中的行列合并都是作用于单元格上的：
1.colspan：合并列/在列上面合并
取值规则：合并n列，取值为n，同时删除当前tr下的n-1个单元格；
2.rowspan：合并行/在行上面合并
取值规则：合并n行，取值为n，同时依次删除与当前行同级的n-1个tr下的一个单元格；

三行两列的表格，第一行中单元格合并，第二行中第一列进行行合并：
<table width="200" height="200" border="1" >
	<tr>
		<td colspan="2">数据1td>
	tr>
	<tr>
		<td rospan="2">数据1td>
		<td>数据2td>
	tr>
	<tr>
		<td>数据2td>
	tr>
table>

3.2.4.图片标签[路劲]

语法：

1.alt属性：当图片无法显示的时候（路径错误）就会显示；
2.src属性：指定图片的路径；
3.width属性：指定图片的宽度；
4.height属性：指定图片的高度；
web中的路径问题：
【绝对路径】
绝对路径以协议（http://、https://、file://）或者以“/”作为前缀，例：
http://www.baidu.com/img/bd_logo1.png
https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png
file://c:/1.JPG
/images/2.png
【相对路径】
相对路径以文件本身为参照路径进行定位
./ 代表当前路径
…/ 代表上一层路径
…/…/ 代表上一层的上一层路径

3.2.5.超链接标签

语法：

百度一下，你就知道

1.href属性：指示超链接需要链接的位置；
2.target属性：指示该超链接以什么样的方式进行跳转：
(1)_blank：在新的标签页打开；
(2)_self：在当前标签页中打开，默认取值；

3.2.6.表单标签[提交数据]

语法：

<form action="" method="">
	表单元素
form>

1.form标签：用于定义表单；
2.action属性：定义表单中的数据提交的位置；
3.method属性：定义表单数据的提交方式：
(1) get：通过url提交数据，有大小限制，不安全；
(2) post：数据不会出现在地址栏上，无大小限制，安全；

3.2.6.1.表单元素

【注意】
1.表单元素中除开按钮之外，都应当具备name属性
2.个别标签name属性取值要保持一致：单选、多选
3.name属性用于对提交到服务器后的表单数据进行标识；
4.按钮不需要定义name属性，因为按钮的值不需要提交；
注释：只有设置了name属性的表单元素才能在提交表单时传递它们的值；

3.2.6.2.input标签

1.使用input可以定义文本框、密码框、单选、多选、文件上传、隐藏域等

<input  type="" name="" value="" />

type属性：决定input标签的展现效果

text：文本框（默认值，可以不写）
password：密码框
radio：单选框
checkbox：多选框/复选框
file：文件上传
hidden：隐藏域
submit：提交按钮
button：普通按钮
reset：重置按钮
image：图片按钮

value属性：标签包含的数据
对于不同的type类型，value属性的用法也不一致：

type="button"、"reset"、"submit"：value值定义按钮上的显示文本
type="text"、"password"、"hidden"：value值定义输入框的初始值
type="checkbox"、"radio"、"image"：value值定义与输入相关联的值

注意：
<input type="checkbox">和<input type="radio">中必须设置 value 属性
value属性无法与 <input type="file">一同使用

3.2.6.3.textarea标签：定义多行文本域

<textarea cols="" rows="" name="">
textarea>

rows属性：规定 textarea 的可见高度，以行数计算
cols属性：规定 textarea 的可见宽度，以平均字符数计算
多行文本域可以被拖动，如何解决？

style="resize:none;"

3.2.6.4.select标签：定义下拉框

<select name="x">
	<option value="提交的值">显示的值option> 
select>

1.option元素定义下拉列表中的一个选项，位于 select 元素内部；
2.标签可以在不带有任何属性的情况下使用，默认value是标记中的文本。但是您通常需要使用value属性，此属性会指定出被送往服务器的内容；
3.请与select元素配合使用此标签，否则这个标签是没有意义的；
4.value属性：规定在表单被提交时被发送到服务器的值；
注意：
1.如果列表选项很多，可以使用标签对相关选项进行组合；
2.与之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如果没有value属性，则将两个标签之间的值发送给服务器；

3.2.7.DIV和SPAN

1.标签的作用是将想要显示的内容标记并展示特殊的效果，但div和span两个标签没有特殊的功能，只是作为一个内容容器，不过使用频率很高，主要与CSS配合使用来展示效果；
2.Div+Css页面布局
3.span是行内标签，只占据包裹的内容长度；
4.而div是块级标签，会独占一行，可以用于页面布局；
代码如下：

<span>span中的内容span>
<div>div中的内容div>

注意：为显示各自包裹的效果，此时可以使用CSS样式背景色来查看

4.CSS

4.1.CSS概述

1.CSS是(Cascading Style Sheets)层叠样式表
2.网页设计者使用CSS可以定义元素的样式，直白的讲就是让网页更好看
(1)CSS概述
(2)语法[属性 :值]–css2.chm
(3)写法[行内,页面嵌套,外部引入]
(4)选择器

4.2.CSS使用

4.2.1.CSS语法

单个样式写法：
<标签名 style="样式属性:样式属性值;">内容
多个样式写法：
<标签名 style="样式属性1:属性值;样式属性2:属性值;">源代码教育
CSS代码中的注释：
/* 注释内容 */
CSS对大小写敏感

注意：我们看到CSS样式属性的取值使用的是冒号【：】；同时属性值并没有使用引号。单个样式和多个样式区别其实并不大。实质上样式属性中的分号【;】是可以被省略的，但是在存在多个样式属性的时候，必须使用到分号分隔

4.2.2.CSS三种写法

4.2.2.1.行内样式

<标签名 style="样式属性:样式属性值;" >内容标签名>

作用域：当前标签有效，尽量不使用

4.2.2.2.内部样式

CSS代码：

<style type="text/css">
	span{
		样式属性1:样式属性值;
		样式属性2:样式属性值;
		…
	}
style>

HTML代码：

<span>内容span>

1.页面嵌入的方式需要搭配选择器使用，写在

4.2.2.3.外部引入

1.在外部单独新建一个以.css为后缀的文件；
2.然后使用标签将这个CSS文件与需要样式的网页关联起来；

<link rel="stylesheet" href="CSS文件路径" />

作用域：多个页面有效，但是必须引入该样式文件，此种方式最为常用；

4.2.3.CSS选择器

4.2.3.1.选择器语法

选择器名{
	样式属性1:样式属性值;
	样式属性2:样式属性值;
	……
}

注意：此时选择器的样式，不再写在标签内了，而是定义在一段