JavaWeb学习笔记01--HTML和CSS基础

最新推荐文章于 2024-05-28 22:54:56 发布

二荆条3.0

最新推荐文章于 2024-05-28 22:54:56 发布

阅读量790

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/sfwefqe/article/details/121655939

版权

一.简介

1.B/S软件的结构
即浏览器Browser/服务器Server结构

2.前端开发流程
网页设计师根据需求设计网页–前端工程师将设计做成静态网页–后台工程师将静态网页修改成动态网页（java程序员）

3.网页的组成部分
内容（结构），表现，行为

4.HTML简介
超文本标记语言，HTML通过标签来显示网页的各个部分。

5.创建HTML文件
（1）创建一个web工程（静态工程）
（2）在工程下创建HTML页面
在这里插入图片描述
技巧：html的代码注释，批量加注释快捷键ctrl+shift+/

二.HTML基础内容

1.HTML标签介绍
(1)<标签名>封装的数据/标签名>
(2)标签名大小写不敏感
(3)标签拥有自己的属性:
基本属性如 bgcolor=“red”,可以修改简单的样式效果；
事件属性如οnclick=“alert(‘你好!’);”,可以直接设置事件响应后的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body >
 	hello
 	<button onclick="alert('妮姐好美')">按钮</button>
</body>
</html>

在这里插入图片描述

2.标签又分为单标签和双标签
(1)单标签格式：<标签名/> 如

(2)双标签格式：<标签名>封装的数据</标签名> 如

3.标签的语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签语法</title>
</head>
<body>

	<!-- 标签不能交叉嵌套 -->
	正确：<div><span>加油，大学生</span></div>
	错误：<div><span>加油，大学生</div></span>
	<hr/>
	
	<!-- 标签必须正确闭合 -->
	正确：<div>加油，大学生</div>
	错误：<div>加油，大学生
	<hr/>
	
	<!-- 没有内容的标签 -->
	正确：<br/>1
	错误：<br>2
	<hr/>
	
	<!-- 属性必须要有值，属性值必须要加引号 -->
	正确：<font color="blue">加油，大学生</font>
	错误：<font color=blue>加油，大学生</font>
	错误：<font>加油，大学生</font>
	<hr/>
	
	<!-- 注释不能嵌套 -->
	正确:<!-- 注释内容 --><br/>
	错误:<!-- 注释内容<!--注释内容--> -->
	<hr/>
	有些错误浏览器可以帮助修复，但从语法上面说是错误的
</body>
</html>

在这里插入图片描述

4.常用标签介绍文档：W3school文档

(1)font标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签</title>
</head>
<body>
	<!-- 字体标签
	需求1：在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色
	font标签是字体标签，它可以用来修改文本的字体(face)颜色(color)大小(size)
	 -->
	<font color="red" face="楷体" size="7">我是字体标签</font>
</body>
</

在这里插入图片描述

(2)特殊字符
浏览器会自动把标签转换成它们应有的功能而不是直接输出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
	<!-- 特殊字符 
	需求1：把<br>换行标签变成文本转换成字符显示在页面上
	常用的特殊字符
		< --- &lt;
		> --- &gt;
	     空格 --- &nbsp;
	-->
	我是&lt;br&gt;标签<br/>
	妮姐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好美
</body>
</html>

在这里插入图片描述

(3)标题标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签</title>
</head>
<body>
	<!-- 标题标签
	需求1：演示标题1到标题6 
	h1到h6都是标题标签
	h1最大，h6最小
	align属性是对齐属性
		left  左对齐(默认)
		center 居中
		right 右对齐
	-->
	<h1 align="left">标题1</h1>
	<h2 align="right">标题2</h2>
	<h3 align="center">标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
	
</body>
</html>

