html&CSS代码篇(二)

学习原则

代码案例练习,为了增加代码熟练度
学习如同烧开水,断断续续烧一万个小时也烧不开.若持续不断的烧,一个小时足矣

 

HTML代码练习

1. 多媒体标签

<embed src="C:\1.mp4" width="400" height="300"/>
属性:	autostart控制是否自动播放
	loop控制循环次数
<bgsound src="C:\2.mp3" autostart="true" loop=2>

 

2. 段落标记

<h1>清平乐</h1>
<hr size="10" width="400" color="rgb(0,255,0)" align="left" noshade>
<p>年年雪里,常插梅花醉,挼尽梅花无好意,赢得满衣清泪!<br/>今年海角天涯,萧萧两鬓生华。看取晚来风势,故应难看梅花。</p>

3. 字体标签

<font size="6" color="red" face="华文行楷">CodingPark</font>
	size:大小(1-7),默认是2(所以也可以用"+5") size="+3"等于size="5"
	color:颜色
	face:字体类型(比如:黑体)
 

4. 特殊字符

&lt;小于
&gt;大于
&copy;版权
&trade;商标
&amp;与符号
&quot;双引号

5. 图片标签

<img src="imgs/10.jpg" width="400" height="300" align="top" alt="点我" useMap="#Map"/>美女图片哦<br/>
<map name="Map">
	<area shape="circle"   coords="100,100,32" href="2.gif">
</map>
src:指图片位置
	相对路径			
	绝对路径:(d:\1.jpg)
	带协议的绝对路径(http://www.itheima.com/wang/1.jpg)
	width:宽度
	height:高度
	alt="提示文本"
	align:设置周围文本的对齐方式(top center  bottom)
	useMap="#热点区域名"

6. 列表标签

ol :order list有序列表
	type:A,a,I,i,1
	li: list item 列表项目
ul: unorder list无序列表
	type: circle (空心圆),disc(默认是实心圆),square(方形)
	li: list item 列表项目

7. 超链接标签

<a href="http://www.baidu.com" target="_blank">百度</a><br/>
<a href="mailto:codingpark@163.com">打开邮箱</a><br/>
<a href="imgs.rar">下载</a><br/>
<a href="thunder:tsjflkjsaofisfasdf==s?">迅雷下载</a>

href: 可以是外网(http://),邮箱(mailto),下载文件(thunder迅雷协议)
target:打开的目标位置(_blank也可以用new,打开新窗口)
	(_self:在自身打开)  (_parent在父窗口中打开),(_top在顶层窗口中打开)(框架名:在指定的某个框架中打开)
锚链接(a name="标记名")	再通过<a href="#标记名")

8. 表格标签

<table border="1px" bordercolor="00ff00" width="500px" align="center" cellspacing="0px" cellpadding="5px">
<caption>人员记录表</caption>
<thead>
	<tr align="center">
		<th>姓名</th>
		<th>年龄</th>
		<th>爱好</th>
		<th>户口</th>
	</tr>
</thead><tbody>
	<tr align="center" bgColor="c3f3c3">
		<td>tom</td>
		<td>22</td>
		<td>swim</td>
		<td>beijing</td>
	</tr>
</tbody><tfoot>
	<tr align="center" bgColor="f3c3f3">
	</tr>
</tfoot></table>
border: 边框			bordercolor:边框颜色
width:表格宽度			align:对齐方式
cellpacing:单元格之间距离	cellpadding:单元格内部文本与边框的距离
行<tr>attribute:bgColor--设置行背景颜色

列(单元格)<td>colospan:跨列	rowspan:跨行
表格的分区加载
	<thead>	<tbody><tfoot>分区加载
	<caption>加标题

 

9. 画中画标签

<a href="subframe/01.html" target="MainFrame">第一页</a><br/>
<a href="subframe/02.html" target="MainFrame">第二页</a><br/>
<a href="subframe/03.html" target="MainFrame">第三页</a><br/>
<iframe src="#" name="MainFrame" width=480px height=320px>

10. 框架集标签

<frameset rows="80,*,10%">
	<frame src="01html.html" noresize scrolling="no"></frame>
	<frameset cols="50,*">
		<frame src="02.html"></frame>
		<frame src="02.html" name="MainFrame"></frame>
	</frameset>
	<frame src="03font.html"></frame>
</frameset>
<!--
frameset:框架集(cols 垂直切割,rows水平切割)
   frame:框架
	src:资源
	name:框架名
	noresize:不可改变大小
	scrolling:控制滚动条

11. 表单标签

<form action="02.html" method="post">
	<input type="hidden" name="id" value="21323435435435434454345"/>
	用户名:<input type="text" name="username"/><br/>
	密码:<input type="password" name="password"/></br/>
	性别:<input type="radio" name="sex" value="male"/>男
		 <input type="radio" name="sex" value="female"/>女<br/>
	爱好:<input type="checkbox" name="hobby" value="eat" />吃饭
		 <input type="checkbox" name="hobby" value="sleep"/>睡觉
		  <input type="checkbox" name="hobby" value="study"/>学java<br/>
	上传:<input type="file" name="img"/><br/>
	省份:<select name="city">
		<option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="sz">深圳</option>
		<option value="dg">东莞</option>
	</select><br/>
	个人简历:<textarea cols="10" rows="3">本人是一个正直的人</textarea><br/>
	<input type="submit" value="注册"/>
	<input type="image" src="btn_reg.gif"/>
	<input type="reset" value="重置"/>
	<input type="button" value="普通按钮"  οnclick="alert('点击我了')"/>
</form>

form代表表单
	method:post/get(代表提交数据方式)
		post:
			1.地址栏不显示数据,数据放在主体内容中
			2.更安全
			3.理论上没有数据量的限制

		get:
			1.地址栏能看到提交的数据
			2.相对不安全
			3.有数据量的限制,一般认为是1KB

input type:
text(文本框),password(密码框),radio(单选  name要同名才能单选),checkbox(复选框),hidden(隐藏域),submit(提交按钮,可以提交form表单),reset(重置),button(普通按钮),file(文件域),image(图片按钮,也具有提交功能)

textarea:多行文本框  rows  cols控制行和列
select:下拉列表
	 列表项目:option

12. 表单语义化标签

<form>
	<fieldset>
		<legend>用户必填信息</legend>
		<table>
			<tr>
			   <td><label for="usernameqqqqqq">用户名</label></td>
			   <td><input type="text" id="usernameqqqqqq" name="username"/></td>
			</tr>
			<tr>
			   <td><label for="pwd">密码</label></td>
			   <td><input type="password" id="pwd" name="password"/></td>
			</tr>
		</table>
</form>
好处: 去掉样式或者样式丢失页面结构依然清晰分明,便于后期开发以及维护
表单域要用fieldset标签包起来,并用legend标签说明表单的用途
每个input标签对应的说明文本都要使用label标签,并通过为input设置id属性,在label标签中设置for="后面的id"来让说明和相应的input关联起来

 

CSS代码练习

1. 选择器

#div1{		//id选择器
	color:red;
	font-family:"宋体";
}
div{		//标签选择器
	font-family:"黑体";
	font-size:3cm;
	color:black;
}
.cc{		//类选择器
	font-size:2cm;
	color:"green"
}
html标签选择器
class类选择器,定义时用.cc,引用时用class="cc"
id选择器   定义时用#div1,引用时用id="div1"

