Javaweb开发了解前端知识一、html&&css

JavaWeb前端资料 包含前端基本资料 CSS 3.0参考手册、HTML与CSS入门经典(第7版)、jQuery api 1.8 中文版、锋利的jQuery 立即下载

01-html和CSS


1、html

2、CSS

1、B/S 软件的结构

 

2、前端的开发流程

 

3、网页的组成部分

页面由三部分内容组成!

分别是内容(结构)、表现、行为。

内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html技术来展示。

表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用CSS技术实现

行为,指的是页面中元素与输入设备交互的响应。一般使用javascript技术实现。

 

4、HTML简介

HyperText Markup Language (超文本标记语言)   简写:HTML

Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,

通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)

5、html 文件。

 html的结构分析

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- html标签表示整个html内容的开始 -->
	<head><!-- head表示头部信息,  标题title,CSS样式,js代码 -->
		<!-- meta是元信息, Content-Type是内容类型, 
		text/html; charset=UTF-8 表示当前页面的内容是文本,html表示子类型,
		charset=UTF-8表示告诉浏览器,使用UTF-8查看-->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>好多帅哥美女</title><!-- title是标题的标记 -->
	</head>
	<body><!-- body标签是整个html页面要显示的主体内容 -->
		hello world!
	</body>
</html><!-- 表示整个html文件内容的结束 -->

 html代码模板

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=${encoding}">
		<title>Insert title here</title>
	</head>
	<body>
		${cursor}
	</body>
</html>

注:Java文件是需要先编译,再由java虚拟机跑起来。但Html 文件它不需要编译,直接由浏览器进行解析执行。

Html 的代码注释   <!-- 这是html 注释,可以在页面右键查看源代码中看到 -->

6、html标签介绍

1.标签的格式:

<标签名>封装的数据</标签名>

2.标签名大小写不敏感。

3.标签拥有自己的属性。

i. 分为基本属性:bgcolor="red" 它可以设置标签的简单样式

ii. 事件属性: onclick="alert('你好!');"可以设置事件(输入设备和页面的交互)的响应代码。

4.标签又分为,单标签和双标签。

i. 单标签格式:  <标签名 />br换行hr 水平线

ii. 双标签格式: <标签名> ...封装的数据...</标签名>

 

标签的语法:

<!-- ①标签不能交叉嵌套 -->

正确:<div><span>早安</span></div>

错误:<div><span>早安</div></span>

<hr />

 

<!-- ②标签必须正确关闭 -->

<!-- i.有文本内容的标签: -->

正确:<div>早安</div>

错误:<div>早安

<hr />

<!-- ii.没有文本内容的标签: -->

正确:<br />

错误:<br>

<hr />

<!-- ③属性必须有值,属性值必须加引号 -->

正确:<font color="blue">早安</font>

错误:<font color=blue>早安</font>

错误:<font color>早安</font>

<hr />

<!-- ④注释不能嵌套 -->

正确:<!-- 注释内容 --> <br/>

错误:<!--    <!--  这是错误的html注释    -->     -->

<hr />

 

注意事项:

1.html 代码不是很严谨。有时候标签不闭合,也不会报错。

 

 

7、常用标签介绍 文档是:W3school.chm

7.1、font字体标签

font是字体标签,可规定文本的字体、字体尺寸、字体颜色。

<body>
	
	<!-- font字体标签
			color 设置文本的颜色
			size 设置文本的大小
			face  设置文本的字体
	 -->
<!-- 需求1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。 -->
	<font color="red" size="7" face="宋体">我是字体标签</font>
</body>

7.2、标题标签

例如:演示标题1到 标题6的

<body>
<!-- 	需求1:演示标题1到 标题6的!-- 标题标签
			h1 - h6 表示标题
			h1 最大
			h6 最小
			align 属性设置标题的对齐 方式
  -->
	<h1 align="left">标题1</h1>
	<h2 align="center">标题2</h2>
	<h3 align="right">标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
</body>

7.3、超链接 

例如:普通的 超连接。

<body>
	<!-- 超链接
		a标签是超连接标签
			href 属性设置连接需要跳转的地址
			target 属性设置哪个目标进行跳转	
					_self 默认值		表示当前窗口默认跳转
					_blank 		表示打开一个新窗口去跳转
	 -->
	<a href="http:/www.baidu.com">百度(默认)</a>
	<a href="http:/www.baidu.com" target="_self">百度(_self)</a>
	<a href="http:/www.baidu.com" target="_blank">百度(_blank)</a>
