Day2:html和css

标题图

Day2:html和css

表格是一种常用的标签,表格结构,做到能够合并单元格.

表格的属性:

属性名 说明
border 设置表格的边框
cellspacing 设置单元格与单元格边框之间的空白间距
cellpadding 设置单元格内容与单元格边框之间的空白间距
align 设置表格在网页中的水平对齐方式
width 设置表格的宽度
height 设置表格的高度

如何创建表格:

<table>
  <tr>
   <td></td>
  </tr>
</table>

表格用table,tr代表表格中的一行,必须在table标签中,td用于表示表格中的单元格,<tr></tr>表格中的一行.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	</style>
</head>
<body>
	<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<caption>个人信息表</caption>  表格标题  
		<tr>  
			<th>姓名</th> 
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>dashu</td>
			<td>男</td>
			<td>123</td>
		</tr>
		<tr>
			<td>dashucoding</td>
			<td>男</td>
			<td>123456</td>
		</tr>	
	</table>
</body>
</html>

<thead></thead>用于定义表格的头部
<tbody></tbody>用于定义表格的主体

表格:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
	<style>
		 /*选择器 { 属性: 值; }  */
		 th  {
		 	color: blue;
		 }
		 td {
		 	font-size: 14px;
		 }
		 tr {
		 	height: 30px;
		 }
	</style>
</head>
<body>		
	<table border="1" cellpadding="0" cellspacing="0" width="550" align="center">
		<caption> <h3></h3> </caption>
		<thead>
			<tr>
				<th></th>
		    </tr>
		</thead>
		
		<tbody>
			<tr>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

合并单元格:

跨行合并:rowspan
跨列合并:colspan

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<table width="400" height="100" border="1">
		<tr>
			<td>123</td>
			<td>abc</td>
			<td>abc</td>
		</tr>
		<tr>
			<td colspan="2">123</td>
			<td></td>
		</tr>
		<tr>
			<td>123</td>
			<td>abc</td>
			<td>abc</td>
		</tr>
	</table>
	<table width="400" height="100" border="1">
		<tr>
			<td>123</td>
			<td>abc</td>
			<td rowspan="3">abc</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>abc</td>
		</tr>
	</table>
</body>
</html>

在表格中由行中的单元格组成,没有列元素.表达式由表单控件,提示信息,表单域组成.

input输入控件:</input/>但标签

// 表单
性别,生日,年月日,所在地区,婚姻状况,学历,月薪,手机号,昵称,喜欢类型,掌握介绍等.
属性 属性值 说明
type text 单行文本输入框
type password 密码输入框
type radio 单选按钮
type checkbox 复选框
type button 普通按钮
type submit 提交按钮
type reset 重载按钮
type image 图形形式的提交按钮
type file 文件域
name 用户自定义 控件名称
size 正整数 input控件在页面中显示的宽度
value 用户自定义 控件的默认文本值
checked checked 定义选择控制价默认被选择的项
'maxlength` 正整数 控件允许输入的最多字符数

label标签为input标签元素定义的标注.

<label for="id"> id </label>
<input type="radio" name="sex" id="me" value="id">

textarea控件-文本域

<textarea cols="每行中的字符数" rows="显示的行数">
 文本内容
</textarea>

<textarea name="textarea" id="" cols="30" rows="10">
</textarea>

下拉菜单

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
</select>

<select></select>至少应包含一对<option></option>
在option中定义selected="selected"时,代表已经为选中项

创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

表格的标题： caption

表单域 - 实现用户信息的收集和传递

form标签被用于定义表单域

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

action为在表单收集到信息后,将信息传递给服务器进行处理,action属性是指定接收并处理表单数据的服务器的url地址.
method用于设置提交的方式,为get或post两种
name为指定的名称

