一.表单 <form action="" method="post" enctype="multipart/form-data">
用户名, 密码, 确认密码, 性别, 爱好, 省份, 生日 ,邮箱, 头像, 自我介绍
用户名: text
<input type="text 定义类型是文本
name="username" 传给服务器时的值是name后面的""
maxlength="30" 输入的字符的最大长度
size="30" 文本框最大长度30
placeholder="用户名由6-20字符组成" 文本框里面的提示文字
required> 必须要求填写的密码:password
<input type="password" name="password" required>确认密码:
<input type="password" name="password" required>性别: radio- 单选按钮
<input type="radio" name="sex" value="1"checked="">男---(checked是默认值的)(radio单项选择)
<input type="radio" name="sex" value="0">女---(同样的name,不同的value,来设置互斥的两个选项)爱好:checkbox- 多选按钮
<input type="checkbox" name="fav" value="阅读">阅读
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食"checked="">美食
<input type="checkbox" name="fav" value="运动">运动省份:<select> - 选择
<option></option> ---做下拉效果
</select>生日 : date - 日期
<input type="date" name="brithday">邮箱; email - 邮箱(要求里面有@)
<input type="email"required name="mail">头像: file
<input type="file" name="photo" > ---" enctype="multipart/form-data"在from的属性中一定要有enctype=才能给服务器传东西.自我介绍: textare 文本区
<textarea cols="30" rows="10" name="introduction"></textarea>提交按钮 -submit
<input type="submit" value="确认提交" readonly>重新提交 - reset
<input type="reset" value="重新填写"><fieldset> </fieldset> 自定义字段
<figure> 添加图片和图片说明
<img src="images/bok-choi.jpg" alt="">
<figcaption>图1. 这是一个图片</figcaption>
-<figcaption> 图片说明的意思</figure>
添加音频,视频
<audio controls autoplay loop>
<source src="audio/test-audio.mp3"></source>
</audio>
<video width="400" controls>
<source src="video/puppy.mp4"></source>
</video>
<!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="30"
size="30" placeholder="用户名由6-20个字符构成" required >
</p>
<p>
密码:
<input type="password" name="password" required>
</p>
<p>
确认密码:
<input type="password" name="repassword"required>
</p>
<p>
性别:
<input type="radio" name="sex" value="1"checked="">男
<input type="radio" name="sex" value="0">女
</p>
<p>
爱好:
<input type="checkbox" name="fav" value="阅读">阅读
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食"checked="">美食
<input type="checkbox" name="fav"value="运动">运动
</p>
<p>
省份:
<select name="province" >
<option value="110000">北京</option>
<option value="510000" selected>四川</option>
<option value="500000" >重庆</option>
<option value="310000">上海</option>
<option value="120000">天津</option>
</select>
</p>
<p>
生日:
<input type="date" name="brithday">
</p>
<p>
邮箱:
<input type="email"required name="mail">
</p>
<p>
头像:
<input type="file" name="photo" >
</p>
<p>
自我介绍:
<textarea cols="30" rows="10" name="introduction"></textarea>
</p>
<p>
<input type="submit" value="确认提交" readonly>
<input type="reset" value="重新填写">
</p>
</form>
</body>
</html>
添加音频视频:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls autoplay loop>
<source src="audio/test-audio.mp3"></source>
</audio>
<video width="400" controls>
<source src="video/puppy.mp4"></source>
</video>
</body>
</html>
运行效果:
![16627003-b049f702a4aec47f.png](https://i-blog.csdnimg.cn/blog_migrate/e61ae658870bfe94f6d8600c393fe1fe.webp?x-image-process=image/format,png)
二.标签分类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
1.ctrl +/ 行级标签(元素)inline element / 块级标签(元素)block element < >
- ctrl +/ 块级:h1-h6 / p / div / ul / ol / dl / table / form / hr
- ctrl +/ 行级:a / img / iframe / button / span / input / textarea / select / br
<!-- internal frame(内部窗口)-->
<img title="商品图片" src="images/a1.jpg" alt="">
<img src="images/a2.jpg" alt="">
<iframe src="http://map.baidu.com" width="400"
height="400" frameborder="0"></iframe>
<iframe src="http://www.jd.com" width="400"
height="400" frameborder="0"></iframe>
<p>1</p>
<p>2</p>
<p>3</p>
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span>
<span>2</span>
<span>3</span>
<button>确定</button>
<button>取消</button>
<a href="">百度</a><a href="">京东</a>
</body>
</html>
2.CSS层叠样式表
a.一般情况下网站的首页会使用内部样式表 - 首页正常渲染
其他的页面可以共享一个或多个外部样式表 - 代码复用/减少对带宽和流量的使用
<link rel="stylesheet" href="css/style.css"
b. 不冲突的样式会叠加,有冲突的样式遵循三条原则
1. 就近原则
2. 具体性原则(ID > 类 > 标签 > 通配符)
- 重要性原则
a.标签选择器 h1{}
b.类选择器 .类名{} -class = "类名"
c.ID选择器 #名称{}
d.通配符选择器--清除默认内外边距 *{}
*{
margin(外边距) =0;padding (内边距)= 0;
} 清除内外所有边距
注:不冲突的样式会叠加;如果样式有冲突,遵循三条原则
1.就近原则
2.具体性原则 ID选择器 > 类选择器 > 标签选择器>通配符选择器
3.重要性原则 !important
4.标签选择器
/* 标签选择器 */
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<style>
#h1 { color: blue; }
.h1 { color: green !important; }
.h1 {
color: pink !important;
border: 5px dotted #FFA500;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
margin-top: 50px;
padding: 100px 100px;
}
h1 { color: red; }
</style>
</head>
<body>
<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new';
text-align: center;">Hello, world!</h1>
<h1 class="h1" id="h1">Goodbye world!</h1>
</body>
</html>
#### 2.
内嵌样式表 / 行内样式表
<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new';
text-align: center;">Hello, world!</h1>
####3.
Box Model(盒子模型)
<h1 class="h1" id="h1">Goodbye world!</h1>