前端基础（1）html

1.html的结构//超文本语言

<!DOCTYPE html>文档声明
<head> 头部 （文档的描述信息）
<meta charset=”utf-8”  文件编码声明需要文件编码 否则会相应的乱码
<meta  name=”keywords”  context=”关键字”>
<meta  name=”description”  context=”描述”>
<title> </title>标题 
<style> 
<body> 主体（文档的主体内容）

2.html的注释

3.标签

1）单标签如 <img /> <br/> <hr/>等也是自结束标签

2）双标签如 <h1> </h1> <a> </a> <span> </span> 由开始和结束标签共同作用

备注：标签不能交叉嵌套

3.1常用基本标签

1）h标签标题标签

H标签含 h1 h2 h3 h4 h5 h6 h7 说明 h1标签一般只写一个 h4 h5 h6 h7 不要写的太多（对搜索的优先级没有过多的作用）

2）p标签文本段落标签

<p></p> 会自动的在前后插入一些空白

3）br标签

<br/> 换行标签

4）hr标签

<hr/>创建水平线标签

3.2 文本标签常用（双标签）

1） b标签和strong标签加粗字体建议使用strong加强语义

2） i标签和em标签斜体建议使用em 加强

3） small标签较左相邻的字体小一号

4） big标签较左相邻的字体大一号

5） pre标签保留显示文本空格和换行符

6） code标签将书写其中的代码作为文本而非代码

7） u标签添加下划线不建议使用因为a标签下有下划线的缘故不便于区分

8） sub标签下标

9） sup 标签上标

10) del标签添加删除线

3.3 布局标签常用（双标签）

1） span标签行内块元素不会独占一行

2） div标签快标签独占一行

3.4 链接标签（双标签）

1) a标签

常用属性

Href：必写指向一个超链接含外部链接内部链接和锚点链接

name：可写可不写制定锚的名称可创建一个内部的书签完成自身网页的跳转实现书签跳转的代码如下

<a href="#button" name="top">button</a>

target：_blank 新的页面 _parent _self自身页面 _top _framename

3.5 特殊符号常用

1）&nbsp 空格

2）&lt <符号

3）&gt >符号

4）&amp &符号

4 绝对路径和相对路径

和java等类似

5 image

常用属性

　　src:必写指向一个资源地址

　　alt：文字说明当没有找到相应的src时，显示alt

　　width：等比设置

　　titie：图片说明当鼠标指向该图面的时候会显示相应的说明

6 audio

常用属性

　　src：必写指向一个资源地址

　　autoplay：是否自动播放

　　loop：是否循环播放

　　controls：控制面板

　　preload：音频在页面加载是加载，当自动播放是此忽略

7 video

　　src：必写指向一个资源地址

　　autoplay：是否自动播放

　　loop：是否循环播放

　　controls：控制面板

　　preload：音频在页面加载是加载，当自动播放是此忽略

　　height：等比设置

8 source

　　当找不到的时候会相应的向下继续寻找

　　</audio>

8 ul标签无序列表

　　无序标签

　　主要ul和li组成,li中可以放任何标签

　　<ul >

　　</ul>

一般回去出li前面的小圆点

　　</ul>

9 ol有序列表

　　</ol>

　　主要由Ol和li及type构成

　　type指定相应的序号类型

10 dl标签自定义列表

　　<dl>

　　</dl>

　　dt标题信息

　　dd 描述信息

11 table表格

<table cellpadding="" cellspacing="" border=""> <tr><caption></caption></tr> 表格的标题

<tr><head><th></th></head></tr> 头部 th名称加黑居中

<tr><tbody><td></td></tbody></tr> 主体 td行

<tr><tfoot><td>合计</td></tfoot></tr> 尾部用于合计

</table>

常用属性

　　Cellpadding：内边距

　　Cellspacing：外边距

　　Border：边框大小

　　Width：宽度

　　Colspan：横向合并

　　Rowspan：纵向合并

12 form表单

　　</form>

常用属性

　　Action：提交到该地址

　　Method：方法get 及post

　　Type：类型 text文本框 button 按钮 checkbox 多选框 radio 单选框 submit 提交至action reset 重置 password 密码框 hidden隐藏域 file文本选择

　　Name：名称可用于java checkbox name 需要相同表示一组 radioname需要相同表示一组

　　Value：submit 和reset的表示显示名称其余可用于java提取

　　Target：类似于a中的target

13 select下拉框

书写方式类似于列表

</select>

常用属性

　　size :可见下拉框列数

　　multiple：设置可以多选

　　disable：禁用下拉列表

option标签

　　value 值

　　disabled 不可选

　　selected 选中状态

　　optgroud 标签对option分组

</ optgroup >

　　</select>

　　属性label必写

14 textarea文本域

　　常用属性

　　Disabled 禁用

　　Readonly 只读

　　Rows 可见行数

　　Cols 可见列数

15 活动框架

