-
表单form:
包含表单元素的区域(表单元素 -- 允许用户在表单中输入的内容)
<form action=" " method="post" enctype="multipart/form-data">
method = get (从服务器获取资源) / post(提交数据给服务器)
文本内容: type = "text"
密码内容(显示*):type = "password"
单选: type = "radio" name = '' "(分组)
复选: type = "CheckBox" name = " "(分组)
下拉列表:<select name=" " id=" ">
时间: <input type="date" name=" ">
文本框:<textarea name="" id="" cols="" rows=""></textarea>
提交按钮:<input type="submit" value=" ">
重置按钮<input type="reset" value=" ">
enctype="multipart/form-data" -- 有文件上传必须写
placeholder=" "占位符
required 必须填写的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action=" " method="post" enctype="multipart/form-data">
<p>
用户名:
<input type="text" name="username"
maxlength="12"
size="20" placeholder="用户名由6-12个字符组成" >
</p>
<p>
密码:
<input type="password" required>
</p>
<p>
确认密码:
<input type="password" required>
</p>
<p>
性别:
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
</p>
<p>
爱好:
<input type="checkbox"name="favorite" value="阅读"checked>阅读
<input type="checkbox"name="favorite"value="旅游">旅游
<input type="checkbox"name="favorite"value="美食">美食
<input type="checkbox"name="favorite"value="运动">运动
</p>
<p>
地址
<select name="province" id="">
<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">
</p>
<p>
自我介绍:
<textarea name="introduction" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="确认注册">
<input type="reset" value="重新填写">
</p>
</form>
</body>
</html>
-
audio/video
插入音频audio -
<audio autoplay controls loop> 自动播放/显示控制/循环播放
<source src="音频文件地址" ></source>
</audio>
插入视频video -
<video width=" " height=" " controls>视频框大小
<source src="视频文件地址" ></source>
</video>
内嵌网页 -
<iframe src="http://www.baidu.com" width="900" height="700" widframeborder="0"></iframe>
<iframe src="http://www.jd.com" width="900" height="700" frameborder="0"></iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio autoplay controls loop>
<source src="audio/test-audio.mp3" ></source>
</audio>
<video width="400" controls>
<source src="video/puppy.mp4" ></source><br>
</video>
<iframe src="http://www.baidu.com" width="900" height="700" widframeborder="0"></iframe>
<iframe src="http://www.jd.com" width="900" height="700" frameborder="0"></iframe>
<p class="normal a">腹有诗书气自华</p>
</body>
</html>
-
层叠样式表(css)
a.内部样式表: 一般情况下网站的首页常用内部样式表
b.外部样式表: 其他的页面可以公用一个或多个外部样式表--代码复用;减少对带宽和流量的使用
c.内嵌样式表/行内样式表--通过标签的style属性修改样式(不建议使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- /* 内部样式表 一般情况下网站的首页常用内部样式表*/ -->
<!-- 其他的页面可以公用一个或多个外部样式表--代码复用,减少对带宽和流量的使用 -->
<!-- 内嵌样式表/行内样式表--通过标签的style属性修改样式(不建议使用)-->
<link rel="stylesheet" href="style.css">
<!-- 不冲突的样式会叠加;如果样式有冲突,遵循三条原则 -->
<!-- 1.就近原则 -->
<!-- 2.具体性原则 ID选择器 > 类选择器 > 标签选择器 -->
<!-- 3.重要性原则 !important -->
<style>
.i{color:skyblue}
h2{color:red !important;}
/* boxmodel盒子模型 */
#ii{color: #FFFF00;}
*{border:3px solid #800080}
</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>
<div id="footer"></div>
<p class="e h big" >
静夜思 -- 李白
</p>
<p class="normal d h" style="background-color:blue;font-family:'edwardian script itc';">床前明月光</p>
<p class="big e " style="background-color: chartreuse;">疑是地上霜</p>
<h2 class="i" id="ii">举头望明月</h2>
</body>
</html>
a.标签选择器 h1{}
b.类选择器 .类名{} -class = "类名"
c.ID选择器 #名称{}
d.通配符选择器--清除默认内外边距 *{}
-
注:不冲突的样式会叠加;如果样式有冲突,遵循三条原则
1.就近原则
2.具体性原则 ID选择器 > 类选择器 > 标签选择器
3.重要性原则 !important
/*标签选择器*/
h1{
width: 960px;
height: 40px;
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:red;
text-align: center;
width: 100px;
height: 40px;
overflow:hidden;
}
.big{font-size: 32px;}
.normal{font-size:18px;}
.small{font-size: 12px;}
/* ID选择器(唯一) */
#header,#footer{
width:800px;
height: 120px;
border: 1px solid red;
margin: 0 auto;
}
/* 通配符选择器--清除默认内外边距 */
*{
margin: 0;
padding: 0;
}