</body>

7.4、列表标签

ul - li 组成无序列表

例如:使用无序,列表方式,东北F4,宋小宝,赵四,刘能,小沈阳 ,展示出来

<body>
<!-- 		需求1:使用无序,列表方式,东北F4,宋小宝,赵四,刘能,小沈阳 ,展示出来
			ul 是无序 列表
				type 是可以设置无序列表项前面的符号
			li 是列表项
 -->
		<h2>东北F4</h2>
		<ul type="none">
			<li>赵四</li>
			<li>刘能</li>
			<li>宋小宝</li>
			<li>小沈阳</li>
		</ul>
	</body>

7.5、img标签

例如:使用img标签显示一张美女的照片。并修改宽高,和边框属性

<body>
<!-- 需求1:使用img标签显示一张美女的照片。并修改宽高,和边框属性
		img 标签是专门用来显示图片的标签
			src 属性 设置需要显示的图片路径
			alt 属性 设置当指定的路径找不到图片的时候,用来替代显示的文本内容
			width 属性设置图片的宽度 
			height 属性设置图片的调试
			border 属性设置图片的边框大小
			
			javaSE的相对路径
				从当前工程名开始算
			javaSE的绝对路径
				盘符:\资源名
				
			html页面中的路径	
				相对路径
					.			当前目录
					..			上一级目录
					资源名		表示./资源名 		./可以省略
				绝对路径
					http://ip:port/工程名/资源名:所以不能直接访问磁盘
 -->
	<img alt="美女找不到了" width="100" height="130" src="1.jpg" border="1"/>
	<img alt="美女找不到了" width="100" height="130" src="../2.jpg" border="1"/>
	<img alt="美女找不到了" width="100" height="130" src="../imgs/3.jpg" border="1"/>
	<img alt="美女找不到了" width="100" height="130" src="http://localhost:8080/img/13.jpg" border="1"/>
</body>

7.6、表格标签

需求1:做一个 带表头的 ,三行,三列的表格,并显示边框

需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。

<body>
		<!-- 需求1:做一个 带表头的 ,三行,三列的表格,并显示边框 -->
		<!-- 需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。 -->
		<!-- 
			table 是表格
				cellspacing	设置单元格的间距
				width 	设置表格的宽度 
				height	设置表格的高度
				border	设置边框大小
			tr	 表示行
			td	单元格
				align 设置单元格的对齐方式
			th	表头
			b	标签是加粗标签
		 -->
		<table align="center" border="1" width="300" height="300" cellspacing="0">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			</tr>
			<tr>
				<td>3.1</td>
				<td>3.2</td>
				<td>3.3</td>
			</tr>
		</table>
	</body>

7.7、跨行跨列表格 

例如:新建一个五行,五列的表格,第一行,第一列的单元格要跨两列,第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列。

<body>
<!-- 		需求1:新建一个五行,五列的表格,
			第一行,第一列的单元格要跨两列,
			第二行第一列的单元格跨两行,
			第四行第四列的单元格跨两行两列。
			
			colspan属性设置跨列
			 -->
		<table border="1" width="500" height="500" cellspacing="0" >
			<tr>
				<td colspan="2">1.1</td>
				<td>1.3</td>
				<td>1.4</td>
				<td>1.5</td>
			</tr>
			<tr>
				<td rowspan="2">2.1</td>
				<td>2.2</td>
				<td>2.3</td>
				<td>2.4</td>
				<td>2.5</td>
			</tr>
			<tr>
				<td>3.2</td>
				<td>3.3</td>
				<td>3.4</td>
				<td>3.5</td>
			</tr>
			<tr>
				<td>4.1</td>
				<td>4.2</td>
				<td>4.3</td>
				<td colspan="2" rowspan="2">4.4</td>
			</tr>
			<tr>
				<td>5.1</td>
				<td>5.2</td>
				<td>5.3</td>
			</tr>
		</table>
	</body>

7.8、了解iframe框架标签 (内嵌窗口)

iframe标签可以在一个页面中,开辟一个小空间。然后单独加载一个单独的页面。

