devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

A030_JavaWeb&HTML&CSS_m849.hga030.

作者：Gausst松鼠会 | 2024-03-18 06:36:22

赞

踩

m849.hga030.

目录


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
  • 2
  • 3
  • 4

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

3.2.2.HTML注释和标签
HTML中的注释：
	<!-- html注释：页面不可见，通过源代码可见 -->
HTML中的标签：单标签、双标签
	<标签名 属性名="值" />
	<标签名 属性名="值">内容</标签名>
	<标签名 属性名1="值" 属性名2="值">内容</标签名>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
3.2.3.表格标签

语法：

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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">数据1</td>
	</tr>
	<tr>
		<td rospan="2">数据1</td>
		<td>数据2</td>
	</tr>
	<tr>
		<td>数据2</td>
	</tr>
</table>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
3.2.4.图片标签[路劲]

语法：

<img alt="" src="图片路径" width="" height="" />

  • 1

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.超链接标签

语法：

<a href="http://www.baidu.com" target="" >百度一下，你就知道</a>

  • 1

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

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

语法：

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

  • 1
  • 2
  • 3

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="" /> 

  • 1

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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">一同使用

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
3.2.6.3.textarea标签：定义多行文本域
<textarea cols="" rows="" name="">
</textarea>

  • 1
  • 2

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

style="resize:none;"

  • 1
3.2.6.4.select标签：定义下拉框
<select name="x">
	<option value="提交的值">显示的值</option> 
</select>

  • 1
  • 2
  • 3

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

3.2.7.DIV和SPAN

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

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

  • 1
  • 2

注意：为显示各自包裹的效果，此时可以使用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对大小写敏感

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

4.2.2.CSS三种写法
4.2.2.1.行内样式
<标签名 style="样式属性:样式属性值;" >内容</标签名>

  • 1

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

4.2.2.2.内部样式

CSS代码：

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

HTML代码：

<span>内容</span>

  • 1

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

4.2.2.3.外部引入

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

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

  • 1

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

4.2.3.CSS选择器
4.2.3.1.选择器语法
选择器名{
	样式属性1:样式属性值;
	样式属性2:样式属性值;
	……
}

  • 1
  • 2
  • 3
  • 4
  • 5
注意：此时选择器的样式，不再写在标签内了，而是定义在一段<style>标签内，这一段<style>标签可以写在页面内的任意位置，但推荐将<style>标签统一放在<head>标签中，代码如下：

  • 1
<head>
	<style type="text/css">
		选择器名{
	         样式属性名1:样式属性值;
	         样式属性名2:样式属性值;
 			  …….
		}
	</style>
</head>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
4.2.3.2.通用选择器

通用选择器：可以选择到所有的标签元素，使用*作为选择器名称，语法：

*{
	样式
}

  • 1
  • 2
  • 3

注意：
1.通用选择器可以选择到所有标签元素，并将其附属的样式作用于所有标签，这可以说是通用选择器的优点，但同时这也是缺点；
2.因为浏览器在显示效果的时候需要加载选择器指定的标签中的指定样式，最后展现效果，这个过程叫渲染；

4.2.3.3.标签选择器/元素选择器
标签名{
	样式
}

  • 1
  • 2
  • 3
4.2.3.4.类选择器
.class属性值{
	样式
}

  • 1
  • 2
  • 3

1.class属性是CSS中的通用属性，给标签定义class属性，类选择器再使用class属性值；
2.选择器器名前面有一个点【.】；
3.不同标签可以采用相同的class值；

4.2.3.5. ID选择器
#id值{
	样式
}

  • 1
  • 2
  • 3

1.所有标签都有id属性，给标签定义id属性，id选择器再使用id属性值
2.讨论：多个标签中的class属性可以取同样的值，那么ID属性中可以如此吗？
(1)在多个不同标签中定义id属性，id属性取值相同，在CSS中样式会生效，但是ID属性的含义是为了保持每个标签的唯一性，所以取值应当唯一，否则极容易出现问题；

5.课程总结

5.1.重点

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

5.2.难点

1.表格；
2.表单；

5.3.如何掌握

1.课上认真听课；
2.完成课后练习；
3.抓住课程重点；
4.学会参考说明手册；

5.4.排错技巧

1.浏览器控制台（F12），查看错误提示；
2.Html语法和CSS语法问题；

6.常见问题

7.课后练习

1.课堂代码1-2遍；
2.完成以下注册页面； （预计60分钟完成）
在这里插入图片描述
提示：
1.使用表格table进行页面的整体布局；
2.合理使用colspan和rowspan；
3.定义class属性，统一右对齐；
4.使用span定义*的样式；

8.面试题

9.扩展知识或课外阅读推荐（可选）

9.1.扩展知识
9.2.课外阅读
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/261074
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号