form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的例子-注册</title>
<style>
.a{
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<p class="a">
用户名：
<input type="text" name="username" size="30" maxlength="20" placeholder="用户名由6~20个字符构成" required> <!--readonly:只读不能改-->
</p>
<p class="b">
密码：
<input type="password" name="password" required>
</p>
<p>
确认密码：
<input type="password" name="repassword" required>
</p>
<p>
性别：
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="2">女
</p>
<p>
爱好：
<input type="checkbox" name="fav" value="阅读" checked>阅读
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食">美食
<input type="checkbox" name="fav" value="运动" checked>运动
</p>
<p>
省份：
<select name="province">
<option value="110000">北京</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="500000">重庆</option>
<option value="510000" selected>四川省</option>
</select>
</p>
<p>
生日：
<input type="date" name="birthday">
</p>
<p>
邮箱：
<input type="email" name="email" required>
</p>
<p>
头像：
<input type="file" name="photo" enctype="multipart/form-data"> <!--multiple:放多个文件-->
</p>
<p>
自我介绍：
<textarea cols="30" rows="10" name="intro"></textarea>
</p>
<p>
<input type="submit" value="确认注册">
<input type="reset" value="重新填写">
</p>
<p hidden="hidden">隐藏的文字</p>
</form>
</body>
</html>
av
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>av_example</title>
</head>
<body>
<audio controls autoplay loop>
<source src="audio/Madison%20Beer%20_%20미연%20(美延)%20_%20전소연%20(田小娟)%20_%20Jaira%20Burns%20-%20POP_STARS.mp3"></source>
</audio>
<video width="400" controls>
<source src="video/Red%20Velvet%20(레드벨벳)-Bad%20Boy(蓝光).mp4"></source>
</video>
</body>
</html>
frame
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--行级标签（元素）/ 块级标签（元素）-->
<!-- h1~h6/p/div/ul/dl/ol/table/form/hr - 块级标签-->
<!-- a/img/iframe/button/span/input - 行级标签-->
<iframe src="https://map.baidu.com" width="400" height="400" frameborder="0"></iframe>
<iframe src="https://www.taobao.com" width="400" height="400" frameborder="0"></iframe>
</body>
</html>
css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_example</title>
<!--一般情况下网站首页用内部样式表 - 首页正常渲染-->
<!--其他的可以共享一个或多个外部样式表 - 代码复用/减少对贷款和流量的消耗-->
<!--外部样式表-->
<link rel="stylesheet" href="css/style.css">
<!--内部样式表-->
<style>
* {
border: 1px dashed black;
}
</style>
</head>
<body>
<div id="header"></div>
<h1 class="a">hello world</h1>
<h1 class="b">hello world</h1>
<h1 class="c">hello world</h1>
<h1 class="d">hello world</h1>
<h1 class="e">hello world</h1>
<h1 class="f">hello world</h1>
<h1 class="g">hello world</h1>
<p class="c h big">李白-静夜思</p>
<div id="footer"></div>
</body>
</html>
style.css
/*通配符选择器*/
* {
margin: 0;
padding: 0;
}
/*标签选择器*/
h1 {
width: 960px;
height: 40px;
margin: 5px auto;
text-align: center;
}
/*类选择器*/
.a{
background-color: red;
}
.b{
background-color: orange;
}
.c{
background-color: rgba(255, 0, 0, 0.5);
}
.d{
background-color: green;
}
.e{
background-color: cyan;
}
.f{
background-color: blue;
}
.g{
background-color: purple;
}
.h{
color:blue;
text-align: center;
width: 100px;
height: 40px;
overflow: scroll;
}
.big{
font-size: 32px;
}
.normal{
font-size: 18px;
}
.small{
font-size: 12px;
}
/*ID选择器*/
#header, #footer {
width:800px;
height:120px;
border:1px solid red;
margin: 10px auto;
}
css2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<!--不冲突的样式会叠加，有冲突的样式遵循三条原则-->
<!--1.就近原则-->
<!--2.具体性原则-->
<!--3.重要性原则-->
<style>
#h1{color:blue;}
.h1{
color:pink !important;
border: 5px dotted #ffA500;
width:300;
height: 80px;
text-align: center;
margin-top:50px;
padding: 100px 100px;
}
h1{color: red;}
</style>
</head>
<body>
<h1 class="c">I love you</h1>
<!--box model (盒子模型)-->
<h1 class="h1" id="h1">Goodbye</h1>
</body>
</html>
