JavaWeb——HTML和CSS
HTML和CSS
- HTML
-
- HTML 文件的书写规范
- HTML 标签介绍
- Web中文件路径表示
- 特殊字符
- 表格标签
- 表单标签
-
- 表单的提交
- 其他标签
- CSS
-
- CSS 和HTML 的结合方式
- CSS 选择器
-
- 标签名选择器
- id 选择器
- class 选择器（类选择器）
- 组合选择器
网页的组成
页面由三部分内容组成：内容（结构）、表现、行为。
内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用HTML技术来展示。
表现：指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用
CSS 技术实现
行为：指的是页面中元素与输入设备交互的响应。一般使用JavaScript技术实现。
HTML
HTML(Hyper Text Markup Language) :超文本标记语言
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画
面如何安排，图片如何显示等）
HTML 文件它不需要编译，直接由浏览器进行解析执行。
HTML 文件的书写规范
<html> 表示整个html 页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面的主体内容
页面主体内容
</body>
</html> 表示整个html 页面的结束
Html的代码注释<!-- 这是html 注释，可以在页面右键查看源代码中看到-->
HTML 标签介绍
- 标签的格式:
<标签名>封装的数据 - 标签名大小写不敏感。
- 标签拥有自己的属性。
i. 分为基本属性：bgcolor=“red” 可以修改简单的样式效果
ii.事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。 - 标签又分为，单标签和双标签。
i. 单标签格式： <标签名/> br 换行hr 水平线
ii. 双标签格式: <标签名> …封装的数据…
Web中文件路径表示
在web 中路径分为相对路径和绝对路径两种
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件,相当于文件名 ./ 可以省略
绝对路径：
格式: http://ip:port/工程名/资源路径
特殊字符
常用的特殊字符：
<（小于号）： <
>（大于号）： >
空格的特殊字符：
表格标签
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对页面的对齐方式
cellSpacing 设置单元格间距
colspan 属性设置跨列
rowspan 属性设置跨行
tr 是行标签
th 是表头标签
td 是单元格标签
align设置单元格对齐方式
b 是加粗标签
1.1
1.2
表单标签
form 标签是表单标签
input type = text 是文件输入框 value设置默认显示内容
input type = password 密码输入框 size 文本框长度，maxLength 最大字符长度
input type = radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
input type = checkbox 是复选框 checked="checked"表示默认选中
input type = reset 是重置按钮 value属性修改按钮上的文本
input type = submit 是提交按钮 value属性修改按钮上的文本
input type = button 是按钮 value属性修改按钮上的文本
input type = file 是文件上传域
input type = hidden 是隐藏域 当我们要发送某些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected = "selected"表示默认选中
textarea 表示多行文本输入框 （起始标签和结束标签的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
表单的提交
action属性设置提交的服务器地址
method属性设置提交的方式Get（默认值）或Post
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性
2、单项、复选（下拉列表中的Option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中
4、设置了disabled="disabled"属性，它的值将不会被提交
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数]
比如：https://localhost:8080/?
请求参数的格式是：name=value&name=value
比如： password=123& sex=boy&hobby=java
2、不安全
3、他有数据长度的限制
POST请求的特点是：
1、浏览器地址栏中只有action属性值（服务器地址）
2、相对于GET请求要安全
3、理论上没有数据长度的限制
其他标签
div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
p 段落标签 默认会在段落的上方和下方各空出一行来。（如果有就不再空）
CSS
CSS (cascading style sheet)是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS 语法规则：
选择器{
属性:值；
属性：值；
…
}
选择器：浏览器根据“选择器”决定受CSS 样式影响的HTML 元素（标签）。
属性(property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
CSS 注释：/*注释内容*/
CSS 和HTML 的结合方式
方式一：
在标签的style 属性上设置”key:value value;”，修改标签样式。
这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 需求：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。-->
<div style="border:1px solid red; width: 200px; height: 200px;background-color:green ;text-align: center">div 标签1</div>
<div style="border:1px solid red;">div 标签2</div>
<span style="border:1px solid red;">span 标签1</span>
<span style="border:1px solid red;">span 标签2</span>
</body>
</html>
方式二：
在head 标签中，使用style 标签来定义各种自己需要的css 样式。
格式如下：
xxx {
Key : value value;
}
这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- style标签专门用来定义css样式代码-->
<style type="text/css">
/* 需求：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。*/
div{
border:1px solid red;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div>div 标签1</div>
<div>div 标签2</div>
<div>div 标签1</div>
<div>div 标签2</div>
<div>div 标签1</div>
<div>div 标签2</div>
<span>span 标签1</span>
<span>span 标签1</span>
<span>span 标签2</span>
<span>span 标签2</span>
</body>
</html>
方式三：
把css 样式写成一个单独的css 文件，再通过link 标签引入即可复用。
使用html 的 标签导入css 样式文件。
CSS文件内容：
div{
border:1px solid red;
}
span{
border: 1px solid red;
}
HTML文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- link 标签专门用来引用css样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div 标签1</div>
<div>div 标签2</div>
<div>div 标签1</div>
<div>div 标签2</div>
<div>div 标签1</div>
<div>div 标签2</div>
<span>span 标签1</span>
<span>span 标签1</span>
<span>span 标签2</span>
<span>span 标签2</span>
</body>
</html>
CSS 选择器
标签名选择器
标签名选择器的格式是：
标签名{
属性：值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式。
id 选择器
id 选择器的格式是：
#id 属性值{
属性：值;
}
id 选择器，可以让我们通过id 属性选择性的去使用这个样式。
class 选择器（类选择器）
class 类型选择器的格式是：
.class 属性值{
属性：值;
}
class 类型选择器，可以通过class 属性有效的选择性地去使用这个样式。
组合选择器
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性：值;
}
组合选择器可以让多个选择器共用同一个css 样式代码。