<body>
	<!-- iframe标签可以在一个页面中,开辟一个小空间。然后单独加载一个单独的页面。
			src 属性设置需要加载的html页面的地址
			width 设置窗口的宽度
			height 设置窗口的高度
		
		iframe标签和a标签组合使用的时候,
		1、在iframe标签上设置name属性,给iframe起一个名称
		2、在a标签上,设置target属性为需要跳转的iframe的name的属性值。
	 -->
	<iframe src="./1.font标签.html" width="700" height="300" name="abc"></iframe>
	<br/>
	<br/>
	<br/>
	<a href="2.特殊字符.html" target="abc">2.特殊字符.html</a><br/>
	<a href="3.标题标签.html" target="abc">3.标题标签.html</a><br/>
	<a href="4.超链接.html" target="abc">4.超链接.html</a><br/>
	<a href="5.img标签.html" target="abc">5.img标签.html</a><br/>
</body>

7.9、表单标签 

 

表单,就是专门用来收集信息,的html界面元素。这些信息,都可以发送给服务器。

 

例如:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。

隐藏域,自我评价(多行文本域)。重置,提交。

表单界面的展示

	<body>
<!-- 		需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。 -->
<!-- 隐藏域,自我评价(多行文本域)。重置,提交。 -->
		
		<!-- 
			input type=text		普通的文本输入框
			input type=password 密码输入框
			input type=radio	是单选框		name属性可以对它们进行分组
			input type=checkbox 是复选框		
			input type=submit	提交按钮
			input type=reset	重置按钮
			input type=button	是按钮 	value属性设置按钮上显示的文本
			input type=file		是文件上传域
			input type=hidden	是隐藏域	它可以在表单中添加一些额外的信息,而这些信息,是不希望直接看到的。
			
			textarea	是多行文本输入框(多行文本域)
				rows 属性设置行数
				cols 属性设置每行显示几个字
			
			select 	下拉列表
			option	下拉列表项
		 -->
		<form action="">
			<input type="hidden" />
			用户名称:<input type="text" /><br/>
			用户密码:<input type="password" /><br/>
			确认密码:<input type="password" /><br/>
			选择性别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/>
			选择兴趣:<input type="checkbox"  />抽烟<input type="checkbox"  />喝酒<input type="checkbox"  />烫头<br/>
			选择国籍:
					<select>
						<option>--请选择国籍--</option>
						<option>中国</option>
						<option>小日本</option>
						<option>美国</option>
					</select><br/>
			自我评论:<textarea rows="10" cols="30"></textarea><br/>
			<input type="submit"/> <input type="reset" />
		</form>
	</body>

表单格式化

<body>
		<center>
			<h1>用户注册</h1>
			<form action="">
				<input type="hidden" />
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password" /></td>
					</tr>
					<tr>
						<td>选择性别:</td>
						<td>
							<input type="radio" name="sex"/>男
							<input type="radio" name="sex"/>女
						</td>
					</tr>
					<tr>
						<td>选择兴趣:</td>
						<td>	
							<input type="checkbox"  />抽烟
							<input type="checkbox"  />喝酒
							<input type="checkbox"  />烫头
						</td>
					</tr>
					<tr>
						<td>选择国籍:</td>
						<td>
							<select>
								<option>--请选择国籍--</option>
								<option>中国</option>
								<option>小日本</option>
								<option>美国</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>自我评论:</td>
						<td><textarea rows="10" cols="30"></textarea></td>
					</tr>
					<tr>
						<td><input type="submit"/></td>
						<td align="center"><input type="reset" /></td>
					</tr>
				</table>
			</form>
		</center>
	</body>