2. 伪元素选择器顺序

/*顺序L-V-H-A   在visited中设置font-size不起作用*/
a:link{
  color:red;
  text-decoration:none;		//去掉下划线
}
a:visited{
  color:blue;
}
a:hover{
  text-decoration:underline;	//加上下划线
}
a:active{
	color:green;
	font-size:2cm;
}

3. div背景属性

div{
	background-color:red;		//背景颜色
	background-image:url('photo-3.jpg');		//背景图片
	background-position:100px 50px;		//背景位置
	background-repeat:no-repeat;		//背景是否重复
	width:300px;		//宽度
	height:300px;		//高度
	text-indent:6em;	//缩进宽度
}

4. position定位


position: absolute绝对定位,它是相对于浏览器左上角(0,0)坐标而言,并且后面的内容会往前跑
	  relative:相对定位,它是相对于自己原来的位置而言,并且后面的内容不会有任何变化
float:left,right
clear:清除左右的浮动
display:设置可见性,none不可见,block可见
div{
	width:100px;
	height:50px;
	border:1px solid black;
	margin:5px;
	padding:10px,20px;
	text-align:center;
	
}
#div1{
	background:#FF0000;
	float:right;
}
#div2{
	background:yellow;
	float:right;
	clear:both;
	/*position:absolute;
	left:300px;
	top:200px;*/
}
#div3{
	background:blue;
	float:right;
	clear:both;
}

5. 重叠事例

 <head>
  <title> New Document </title>

  <style>
  /*
	z-index:设置垂直方向的层叠(值越大越靠上)
  */
div{
	width:100px;
	height:50px;
	border:1px solid black;
	margin:5px;
	padding:10px,20px;
	text-align:center;
}
#div1{
	background:#FF0000;
	position:absolute;
	z-index:1;
}
#div2{
	background:yellow;
	
	position:absolute;
	left:50px;
	top:50px;
	z-index:0;
}
#div3{
	background:blue;
	position:absolute;
	left:60px;
	top:60px;
	z-index:-1;
}
  </style>
 </head>

 <body>
   <div id="div1">AAAAAA</div>
	<div  id="div2">BBBBBB</div>
	<div  id="div3">CCCCCC</div>
 </body>
</html>

6. 阴影文字效果

<html>
 <head>
  <title> 阴影文字效果 </title>
   <style>
		div{
		   font-size:60px;
		   font-weight:bold;
		   font-family:"黑体"
		}

		#div1{
		   color:#AAAAAA;
		   position:relative;
		   left:0.1cm;
		   top:-1.06em;
		   z-index:-1;
		}

   </style>
 </head>
 <body>
	<div>CSS定位阴影</div>
	<div id="div1">CSS定位阴影</div>
 </body>
</html>

7.  图片上加文字

<html>
<head>
<title>加水印</title>
<style>
	#div1{
		border:2px solid black;
		width:315px;
		height:210px;
		padding:5px;
	}
	#div2{
		position:absolute;
		top:202px;
		left:200px;
		color:white;
	}
</style>
</head>

<body>
<div id="div1"><img src="./images/1.jpg" /></div>
<div id="div2">create photo</div>
</body>
</html>

转载于:https://www.cnblogs.com/codingpark/p/4226400.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

参与评论
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值