day2学习笔记 html的from,跑马灯，iframe和CSS部分

form表单

提交的数据要被<form></form>框起来
<form action="00.练习.html" method="get">
	 <!-- 默认是单行文本框 -->
	单行文本框（默认）：<input name="username" value="cjy"/><br/>
	单行文本框（text)：<input type="text"/><br/>
	密码文本框（password)：<input type="password"/><br/>
	<!--单选框 复选框都可以使用name属性进行分组  checked="checked" 默认被选中 value值：要传递的值-->
	单选框：<br/>
	性别：<input type="radio" name="sex" checked="checked" value="男"/>男<input type="radio" value="女"/>女<br/>
	婚姻状况：<input type="radio" name="status" checked="checked"/>未婚<input type="radio"/>已婚<br/>
	多选框（复选框）：<br/>
	爱好：<input type="checkbox" name="hobby" value="yy" checked="checked"/> 游泳
		 <input type="checkbox" name="hobby" value="yx"/> 游戏
		 <input type="checkbox" name="hobby" value="yj"/> 游金
	<!-- 数据通过数组的形式传递 -->
	
	按钮：<br/>
	1.普通按钮 什么效果都没有
	<!-- value="普通按钮" 设置按钮上面的文字，往往是结合js代码实现一些效果-->
	<input type="button" value="普通按钮" onclick="alert(666)"/><br/>
	2.提交按钮：提交的时候会把数据往指定的路径传递
	<input type="submit" value="注册"/></br>
	3.重置按钮：
	<input type="reset" /></br>
	<!-- 重置按钮写在form表单外就没效果，提交按钮也是这样子的 -->
	4.文件域:<input type="file" name="myfile"/></br>
	<!-- 用来提交文件 -->
	5.隐藏域（不常见）：
	<input type="hidden" name="myid" value="555"/></br>
	6.图片域（不常用）
	<input type="image" src="img/img.jpg"/></br>
</form>


post:报文形式传递
get:通过地址栏方式传递
input 万金油标签

name的用途

用途：
	除了刚才使用的给 单选框 和多选框分组外，
	更重要的作用是：
		当提交数据时候，是以name属性的值 = value属性的值来提交
		xxxx?username=cjy
	文本框中使用value属性，就是设置默认值
	注意：当你文本框中输入值，其实就是给value属性设置内容，只是不显示而已
	
	在按钮中设置value，目的就是在按钮上显示文字
	在单选框和多选框中设置value，因为选框无法写内容，一定要写好value，作为数据往后台传输，否则你只会看到"on"

method

method=""
默认是get

get 和 post
post:报文形式传递,不会显示在地址栏（url)，可以传递文件，安全性高
get:通过地址栏方式传递,安全性低，传输的内容较小   --> 百度搜索的内容，安全性要求低

课堂练习

<h4>用户信息表</h4>
		<form>
			姓名：<input type="text"><br/>
			年龄：<input type="text"/><br/>
			性别：<input type="radio" checked="checked"/>男<input type="radio"/>女<br/>
			手机：<input type="text"><br/>
			邮箱：<input type="text"><br/>
			爱好：
			<input type="checkbox" /> 滑雪
		 	<input type="checkbox" /> 爬山
		 	<input type="checkbox" /> 游泳	
		 	<input type="checkbox" /> 上网
		 	<input type="checkbox" /> 踢球
		</form>

多行文本框和下拉框

	<!--  -->
    <form action="#">
			<table>
				<tr>
					<td>商品编号：</td>
					<!-- disabled="disabled" 不可用的，不能改也不能提交
                         readonly="readonly" 只读，不可用，只能提交 -->
					<td><input name="gid" value="P001" readonly="readonly" ></td>
				</tr>
				<tr>
					<td>商品名：</td>
					<td><input name="gname" type="text"></td>
				</tr>
				<tr>
					<td>商品预览图：</td>
					<td><input type="file" name="myfile"/></td>
				</tr>
				<tr>
					<td>商品数量：</td>
					<td><input type="number"></td>
				</tr>
				<tr>
					<td>商品类别：</td>
					<td>
						<!--下拉框-->
						<select name="city"> 
						  <!-- 下拉框选项 -->
						  <!--默认被选中-->
						  <option value ="volvo" selected="selected">水果</option>
						  <option value ="saab">衣服</option>
						  <option value="opel">手机</option>
						  <option value="audi">电脑</option>
						</select>
						</td>
				</tr>
				<tr>
					<td>商品描述：</td>
					<td>
						<!--多行文本框 普通标签 里面的文字和普通文字一样，有空格有回车，
						写在里面的标签都以文字的形式存在-->
						<!--rows="10" cols="16" 用来便是宽度和高度（单位是字的个数）通
						通常情况下，我们建议使用像素，多行文本框没有高度和宽度的属性。
						建议使用CSS样式来设置。-->
						<textarea style="height=200px; width=200px;">
						</textarea>
					</td>
				</tr>
				<tr>
					<td><input type="submit" value="提交"/></td>
					<td><input type="reset"/></td>
				</tr>
			</table>
		</form>