(4)超链接 重点必须掌握

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接</title>
</head>
<body>
	<!-- a标签是超链接
		 	href属性设置连接的地址
		 	target属性设置哪个目标进行跳转
		 		_self   表示当前页面（默认值）
		 		_blank   表示打开新页面来进行跳转 -->
	<a href="https://blog.csdn.net/sfwefqe?spm=3001.5343">我的主页</a><br/>
	<a href="https://blog.csdn.net/sfwefqe?spm=3001.5343" target="_self">我的主页_self</a><br/>
	<a href="https://blog.csdn.net/sfwefqe?spm=3001.5343" target="_blank">我的主页_blank</a><br/>
</body>
</html>

(5)列表标签有序列表无序列表（和浏览器有关的或多或少都有一些兼容问题)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.列表标签</title>
</head>
<body>
	<!-- 需求1：使用无列表方式把东北F4,赵四，刘能，小沈阳，宋小宝展示出来 
	ul 是无序列表
			type属性可以修改列表项前面的符号
	li是列表项
	ol是有序列表
	-->
	<ul type="none">
		<li>赵四</li>
		<li>刘能</li>
		<li>小沈阳</li>
		<li>宋小宝</li>
	</ul>
</body>
</html>

赵四
刘能
小沈阳
宋小宝

(6)img标签可以在html页面上显示图片!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.img标签</title>
</head>
<body>
	<!-- 需求1：使用img标签显示一张美女的照片，并修改宽高，和边框属性
	img标签是图片标签，用来显示图片
		src属性可以设置图片的路径
		width属性设置图片的宽度
		height属性设置图片的高度
		border属性设置图片边框的大小
		alt属性设置当前指定路径找不到图片时，用来代替显示的文本内容
		
	在JavaSE中路径也分为相对路径和绝对路径
		相对路径：从工程名开始算
		绝对路径：盘符：//目录/文件名
	在Web中路径分为相对路径和绝对路径两种
		相对路径： .        表示当前文件所在的路径
				 ..       表示当前文件所在的上一级目录
				 文件名          表示当前文件所在目录的文件，相当于./文件名    ./可以省略
		绝对路径：
			正确格式是：http://ip:port/工程名/资源路径
			错误格式是：盘符：//目录/文件名
	 -->
	 <img src="../imgs/1000.jpg" width="100" height="200" border="1" alt="美女找不到" />
</body>
</html>

(7)表格标签非常重要，必须掌握

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>7.表格标签</title>
</head>
<body>
	<!-- 需求1：做一个带表头的，三行三列的表格并显示边框
	需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距
	
		table 标签是表格标签
			border 设置表格标签
			width 设置表格宽度
			height 设置表格高度
			align 设置表格相对页面的对齐方式
			cellspacing 设置单元格间距
			
		tr 行标签
		th 表头标签,自动执行加粗居中对齐操作
		td 是单元格标签
			align设置单元格文本对齐方式
			<b></b>文本加粗标签
	 -->
	<table align="center" border="1" width="300" height="300" cellspacing="0">
		<tr>
			<th>1.1</th>
			<th>1.2</th>
			<th>1.3</th>
		</tr>
		<tr>
			<th>2.1</th>
			<th>2.2</th>
			<th>2.3</th>
		</tr>
		<tr>
			<th>3.1</th>
			<th>3.2</th>
			<th>3.3</th>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述
**(8)表格跨行跨列标签

技巧：ctrl+x 删除**

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.跨行跨列标签</title>
</head>
<body>
	<!-- 需求1：
		新建一个五行五列的表格，
		第一行第一列的单元格要跨两列，
			colspan 属性设置跨列
		第二行第一列的单元格跨两行，
			rowspan 属性设置跨行
		第四行第四列的单元格跨两行两列， -->
	<table width="500" height="500" cellspacing="0" border="1">
		<tr>
			<th colspan="2">1.1</th>
			<th>1.3</th>
			<th>1.4</th>
			<th>1.5</th>
		</tr>
		<tr>
			<th rowspan="2">2.1</th>
			<th>2.2</th>
			<th>2.3</th>
			<th>2.4</th>
			<th>2.5</th>
		</tr>
		<tr>
			<th>3.2</th>
			<th>3.3</th>
			<th>3.4</th>
			<th>3.5</th>
		</tr>
		<tr>
			<th>4.1</th>
			<th>4.2</th>
			<th>4.3</th>
			<th colspan="2" rowspan="2">4.4</th>
		</tr>
		<tr>
			<th>5.1</th>
			<th>5.2</th>
			<th>5.3</th>
		</tr>
	</table>
