HTML表格常用标签按钮 CSS

最新推荐文章于 2024-07-15 22:47:50 发布

Wooo0Ooo

最新推荐文章于 2024-07-15 22:47:50 发布

阅读量2.1k

点赞数 1

分类专栏： html css javascript

本文链接：https://blog.csdn.net/Wooo0Ooo/article/details/118411371

版权

html css javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML表格的使用，包括table、th、tr、td等标签的属性和功能，以及表单元素如form、input的类型和作用。还提到了H5新增的表单输入类型和语义化标签，以及CSS的基础知识，如样式声明的三种方式和选择器的优先级。

摘要由CSDN通过智能技术生成

表格标签
           table:表格标签
               width:宽度
               height:高度
               border:边框
               cellspacing:列间隙
               th:表头标签(具备文字加粗并且居中)
               tr:行标签
               td:列标签
                   colspan="2":列合并合并列单元格 2代表合并两个单元格
                   rowspan="2":行合并合并行单元格 2代表合并两个单元格
align="center" 居中内部文字居中
           caption:表格标题(居中显示)

		<table width="200px" height="100" border="1" cellspacing="0">
			<caption>这是一个表格标题</caption>
			<tr>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td align="center">张三</td>
				<td rowspan="2">男</td>
			</tr>
			<tr>
				<td>李四</td>
				
			</tr>
			<tr>
				<td colspan="2">三年一班</td>
			</tr>
		</table>

form标签:表单标签(用于提交数据和页面跳转) 要写在table外面把table包起来
           action属性:跳转路径
           method属性:提交的方式,常见的值get或者post
               get会将输入参数显示在地址栏明文提交
               post不会将输入参数显示在地址栏暗文提交
form表单中的按钮:button
           1.submit按钮:<button type="submit">提交按钮,用于提交表单数据,具有跳转页面功能
           2.reset按钮:<button type="reset">重置按钮,用于重置表单中的数据
           3.button按钮::<button>普通按钮,

    <form action="index.html" method="post">
			
		
		<table width="300px" border="1" cellspacing="0">
			<tr>
				<td>姓名:</td>
				<td><input type="text" name="uname"/></td>
				
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="pwd" /></td>
				
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="登录" />
					<input type="reset"/>//会直接在页面显示重置按钮 不用写文本重置
             或者写<button type="submit">登录</button>
			      <button type="reset">登录</button>
					
				</td>

			</tr>
		</table>
		</form>

        H5新增的表单标签:(有些元素是为移动端阅览器设置,所以效果只有在移动端浏览器才能看见)
           type="email":限制用户只能输入邮件类型
           type="number":限制用户只能输入数字类型
           type="tel":限制用户只能输入电话类型
           type="month":限制用户只能输入月份类型
           type="week":限制用户只能输入星期类型
           type="range":产生一个滑动条,表示范围
           type="date":限制用户只能输入日期类型
           type="time":限制用户只能输入时间类型
       H5新增的语义化结构标签
           <header ></header>:页眉,头部
           <footer></footer>:页脚,底部
           <nav></nav>:导航
           <section></section>:区块
           <article></article>:文章,博客,说明
           <aside></aside>:侧边,边栏

邮箱:<input type="email"/>
		<br>数字:<input type="number" />
		<br>电话号:<input type="tel"/>
		<br>月份:<input type="month"/>
		<br>星期<input type="week"/>

         绝对路径:
           是指文件在硬盘上真正存在的位置比如:D:\abc(开发不常用)

       相对路径:
           相对于本文件目标文件存在的位置(开发常用)

        <!-- 绝对路径 在该电脑所在位置-->
		<img src="C:\图片\冒险.png" >
		<!-- 相对路径 在同一文件存在位置-->
		<img src="img/冒险.png" >

         1.css:层叠样式表,能给网面设计样式
       2.如何声明css样式?三种方式
           a.行内样式:通过标签中style属性声明样式(行内代码冗余,维护困难,开发几乎不用)
           b.内嵌样式:通过style标签结合选择器声明CSS样式的(style标签通常放在head里面 title下面开发常用)
           c.外部样式:通过css文件声明css样式,在html文件中使用link标签的href属性引入css文件(开发常用)

       3.CSS中常用的三大选择器
           1.标签选择器
           2.类选择器可以同时选择多个不同种类的标记 .class
           3.id选择器只能选择唯一一个 #id

优先级:行内样式>id选择器>类选择器>标签选择器

        <style >
		 	/* 1.标签选择器
				标签名{
					style属性:值;
				}
				2.类选择器
				.类名{
					style属性:值;
				}
				3.id选择器
				#id名{
					style属性:值;
				}
			*/
		   /* 标签选择器 */
		   input{
			   background-color: gray;
			   width: 30px;
			   height: 30px;
		   }
		   /* 类选择器 */
		   .c1{
			   background-color: orange;
		   }
		   /* id选择器 */
		   #t1{
			   background-color: antiquewhite;
		   }
		 </style>
	</head>
	<body>
		<!-- 行内样式 -->
		<input type="text" style="background-color: green;width: 100px; height: 100px;"/>
		
		<!-- 内嵌样式 -->
		<input type="text" />
		<input type="text" class="c1"/>
		<input type="text" class="c1" id="t1"/>
		
		<!-- 外部样式 -->
		<input type="text" id="d2" />

#d2{
	background-color: aquamarine;
	
} //css外部文件

Wooo0Ooo

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML表格常用标签 按钮 CSS

HTML表格常用标签按钮 CSS