Javaweb学习记录02

最新推荐文章于 2024-07-23 14:07:14 发布

Dell.Chen

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量168

点赞数

分类专栏： javaweb 文章标签： css html

本文链接：https://blog.csdn.net/csw3186016056/article/details/104223003

版权

javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS

html复习

复习：

html:
作用:展示
文件标签:
	<html>
		<head>
			<title></title>
		</head>
		<body></body>
	</html>
排版标签:
	p 段落
	hr 水平线
	br 换行
字体
	h1~h6 标题
	font 字体 大小 颜色
	b strong 加粗
	i 斜体
图片★
	<img src="图片的路径" alt="替代文字" width="" height=""/>
	路径的写法:
		相对路径:
			./ 或者 什么都不写  当前目录
			../ 上一级目录
		绝对路径:常用
			http://www.itheima.com/xx
超链接★
	<a href="跳转的路径" target="在什么地方打开"></a>

表格标签 ★★
	<table border="" width="" height="" bgcolor="" align="表格对齐方式">
		<tr align="内容对齐方式">
			<th></th>  	<!--表头单元格-->
			<td></td> 	<!--普通单元格-->
		</tr>
	</table>
	
	td重要的属性:
		colspan:列合并
		rowspan:行合并

列表:
	<ol></ol>
	<ul></ul>
	
	子标签:列表项
		<li></li>


form 表单标签:
	常用属性
		action:提交的路径
		method:提交的方式(get和post)
	常用子标签
		input
		select
		textarea
		
	input标签
		常用属性:
			type:
				text
				password
				radio
				checkbox
				file
				
				submit
				reset
				button
				
				hidden
				image
			name:
				要想将信息提交到服务器必须提供name属性
				将单选框和复选框设置成一组
			
			value:
				text password  设置默认值
				radio checkbox 设置选中后提交的值
				submit reset button 给按钮起个显示的名字
	select:下拉选
		<select name="">
			<option value="">显示的名字</option>
		</select>
	
	textarea:文本域
		<textarea cols="" rows="" name="">默认值</textarea>
	
	给单选框多选框设置默认值
		设置属性 checked="checked"
	给下拉选设置默认值
		设置属性 selected="selected"
		
	提交的路径(get)
		http://ssdfsdfsfd?key=vaule&key=value
		例如:
			http://localhost/day/login.jsp?username=tom&password=123
				
框架(了解)
	frameset:规定框架结构  框架集
		常用属性:
			rows:水平qiege
			cols:垂直切割
		常用子标签	
			frame:具体实现
			
		例如:水平切割3份
			<frameset rows="15%,*,10%">
				<frame>
				<frame>
				<frame>
			</frameset>
	frame:
		常用的属性:
			src:具体展示那个网页
			name:给当前的frame起个名称 方便超链接使用

css

div:

块标签
<div></div>

span:

行内的块标签
<span><span>

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>div标签</div>
		<div>div标签</div>
		<div>div标签</div>
		<hr />
		<span>span标签</span>
		<span>span标签</span>
		<span>span标签</span>
	</body>
</html>

在这里插入图片描述
css:渲染

层叠样式表
作用:
	渲染页面
	提高工作效率
格式:
	选择器{属性:值;属性1:值1;}
后缀名:
	.css 独立的css(样式)文件
和html元素的整合★
	方式1:内联样式表 通过标签的style属性设置样式
	方式2:内部样式表 在当前页面中使用的样式
		通过head标签的style子标签导入
		例如:
			<style>
				#divId2{
					background-color: #0f0;
				}
			</style>
			
	方式3:外部样式表 有独立的css文件
		通过head标签的link子标签导入
		例如:
			<link rel="stylesheet" href="css/1.css" type="text/css"/>

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.one{
				font-size: 18px;
				color: red;
			}
		</style>
		<link rel="stylesheet" href="two.css" type="text/css" />
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2020-02-08
        	描述：方式1
        -->
        <div style="font-size: 18px; color: #F00;">行 内 样 式</div>
        <!--
        	作者：offline
        	时间：2020-02-08
        	描述：方式2
        -->
        <div class="one">内 嵌 样 式</div>
        <!--
        	作者：offline
        	时间：2020-02-08
        	描述：方式2
        -->
        <div id="two">连 接 式</div>
	</body>