input控件:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dome</title>
</head>
<body>
	<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
		<caption><h4 style="color: pink; font-size:25px;"></h4></caption>
		<tr height="60">
			<td>地区</td>
			<td><input type="text" value="北京" style="color: #ccc;" /></td>
		</tr>
		<tr height="60">
			<td>用户名</td>
			<td><input type="text" value="dashu" /></td>
		</tr>
		<tr height="60">
			<td>
				<label for="da">密码</label>
			</td>
			<td><input type="password" value="123" maxlength="6" id="da" /></td>
		</tr>
		<tr height="60">
			<td>年龄</td>
			<td>
				<select name="" id="">
					 <option value="">选择年份</option>  
					 <option value="">1990</option>  
					 <option value="">1991</option>  
					 <option value="">1992</option>  
					 <option value="">1993</option>  
				</select>
				<select name="" id="">
					 <option value="">选择月份</option> 
					 <option value="">1月份</option>  
					 <option value="">2月份</option>  
					 <option value="">3月份</option>  
					 <option value="">4月份</option>  
					 <option value="">5月份</option>  
				</select>
			</td>
		</tr>
		<tr height="60">
			<td>年龄</td>
			<td>
				<select name="" id="">
					 <option value="">籍贯</option>  
					 <option value="" selected="selected">北京</option>
					 <option value="">哈尔滨</option>
					 <option value="">青岛</option>  
					 <option value="">大连</option>  
				</select>
			</td>
		</tr>
		<tr height="60">
			<td>性别</td>
			<td style="color: blue;">
				男 <input type="radio"  name="sex"/>  
				女 <input type="radio" name="sex" checked="checked" /> 
				妖 <input type="radio" name="sex"/> 
			</td>
		</tr>
		
		<tr>
			<td></td>
			<td>
				<input type="button" value="注册">
				<input type="submit" value="提交">
				<input type="reset" value="重置">
				<input type="image" src="btn.png" />
			</td>
		</tr>
		<tr>
			<td>上传头像</td>
			<td>
				<input type="file" >
			</td>
		</tr>
		<tr>
			<td>给我留言</td>
			<td>
				<textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支持富文本
				</textarea>
			</td>
		</tr>
	</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
<body>
	 <label>  用户名：<input type="text">  </label>
	 <hr>
	 <label for="pwd">
	 	123
	 </label>
	 	用户名：<input type="text">
	 	密码：<input type="password" id="pwd">
</body>
</html>

表单域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
<body>
	<form action="" method="post">
		用户名: <input type="text" name="User" value="用户名"> <br /> <br />
		密　码: <input type="password" name="psd"><br /> <br />
		密　码: <input type="password" name="psd2"><br /> <br />
		性别： <input type="radio" name="sex">
		<input type="submit" value="提交所填">
		<input type="reset" value="重新填写">
	</form>
</body>
</html>

样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
<body>
	<hr>
	<p color="blue">文字</p>
</body>
</html>

html样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

css

  1. 内部样式表
  2. 外部样式表
  3. 内联样式

内部样式表

<head>
 <style type="text/css">
  选择器{属性:属性值;}
 </style>
</head>

行内式
<标签名 style="属性:属性值;"> 内容 </标签名>

外部样式表

<head>
 <link href="" type="text/css" rel="stylesheet"/>
</head>

css基础选择器

  1. 标签选择器
  2. 类选择器
  3. 多类名选择器
  4. id选择器
  5. id选择器和类选择器的区别
    6.通配符选择器

标签选择器:

标签名{属性:属性值;}
元素名{属性:属性值;}

类选择器:

.类名{属性:属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.ide {
		color: blue;
	}
	</style>
</head>
<body>
	<div class="ide">我是类选择器</div>
	<div>我是类选择器</div>
	<div>我是类选择器</div>
	<div>我是类选择器</div>
	<div>我是类选择器</div>
	<div class="ide">我是类选择器</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dome</title>
	<style> 
		span {  
			font-size: 150px;
		}
		.g { 
			color: blue;
		}
		.o {
			color: red;
		}
		.oo {
			color: orange;
		}
		.l {
			color: green;
		}
	</style>
</head>
<body>
	<span class="g">G</span>
	<span class="o">o</span>
	<span class="oo">o</span>
	<span class="g">g</span>
	<span class="l">l</span>
	<span class="o">e</span>
	<div class="nav"></div>
	<div class="ban"></div> 
</body>
</html>

总结

  1. id用#
  2. class用.

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞
posted @   达达前端  阅读(157)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示