网页的组成
页面由三部分内容组成:内容(结构)、表现、行为。
内容(结构):是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用HTML技术来展示。
表现:指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用
CSS 技术实现
行为:指的是页面中元素与输入设备交互的响应。一般使用JavaScript技术实现。
HTML(Hyper Text Markup Language) :超文本标记语言
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画
面如何安排,图片如何显示等)
HTML 文件它不需要编译,直接由浏览器进行解析执行。
<html> 表示整个html 页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面的主体内容
页面主体内容
</body>
</html> 表示整个html 页面的结束
Html的代码注释<!-- 这是html 注释,可以在页面右键查看源代码中看到-->
在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 (cascading style sheet)是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS 语法规则:
选择器{
属性:值;
属性:值;
…
}
选择器:浏览器根据“选择器”决定受CSS 样式影响的HTML 元素(标签)。
属性(property) 是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p {color: blue}
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
CSS 注释:/*注释内容*/
方式一:
在标签的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>
标签名选择器的格式是:
标签名{
属性:值;
}
标签名选择器,可以决定哪些标签被动的使用这个样式。
id 选择器的格式是:
#id 属性值{
属性:值;
}
id 选择器,可以让我们通过id 属性选择性的去使用这个样式。
class 类型选择器的格式是:
.class 属性值{
属性:值;
}
class 类型选择器,可以通过class 属性有效的选择性地去使用这个样式。
组合选择器的格式是:
选择器1,选择器2,选择器n{
属性:值;
}
组合选择器可以让多个选择器共用同一个css 样式代码。