JavaEE总结(1)——html

ゞ浴缸里的玫瑰 2022-04-22 07:22 140阅读 0赞

# **JavaEE()** #

# **HTML&CSS****.** #

**修改工作空间编码【UTF-8】**

Eclipse中修改工作空间编码：

Window—>Preference—>General—>workspace—>Text File Encoding

**创建静态网站**

右键—>New—>Project—>Web—>Static Web Project

**HTML**的注释快捷键和后台代码一致，表现形式为：

**C/S软件和B/S软件区别**

1.  1.  1.  1.  问题：什么是C/S

C/S架构：客户端和服务器端架构，比如我们使用的QQ、Foxmail等

1.  1.  1.  1.  问题：什么是B/S

B/S架构：浏览器和服务器结构，比如我们使用淘宝、京东、百度等

**HTML语法**

<标签名 属性名=”值”>内容</标签名>

有些是双标签 <html> </html>

有些是单标签 <br />

**HTML文档基本结构**

<html>

</html>

html: 标签告知浏览器其自身是一个 HTML 文档。

head: 标签用于定义文档的头部（文档的描述信息）。

body: 标签用于定义文档的主体（文档的主体内容）。

**表格标签**

**语法**

一般来说，定义表格之后需要指定宽高，使用border指定表格的边框

<tr>

</tr>

<tr>

</tr>

</table>

<table>标签元素：定义一个表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

<tr>标签元素：定义表格中的行，表格行中包含一个或多个th或td元素

<th>标签元素：定义表格内的单元格

<td>标签元素：定义普通单元格

**表格行列合并**

【注意：】因为表格中的单元格构成了表格，所以表格中的行列合并都是作用于单元格上

colspan：合并列

取值规则：合并n列，取值为n，同时删除当前tr下的n-1个单元格

rowspan：合并行

取值规则：合并n行，取值为n，同时依次删除与当前行同级的n-1个tr下的一个单元格

三行两列的表格，第一行中单元格合并，第二行中第一列进行行合并

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

**图片标签**

**语法**

src属性：指示图片的存储路径

**web中的路径问题**

【绝对路径】

绝对路径以协议（http://、https://、file://）或者以“/”作为前缀，例：