　　Iframe :可以连接一个页面

16 框架

　　Frameset ：不可以使用body标签可以内嵌frameset

　　Rows 行数

　　Cols 列数

　　Frame 连接页面

17.练习

1）login页面

2）代码

.screen {
	overflow: hidden;
}

.screen,
#imgBg {
	width: 100%;
	height: 100%;
	min-width: 960px;
}

#imgBg {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	z-index: -1;
}

.login-top-left {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-top: 30px;
}

.login-top-left #img2 {
	width: 300px;
}

.login-top-left #img1 {
	width: 250px;
	position: absolute;
	left: 10px;
	top: 40px;
}
#register{
	position: absolute;
	font-size: 18px;
	text-decoration: none;
	color: darkgrey;
	top: 2%;
	right: 2%;
	transition: color 0.3s linear;
}

.login-container {
	margin: 0 auto;
	margin-top: 70px;
}

.input-group,
.box-group {
	box-shadow: #000000;
	border-radius: 8px;
	margin: 0 auto;
	margin-bottom: 10px;
	width: 330px;
}

.input-group,
.input-group input,
.account-iocn,
.box-group {
	height: 50px;
}

.input-group {
	border: 1px solid black;
	background: white;
}

.input-group .input {
	padding: 0;
	margin: 0;
	width: 280px;
	float: right;
	border: none;
	background: rgba(0, 0, 0, 0);
}

.icon {
	background: url(../img/login-svg-sprite-97eb796f.svg) no-repeat;
	display: inline-block;
}

.account-icon,
.password-icon {
	width: 20px;
	height: 30px;
	margin-left: 20px;
	margin-top: 10px;
	background-position-y: 103%;
}

.account-icon {
	background-position-x: 25%;
}

.password-icon {
	background-position-x: 38%;
}

.box-group {
	text-align: center;
	line-height: 50px;
}

.box-group,
.input,
.submit {
	font-size: 18px;
}

#check-box {
	color: lightgray;
	float: left;
	line-height: 50px;
}

#memory {
	margin: 0;
	padding: 0;
}

#forget {
	float: right;
	color: darkgray;
	text-decoration: none;
	transition: color 0.5s linear;
}

#check-icon {
	margin-top: 15px;
	margin-right: 10px;
	float: left;
	width: 20px;
	height: 20px;
	background-position-x: 41.5%;
	background-position-y: 70%;
}

.input-group input:focus,
.submit {
	outline: none;
}

.submit {
	display: block;
	background: yellowgreen;
	cursor: pointer;
	transition: background-color 1s linear;
}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Login</title>
	</head>
	<link rel="stylesheet" href="../css/login1.css" />
	<script src="../js/jquery1.11.3.js"></script>
	<script type="text/javascript">
		$(function() {
			var flag = true;
			$("#check-icon").click(function() {
				if(flag) {
					$(this).css({
						"background-position-x": "27%"
					});
					$("#check-value").attr("value", "1");
					flag = false;
				} else {
					$(this).css({
						"background-position-x": "41.5%"
					});
					$("#check-value").attr("value", "0");
					flag = true;
				}
			})
			$("#submit").hover(function() {
				$(this).css("background-color", "green")
			}, function() {
				$(this).css("background-color", "yellowgreen")
			})

			$("#forget").hover(function() {
				$(this).css("color", "white")
			}, function() {
				$(this).css("color", "darkgrey")
			})
			
			$("#register").hover(function() {
				$(this).css("color", "white")
			}, function() {
				$(this).css("color", "darkgrey")
			})


		});
	</script>

	<body>
		<div class="screen" id="screen">
			<img id="imgBg" src="../img/login_screen1_bg.jpg" />
			<div class="login-top">
				<div class="login-top-left ">
					<img id="img1" src="../img/login-logo_2x.png" />
					<img id="img2" src="../img/login_slogan.png" />
				</div>
				<a href="javaScript:;"  id="register">注册账号</a>
			</div>

			<div class="login-container">
				<form method="post" action="JavaScript:;">
					<div class="input-group">
						<i class="icon  account-icon"></i>
						<input type="text" class="input" placeholder="邮箱/手机号" />
					</div>
					<div class="input-group">
						<i class="icon  password-icon"></i>
						<input type="text" class="input" placeholder="密码" />
					</div>
					<div class="box-group">
						<div id="check-box">
							<input type="hidden" class="check-value" value="0" />
							<i class="icon" id="check-icon"></i>
							<span id="memory">记住账号</span>
						</div>
						<a href="JavaScript:;" id="forget">忘记密码?</a>
					</div>
					<input type="submit" class="input-group  submit" id="submit" value="登录" />
				</form>
			</div>
		</div>

	</body>

</html>

posted @ 2018-09-01 20:35 fatale 阅读(178) 评论(0) 编辑收藏举报

刷新页面返回顶部

白日梦

前端基础（1）html

公告