11月2日笔记

最新推荐文章于 2023-02-07 01:11:13 发布
最新推荐文章于 2023-02-07 01:11:13 发布
阅读量194 收藏
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/studyit10086/article/details/78426516
版权

1.表格

HTML中的表格可以大致分为三个部分：

  • thead ---------表格的页眉
  • tbody ---------表格的主体
  • tfoot ---------定义表格的页脚

一些标签

caption 标题

tr 行

th 表头

td 表数据

colgroup 列组合 定义几列的格式

colspan rolspan 列 行的合并



一个简单的三行二列表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

将四列的背景颜色设置成粉色

<table  border=""  bordercolor="" cellpadding="" cellspacing="">
<colgroup>
        <col span="4" style="background-color: pink;">
</colgroup>

 
 
  • colspan属性：合并列
  • rowspan属性：合并行

 
 

  
  
以上两个属性均作用在单元格上，并且属性值的数字代表算上单元格本身，一共合并的单元格个数。

 
 
<table border="1">
    <tr>
        <td rowspan="2">第一行第一列</td>
        <td colspan="2" >第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>

  
  
  • cellpadding属性：单元格边框与内容的间距。
  • cellspacing属性：单元格之间的间距。




2.表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
表单在网页中主要负责采集数据。 
form标签是成对出现的


action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 method：数据传送的方式（get/post）。
 表单中还包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、提交按钮和文件上传框等。 


文本框和密码框：当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
type：当type=”text”时，输入框为文本输入框，当type=”password”时,输入框为密码输入框。 
name：告诉服务器，我们提交的这个value值代表的什么。 
value：为文本输入框设置默认值。(一般起到提示作用)。

单选框和复选框


在使用表单时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框， 
两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。 

type:当type=”radio”时，控件为单选框。当type=”checkbox”时，控件为复选框。 
value：提交数据到服务器的值（后台程序PHP使用）。 
name：告诉服务器，我们提交的这个value值代表的什么。 
checked：当设置checked=”checked”时，该选项被默认选中。
3.3 下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。 
value：提交数据到服务器的值。 
selected=”selected”：设置selected=”selected”属性，则该选项就被默认选中。 
下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，
在windows操作系统下，进行多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。
多行文本和重置按钮
多行文本
当用户需要在表单中输入大段文字时，需要用到文本输入域。   
name：指定输入框的名字。 
cols ：多行输入域的列数。 
rows ：多行输入域的行数。 
在标签之间可以输入默认值。 
上传
在实际开发中，我们经常会遇到要求用户上传头像图片或者添加附件在表单中的场景。 
在HTML中，文件上传同样也使用input标签。 
提交按钮和重置按钮
提交按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。
当我们需要重置表单信息的时候，需要用到重置按钮。 
提交按钮
type：只有当type值设置为submit时，按钮才有提交作用。 
value：按钮上显示的文字。 
重置按钮
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使
输入框恢复到初始状态。只需要把type设置为”reset”就可以。 

type：只有当type值设置为reset时，按钮才有重置作用。 
value：按钮上显示的文字。
CODING COFFEE咖啡馆的招聘信息页
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 加入我们 </title>
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
	</head>
	<body>
		<h1>欢迎加入CODING COFFEE</h1>
		<table border="2" cellpadding="10"  cellspacing="1">
			<colgroup>
				<col span="4" style="background-color: pink;">
				
			</colgroup>
			<tr>
				<th>职位名</th>
				<th>工作地点</th>
				<th>职位等级</th>
				<th>薪酬</th>
			</tr>
			<tr>
				<td>咖啡师</td>
				<td>纽约</td>
				<td>L3</td>
				<td>6000$</td>
			</tr>
			<tr>
				<td>咖啡师助理</td>
				<td>伦敦</td>
				<td>L2</td>
				<td>5000$</td>
			</tr>
			<tr>
				<td>大中华区副总裁</td>
				<td>北京</td>
				<td>L8</td>
				<td>面议</td>
			</tr>
			<tr>
				<td>全球副总裁</td>
				<td>佛罗伦萨</td>
				<td>L9</td>
				<td>面议</td>
			</tr>
			


  
 </body>
</html>


在线订购页
<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8">
		<title> 欢迎订购 </title>
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
	</head>

	<body>
		<h1>CODING COFFEE在线订购</h1>
		<form action="http://www.codingcofee.com/user/register.php" method="POST">
			<p>请选择咖啡类型：<br>
				<select name="bean" >
					<option value="blueHill">蓝山咖啡</option>
					<option value="chocolate">卡布奇诺</option>
					<option value="kabu" >卡布奇诺</option>
					<option value="espresso"  selected="selected">意式浓缩</option>
				</select>
				
			</p>
			<p>类型：<br>
				<input type="radio" name="beanType" value="whole">完整豆子<br>
				<input type="radio" name="beanType" value="group">咖啡粉<br>
			</p>
			<p>其他要求：<br>
				<input type="checkbox"   name="extra[]" value="giftwrap">礼盒包装<br>
				<input type="checkbox" name="extra[]" value="list">购物清单	<br>	
	
			</p>
			<p>
				送货地址:<br>
				姓名:<input type="text" name="name" value=""><br>
				省:<input type="text" name="province" value=""><br>
				城市:<input type="text" name="city" value=""><br>
				地区:<input type="text" name="address" value=""><br>
				具体地址:<input type="text" name="address" value=""><br>
				电话:<input type="tel" name="phoneNumber" value="">
			</p>
			<p>
				用户留言：<br>
				<textarea  name="comments" rows="20" cols="60"></textarea>
			</p>
			<p>
				<input type="submit" value="提交"> <br>
				<input type="reset" value="重置">
			</P>
		</form>
  
 </body>