</body>
</html>

8.跨行跨列标签

1.1		1.3	1.4	1.5
2.1	2.2	2.3	2.4	2.5
2.1	3.2	3.3	3.4	3.5
4.1	4.2	4.3	4.4
5.1	5.2	5.3	4.4

(9)了解iframe框架标签(内嵌窗口)
iframe标签它可以在一个html页面上打开一个小窗口，去加载一个单独的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.iframe标签</title>
</head>
<body>
	我是一个单独的完整的页面<br/>
	<!-- iframe标签可以在页面上开辟一个小区域显示一个单独的页面 
			iframe标签和a标签组合使用的步骤：
				1.在iframe标签中使用name属性定义一个名称
				2.在a标签的target属性上设置iframe的name的属性值
	-->
	<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
	</br>
	
	<ul>
		<li><a href="标签语法.html" target="abc">标签语法.html</a></li>
		<li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
		<li><a href="3.标题标签.html" target="abc">3.标题标签.html</a></li>
	</ul>
</body>
</html>

在这里插入图片描述

(10)表单标签重点，必须掌握
什么是表单？
表单就是html页面中用来手机用户信息的所有元素集合，然后把这些信息发送给服务器。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10.表单标签</title>
</head>
<body>
	<!-- 需求1：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别(单选),
	兴趣爱好(多选)，国籍(下拉列表)，隐藏域，自我评价(多行文本域)，重置，提交 -->
	
		<!-- form标签就是表单 
			input type=text	         是文件输入框   value设置默认显示内容
			input type=password 是密码输入框   value设置默认显示内容
			input type=radio    是单选框           name属性可以对其进行分组 check="checked"表示默认选中
			input type=checkbox 是复选框           check="checked"表示默认选中
			input type=reset    是重置按钮       value属性修改按钮上的文本
			input type=submit   是提交按钮       value属性修改按钮上的文本
			input type=button   是按钮               value属性修改按钮上的文本
			input type=file     是文件上传域
			input type=hidden   是隐藏域           当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域(提交的时候同时发送给服务器）
			
			select 标签是下拉列表框
				option是下拉列表框中的选项 selected="selected"设置默认选中
				
			textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值)
				row 属性设置可以显示几行的高度
				cols 属性设置每行可以显示几个字符宽度
		-->
		
		<form>
			用户名称：<input type="text" value="默认值"/><br/>
			用户密码：<input type="password" value="abc"><br/>
			确认密码：<input type="password" value="abc"><br/>
			性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" 
			check="checked" />女<br/>
			兴趣爱好：<input type="checkbox"/>Java<input type="checkbox"/>JavaScript
			<input type="checkbox"/>C++<br/>
			国籍：<select>
					<option>--请选择国籍--</option>
					<option>中国</option>
					<option selected="selected">美国</option>
					<option>日本</option>
				 </select></br>
			自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
			<input type="reset" value="重置">
			<input type="submit" value="提交">
			<input type="file" value="提交文件">
		</form>
</body>
</html>

在这里插入图片描述
为了使表单更好看，我们使用表格来规范表单的格式：