跑马灯

<!-- onmouseout 当鼠标移开当前标签时，触发时间
	 onmouseover 当鼠标移动（覆盖）当前标签时，触发事件
	 函数：stop()停止 start()开始
	 
	 marquee:行内元素
-->
<marquee onmouseout="" onmouseover="this.stop()">优惠大酬宾<img src="#" /> </marquee>

属性：
bgcolor:背景颜色
direction:跑马灯的方向，默认从左到右
behavior:滚动方式
scrollamount：滚动速度

<marquee onmouseout="" onmouseout="this.start()" onmouseover="this.stop()">优惠大酬宾<img src="#" /> </marquee>
<!-- 背景颜色 及 活动范围 -->
<marquee bgcolor=“yellow" width="200px">优惠大酬宾</marquee>
<marquee bgcolor=“pink" width="200px">优惠大酬宾</marquee>
<marquee bgcolor=“red" width="200px">优惠大酬宾</marquee>
<!--滚动方向-->
<marquee direction="up" bgcolor=“red" width="200px">优惠大酬宾</marquee>
<marquee direction="down" bgcolor=“cornflowerblue" width="200px">优惠大酬宾</marquee>
<marquee direction="left" bgcolor=“burlywood" width="200px">优惠大酬宾</marquee>
<marquee direction="right" bgcolor=“disque" width="200px">优惠大酬宾</marquee>

iframe

<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.360.com" target="myframe">奇虎</a>
<a href="http://www.sina.com" target="myframe">新浪</a>
<a href="http://www.mi.com" target="myframe">小米</a>
<a href="http://www.baidu.com">百度一下</a>
<iframe name="myframe" src="http://www.baidu.com" height="500px" width="1000px"> </iframe>

CSS

CSS 层叠样式表
作用：
定义如何显示HTML元素
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活

<!-- 外部样式：写在外部的CSS文件中，注意，只要写选择器就可以了,不要把style标签写进去 -->
p{
		color:red;
		backgroud-color:yellow;
		border:1px soild blue; 
		200px; 
		height:50px
	}
<!- 外部样式的使用,需要使用link标签把它引入进来，写在head标签中-->
<link rel="stylesheet" type="text/css", href="css/sytle01.css" />
<!-- 内部样式：写在head标签中的style标签里-->
<style type="text/css">
	<!-- 需要选择器来确定你要选中那些标签进行样式设置 -->
	<!-- 标签选择器 -->
	p{
		color:red;
		backgroud-color:yellow;
		border:1px soild blue; 
		200px; 
		height:50px
	}
</style>
<!-- 写在body中 行内样式：把CSS样式代码标签中的style属性中，html内容和样式不分离，造成代码冗余 -->
<p style="color:red: background-color:yellow; border:1px soild blue; 200px; height:50px">

css三种引入方式：
	1.行内 
	写在body中 行内样式：把CSS样式代码标签中的style属性中，html内容和样式不分离，造成代码冗余
	2.内部 
	写在head标签中的style标签里
	3.外部 
	写在外部的CSS文件中

在正式项目中，更倾向于使用外部，内部其次，行内偶尔

基本选择器

三大选择器
1. 标签选择器：选中页面中所有的标签
<p style="color:red: background-color:yellow; border:1px soild blue; 200px; height:50px">

2. 类（class）选择器：选中当前页面中标签class属性值为类选择器的标签
类选择器可以有多个标签拥有它
// 类选择器 的前缀 .
// 在head中写
.rp {
	border:1px solid red;
}
.gp {
	border:1px solid green;
}
// 在body中
<p class="rp">p1</p>
<p class="gp">p2</p>