表单提交的细节

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		
		<!-- 
			input type=text		普通的文本输入框		value属性设置文本输入框的默认值
			input type=password 密码输入框			value属性设置密码输入框的默认值
			input type=radio	是单选框		name属性可以对它们进行分组  checked="checked"表示默认选中
			input type=checkbox 是复选框		 checked="checked" 设置默认选中
			input type=submit	提交按钮		value属性设置按钮上显示的文字
			input type=reset	重置按钮		value属性设置按钮上显示的文字
			input type=button	是按钮 	value属性设置按钮上显示的文本
			input type=file		是文件上传域
			input type=hidden	是隐藏域	它可以在表单中添加一些额外的信息,而这些信息,是不希望直接看到的。
			
			textarea	是多行文本输入框(多行文本域),默认值是起始标签和结束标签中的内容
				rows 属性设置行数
				cols 属性设置每行显示几个字
			
			select 	下拉列表
			option	下拉列表项	selected=selected表示默认选中
			
			
			form标签是表单标签
				action 设置表单提交给服务器的地址。
				method 是设置表单提交的方式	GET	和 POST
			
			表单提交的时候,没有把数据发给服务器有几种情况下:
				1、表单项中没有name的属性值
				2、单选,复选,下拉的option、要有value属性值
				3、表单项必须在提交的form标签中
			
			GET请求的特点:
				1、浏览器地址栏中是form标签的action属性值+?+请求的参数
					请求的参数的格式是:name=value&name=value
				2、不安全
				3、它有长度限制	
				
			POST请求的特点:
				1、浏览器地址栏中,只有action的属性值
				2、安全
				3、它提交的数据没有长度限制
		 -->
		<center>
			<h1>用户注册</h1>
			<form action="http://localhost:8080" method="post">
				<input type="hidden" name="action" value="queryBookById"/>
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" name="username" value="abc"/></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password" name="password" value="123456"/></td>
					</tr>
					<tr>
						<td>选择性别:</td>
						<td>
							<input type="radio" name="sex" value="boy"/>男
							<input type="radio" name="sex" checked="checked" value="girl"/>女
						</td>
					</tr>
					<tr>
						<td>选择兴趣:</td>
						<td>	
							<input name="hobby" type="checkbox" checked="checked" value="java"/>java
							<input name="hobby" type="checkbox" checked="checked" value="cpp"/>c++
							<input name="hobby" type="checkbox" checked="checked" value="js"/>javaScript
						</td>
					</tr>
					<tr>
						<td>选择国籍:</td>
						<td>
							<select name="country">
								<option value="none">--请选择国籍--</option>
								<option selected="selected" value="cn">中国</option>
								<option value="jp">小日本</option>
								<option value="usa">美国</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>自我评论:</td>
						<td><textarea name="desc" rows="10" cols="30" >这是默认的内容</textarea></td>
					</tr>
					<tr>
						<td><input type="submit"/></td>
						<td align="center"><input type="reset"/></td>
					</tr>
				</table>
			</form>
		</center>
	</body>
</html>

7.10其他标签

需求1:div、span、p标签的演示

div块标签- 经常用于和CSS结合使用做布局

span内联标签可以用来封装文本

p段落标签

<body>
		<!-- 
			div 标签	默认独占一行
			span标签默认宽度只有封装的文本的长度
			p 标签默认会在段落的上方和段落的下方各空出一行来
		 -->
		<div>div1</div>
		<div>div2</div>
		<span>span1</span>
		<span>span2</span>
		<p>段落1</p>
		<p>段落2</p>
	</body>

8、CSS技术 CSS2.0.chm

8.1、CSS技术介绍

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

8.2、CSS语法规则:

 

选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。

属性 (property) 是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p {color: blue}

多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号,但尽量在每条声明的末尾都加上分号

例如:

p{

color:red;

font-size:30px;

}

每行最好只描述一个属性

 

CSS注释:/*注释内容*/

 

8.3、CSS和html的结合方式

8.3.1、第一种:

在标签的style属性上设置”key:value value;”,修改标签样式。

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>

例如:分别定义两个 div、span标签,分别修改每个 div 标签的样式为:边框1个像素,实线,红色。 

<body>
<!-- 例如:分别定义两个 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>

问题:这种方式的缺点?

1.如果标签多了。样式多了。代码量非常庞大。

2.可读性非常差。

3.Css代码没什么复用性可方言。

8.3.2、第二种:

在head标签中,使用style标签来定义各种自己需要的css样式。

格式如下:

xxx {

Key : value value;

}

例如:分别定义两个 div、span标签,分别修改每个 div 标签的样式为:边框1个像素,实线,红色。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			/*
			style标签专门用来定义css样式
			这是css与html结合使用的第二种方案
		 	*/
			div{
				border: 1px solid red;
			}
			span{
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<div>div标签1</div>
		<div>div标签2</div>
		<span>span标签1</span>
		<span>span标签2</span>
	</body>
</html>

Css 注释 /* 这是css 的代码注释  */

问题:这种方式的缺点。

1.只能在同一页面内复用代码,不能在多个页面中复用css代码。

2.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。

8.3.3、第三种:

把css样式内容,单独抽取成为一个CSS文件。然后引入

使用html 的 <link rel="stylesheet" type="text/css" href="./styles.css"> 标签 导入 css 样式文件。

8.4、CSS选择器

8.4.1、标签名选择器

标签名选择器的格式是:

标签名{

属性:值;

}

例如:在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。

并且修改所有span 标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。

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

8.4.2、id选择器

id选择器的格式是:

#id属性值{

属性:值;

}

