Day2:html和css
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 点赞
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.12.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录