Html学习笔记二

最新推荐文章于 2023-07-16 01:43:33 发布

傲灵昕凌

最新推荐文章于 2023-07-16 01:43:33 发布

阅读量219

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_51667569/article/details/113321791

版权

前端笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的mate和link标签的用途，包括元信息设置、网页重定向、外部样式表链接和图标设置。同时，讲解了表格的创建、属性、结构以及合并技巧，如边框、对齐、颜色和单元格合并。此外，还涵盖了表单的基本元素，如文本输入框、密码框、多行文本、选择框、下拉列表、文件上传、按钮等，以及表单信息的分组和各种补充控件的使用。

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

1、mate和link标签

<head>
	<meta charset="UTF-8">
	<!-- 关键字，向搜索引擎说明你的网页的关键词 -->
	<meta name="keywords" content="培训,编程">

	<!-- 网页描述，告诉搜索引擎你的站点的主要内容 -->
	<meta name="description" content="专注培训，编程">

	<!-- 网页重定向 -->
    <meta http-equiv="refresh" content="3;https://www.hao123.com/?tn=88013251_25_hao_pg"> 

	<!-- 链接外部样式表文件 -->
	<link rel="stylesheet" href="1.css">

	<!-- icon图标 -->
	<link rel="icon" href="favicon.ico">

	<title>Document</title>
</head>

说明：
1、<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
2、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
3、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
其中的属性说明如下：
　　设定为all：文件将被检索，且页面上的链接可以被查询；
　　设定为none：文件将不被检索，且页面上的链接不可以被查询；
　　设定为index：文件将被检索；
　　设定为follow：页面上的链接可以被查询；
　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；
　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

2、表格

1、基本属性

<table border="6" width="200" height="100" cellspacing="5" cellpadding="16" align="center" bgcolor="yellow">
		<tr align="center">
			<td align="center">1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>11</td>
			<td>22</td>
			<td>33</td>
		</tr>
	</table>

说明：

Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用，tr或者td内容居中。
bgcolor=”red” 背景颜色。

2.表格标准结构

<table border="2" width="100" height="100">
		<thead>
			<tr>
				<td>11</td>
				<td>22</td>
				<td>33</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>123</td>
				<td>444</td>
				<td>555</td>
			</tr>
		</tfoot>

3、表头和表格的合并

<table border="1" width="500" height="300"align="center">
	    <caption>表头</caption>
		<tr>
			<td colspan="2">1&nbsp;2</td>
			<!-- <td>2</td> -->
			<td rowspan="3">3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<!-- <td rowspan="2">3</td> -->
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<!-- <td>3</td> -->
		</tr>
	</table>

效果图
在这里插入图片描述
说明：

表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格

4、表格标题、边框颜色、内容垂直对齐

<table border="2" bordercolor="blue"width="300" height="300" cellspacing="0">
		<tr>
			<!-- 标题 -->
			<th>111</th>
			<th>222</th>
			<th>333</th>
		</tr>
		<tr>
			<td valign="top">111</td>
			<td>222</td>
			<td>333</td>
		</tr>
    </table>

效果图
在这里插入图片描述

说明：

valign=”top | middle | bottom” 内容垂直对齐方式

5、细线表格

	<table width="100" height="100" bgcolor="green" cellspacing="1">
		<tr bgcolor="white">
			<td></td>
			<td></td>
		</tr>
		<tr bgcolor="white">
			<td></td>
			<td></td>
		</tr>
	</table>

即设置背景颜色，设置单元格颜色，单元格之间的空隙即细线。

3、表单

1、表单域、输入框

表单域：

<form action="1.php" method="post">

说明：

action:处理信息
method=”get | post”

输入框：

<!-- 文本输入框 -->
		用户名：<input type="text" maxlength="6" name="username">

说明：

maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled=“disabled” 输入框未激活状态
name=“username” 输入框的名称
value=“大前端” （默认值）将输入框的内容传给处理文件

<!-- 密码输入框 -->
		密码：<input type="password" name="pwd">

说明：

文本输入框的所有属性对密码输入框都有效。

 <!-- 多行文本框 -->
        <textarea cols="20" rows="5"></textarea>

说明：

cols 控制输入字符的长度
rows 控制输入的行数

2、选择框

<!-- 单选框 -->
		性别：<input type="radio" name="gender" checked="checked">男
		<input type="radio" name="gender">女

说明：

只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。

 <!-- 多选框 -->
        <input type="checkbox">已阅
        <input type="checkbox" checked="checked">关注

说明：

hecked=”checked” 设置默认选中项。

<!-- 下拉列表 -->
         省（市）：<select >
         	<option value="">北京</option>
         	<option value="">上海</option>
         	<option value="" selected="selected ">山东</option>

         </select>
         <select multiple="multiple">
         	<option value="">北京</option>
         	<option value="">上海</option>
         	<option value="" selected="selected ">山东</option>
         </select>
 <br>
        市（区）：<select >
        	<optgroup label="山东">
        	<option value="">淄博</option>
        	<option value="">泰安</option>
        	<option value="">烟台</option>
            </optgroup>
               </select>

说明：

multiple=”multiple” 将下拉列表设置为多选项。
selected=”selected” 设置默认选中项目。
label="" 分组名称。

3、文件上传控件

<!-- 文件上传控件 -->
        <input type="file">

4、按钮

<!-- 提交按钮 -->
		<input type="submit">

说明：

可以实现信息提交功能。

!-- 普通按钮 -->
        <input type="button" value="普通按钮">

说明：

不能提交信息，配合JS使用。

<!-- 图片按钮 -->
       <input type="image" src="favicon.ico">

说明：

图片按钮可实现信息提交功能。

<!-- 重置按钮 -->
      <input type="reset">

说明：

将信息重置到默认状态。

5、表单信息分组

<form action="1.php" method="post">
    <fieldset>
    <legend>基本信息</legend>	
    </fieldset>
	</form>

说明：

<fieldset></fieldset> 对表单信息分组。
<legend></legend> 表单信息分组名称。

以上表单代码效果图
在这里插入图片描述

6、表单补充控件

<form action="1.php" method="post">
<!-- 网址控件 -->
	<input type="url">
<!-- 日期控件 -->
	<input type="date">
<!-- 时间控件 -->
    <input type="time">
 <!-- 邮件控件  -->
     <input type="email">
<!-- 数字控件 -->
     <input type="number" step="2">
<!-- 滑块控件 -->
      <input type="range" step="10">
	<input type="submit">