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 标签介绍

  1. 标签的格式:
    <标签名>封装的数据
  2. 标签名大小写不敏感
  3. 标签拥有自己的属性
    i. 分为基本属性:bgcolor=“red” 可以修改简单的样式效果
    ii.事件属性: οnclick=“alert(‘你好!’);” 可以直接设置事件响应后的代码。
  4. 标签又分为,单标签和双标签。
    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 样式代码。

你可能感兴趣的:(笔记,JavaWeb,html,css,web,java,javaweb)