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

内部样式表
外部样式表
内联样式

内部样式表

<head>

 <style type="text/css">

  选择器{属性:属性值;}

 </style>

</head>

行内式

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

外部样式表

<head>

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

</head>

css基础选择器

标签选择器
类选择器
多类名选择器
id选择器
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>

总结

id用#
class用.

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客：达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

Day2:html和css的更多相关文章

前端入门-day2（常见css问题及解答）
写在前面今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解 ...
Day6:html和css
Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...
Day5:html和css
Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
Day2 CSS
什么是CSS 层叠样式表(cascading style sheet) 控制页面元素的显示方式.(添加样式) CSS语法行间样式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出C ...
CSS基础-DAY2
CSS属性操作-文本文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...
css day2
外观属性 color:文本颜色用于定义文本的颜色 1.预定义的颜色值,如red.green.blue等 2.十六进制,如#FF0000.#FF6600.#29D794等.十六进制是最常用的定义颜色的 ...
中软培训第一周复习总结 --简单的HTML 与CSS
一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...
Python实例---模拟微信网页登录(day2)
第三步: 实现长轮询访问服务器---day2代码 settings.py """ Django settings for weixin project. Generate ...

随机推荐

exl表格找两个字符间的数据
例子找的是]XXX,中间的内容 =MID(B2,FIND("]",B2)+1,FIND(",",B2)-FIND("]",B2)-1) ...
使用JFlex生成词法分析器 1：安装配置
环境:Windows 10 STEP 1: 下载 JFlex 文件,我选择的是 jflex-1.7.0.zip.下载完成后解压到想安装的位置. 文件结构如下(假设解压目录为 C:\): C:\jfle ...
有关在Eclipse中安装STS（Spring Tool Suite）的若干问题总结
1.之前说明在网上找了很多安装的方法,每次在线安装总会出现各种各样的问题,本地安装也是出现同样的问题(后来发现是下载的包有问题) 还有其他问题(忘记截图了,上图来自网络),大概就是这些各种各样的错误 ...
29. pt-table-usage
pt-table-usage --query="select * from t01 join t02 on t01.id=t02.id where t01.code=2" pt-t ...
mysql操作数据表中的记录1
一.插入记录INSERT mysql> create TABLE users( -> id SMALLINT UNSIGNED PRIMARY KEY AUTO_INCREMEN ...
[Presto]Presto章1 Presto 咋用
Presto 的平均查询性能是 Hive 的 10 倍! 由于 Presto 的数据源具有完全解耦.高性能,以及对 ANSI SQL 的支持等特性,使得 Presto 在 ETL.实时数据计算. Ad ...
ssh多台主机之间不用密码远程
二.多台服务器相互无密码访问多台服务器相互无密码访问,与两台服务器单向无密码访问的原理是一样的,只不过由于是多台服务器之间相互无密码访问,不能象两台服务器无密码登录那样直接上传,步骤如下: 1.在需 ...
使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
EL和JSTL笔记
1.EL表达式 [1] 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和脚本片段. > ...
[c#.net]遍历一个对象中所有的属性和值
利用反射 SpDictItem sp = GetCFHObject.GetSpItem("); PropertyInfo[] propertys = sp.GetType().GetProp ...

Day2:html和css

textarea控件-文本域

下拉菜单

结语

Day2:html和css的更多相关文章

随机推荐

热门专题

`textarea`控件-文本域