<form>
			<h1 align="center">用户注册</h1>
			<table align="center">
				<tr>
					<td>用户名称：</td>
					<td><input type="text" value="默认值"/></td>	
				</tr>
				<tr>
					<td>用户密码：</td>
					<td><input type="password" value="abc"></td>	
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" value="abc"></td>	
				</tr>
				<tr>
					<td>性别：</td>
					<td><input type="radio" name="sex"/>男
					<input type="radio" name="sex" check="checked" />女</td>	
				</tr>
				<tr>
					<td>兴趣爱好：</td>
					<td>
						<input type="checkbox"/>Java
						<input type="checkbox"/>JavaScript
						<input type="checkbox"/>C++
					</td>	
				</tr>
				<tr>
					<td>国籍：</td>
					<td>
						<select>
							<option>--请选择国籍--</option>
							<option>中国</option>
							<option selected="selected">美国</option>
							<option>日本</option>
				 		</select>
				 	</td>	
				</tr>
				<tr>
					<td>自我评价：</td>
					<td><textarea rows="10" cols="20">我才是默认值</textarea></td>	
				</tr>
				<tr>
					<td><input type="reset" value="重置"></td>
					<td><input type="submit" value="提交"></td>	
					<td><input type="file" value="提交文件"></td>	
				</tr>
			</table>
		</form>

11)表单提交的细节

之前讲的都是界面展示的内容，并没有关于提交到服务器的内容。
from标签是表单标签：