例如:分别定义两个 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>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">
	/*
	需求1:分别定义两个 div 标签,
	第一个div 标签定义 id 为 id001 ,然后根据id 属性定义css样式修改字体颜色为蓝色,
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ,然后根据id 属性定义css样式 修改的字体颜色为红色,
		字体大小20个像素。边框为5像素蓝色点线。
		id选择器的格式是:
			#id属性值{
				属性:值;
			}
	*/
		#id001{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		#id002{
			color: red;
			font-size: 20px;
			border: 5px blue dotted;
		}
	</style>
</head>
<body>		
	<div id="id001">div标签1</div>
	<div>div标签2</div>
</body>
</html>

8.4.3、class选择器(类选择器)

class类型选择器的格式是:

.class属性值{

属性:值;

}

需求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>

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

8.4.4、组合选择器

 

组合选择器的格式是:

选择器1,选择器2{

属性:值;

}

   <div class="class01">div标签class01</div> <br />

   <span id="id01">span 标签</span>  <br /> 

   <div>div标签</div> <br />

   <div>div标签id01</div> <br />

 

例如:修改 class="class01" 的div 标签 和 id="id01" 所有的span标签,字体颜色为蓝色,字体大小20个像素。边框为1像素黄色实线。

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

8.5、常用样式:

1、颜色

color:red;

颜色可以写颜色名如:black, blue, red, green等

颜色也可以写rgb值和十六进制表示值:如rgb(255,0,0),#00F6DE,如果写十六进制值必须加#

2、宽度

width:19px;

宽度可以写像素值:19px;

也可以写百分比值:20%; 

3、高度

height:20px;

高度可以写像素值:19px;

也可以写百分比值: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;

}


java-前端页面模板 本模板未使用任何前端框架,简单易上手。简单修改后即可满足基本需求。登录、查询展示等功能页面都有。 立即下载

相关推荐

【Get深一度】小波分析概念1——紧支撑集是什么意思,通俗解释

最近学到小波,在仿真中也用到了紧支撑函数;紧支撑性越好,说明能量越集中;用最通俗的话来讲,紧支撑是这样的: 对于函数f(x),如果自变量x在 0附近的取值范围内,f(x)能取到 C; 而在此之外,f(x)取值为 0; 那么这个函数f(x)就是紧支

Trey_优快云 的优快云博客 8348

JAVA WEB前端入门和总结

自WEB推出服务器模式后,web从未熄火,本文为新入门小白总结。 开发WEB应用前端,HTML+CSS+JS。 平台:myeclipse。 编写html文件的软件:sublime text3。   HTML,一堆文本标签,但以一个网页的经验来看,大部分都是通过div+css的属性构造出大块的框架后,进行编写css类。在实践中获取的经验,通过开发者工具直接修改属性,可以方便观看修改后的结果

Wind_white的博客 5793

宝塔面板 python管理器2.0安装Mrdoc

自从python管理器从1.9升级2.0后,导致原教程不能使用。 故关于2.0新开教程如下。 关于python管理器2.0 最大的区别在于: python管理器2.0不再需要进入虚拟环境,直接在当前环境进行操作,但是需要指定python路径及pip路径。 1、新建mrdoc工程目录,下载源码: 新建目录【mrdoc】,进入mrdoc目录,并在宝塔ssh或或远程ssh中执行 ,下载源码 git clone https://gitee.com/yang_lite/MrDoc.git .

debj031634的专栏 5991

Java Web前端基础

Java Web的学习是需要一定的计算机基础的,主要有前端基础和Java基础和一定的网络基础,这些基础知识还是需要掌握到一定的程度的。 本文主要介绍前端接触,共包括HTML、CSS和JavaScript,学习的过程中,还是要多动手。

丹丹的后花园 9492

CCS环境下ADC采样波形的实时可视化调试技巧

