JavaWeb_Day2(HTML CSS)

最新推荐文章于 2023-06-20 20:03:27 发布

Vincent_frost

最新推荐文章于 2023-06-20 20:03:27 发布

阅读量109

点赞数 1

分类专栏： JAVAWeb

本文链接：https://blog.csdn.net/YiRenGengShangBuQi/article/details/118069562

版权

JAVAWeb 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

from标签发送服务器

<!--
   form 表单标签
        action 设置提交的服务器地址
        method 提交方式get(默认)或者post
     表单提交的时候数据没发给服务器的三种情况
        1.表单项没有name属性值
        2.单选，复选（下拉列表中的option）都需要添加value属性
        3.表单项不在提交的form标签中
     GET请求的特点：
        1.浏览器地址栏中的地址是：action属性【+？+请求参数】
            请求参数格式··=··&··=··&···=·
        2.不安全
        3.有数据长度的限制 
-->

其他标签

<!--div span p 标签演示
        div 默认独占1行
        span 长度是封装数据的长度
        p段落标签   默认会在段落的上方或下方各空一行
    -->
    <div>div标签</div>
    <div>div标签2</div>
    <span>span标签</span>
    <span>span标签2</span>
    <p>p标签</p>
    <p>p标签2</p>

在这里插入图片描述

CSS

CSS介绍

CSS语法规则

在这里插入图片描述
注释/* ```*/

CSS与HTML结合

1.在标签的style属性

设置“key:value value”，修改标签样式

<div style="border: 1px solid #ff0000">div标签</div>

缺点
1.标签多了，代码量太大
2.可读性差
3.CSS代码没有复用性可言

2.在head标签中，使用style标签定义css样式

格式：

###{
	Key:value value;
}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--syyle标签专门定义css样式代码-->
    <style type="text/css">
        div{
            border: 2px solid royalblue;
        }
        span{
            border: 2px solid royalblue;
        }
    </style>
</head>

缺点
1.只能在同一页面那复用代码
2.维护不方便，成千上万页面都要修改

3.把css样式写成单独css文件，通过link标签引入

新建stylesheat.css文件，正常写css代码，在html的head标签里写link标签

div{
    border: 1px red solid;
}
span{
    border: 1px red solid;
}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>

CSS选择器

标签名选择器

可以决定那些标签被动的使用这个样式
格式：

标签{
	属性：值;
}

<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border: 1px yellow solid;
			color: blue;
			font-size: 30px;
		}
		span{
			border: 5px blue dashed;
			color: yellow;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	
</body>

id选择器

格式：

#id{
	属性：值;
}

<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">
		#id001{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		#id002{
			color: red;
			font-size: 20px;
			border: 5px blue dotted;
		}
	</style>
</head>

<!-- 
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>

类选择器

格式：

.calss 属性值{
	属性：值;
}

可以通过class属性有效使用样式

<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		.class02{
			color: gray;
			font-size: 26px;
			border: 1px red solid;
		}
	</style>
</head>

<!-- 
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->
	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>

组合选择器

格式：

选择器1，选择器2，···{
	属性：值;
}

CSS常用样式

div{
	color
	width
	height
	border
	backgroundcolor
	font-size
	margin-right 块居中
	margin-left
	text-align：center 文字居中
	}
a{
	text-decoration: none;超链接去下划线
}
table{
            border: 1px red solid;
            border-collapse;边框合并
        }

Vincent_frost

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb_Day2(HTML CSS)

from标签发送服务器<!-- form 表单标签 action 设置提交的服务器地址 method 提交方式get(默认)或者post 表单提交的时候数据没发给服务器的三种情况 1.表单项没有name属性值 2.单选，复选（下拉列表中的option）都需要添加value属性 3.表单项不在提交的form标签中 GET请求的特点： 1.浏览器地址栏中的地址是：action属性【+
复制链接

扫一扫

专栏目录