</html>

#two{
	font-size: 18px;
	color: red;
}

在这里插入图片描述
选择器:★

	id选择器
		要求:
			html元素必须有id属性且有值   <xxx id="id1"></xxx>
			css中通过"#"引入,后面加上id的值  #id1{...}
	class选择器
		要求:
			html元素必须有class属性且有值 <xxx class="cls1"/>
			css中通过"."引入,后面加上class的值  .cls1{...}
	元素选择器
		直接用元素(标签)名即可   xxx{...}
	
派生的选择器
	属性选择器★
		要求:
			html元素必须有一个属性不论属性是什么且有值  <xxx nihao="wohenhao"/>
			css中通过下面的方式使用
				元素名[属性="属性值"]{....}
				例如:
					xxx[nihao="wohenhao"]{....}
	后代选择器
		选择器 后代选择器{...}   在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
了解的选择器
	锚伪类选择器
		a:link {color: #FF0000}	/* 未访问的链接 */
		a:visited {color: #00FF00}	/* 已访问的链接 */
		a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
		a:active {color: #0000FF}	/* 选定的链接 */


选择器使用小结:
	id选择器:一个元素(标签)
	class选择器:一类元素 
	元素选择器:一种元素
	属性选择器:元素选择器的特殊用法
使用的时候注意:(了解)
	若多个样式作用于一个元素的时候
		不同的样式,会叠加
		相同的样式,最近原则
	若多个选择器作用于一个元素的时候
		越特殊优先级越高 id优先级最高

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.class{
				background-color: chartreuse;
				font-size: 20px;
			}
			#id{
				font-size: 20px;
			}
			span{
				color: red;
				font-size: 20px;
			}
			span[v="span"]{
				color: blue;
				font-size: 20px;
				background-color:white ;
			}
			div span{
				font-size: 1cm;
			}
			a:link {color: #FF0000}	/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */
		</style>
	</head>
	<body>
		<div class="class" >class选择器</div>
		<div id="id">id选择器</div>
		<span>元素选择器</span>
		<span v="span">属性选择器</span>
		<div>
			<span>后代选择期</span>
		</div>
		<a href="#">锚伪类选择器</a>
	</body>
</html>

锚伪类选择器自己尝试
属性(了解)

字体
	font-family:设置字体(隶书) 设置字体家族
	font-size:设置字体大小
	font-style:设置字体风格
文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
	color:文本颜色
	line-height:设置行高
	text-decoration: 向文本添加修饰。 none underline
	text-align:对齐文本
列表:
	list-style-type:设置列表项的类型 例如:a 1  实心圆 
	list-style-image:设置图片最为列表项类型 使用的时候使用 url函数  url("/i/arrow.gif");
背景:
	background-color:设置背景颜色
	background-image:设置图片作为背景 url
尺寸:
	width:
	height:
浮动:
	float: 可选值 left right
	
分类:
	clear:设置元素的两边是否有其他的浮动元素
		值为:both 两边都不允许有浮动元素
	display:设置是否及如何显示元素。
		none 此元素不会被显示。 
		block 此元素将显示为块级元素，此元素前后会带有换行符。 
		inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

框模型:(理解)

一个元素外面有padding(内边距) border(边框) margin(外边距)
	padding:元素和边框的距离
	margin:元素最外层的空白
上面这三个属性都有简写的属性
	若设置大小的时候 四个值:顺序 上右下左
		padding:10px 10px 10px 10px
		若只写一个的话 代表四个边使用同一个值  padding:10px
		若只写两个个的话 代表相对边使用同一个值 padding:10px 20px
		若只写三个个的话 代表相对边使用同一个值 padding:10px 20px 30px
border(边框)
	还可以设置颜色 风格
	简写属性:
		border:宽度	风格 颜色;

		border:5px solid red;
		
		solid:实线
		dashed:虚线
		double:双实线

Dell.Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javaweb学习记录02

CSShtml复习复习：html:作用:展示文件标签: <html> <head> <title></title> </head> <body></body> </html>排版标签: p 段落 hr 水平线 br 换行字体 h1~h6 标题 font 字体...
复制链接

扫一扫

专栏目录