</html>


课程表
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 课程表 </title>
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
	</head>

	<body>
		<table border="2" cellpadding="10" bordercolor="blue">
			<caption>课程表</caption>
			<tr>
				<th>项目</th>
				<th colspan="5">上课</th>
				<th colspan="2">休息</th>
				
			

			</tr>
			<tr>
				<td>星期</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期日</td>
			
			</tr>
			<tr>
				<td rowspan="4">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td rowspan="4">休息</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>历史</td>
				<td>化学</td>
				<td>计算机</td>
				
			</tr>
			<tr>
				<td>化学</td>
				<td>语文</td>
				<td>体育</td>
				<td>计算机</td>
				<td>英语</td>
				<td>计算机</td>
				
			</tr>
			<tr>
				<td>政治</td>
				<td>英语</td>
				<td>体育</td>
				<td>历史</td>
				<td>地理</td>
				<td>计算机</td>
				
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td>英语</td>
				<td rowspan="2">休息</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>历史</td>
				<td>化学</td>
				<td>计算机</td>
				
			</tr>
		</table>
		
  
	</body>
</html>






studyit10086
关注
专栏目录
笔记 2021年11月16日(2).pdf
11-18
配合线索化二叉树文章使用
Python学习 —— 代码&笔记（年11月30日、12月1日）.zip
02-21
【Python学习 —— 代码&笔记（年11月30日、12月1日）】 这篇笔记主要涵盖了在11月30日和12月1日期间进行的Python学习内容，其中包括了基本语法、数据结构、控制流程、函数、模块化编程等多个重要知识点。以下是...
Transformer通俗笔记：从Word2Vec、Seq2Seq逐步理解到GPT、BERT
结构之法 算法之道
10-23 8万+
我在写上一篇博客《》时，有读者在文章下面评论道：“july大神，请问BERT的通俗理解还做吗？”，我当时给他发了张俊林老师的BERT文章，所以没太在意。直到今天早上，刷到CSDN上一篇讲BERT的文章，号称一文读懂，我读下来之后，假定我是初学者，读不懂。（这是），再比如国内张俊林老师的这篇《》，然后你会发现几乎网上关于Transformer/BERT的文章无外乎是以下这几种情况。
数据结构——学习笔记——入门必看【建议收藏】
刘鑫磊
02-09 42万+
（2）静态查找表&动态查找表的区别用法【顺序查找-线性查找-折半查找-二分查找-有序表查找-插值查找-斐波那契查找-索引顺序表查找-分块查找】单独使用顺序存储结构（即数组）无法很好地实现树的存储概念，不过如果充分利用顺序存储和链式存储结构的特点，则完全可以实现对数的存储结构的表示。深度为 2，则至多只有 3 个结点：根结点，根结点的左子树，根结点的右子树···指的是这样一个数列：1、1、2、3、5、8、13、21、……（3）四中常见的多路查找树【2-3 树$2-3-4 树$B 树$B+ 树】的区别用法。
工作笔记-2021年11月10日
bianfu2008zhi的专栏
11-10 2477
es中设置动态模板 PUT _template/template_namexxx {} es的分词处理器 字符过滤器\分词器\词项过滤器 Standard Tokenizer Letter Tokenizer Lowercase Tokenizer Whitespace Tokenizer UAX URL Email Tokenizer Classic Tokenizer Thai Tokenizer NGram Tokenizer Edge NGram Tokenizer Keyword Toke
改进Canny算法分析暨2021年11月13号笔记
qq_36592837的博客
11-13 3910
最近迷上了图像边缘检测的研究，在这个机器学习横行的时代，还在专研图像处理的传统方法，可以说有那么点任性，哈哈。今天我们赏析一篇高引用的中文论文——《应用Otsu改进Canny算子的图像边缘检测方法》。 是的，这是一篇2014年发表于<计算机与数字工程>的论文，作者是顺德职业技术学院的张志强教授和中国科学院研究生院的宋海生教授，知网上引用次数高达48次。 也可以说这是一篇考古文(下次来个更老的)，不过我坚信，没有最好的方法，只有最合适用的地方。废...
【黑马程序员】SpringBoot2学习笔记
m0_60824353的博客
02-07 1461
黑马程序员springboot 学习笔记 springboot2学习笔记
【谷粒商城】全网最全笔记(1/4)
努力充实，远方可期
06-23 38万+
本文重点记录老师讲的话 和 一些配置流程，笔记中有的内容尽量少记录。 边看视频变更新，我尽快更新。
软考中级网络工程师全面学习笔记第2版(5万字)+配套视频及课件
m0_46179473的博客
08-04 12万+
1、文件包括网工第五版软考中级网络工程师全面学习笔记第二版(5万字)、常用检测命令实践图、协议神图、应第五常见编码图、相版配套视频及课件 2、文件中相应的视频链接也会持续的更新；对于相应的笔记文档的话，这里笔记只有一个文件且体积小也可以编辑，如果是用着WPS云文档也可上传到自己的云文档中，排版的也还可以，即便是打印出来也可以很好的进行阅读与查看 .........
2 Tables and Table Clusters读书笔记
赖源劲的专栏
05-11 6381
文章出处 Home / Database / Oracle Database Online Documentation 11g Release 2 (11.2) / Database Administration http://docs.oracle.com/cd/E11882_01/server.112/e40540/tablecls.htm#CNCPT010 额外的话 对于这些文档，由于比较零散
Mysql个人学习笔记
风筝
09-04 3万+
mysql 进阶一-基础 distinct concat ifnull #进阶1：基础查询 /* 语法： select 查询列表 from 表名; 类似于：System.out.println(打印东西); 特点： 1、查询列表可以是：表中的字段、常量值、表达式、函数 2、查询的结果是一个虚拟的表格 */ USE myemployees; #1.查询表中的单个字段 SELECT last...
CNN笔记：通俗理解卷积神经网络
热门推荐
结构之法 算法之道
07-02 83万+
2012年我在北京组织过8期machine learning读书会，那时“机器学习”非常火，很多人都对其抱有巨大的热情。当我2013年再次来到北京时，有一个词似乎比“机器学习”更火，那就是“深度学习”。本博客内写过一些机器学习相关的文章，但上一篇技术文章“LDA主题模型”还是写于2014年11月份，毕竟自2015年开始创业做在线教育后，太多的杂事、琐碎事，让我一直想再写点技术性文章但每每恨时间抽不开。然由于公司在不断开机器学习、深度学习等相关的在线课程，耳濡目染中，总会顺带着学习学习。
联想笔记本维修图纸：Lenovo X1 Corbon 12298-2.pdf
最新发布
06-21
- **日期**：2013年11月12日 - **公司信息**：威盛电子股份有限公司（Wistron Corporation），位于台湾省新北市汐止区新台五路一段88号21楼。 - **图纸类型**：Mystique-1-2 标题页，这表明了该图纸的版本和类型...
12月8日米家有品临摹
studyit10086的博客
12-11 4772
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>有品</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type
11月10日笔记
studyit10086的博客
11-13 330
加法运算符 加法运算符“+”是最常用的运算符之一，但是使用却相对复杂。因为在Javascript中，加法运算符可以完成两种含义的操作，一种是算术的加法，一种是做字符串拼接。console.log(1 + 1); // 2 console.log(true + true); // 2 console.log(1 + true); // 2 console.log(‘1’ + 1); // 11
11月15日笔记
studyit10086的博客
11-15 271
JSON对象 JSON 格式（Javascript Object Notation），是一种用于数据交换的文本格式。 简单的说，每个 JSON 对象就是一个值。要么是简单类型的值，要么是复合类型的值。 JSON 对值的类型和格式是有严格要求的。 1.复合类型的值只能是数组或对象，不能是函数、日期对象、正则表达式等。 2.简单类型的值包括：字符串、数值、布尔值和null（不能使用NaN/un
11月3日笔记
studyit10086的博客
11-06 252
1.1 CSS简介 CSS 指层叠样式表(Cascading Style Sheets)，定义如何显示HTML元素。 1.3 CSS样式规则和CSS加载的方式 1.CSS样式规则 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）希望设置的样式属性（st
11月30日笔记
studyit10086的博客
11-30 223
起步 Bootstrap 概述 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。Bootstrap 最为重要的部分就是它的响应式布局，通过这种布
11月23日笔记
studyit10086的博客
11-23 221
jQuery动画 1. show() 方法和 hide() 方法 调用hide()方法会将元素的display样式改为’ none ‘。 show()方法将元素的display样式设置为先前的显示状态。 show()方法和hide()方法的参数可以指定毫秒值，缓慢的隐藏和展示。 $('p').toggle(function(){ $(this).hide(200
小e笔记：Linux 5.8与Oracle 11gR2 CentOS 安装指南
本文档是关于在Linux环境下安装Oracle 11gR2版本与CentOS 5.8的操作指南，由用户Elvis于2012年9月3日编写的小e笔记。文章主要关注于实际操作步骤和注意事项，适用于有一定Linux基础和Oracle经验的读者。 首先，硬件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值