html笔记（table标签、文本标签、CSS样式表）

最新推荐文章于 2024-06-19 10:23:02 发布

小叮当哟

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量295

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/you__jing/article/details/115477245

版权

这篇博客介绍了HTML的基础元素，如table标签、文本标签的使用，并展示了如何通过CSS样式表进行页面布局和美化。内容涵盖表格的创建、行和列的合并，文本的格式化，以及表单元素的运用，包括输入框、按钮等。同时，讲解了CSS的内部和外部引用，以及一些基本的样式属性，如背景色、字体、边框等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * table标签
 * 文本标签
 * CSS样式表
 */



1.注释

	<!--  -->	

2.table标签

    	<table border="1" align="center" width="500px" height="200px">      <!-- border：边框的厚度； align：对齐方式，这里是居中； width：宽度； height：高度 -->
        	<tr>       <!-- 行 -->
            		<td>第一行第一列</td>   <!-- 列 -->
          			<td>第一行第二列</td>
            		<td>第一行第三列</td>
        	</tr>
        	<tr>
            		<th>姓名</th>     <!-- 表头，加粗且居中 -->
            		<th>年龄</th>
            		<th>分数</th>
        	</tr>
        	<tr>
            		<td>张三</td>
            		<td>20</td>
            		<td>100</td>
        	</tr>
    	</table>
    	<hr>

	<!-- 合并行，列 -->
    	<table border="1" align="center" width="500px" height="200px">
        	<tr>
            		<td>第一行第一列</td>
            		<td>第一行第二列</td>
            		<td>第一行第三列</td>
        	</tr>
        	<tr>
            		<th colspan="2">姓名</th>   <!-- colspan="2"  合并列 2 列 -->
            		<!-- <th>年龄</th> -->
            		<th>分数</th>
        	</tr>
        	<tr>
            		<td rowspan="2">张三</td>   <!-- rowspan="2"  合并行 2 行 -->
            		<td>20</td>
            		<td>100</td>
        	</tr>
        	<tr>
            		<!-- <td>李四</td> -->
            		<td>18</td>
            		<td>60</td>
        	</tr>
    	</table>

3.文本标签
	
	<b></b>----------字体加粗
	<i></i>----------字体倾斜
	<font size="10px" color="red" face="楷体"></font>
		size----------字体大小
		color---------字体颜色
		face----------字体类型
	<center></center>----------居中对齐
	<pre></pre>-------预定义格式标签(怎么排版，就怎么显示)
	转义字符
	&copy;-----------版权符
	&yen;------------人民币的符号
	&nbsp;-----------空格
	......

	form---------包含其它标签，用与向服务器提交数据
	<form action="" method="">
		action=""---------指定数据提交的地址
		method=""---------指定数据提交的方式
		数据提交方式有两种：
			get-------不安全，数据会显示在浏览器的地址栏中
			post------安全，数据会不会显示在浏览器的地址栏中（推荐使用）

        	<!-- 文本标签 -->
		普通文本框：<input type="text" value="普通文本框内容"/><br/><br/>

		<input type="text" id="" required="" placeholder="请输入用户名"/>
		required------表示必须要赋值，否则不允许提交表单
		placeholder---------提示信息		

		密码框：<input type="password"/><br/><br/>
		
		<!-- 文本域，可改变行列数 -->
		文本域：<textarea rows="5" cols="50">文本域内容</textarea><br/><br/>
		
		文件上传框：<input type="file"/><br/><br/>
		
		隐藏文本框：<input type="hidden"/><br>

		日期框：<input type="date" name="" /><br>

		数值框：<input type="number" name="" /><br>
	
		显示图片：<img src="xxx.jpg">
		<br/><br/><br/>
		<hr/>
		<br/><br/><br/>


		<!-- 按钮 -->
		普通按钮：<input type="button" value="普通按钮"/><br/><br/>
		
		<!-- 将form标签里的数据传入到指定的地址去，指定地址在form标签里的action属性里写 -->
		提交按钮：<input type="submit" value="提交按钮"/><br/><br/>
		
		图片提交按钮：<input type="image" src="img/figure2.jpg" style="height: 30px; width: 45px"/><br/><br/>	

		重置按钮：<input type="reset" value="重置按钮"/>
        	<br/><br/><br/>
		<hr/>
		<br/><br/><br/>
		
		<!-- 单选(radio)与复选(checkbox) -->
		<!-- 组合框（选其一）name保持一致， checked默认选择这个选项-->
		单选：<input type="radio" value="男" name="sex" checked/>男
			<input type="radio" value="女" name="sex"/>女<br/><br/>
			
		复选：<input type="checkbox" value="唱歌" name="hobby"/>唱歌
			<input type="checkbox" value="跳舞" name="hobby"/>跳舞
			<input type="checkbox" value="游泳" name="hobby"/>游泳<br/><br/>
			
		下拉框：
		<select multiple>        <!-- multiple：下拉列表变成上下滑动列表 -->
			<option value="上海">上海</option>      
			<option value="广州">广州</option>
			<option value="北京" selected>北京</option>        <!-- selected：默认选择这个选项-->
			<option value="深圳">深圳</option>
        	        <option value="江西">江西</option>
		</select>
    	</form>

