HTML表单标签及属性样式CSS

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;