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 点赞
转载于:https://www.cnblogs.com/dashucoding/p/11140377.html
Day2:html和css相关推荐
- 前端入门-day2(常见css问题及解答)
写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解 ...
- 前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天 今天我们围绕一个 导航栏案例进行 ...
- css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解(CSS float clear)...
CSS里的浮动,可以让元素脱离标准流,从左上角或右上角依次贴边排列. 下面这个案例将会帮我们了解浮动的基本情况.下面这段代码块,外面是一个大div,里面包含着3个div,第一个左浮动,后两个无浮动. ...
- Day2:python爬虫基础学习(大嘘)
Day2:python爬虫基础学习(大嘘)) 教材&参考: 学习过程 Sublime配置教程 下载&安装 语言(设置中文) 设置字体/配色 配置Python环境 使用python官方编 ...
- 【阿里云高校计划】身份证识别系统搭建 day2 【抛砖引玉】
身份证识别系统搭建 [阿里云高校计划]身份证识别系统搭建 day2 [抛砖引玉] 身份证识别系统搭建 一.项目简介 二.获取视觉智能开放平台提供的SDK 三.项目实现 (一)前端index.html ...
- 中软培训第一周复习总结 --简单的HTML 与CSS
一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...
- html5+Css总结(附带案例)
HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成: 1.html:也是前端网页基本框架结构,类似于骨架一样的作用 2.CSS: 也叫层叠样式表,就是为美化界面而存 ...
- HTML+CSS学习笔记<每周三持续更新>
实训笔记 Day1 一.Typora快捷键 二.Git 1.工作原理 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 ...
- css网格_快活的Gridmas! 使用CSS网格构建喜庆的日历
css网格 在本教程中,我们将使用CSS Grid,SVG和一些节日的欢呼声来构建季节性出现日历! 让我们先看一下我们将要朝着什么方向前进-单击日期以查看其背后的内容: 您需要什么 本教程实际上并不需 ...
最新文章
- 图像空间变换--imtransform
- 畅谈Perl时间处理函数用法
- boost::outcome_v2::std_result用法的测试程序
- 小米手机反复提示“请勿遮挡听筒区域“
- 2020春招机考汇总2:扑克牌打出最小次数、钢琴高昂旋律(拼接递增序列)
- Skywalking 结束孵化,成为 Apache 基金会顶级项目
- 在ubuntu 16.04里使用python—scrapy将爬取到的数据存到mysql数据库中的一些随笔
- Java 8 Lambdas –缺少脱离Java的链接
- mysql datetime 间隔,MySQL datetime默认时间间隔
- [Python] NotImplemented 和 NotImplementedError 区别
- Citrix路径遍历(CVE-2019-19781)
- 随想录(我们从uboot学什么)
- 【自考总结】寒冬里的温暖
- matlab 小波分析实例,小波分析MATLAB实例
- stream流倒序排序_Stream流排序
- html链接位置移动,锚点链接点击缓慢移动到目标位置
- 短线交易秘诀---大小价格区间,开盘价,价格爆炸点
- 2022上半年,大城市的各行业工资水平,让人触目惊心
- c语言有n个人围成一圈用指针,C语言 有n个人围成一圈,按顺序从1到n编号.从第一个人开始报数,报数3的人退出圈子...
- 如何快速将一张彩色图片变成黑白图片
热门文章
- 【Qt】Visual Studio编译Qt项目报Qt Version错误
- 【Linux】一步一步学Linux——apropos命令(230)
- 【Linux】一步一步学Linux——history命令(213)
- 【物联网】OpenWrt OpenWRT的源码下载及目录结构
- 只腐蚀毛刺 腐蚀算法_避坑干货!8大卫浴五金选购指南,只买对的不买贵的
- gogs可以自动化部署吗_Git-WebHook 自动化部署工具 - 支持Github / GitLab / Gogs / GitOsc...
- Js中 call() 与 apply() exports
- 遮掩java_Java炸弹:重载、重写、隐藏、遮蔽、遮掩(2)
- 关于界面软件测试点,电子商务网站--界面测试的测试点
- 7z apache解析漏洞_解析漏洞(Web漏洞及防御)