4.CSS样式表
	
	1.内部引用（不推荐）
		<!DOCTYPE html>
		<html lang="en">
		<head>
    			<meta charset="UTF-8">
	    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    			<meta name="viewport" content="width=device-width, initial-scale=1.0">
    			<title>CSS样式表</title>

			<!-- 内部引用 -->
    			<style type="text/css">
        			/* 
            				1.  #后面跟样式名（自己取名），由 id 调用该样式
            				2.  .后面跟样式名（自己取名），由 class 调用该样式
	            			3.  标签名，所有该标签主动调用该样式
        			*/
        
        			#divStyle{
            				background-color: blue;
	            			width: 200px;
	        	    		height: 200px;
        			}

	        		.divStyle2{
        	    			background-color: red;
            				width: 200px;
	            			height: 200px;
        			}

        			p{
            				color: green;
        			}
		    	</style>
		</head>
		<body>
    			<div id="divStyle"></div>
    			<div class="divStyle2"></div>
    
	    		<p>111111</p>
    			<p>222222</p>
    			<p>333333</p>
		</body>
		</html>

	2.外部引用（推荐使用）
		<!-- 外部样式表 -->
		/* 表格的样式 */
		.table_style{
    			/* 
		        	margin-top: 0;          与上面的距离
			        margin-right: auto;     与右边的距离
			        margin-bottom: 0;       与下面的距离
			        margin-left: auto;      与左边的距离

			        margin:上  右  下  左;   与上右下左的距离
			        margin:上下  左右;       与上下左右的距离
    			*/
    			margin: 0 auto;     /* 上下为 0 ，左右主动居中 */
    			border: 1px solid black;        /* 边框厚度为 1px 边框线的类型为细实线 边框颜色  */
    			width: 300px;       /* 宽度 */
    			height: 130px;      /* 高度 */
    			background-color: silver;       /* 背景颜色 */
		}

		.text_style{
    			width: 200px;
    			height: 25px;
    			border: 1px solid red;
    			font-size: 18px;        /* 字体大小 */
    			font-family: "楷体";    /* 字体类型 */
    			color: green;       /* 字体颜色 */
		}

		.btn_style{
    			width: 100px;
    			background-color: skyblue;
    			color: red;
    			border: 1px solid red;
    			height: 30px;
    			border-radius: 10px;        /* 边框弧度设置 */
		}

		<!-- 引用外部样式表 -->
		<!DOCTYPE html>
		<html lang="en">
		<head>
    			<meta charset="UTF-8">
    			<meta http-equiv="X-UA-Compatible" content="IE=edge">
    			<meta name="viewport" content="width=device-width, initial-scale=1.0">
    			<title>CSS样式表</title>

    			<!-- 引用外部的样式表 -->
    			<link rel="stylesheet" href="css/index4.css">       <!-- href="css/index4.css"   链接样式表的位置 -->
		</head>
		<body>
    			<form>
        			<table class="table_style">
            				<tr>
                				<td>用户名：</td>
                					<td><input type="text" class="text_style"></td>
            				</tr>
            				<tr>
                				<td>密码：</td>
                				<td><input type="password" class="text_style"></td>
            				</tr>
            				<tr>
                				<td><input type="submit" value="登录" class="btn_style"></td>
                				<td><input type="reset" value="重置" class="btn_style"></td>
            				</tr>
        			</table>
    			</form>
		</body>
		</html>