本文详细介绍了在CCS环境下实现ADC采样波形实时可视化的调试技巧。通过数组缓存优化、多通道同步显示和波形测量工具的高级用法,帮助开发者高效调试嵌入式系统中的ADC采样问题,提升信号分析的准确性和效率。

weixin_33712987的博客 419

【Fluent】太阳辐射模型—Solar Ray Tracing

一、引言Fluent提供了一个太阳能负载模型,可用于计算进入计算域的太阳光线的辐射效应。该模型可以分为:太阳光线追踪和太阳辐照。其中太阳辐照需要使用DO或MC模型,直接向辐射模型提供外光束方向和强度参数。太阳光线追踪不限制辐射模型,可以独立于辐射方程使用,甚至可以在辐射模型off的情况下使用。本文主要介绍太阳光线追踪模型。该模型非常适用于以下领域汽车气候控制 (ACC) 应用建筑物中的人体热舒适建模应用该模型使用着色算法进行太阳光线追踪。光线会透过半透明的面加载在照射面上。

a5567899的博客 7586

【JavaWeb】前端学习

主要关于HTML、CSS、JS、Vue的学习

qinjilll的博客 1175

2026.3.28:langgraph使用mysql进行持久化会话存储(短期记忆和长期记忆)

本文介绍了如何使用MySQL持久化存储LangGraph会话数据(短期和长期记忆)。首先安装必要的依赖包,然后通过Python代码实现将短期记忆写入MySQL数据库。主要步骤包括:1) 建立MySQL连接;2) 创建代理(agent)并配置检查点(checkpointer)和存储(store);3) 实现工具函数如计算器和天气查询;4) 使用中间件跟踪工具和模型调用次数。最后展示了如何从MySQL读取短期记忆数据,完成会话的持久化存储和检索功能。代码示例包含完整的实现细节,包括状态管理、消息处理和数据库操作

拥抱具身智能,昇腾Ascend C 734

Javaweb之HTML,CSS的详细解析

<head></head><body></body>

qq_69748833的博客 982

labelImg使用教程

Anaconda环境 安装 Anaconda 之后,在开始菜单下找到 Anaconda 文件夹 找到 Anaconda Prompt 点击运行 安装 labelImg pip install labelImg #直接命令行输入 启动 labelImg labelImg #直接命令行输入名称即可 labelImg界面 开始标注 快捷键:W(创建方框),A(上一张),D(下一张) XML文件示例 <annotation> <folder>夜读</folder>

G果的博客 3万+

深度学习中常用的几种卷积(下篇):膨胀卷积、可分离卷积(深度可分离、空间可分离)、分组卷积(附Pytorch测试代码)

膨胀卷积也称为扩张卷积或空洞卷积,一般可通过对标准二维卷积的卷积核设置合适的膨胀率(具体地指卷积核元素之间的距离)实现。合理利用膨胀卷积可在不引入其他参数的同时,扩大输出中元素的感受野,提高特征的全局表示能力。下面通过展示几个不同膨胀率下的卷积核大小以及感受野变化情况,可以更直观的理解:图中灰色为输入,蓝色为卷积核,黄色为输出。1)dilation=1:表示卷积核元素之间距离为1,使用0进行大小为dilation-1=0的填充(这是默认情况),因此。

NorthSmile的博客 9013

JavaWeb笔记整理——HTML、CSS、JavaScript

Java程序员必备前端技术栈——Html、css、JavaScript以及应用笔记详细整理

i_Water_boy的博客 1513

Python-自动化绘制股票价格通道线

创建更强大、更可靠的价格通道检测算法。

探索人工智能领域 947

JavaWeb『HTML&&CSS』

前言:参考于尚硅谷的javaweb的HTML&&CSS笔记,复习专用 第一节 HTML简介 1、名词解释 HTML是Hyper Text Markup Language的缩写。意思是**『超文本标记语言』**。 html语言是解释型语言,不是编译型。浏览器是容错的 2、超文本 HTML文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式,这就是超文本的含义——本身是文

不会敲代码的z的博客 1445

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

【JavaWeb】2—HTML&&CSS

超文本标记语言(Hyper Text Markup Language,HTML)文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式,这就是超文本的含义——本身是文本,但是呈现出来的最终效果超越了文本在项目开发过程中,凡是需要用户填写的信息都需要用到表单。

一棵灬大树的博客 2425

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

【JavaWeb】四、HTML&&CSS