[http://www.baidu.com][http_www.baidu.com]

[https://www.baidu.com][https_www.baidu.com]

file:///c:/1.JPG

【相对路径】

以文件本身为参照路径进行定位

./  代表当前路径

../ 代表上一层路径

**超链接标签**

**语法**

href属性：指示超链接需要链接的位置

target属性：指示该超链接以什么样的方式进行跳转

\_blank：在新的标签页打开

\_self：在当前标签页中打开，默认取值

**表单标签**

**语法**

表单元素

</form>

form标签：用于定义表单

action属性：定义表单中的数据提交的位置

method属性：定义表单数据的提交方式

get：通过url提交数据，有大小限制，不安全

post：无大小限制，安全

**表单元素**

【注意】：

1.表单元素中除开按钮之外，都应当具备name属性

2.个别标签name属性取值要保持一致：单选、多选

name属性：属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

按钮不需要定义name属性，因为按钮的值不需要提交

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

**input标签：定义文本框、密码框、单选、多选、文件上传、隐藏域等**

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

text：文本框

password：密码框

radio：单选框

checkbox：多选框

file：文件上传

hidden：隐藏域

submit：自动提交按钮

button：普通提交按钮

reset：重置按钮

image：图片按钮

value属性：标签包含的数据

对于不同的type类型，value属性的用法也不一致：

1. type=”button”、”reset”、”submit” — 定义按钮上的显示文本

2. type="text", "password", "hidden" — 定义输入字段的初始值

3. type="checkbox", "radio", "image" — 定义与输入相关联的值

注释：<input  type="checkbox">和<input  type="radio">中必须设置 value 属性

注释：value 属性无法与 <input  type="file"> 一同使用

**textarea标签：定义多行文本域**

</textarea>

rows 属性规定 textarea 的可见高度。以行数计算

cols 属性规定 textarea 的可见宽度。以平均字符数计算

多行文本域可以被拖动，如何解决？

style=”resize:none;”

**select标签：定义下拉框**

</select>

option 元素定义下拉列表中的一个选项

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示

option 元素位于 select 元素内部

注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。

提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

value 属性：规定在表单被提交时被发送到服务器的值。

<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如果没有定义value属性，则将两个标签之间的值发送给服务器。

**DIV和SPAN**

标签的作用是将想要显示的内容标记并展示特殊的效果，但div span两个标签没有特殊的功能，只是作为一个内容容器，不过使用频率很高，主要与CSS配合使用来展示效果。

span是行内标签，只占据包裹的内容长度，而div是块级标签，会独占一行

代码如下：

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

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

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

1.  **CSS**

**CSS概述**

CSS是(Cascading Style Sheets)层叠样式表的缩写 ，简称样式表

作用：网页设计者使用CSS可以定义元素的样式，直白的讲就是让网页更好看

CSS代码中注释：/\*注释内容\*/

CSS对大小写不敏感

**CSS基础**

CSS语法

单个样式写法：

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

多个样式写法：

<标签名 style=”样式属性1:属性值;样式属性2:属性值;”>源代码教育</标签名>

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

CSS选择器

**选择器语法**

选择器名\{

样式属性1:样式属性值;

样式属性2:样式属性值;

……

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

<head>

选择器名\{

样式属性名1:样式属性值;

样式属性名2:样式属性值;

…….

</style>

</head>

**基本选择器**

**通用选择器**

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

\*\{

样式

通用选择器可以选择到所有标签元素，并将其附属的样式作用于所有标签，这可以说是通用选择器的优点，但同时这也是缺点。

因为浏览器在显示效果的时候需要加载选择器指定的标签中的指定样式，最后展现效果，这个过程叫渲染

示例代码

**标签选择器**

标签名\{

样式

标签选择器选择的是符合当前标签名的所有标签

**类选择器**

.class属性值\{

样式

所有标签都有一个class属性，给标签定义class属性，类选择器再使用class值选择器名格式：.class值。

注释：选择器器名前面有一个点【.】。

注释：不同标签可以采用相同的class值。

**ID选择器**

\#id值\{

样式

所有标签都有id属性，给标签定义id属性，id选择器再使用id值

选择器格式：\#id值

讨论：

多个标签中的class属性可以取同样的值，那么ID属性中可以如此吗？

在多个不同标签中定义id属性，id属性取值相同，在CSS中样式会生效，但是ID属性的含义是为了保持每个标签的唯一性，所以取值应当唯一，否则极容易出现问题。

1.  1.  1.  **CSS引入方式**

**行内样式**

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

行内样式在前面的课程中已经详细讲解过，在此就不多赘述了

使用场景：

只有当某一个标签需要独一无二的样式的时候使用，尽量不使用

**页面嵌入**

CSS代码

span\{

样式属性1:样式属性值;

样式属性2:样式属性值;

…

</style>

HTML代码

页面嵌入的方式需要搭配选择器使用，写在<style>标签内。这一段<style>标签可以放在页面内的任意位置。

使用场景：

对页面内的样式进行集中定义

**外部引入**

外部引入的方式即为单独建立一个CSS文件，然后将这个CSS文件与需要样式的网页关联起来

[http_www.baidu.com]: http://www.baidu.com
[https_www.baidu.com]: https://www.baidu.com

JavaEE总结(1)——html

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaEE总结(6)——JSP

相关 JavaEE总结(5)——Servlet

相关 JavaEE总结(2)——注解&反射

相关 JavaEE总结(3)——Mysql

相关 JavaEE总结(2)——注解&反射

相关 4.1JavaEE-工具

相关 Javaee技术目的总结

相关 1_JAVAEE简介

相关 JavaEE总结(1)——html

相关 html5总结（1）