<注释的内容是重中之重>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11.表单实现的细节</title>
</head>
<body>
	<!-- action属性设置提交的服务器地址
		method属性设置提交的方式，GET(默认值)或POST**
		
		表单提交的时候，数据没有发送给服务器的三种情况：
			1.表单项没有name属性(只要是想要发送给服务器，就逗得加上name属性)
			2.单选，复选(下拉列表中的option标签)都需要添加value属性，以便发送给服务器
			3.表单项不在提交的form标签中
			
		GET请求的特点是：
			1.浏览器地址栏中的地址是：action属性值[+?+请求参数]
				(如action属性值：http://localhost:8080/)
				请求参数的格式是：name=value&name=value(如username=795&password=648368)
			2.不安全：注册时的密码会显示在地址栏上面
			3.有数据长度的限制：如果表单值包括丰 ASCII字符或者超过100个字符，则必须使用POST请求
			
		POST请求的特点是：
			1.浏览器地址栏中只有action属性值，即只有服务器地址
			2.相对于GET请求要安全
			3.理论上没有数据长度的限制
			
	1.分析URL：http://localhost:8080/action=login&username=795&password=648368&sex=on&hobby=on&hobby=on&country=%E4%B8%AD%E5%9B%BD		
		action=login
		username=795
		password=648368
		sex=on    on表示选上，off表示没选上
		hobby=on
		hobby=on  
		country=%E4%B8%AD%E5%9B%BD
	2.分析URL：http://localhost:8080/?action=login&username=795&password=648368&sex=girl&hobby=java&hobby=js&hobby=cpp&country=China
	 	action=login
		username=795
		password=648368
		sex=girl  添加value属性后就会把value的值提交给服务器
		hobby=java
		hobby=js
		hobby=cpp
		country=China
	3.分析URL：http://localhost:8080/?username=795&password=648368&sex=girl&hobby=java&hobby=js&hobby=cpp&country=China
	 	username=795
		password=648368
		sex=girl
		hobby=java
		hobby=js
		hobby=cpp
		country=China
	
	POST请求提交表单后URL地址：http://localhost:8080/
	 -->
		<form action="http://localhost:8080" method="post"/>
			<input type="hidden" name="action" value="login">
			<h1 align="center">用户注册</h1>
			<table align="center">
				<tr>
					<td>用户名称：</td>
					<td><input type="text" name="username" value="默认值"/></td>	
				</tr>
				<tr>
					<td>用户密码：</td>
					<td><input type="password" name="password" value="abc"></td>	
				</tr>
				<tr>
					<td>性别：</td>
					<td><input type="radio" name="sex" value="boy"/>男
					<input type="radio" name="sex" value="girl" check="checked" />女</td>	
				</tr>
				<tr>
					<td>兴趣爱好：</td>
					<td>
						<input type="checkbox" name="hobby" value="java"/>Java
						<input type="checkbox" name="hobby" value="js"/>JavaScript
						<input type="checkbox" name="hobby" value="cpp"/>C++
					</td>	
				</tr>
				<tr>
					<td>国籍：</td>
					<td>
						<select name="country">
							<option value="none">--请选择国籍--</option>
							<option value="China">中国</option>
							<option value="USA" selected="selected">美国</option>
							<option value="Japan">日本</option>
				 		</select>
				 	</td>	
				</tr>
				<tr>
					<td>自我评价：</td>
					<td><textarea naem="desc" rows="10" cols="20" >我才是默认值</textarea></td>	
				</tr>
				<tr>
					<td><input type="reset" value="重置"></td>
					<td><input type="submit" value="提交"></td>	
					<td><input type="file" value="提交文件"></td>	<!-- 功能按钮，不需要跨越服务器 -->
				</tr>
			</table>
		</form>
</body>
</html>

(12)其他标签：div,span,p标签的演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11.其他标签</title>
</head>
<body>
	<!-- 需求1：div,span,p标签的演示
		 div标签		默认独占一行
		 span标签  	它的长度是封装的数据的长度
		 p段落标签	默认会在段落的上方或下方各空出一行来(如果已有就不再空)
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	<p>p段落标签1</p>
	<p>p段落标签2</p>
</body>
</html>

11.其他标签

div标签1

div标签2

span标签1 span标签2

p段落标签1

p段落标签2

三.CSS技术文档：CSS2.0.chm

1.CSS技术介绍
css是层叠样式表单，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.CSS语法规则
在这里插入图片描述
选择器：浏览器根据"选择器"决定受CSS样式影响的HTML元素(标签)
属性(property)：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并且由花括号包围，这样就组成了一个完整的样式声明(declaration),例如：p{color:blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)，例如：
p{
color:red;
font-size:30px;
}
注意：一般每行只描述一个属性
css注释：/注释内容/

3.CSS和HTML的结合使用方式
(1).第一种：在标签的style属性上设置“key:value value",修改标签样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一种结合使用方法</title>
</head>
<body>
	<!-- 需求1：分别定义两个div,span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色
	 -->
	<div style="border: 1px solid red;">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>

在这里插入图片描述
问题：这种方式的缺点？
1.如果标签多了，样式多了，代码量非常大。
2.可读性非常差。
3.CSS代码没什么复用性可言。

(2).第二种：在head标签中使用style标签来定义各种自己需要的CSS样式。样式如下：
xxx {
key : value value;
}
技巧：ctrl + r 替换文本 (idea)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>第二种结合方式</title>
	<!-- style标签专门用来定义css样式代码 -->
	<style type="text/css">
		div{
			border:1px solid red;
		}
		span{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<!-- 需求1：分别定义两个div,span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

在这里插入图片描述
问题：这种方式的缺点？
1.只能在同一页面内复用代码，不能在多个页面中复用css代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。

(3).第三种:把css样式写成一个单独的css文件，再通过link标签引入即可复用。
使用html的 linl rel=“stylesheet” type=“text/css” href="./styles.css"/ 标签导入css样式文件（没加<>)。

新建一个.css文件：

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

.html文件:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>第三种结合方式</title>
	<!-- link标签专门用来引入css代码 -->
	<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
	<!-- 需求1：分别定义两个div,span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

效果：在这里插入图片描述

4.CSS选择器

(1)标签名选择器：标签名选择器可以决定哪些标签被动的使用这个样式。
标签名选择器的样式是：
标签名{
属性：值；
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border:1px solid yellow;
			color:blue;
			font-size：30px;
		}
		span{
			border:5px dashed blue;
			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>
</html>

在这里插入图片描述
(2)id选择器：id选择器可以让我们通过id属性选择性的去使用这个样式。
id选择器的格式是：
#id 属性值{
属性：值；
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>id选择器</title>
	<style type="text/css">
		
		#id001{
			color:bule;
			font-size:30px;
			border:1px yellow solid;
		}
		
		#id002{
			color:red;
			font-size:20px;
			border:5px blue dotted;
		}
		
	</style>