前端知识

weixin_42301220的博客 561

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

Web阶段之HTML&&CSS

前言 在前面的几个月,我们学习了JavaSE基础,并且完成了一个基于控制台的图书管理系统作为收尾。但是在正常情况下,都是用web进行数据展示,控制台毕竟只能自娱自乐。所以从今天开始,我们将进军JavaWeb的学习,首先要学习的便是如何搭建基础网页,展示页面内容。 一、HTML 1.1 概念 HTML(Hyper Text Markup Language ):最基础的网页开发语言,超文本标记语言. * 超文本: * 超文本是用超链...

Michelhjx的博客 153

web概念概述,html&&css

目录 一web概念概述 1.1软件架构 1.1.1C/S: Client/Server 客户端/服务器端 1.1.2B/S: Browser/Server 浏览器/服务器端 1.2B/S架构详解 1.2.1静态资源 1.2.2动态资源 二HTML 1. 概念 2. 语法 3. 标签 3.1 文件标签 3.2 文本标签 3.3 图片标签 3.4 列表标签 3.5 链接标签 3.6 div和span 3.7 语义化标签 3.8 表格标签 3.9 表单标签 ...

qingmenghan的博客 289

《转载黑马教程》HTML&&CSS讲义0,,包含教程_仅供参考

今日内容 1. web概念概述 2. HTML web概念概述 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序,在远程有一个服务器端程序 * 如:QQ,迅雷... * 优点: 1. 用户体验好 * 缺点: 1. 开发、安装,部署...

陈陈陈亚萌_的博客 322

JavaWeb:HTML&CSS

HTML是Hyper Text Markup Language的缩写,意思是超文本(最终效果超越文本)标记语言。它的作用是搭建网页结构,在网上展示内容HTML文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式HTML不是像Java这样的编程语言,它是由一系列的标签组成的,没有常量、变量、流程控制、异常处理、IO等等这些功能。

weixin_74019079的博客 963

【JavaWeb】HTML&CSS

Hyper Text Markup Language (超文本标记语言) 简写:HTML HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画 面如何安排,图片如何显示等)5、创建 HTML 文件。1.标签的格式:封装的数据2.标签名大小写不敏感。3.标签拥有自己的属性。i. 分为基本属性:bgcolor="red" 可以修改简单的样式效果。

qq_64976935的博客 940

JAVA前端语言HTML与CSS

JAVA前端HTMLCSS HTML HTML是用来描述网页的一种语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言(markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML5 是最新的 HTML 标准 HTML5 是专门为承载丰富的...

weixin_42142764的博客 616

JavaWeb开发 —— HTML

什么是HTML、CSS、基本标签 & 样式以及标题排版、标题样式、超链接以及正文排版、页面布局以及表格标签、表单标签和表单项标签

hdakj22的博客 2236

java学习:html和css总结

##html和css知识点总结 本小节以HTML的结构为框架,进行知识点的总结,参考如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;网页的标题&lt;/title&gt; &lt;meta charset="编码方式"&gt; &lt;style&gt; .类名称 {要定义的样式}

qq_41421480的博客 345

用java实现html与css,java学习与应用(4.1)--HTML、CSS

文件标签文件标签html、head、title、body。html5使用表示html文档,meta的charset指定字符集。注释文本标签h1--h6(标题标签),p(段落),br(普通回车解析为空字符),hr(水平线,color颜色,width宽度,size高度,alien对其方式[center left right]),b(加粗),i(斜体),font(字体,color颜色、size大小、fa...

weixin_29346059的博客 562

“Java前端基础:探索Web开发的基础知识“

1、Javaweb 1.1 基本概念 web开发: web,代表网页(网站)的意思,比如www.baidu.com 静态web: 列如静态web页面设计使用的:html,css。 静态web性质:提供给所有人看的数据始终不会发生变化。 动态web 比如:淘宝、网易云、几乎所有的网站都使用动态web。 它提供给所有人看到的数据始终会发生变化,每个人在不同的时间,不同的地点看到的信息各不相同。 技术栈:Servlet/JSP,ASP,PHP。 在Java中,动态web资源开发的技术称为Javaw

光就是羁绊之力,它会再度被某人继承,散发出耀眼的光。 2万+
上一篇: java泛型
下一篇: Javaweb开发了解前端知识二、JavaScript
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值