3. id选择器：id是唯一的，页面中不能存在两个id值一样的标签（作为程序员的语法规范，要自觉维护，虽然在css样式中不会出现问题，但在js中会出现问题）

优先级：
标签选择器 < class选择器 < id选择器

类选择器 num
id选择器 dyh
标签选择器 其他

color:字体颜色
background-color:背景颜色

三大选择器练习

css

		<style>
			td{ 
				text-align: center;
				color: white;/*字体颜色*/
				height: 60px;
				 80px;
			}
			input{
				height: 42px;
				 315px;
				text-align: right;
				font-size: 20px;
			}
			.num{
				background-color:#BDBFD9; /*背景颜色*/
			}
			#dyh{
				background-color:#D47700 ;
			}
		</style>

body

<table border="1px" cellspacing="0">
			<tr>
				<td colspan="4" width="300" height="400" style="background: #5B88A5;"><input /></td>
			</tr>
			<tr>
				<td style="background: #5B88A5; color: white;">C</td>
				<td style="background: #5B88A5; color: white;">←</td>
				<td style="background: #5B88A5; color: white;">÷</td>
				<td style="background: #6f4b35; color: white;">×</td>
			</tr>
			<tr>
				<td class="num">7</td>
				<td class="num">8</td>
				<td class="num">9</td>
				<td style="background: #6f4b35; color: white;">－</td>
			</tr>
			<tr>
				<td class="num">4</td>
				<td class="num">5</td>
				<td class="num">6</td>
				<td style="background: #6f4b35; color: white;">＋</td>
			</tr>
			<tr>
				<td class="num">1</td>
				<td class="num">2</td>
				<td class="num">3</td>
				<td id="dyh" rowspan="2">＝</td>
			</tr>
			<tr>
				<td style="background: #5B88A5; color: white;">√</td>
				<td class="num">0</td>
				<td style="background: #5B88A5; color: white;">.</td>
				
			</tr>
		</table>

样式的优先级

行内样式 > 内部样式，外部样式（就近原则）

组合选择器

后代和子代选择器

// 优先级权重 
行内样式 1000
id选择器 100
类选择器 10
标签选择器 1

// 更推荐子代选择器
// css
// 作用于p标签中的s标签
<style type="text/css">
	// 后代选择器
	#father s {
		border:1px solid red;
	}
	// 子代选择器 只选中子代哪一层的s标签
	#father>s {
		border:1px solid green;
	}
	#father>b>s {
		border:1px solid yellow;
	}
//body
//p标签的s标签都被后代选择器选中
<p id=“father">
	<s>ssssss1</s> // 被子代选择器father>s选中
	<s>ssssss2</s> // 被子代选择器father>s选中
	<b><s>bbbbbb</s></b>//被子代选择器father>b>s选中
	<a><u><s>aaaaaa</s></u></a>
</p>
<s>ssssss</s>

后代和子代选择器练习

   <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1 em{border: 1px  solid blue;}
			p em{border: 2px dashed green;}
			p>s>b{border: 3px solid gold}
		</style>
	</head>
	<body>
		<h1>This is a <em>important</em> heading</h1>
	    <p>This is a <em>important</em> paragraph.</p>
	    <p>This is a  <strong>very<em>important</em></strong>paragraph.</p>
	 	<p><s><b>Just do it!!!</b></s></p>
	</body>

伪类选择器

常用： a:hover:鼠标悬浮其上的超链接样式
<style>
	#aid:hover{
		background-color:pelegoldenrod;
	}
	#aid:active{	//鼠标长按不放
		background-color:blue;
	}
	#aid:link{
		border:1px soild red;
	}
	#aid:visited{
		border:1px soild blue;
	}
</style>

原则上,对于a标签只要一种设置
#aid{
	color:black;
}
#aid:hover{
	color:blue;
}

hover的使用

img{
	height:100px;
}
img:hover{
	height:200px;
}


ul{ 
	display:none;/*不显示ul标签*/
}

/* 当悬停在div上时，它的子元素ul会被选中
div:hover>ul{
	display:block;/*设置为块元素，会显示*/
	background-color:pink;
}
/* ul被隐藏找不到,没效果*/
div>ul:hover{
}
}
<div>
    <ul>
        <li>衣服</li>
        <li>手机</li>
        <li>蔬菜</li>
        <li>电脑</li>
    <ul>
</div>