html-前端小记
1、html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" Content="200;Url=http://www.baidu.com/" /><!-- 200秒后跳转到百度-->
<!--meta http-equiv="Refresh" Content="5" --><!-- 5秒刷新一次-->
<meta name="keywords" content="xkq,银河系"><!-- 设置关键词 -->
<meta name="description" content="银河系是介绍。。。。"><!-- 描述 -->
<link rel="icon" href="favicon.c19cd042.ico" type="image/x-icon"><!-- title上会显示图标-->
<title>My html</title>
</head>
<body>
<div style="width:100%;border:2px solid red;word-break:break-all">
<fieldset>
<legend>登陆</legend>
<form action="http://www.xkq.com/action" enctype="multipart/form-data" method="post" >
<div>
文件：<input type="file" name="filess"><br/>
</div>
<div>
姓名：<input type="text" name="name"><br/>
</div>
<div>
年龄：<input type="text" name="age"><br/>
</div>
<div>
地址：<input type="text" name="address"><br/>
</div>
<div>
<textarea name="tttttt">Please input your context</textarea>
</div>
<select multiple=multiple size="6">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>安徽</option>
<option value="4">哈尔滨</option>
</select><br/>
<input type="submit" value="提交">
</form>
</fieldset>
</div>
<div style="width:100%;border:2px solid red;word-break:break-all">
<table border="1" bgcolor="#ffc0cb" >
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xkq</td>
<td>18</td>
<td>上海</td>
</tr>
<tr>
<td>2</td>
<td>张青</td>
<td>18</td>
<td rowspan="2">北京</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">张青 18</td》
</tr>
</tbody>
</table>
</div>
<div style="width:100%;border:2px solid red;word-break:break-all">
ul ol dl<br/>
<ul>
<li>wer</li>
<li>wer</li>
</ul>
<ol>
<li>wewee</li>
<li>wewee</li>
<li>wewee</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>ddddd</dd>
<dd>ddddd</dd>
<dd>ddddd</dd>
<dt>标题2</dt>
<dd>dddddd</dd>
<dd>dddddd</dd>
<dd>dddddd</dd>
</dl>
<hr/>
<p>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="text" value="Please input your context"/>
<input type="password" />
<input type="button" value="按钮" />
<input type="file" />
<input type="submit" value="提交" />
<br/>
<textarea>Please input your context</textarea>
</p>
<hr>
label<br/>
<label for="hunfou">婚否</label>
<input id="hunfou" type="checkbox" />
<hr>
<p>
男：<input name=sex type="radio" /><br/>
女：<input name=sex type="radio" />
</p>
<hr>
<h1>表单</h1>
<form action="http://www.xkq.com/action">
<div>
姓名：<input type="text" name="name"><br/>
</div>
<div>
年龄：<input type="text" name="age"><br/>
</div>
<div>
地址：<input type="text" name="address"><br/>
</div>
<input type="submit" value="提交">
</form>
</div>
<div style="width:100%;border:2px solid red;word-break: break-all">
<img title="猎聘" src="favicon.c19cd042.ico" width="100px" heiht="100px" />
<select>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>安徽</option>
<option value="4">哈尔滨</option>
</select>
<select size="2">
<option >北京</option>
<option>上海</option>
<option selected>安徽</option>
<option>哈尔滨</option>
</select>
<select multiple=multiple size="6">
<option >北京</option>
<option>上海</option>
<option selected>安徽</option>
<option>哈尔滨</option>
</select>
<select >
<optgroup label="中国">
<option >北京</option>
<option>上海</option>
<option selected>安徽</option>
<option>哈尔滨</option>
</optgroup>
<optgroup label="外国">
<option >美国</option>
<option>英国</option>
<option >小日本</option>
<option>朝鲜</option>
</optgroup>
</select>
</div>
<div style="width:100%;height:200px;border:2px solid black;word-break: break-all">
pppppppppppppppppppppppppppppppp
</div>
<div style="width:100px;border:2px solid green;word-break:break-all" >
<p>sadxssssssssssssssdddddddwasssssssssssssssss<br/>sssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
<p>sadxssssssssssssssdddddddwassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
<a href="http://www.baidu.com" target="_blank">百度一下</a><br/>
<a href="#last">底部</a>
<div id=first style="height: 1000px;background-color: pink">fist</div>
<div id=secondary style="height: 1000px;background-color: green">secondary</div>
<div id=last style="height: 1000px;background-color: blue">last</div>
<a href="#first">顶部</a>
</div>
</body>
</html>
2、html标签实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" Content="200;Url=http://www.baidu.com/" /><!-- 200秒后跳转到百度-->
<!--meta http-equiv="Refresh" Content="5" --><!-- 5秒刷新一次-->
<meta name="keywords" content="xkq,银河系"><!-- 设置关键词 -->
<meta name="description" content="银河系是介绍。。。。"><!-- 描述 -->
<link rel="icon" href="favicon.c19cd042.ico" type="image/x-icon"><!-- title上会显示图标-->
<title>标签学习</title>
</head>
<body>
<dev>
<div style="height:40px;background-color: pink;padding-left: 50%;c">头部dddddddddddddddddddd</div>
</dev>
<hr/>
<div>
<div style="width:10%;height:300px;float: left;background-color:green">左边内容</div>
<div style="width:90%;height:300px;float:left;background-color: palevioletred">
<div style="width:250px;height: 300px;background-color: wheat;float: left;">
<form action="http://www.xkq.com/action" enctype="multipart/form-data" method="post" style="background-color: gainsboro;width: 250px">
<div>
姓名：<input type="text",name="name" /><br/>
年龄：<input type="password" name="pwd"/>
</div>
<div>
<label for="man">男</label>
<input type="radio" id="man" name="sex" value="1">
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" value="0">
</div>
<div >
散步:<input type="checkbox" name="hobby" value="1">
钓鱼:<input type="checkbox" name="hobby" value="2"/>
撩妹:<input type="checkbox" name="hobby" value="3"/>
</div>
<div>
地区：
<select name="city" >
<optgroup label="中国">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>安徽</option>
<option value="4">哈尔滨</option>
</optgroup>
<optgroup label="外国">
<option value="5" >美国</option>
<option value="6">英国</option>
<option value="7">小日本</option>
<option value="8">朝鲜</option>
</optgroup>
</select>
</div>
<div>
<input type="file" name="file_name" />
</div>
<div>
<textarea name="beizhu" style="margin: 0px; width: 245px; height: 145px;">备注信息</textarea>
</div>
<input type="submit" name="提交"/>
</form>
</div>
</div>
</div>
</body>
</html>
3、css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="css_file.css" />
<style>
.aa{
display: none;
font-size: 200px;
background-color: pink;
height: 100000px;
}
.b1{
background-image: url("http://www.autohome.com.cn/images/error/bg.png");
background-repeat:repeat-x;
border-top: 2px dotted red;
border-left: 2px dotted red;
}
</style>
</head>
<body class="b1">
<div class="xkq">xkq</div>
<div class="aa">aa</div>
<div class="b1">bb</div>
<div style="font-size: 20px;background-color: pink">ddddd</div>
<hr/>
display:none 隐藏标签<br/>
display:block 将标签变为块标签<br/>
display:inline 将标签变为内联标签<br/>
<!--
寻找标签
class选择器
.c1{}
<div class="c1"></div>
<div class="c1"></div>
标签选择器
a{color:pink;}
html中所有a标签都会变成pink颜色
div
span
h1
select
input[type='text']{}
ID选择器
#xx{}
<div id="xx">ddd</div>
层级选择器
.aa a div span{}
<div class="aa">
<a>
<div>
<span></span>
</div>
<span></span>
</a>
</div>
组合选择器
a,p{color:red;}
a标签，b标签颜色都为红色
-->
</body>
</html>
##############################################
css_file.css
.xkq{
background-color: black;
color: aqua;
}
