前端（day01）html

html：超文本标记语言实现页面展现，形成静态网页

HBuder常用快捷键

1.不区分大小写

2.空格：&nbsp

3.换行：<br>

4.无序排列：<ul><li>

5.有序排列：<ul><oi>

6.图片标签：<img src=" " width="" height="">

7.超链接：<a href=""></a>

属性：

指定超链接打开方式：target=" _black"跳转网页

锚定：从当前位置回到指定位置

	<body>
		<a name="a">顶部</a>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<h1>哈哈哈哈</h1>
		<a href="#a">回到指定位置</a>
	</body>

8.输入框：

<input type="text" />      普通文本框
<input type="password" /> 密码
<input type="radio"/>  单选框
<input type="number" />   数字值
<input type="week" />    日历
<input type="checkbox" />  复选框
<input type="button"  value="点我一下"/>
<input type="submit"  value="提交数据"/>

9.表格标签

table表示表格，tr表示行，td表示列，th表示表头

属性：

bgcolor背景色，border边框，cellspacing单元格的间距，colspan合并列，rowspan合并行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="10px" cellspacing="0px" cellpadding="">
			<tr>
				<th>页面流量</th>
				<th>共计来访</th>
				<th>会员</th>
				<th>游客</th>
			</tr>
			<tr>
				<td>212</td>
				<td>254</td>
				<td>25231</td>
				<td>211221</td>
			</tr>
			<tr>
				<td>平均浏览人数</td>
				<td colspan="3">14654</td>
			</tr>
			<tr>
				<td rowspan="2">行合并</td>
				<td>254</td>
				<td>25231</td>
				<td>211221</td>
			</tr>
			<tr>
				<td>798731</td>
				<td>25231</td>
				<td>211221</td>
			</tr>
		</table>
	</body>
</html>

 

10.表单标签：from的属性：

method用来指定数据提交方式，默认是get

action属性用来指定数据提交给哪段java代码来处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form method="post" action="#"> #暂时不连接后端，用#代替
			<table border="1px" cellspacing="0">
				<tr >
					<td >用户名</td>
					<td >
						<input type="text" name="user">
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<input type="password" name="pwd">
					</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td>
						<input type="password" name="Apwd">
					</td>
				</tr>
				<tr>
					<td>昵称</td>
					<td>
						<input type="text" name="name">
					</td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td>
						<input type="email" name="mail">
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type="radio" name="1" value="1">男
						<input type="radio" name="1" value="0">女
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type="checkbox" name="like" value="b">篮球
						<input type="checkbox" name="like" value="f">足球
						<input type="checkbox" name="like" value="p">乒乓球
					</td>
				</tr>
				<tr>
					<td>城市</td>
					<td>
						<select>
							<option value ="sh">上海</option>
							<option value ="sz">深圳</option>
							<option value ="bj">北京</option>
							<option value ="xa">西安</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像</td>
					<td>
						<input type="file" name="photo">
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text">
						<img src="2.png" width="15px">
						<button type="">点我换一张</button>
					</td>
				</tr>
				<tr>
					<td>自我描述</td>
					<td>
						<textarea rows="5" cols="10">
							
						</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
					<button type="submit">提交</button>
					<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

11.块元素：div，一个占一行

12.行元素：span，多个占一行 

13.音频：

<audio controls="controls">
	<source src="jay.mp3"></source>
</audio>

14.视频

<video controls="controls">
		<source src="yibo.mp4"></source>
</video>