</head>
<body>
	<!-- 
	需求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>
</body>
</html>

在这里插入图片描述
(3)class选择器(类型选择器）：class类型选择器可以通过class属性有效的选择性地去使用这个样式。
class类型选择器的格式是：
class 属性值{
属性：值；
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color:blue;
			font-size:30px;
			border:1px solid yellow;
		}
		.class02{
			color:grey;
			font-size:26px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<!-- 	
		需求1：修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线。
		需求2：修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素，边框为1像素红色实线。 
	-->
	<div class="class01">div标签class01</div>
	<div class="class02">div标签class02</div>
	<span class="class01">span标签class01</span>
	<span class="class02">span标签class02</span>
</body>
</html>

在这里插入图片描述
(4)组合选择器：组合选择器可以让多哥选择器公用同一个css样式代码。
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性:值;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>组合选择器</title>
	<style type="text/css">
		.class01,#id01{
			color:blue;
			font-size:20px;
			border:1px yellow solid;
		}
	</style>
</head>
<body>
	<!-- 
		需求1：修改class="class01"的div标签 和 id="id01" 所有的span标签，字体颜色为蓝色，
		字体大小为20个像素，边框为1像素黄色实线。
	 -->
	 
	 <div class="class01">div标签class01</div><br/>
	 <span id="id01">span标签</span><br/>
	 <div>div标签</div><br/>
	 <spa>span标签</span><br/>
</body>
</html>

在这里插入图片描述

5.CSS常用样式
(1)字体颜色
color:red;
颜色可以写颜色名如:black,blue,red,green等
颜色也可以写rgb值和十六进制表示值：如rgb(255,0,0), #00F6DE，如果写十六进制值必须加#

(2)宽度
width:19px;
宽度可以写像素值：19px；
也可以写百分比值：20%；

(3)高度
height:20px;
高度可以写像素值：10px;
也可以写百分比值：20%；

(4)背景颜色
background-color：#0F2D4C

(5)字体样式
color：#FF0000；字体颜色红色
font-size：20px；字体大小

(6)红色1像素实线边框
border：1px solid red；

(7)DIV居中(相对于整个页面)
margin-left:auto;
margin-right:auto;

(8)文本居中
text-align:center；

(9)超链接去下划线
text-decoration:none;

(10)表格细线
table{
border:1px solid black;/设置边框/
border-collapse:collapse;/将边框合并/
}
td,th{
border:1px solid black;/设置边框/
}

(11)列表去除修饰
ul{
list-style:none;
}

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>字体样式07</title>
	<style type="text/css">
		
		div{
			color:red;
			border:1px yellow solid;
			width:300px;
			height:300px;
			background-color:green;
			font-size:30px;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
		}
		
		table{
			border:1px red solid;
			border-collapse:collaspe;
		}
		
		td{
			border:1px red solid;
		}
		
		a{
			text-decoration:none;
		}
		
		ul{
			list-style:none;
		}
		
	</style>
</head>
<body>
	<ul>
		<li>1111111111</li>
		<li>2222222222</li>
		<li>3333333333</li>
		<li>4444444444</li>
		<li>5555555555</li>
	</ul>
	<a href="http://www.baidu.com">百度</a>
	<div>我是div标签</div>
</body>
</html>

在这里插入图片描述

二荆条3.0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记01--HTML和CSS基础

1.B/S软件的结构即浏览器Browser/服务器Server结构2.前端开发流程网页设计师根据需求设计网页–前端工程师将设计做成静态网页–后台工程师将静态网页修改成动态网页（java程序员）3.网页的组成部分内容（结构），表现，行为4.HTML简介超文本标记语言，HTML通过标签来显示网页的各个部分。5.创建HTML文件（1）创建一个web工程（静态工程）（2）在工程下创建HTML页面html的代码注释6.HTML标签介绍(1)<标签名>封装的数据/标签名>
复制链接

扫一扫