form_.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body background="images/timg.jpg">
<center>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend>用户基本信息</legend>
<p>
用户名：
<input type="text" name="user" maxlength="12" placeholder="6-12位" required>
</p>
<p>
密码：
<input type="password" name="pwd">
</p>
<p>
再次确认：
<input type="password" name="repwd">
</p>
<p>
性别：
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0" readonly>女
</p>
</fieldset>
<p>
爱好：
<input type="checkbox" name="babit" value="阅读" checked>阅读
<input type="checkbox" name="babit" value="旅游">旅游
<input type="checkbox" name="babit" value="游戏">游戏
<input type="checkbox" name="babit" value="电影">电影
</p>
<p>
头像：
<input type="file" multiple>
</p>
<p>
<select name="prov">
<option value="10000">成都</option>
<option value="20000">西安</option>
<option value="30000">上海</option>
<option value="40000" selected>深圳</option>
</select>
</p>
<p>
生日：
<input type="date" name="birt"/>
</p>
<p>
邮箱：
<input type="email" name="email"/>
</p>
<p>
手机：
<input type="tel" name="tel"/>
</p>
<p>
===:
<input type="image" src="images/a1.jpg"><br> <!-- 以图片作为提交按钮 -->
<input type="hidden" name="aaa" value="bbb"> <!--影藏字段，对用户不显示，用于内部区分，如地区 -->
</p>
<p>
自我介绍：
<textarea rows="10" cols="10" name="intr" placeholder="请输入"></textarea> <!-- 不能写成<textarea rows="10" cols="10" /> -->
</p>
<p>
<input type="submit" value="确定提交" />
<input type="reset" value="重置" />
<!-- hidden image -->
</p>
</form>
</center>
</body>
</html>
av_html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>av_</title>
</head>
<body>
<!-- 行级标签（元素）：在一行连续排列，超过一行才换行/块级标签（元素）：独占整行-->
<!-- 行级标签：h1-h6,p,div,ul,ol,dl,table,form,hr -->
<!-- 块级标签：a,img,iframe,button,span,input,br -->
<!-- 可以不写结束标签的有br,hr,img,input,link -->
<audio src="audio/打上花火.mp3" autoplay controls loop></audio>
<video controls width="400" height="400">
<source src="video/mov_bbb.mp4"></source>
</video>
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
<iframe src="http://map.baidu.com" width="300" height="300"></iframe>
</body>
</html>
css_.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<!-- 外部样式表 -->
<link rel="stylesheet" href="css/style.css">
<!-- 除首页外其他页面可以使用外部样式表，可以复用，节省带宽 -->
<style>
/* 以下皆为内部样式表 一般情况下网站首页使用内部样式表，保证首页正常渲染*/
/* 通配符选择器，全局通用 */
* {
margin: 0; /* 0不用带单位，结果都一样 */
padding: 0; /* 清楚默认内外边距 */
}
/* 标签选择器 */
h1 {
width: 600px;
height: 30px;
margin: 0 auto;
}
/* 类选择器 */
.a {
background-color: red;
}
.b {
background-color: orange;
}
.c {
background-color: yellow;
}
.d {
background-color: green;
}
.e {
background-color: cyan;
}
.f {
background-color: blue;
}
.g {
background-color: purple;
}
.h {
color: white;
text-align: center;
width: 30px;
height: 30px;
overflow: hidden; /* 超出部分不显示,设置了长宽后,居中只在指定长宽范围居中了 */
}
/* ID选择器，唯一标识 */
#header,#footer {
width: 900px;
height: 80px;
border: 1px solid green;
margin: 10px auto;
}
#h3 {color: red;}
.h3 {color: green !important;}
.h3 {
color: blue !important;
border: 5px dotted #FFA500;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
margin-top: 50px;
padding: 100px 100px;
}
h3 {color: yellow;}
</style>
</head>
<body>
<div id="header"></div>
<h1 class="a"></h1>
<h1 class="b"></h1>
<h1 class="c"></h1>
<h1 class="d"></h1>
<h1 class="e"></h1>
<h1 class="f"></h1>
<h1 class="g"></h1>
<p class="g h">hello world</p>
<p>hello python</p>
<div id="footer"></div>
<!-- 标签内使用style这种叫内嵌样式表或行内样式表，尽量不用，维护麻烦 -->
<h6 class="g" style="font-size: 30px;color:green;">hahahahahahha</h6>
<!-- 如果样式不冲突，会叠加，有冲突的样式遵循三条原则
1.就近原则 优先级低
2.具体性原则 优先级中(id>类>标签>通配符)
3.重要性原则 优先级高 -->
<h3 class="h3" id="h3">样式优先级</h3>
</body>
</html>
