HTML表单标签及属性样式CSS
一.多媒体标签(仅限于在html5)
1.视频
<video controls="controls" width="400" height="400" loop poster="./images/linux.jpg">
<source src="./mus/back.mp4" type="video/mp4" />
</video>
2.音频
<audio controls="controls">
<source src="D:\qqdownload\1.mp3" type="audio/mp3"/>
</audio>
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
二.提交表单的标签
1.文本框标签
input标签
name:自定义的参数名
value:自定义的默认值
type:定义输入框的类型
text 文本
password 密码
date 日期
#必须有name和value属性
checkbox 复选框
桌球 <input type="checkbox" name="hobby" value="1"><br>
健身 <input type="checkbox" name="hobby" value="2">
radio #单选框
男 <input type="radio" name="sex" value="m"><br>
女 <input type="radio" name="sex" value="w">
#文本选择框
<input type="file" />
#提交按钮
<input type="submit" value="提交">
<button>提交</button>
select标签 #下拉菜单
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
必须加name,每个option必须加value
textarea 多行文本标签
<textarea name="memo" id="memo" cols="30" rows="10"></textarea>
style="resize: none;" #文本框不可拖动大小
2.表单的定义与提交
form
通过form表单标签,能够让我们完成前端与后台的数据交互,比如:能够将用户输入或者选择或者上传的文件等内容发送到后台,后代程序再将数据保存到数据库中。
<form action='1.php' method='get'>
</form>
3.归纳框
fieldset标签
legend #标题
4.文本框对齐问题
方式1:空格符占位
方式2:通过table表格对齐
通过table表格对齐
<table>
<h1>个人信息注册</h1>
<tr>
<td>账号:</td> <td><input type="text" name="user"></td>
</tr>
<tr>
<td>密码:</td> <td> <input type="password" name="pass"></td>
</tr>
<tr>
<td>确认密码:</td> <td><input type="password" name="pass2"></td>
</tr>
</table>
三.CSS样式
1.介绍
#定义CSS样式的格式
标签选择器{属性名:值;属性名2:值}
2.CSS样式的引用方法
方式1:行内样式
<p style="color: red;font-size: 50px;">测试样式显示</p>
很少用
方式2:内部样式
写到head标签中的style标签就叫做内部样式
<style>
p{
color:red;
}
</style>
不常用.只针对文本生效
方式3:外部样式
单独编辑css样式文件,哪些html文件需要引用
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
3.CSS中的选择器类型
标签选择器:标签名{css属性}
#指定标签全部生效
h1{
font-style: italic;
font-family: Lisu;
}
ID选择器
定义格式:#选择器名称{属性}
#test{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
引用:<p id='选择器名称'/>
<h1 id="test">测试</h1>
类选择器
定义格式:.选择器名称
引用:<p class='选择器名称'/>
四.CSS常用属性
1.字体颜色
color:单词
color:RGB #11 11 11 #十六进制数 1~F
RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
background-color: #CCCCCC;
RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
2.字体属性:font
*font-size 字体大小:20px,60%基于父对象的百分比取值
*font-family 字体:宋体,Arial font-family: "Microsoft Yahei";
font-style normal正常;italic斜体; oblique倾斜的字体
*font-weight 字体加粗 :bold。 bolder 900
3.文本属性
text-indent: 首行缩进:text-indent:30px; 2em
text-overflow: 文本的溢出是否使用省略标记(...)。clip|ellipsis(显示省略标记)
white-space: nowrap; /* 强制在同一行内显示所有文本*/
*text-align: 文本的位置:left center right
*text-decoration: 字体画线:none无、underline下划线,line-through贯穿线 overline
*text-shadow: 文本的文字是否有阴影及模糊效果
text-shadow:1px 1px rgba(0,0,0,0.3);
*letter-spacing: 文字或字母的间距
*line-height 行高
*color 字体颜色
vertical-align: middle; 垂直对齐
line-height: 50px;
4.背景属性:background
*background-color: 背景颜色
*background-image: 背景图片
*background-repeat:是否重复,如何重复?(平铺)
*background-size: 背景大小,如 background-size:100px 140px;