HTML表格常用标签 按钮 CSS

这篇博客介绍了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外部文件

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值