超链接标签＜a＞、表格标签、列表标签、表单标签、表格案例（课表）、表单案例（简单用户注册表）

我是一颗好李子

已于 2022-10-11 23:47:10 修改

阅读量865

点赞数

分类专栏： HTML+css 文章标签： html

于 2022-06-18 18:10:20 首次发布

本文链接：https://blog.csdn.net/m0_69034993/article/details/125349542

版权

HTML+css 专栏收录该内容

9 篇文章 7 订阅

订阅专栏

超链接标签＜a＞

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面连接到另一个页面。

1.超链接的语法格式

<a href="跳转目标窗口" target="目标窗口弹出的方式">文本or图像</a>

href:指定连接目标的url地址。

target:指定链接页面的打开方式,其中_self为默认值。_blank为在新窗口打开。

2.超链接分类

（1）外部链接

(2)内部链接

网站内部页面之间的相互连接，直接连接内部页面名称，如<a href="index.html"></a>

(3)空链接

(4)锚点链接

点击链接，快速定位到页面的某个位置。

在连接文本的href属性中，设置属性值为#名字，如<a href="#one">...</a>。要在在目标位置设置id属性。

表格标签

1.表格的作用：主要用于显示，展示数据。

2.表格的基本语法

<table>
  <tr>
      <td>单元格内数据</td>
      ...
  </tr>
  <tr>
      <td>单元格内数据</td>
      ...
  </tr> 
  ...
</table>

3.表头单元格标签

<th>标签表示HTML表格的表头部分

<table>
  <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      ...
  </tr>
  ...
</table>

4.表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对其方式
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

5.表格结构标签

<thead>标签：表格的头部区域

<tbody>：表格的主体区域

6.合并单元格

合并单元格方式：

（1）跨行合并：rowspan="合并单元格的个数"

<table align="center" border="1" cellpadding="2" cellspacing="0" height="400" width="500" bordercolor="#6495ED">
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td rowspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				
				<td></td>
				<td></td>
			</tr>
		</table>

结果图·：

（2）跨列合并：colspan="合并单元格的个数

<table align="center" border="1" cellpadding="2" cellspacing="0" height="400" width="500" bordercolor="#6495ED">
			<tr>
				<td></td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

结果图：

列表标签

1.作用：用于布局

2.特点：整齐，有序，更加自由和方便

3.分类：无序列表、有序列表和自定义列表

（1）无序列表

基本语法格式：

<ul>
   <li>列表项1</li>
   <li>列表项2</li> 
   <li>列表项3</li>
   ... 
</ul>

在<ul></ul>中只能嵌套<li></li>。

结果图：

（2）有序列表

基本语法格式：

<ol>
   <li>列表项1</li>
   <li>列表项2</li> 
   <li>列表项3</li>
   ... 
</ol>

结果图：

（3）自定义列表

基本语法格式：

<dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>

结果图：

表单标签

1.作用：收集用户信息

2.组成：表单域，表单控件（表单元素），提示信息

（1）表单域：是一个包含表单元素的区域，在HTML中，<form>标签用于定义表单域。

<form action="url地址" method="提交方式" name="表单域名称">
   各种表单控件
</form>

(2)表单控件

a.<input>表单元素

作用：用于收集用户信息

<input type="属性值" />

type属性的属性值：

属性	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮
submit	定义提交按钮
text	定义单行的输入字段
name	定义input元素名称
value	规定input元素的值
checked	规定此input元素首次加载时应当被选中
maxlength	规定输入字段中的字符的最大长度

b.<label>标签

作用：为input元素定义标注，用于绑定一个表单元素，当点击<label>标签内文本时，浏览器就会自动将焦点转到选择对应的表单元素上。

<label for="sex">女</label>
<input type="radio" name="sex" id="sex">

注：<label>标签的for属性应该与相关元素的id属性一致

c.select下拉菜单

语法格式：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

d.<textarea>表单元素

作用：用于定义多行文本输入的控件

语法格式：

<textarea row="3" cols="4">
文本内容
</textarea>

cols="每行中的字符数" rows="显示的行数"

表格案例——课表

<table align="center" border="1" cellpadding="1" cellspacing="0" height="400" width="500" bordercolor="#6495ED">
			<tr>
				<th colspan="8">课表</th>
			</tr>
			<tr>
				<td></td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期七</td>
			</tr>
			<tr>
				<td>1-2节课</td>
				<td></td>
				<td>专业英语</td>
				<td>创新创业</td>
				<td>大学生心理教育</td>
				<td>图形图像处理</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>3-4节课</td>
				<td>MySQL数据库</td>
				<td>毛概</td>
				<td>MySQL数据库</td>
				<td>毛概</td>
				<td>体育</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>5-6节课</td>
				<td></td>
				<td></td>
				<td></td>
				<td>JavaScript</td>
				<td>图形图像处理</td>
				<td>中国优秀传统文化</td>
				<td></td>
			</tr>
			<tr>
				<td>7-8节课</td>
				<td></td>
				<td>JavaScript</td>
				<td></td>
				<td>JavaScript</td>
				<td>大学英语</td>
				<td>大学英语</td>
				<td></td>
			</tr>
			<tr>
				<td>9-10节课</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

结果图：

表单案例——用户注册

<h3>用户注册</h3>
		<form action="#" method="post" name="biaodan">
         <span>用户名：</span>
         <input type="text"value="请输入用户名" /><br />
         <span>密码：</span>
         <input type="password" /><br />
         <span>性别：</span>
         <input type="radio" name="sex"/>男
         <input type="radio" name="sex"/>女<br />
         <span>爱好：</span>
         <input type="checkbox" name="hobby"/>唱歌
         <input type="checkbox" name="hobby"/>跳舞
         <input type="checkbox" name="hobby"/>游泳<br />
         <span>城市：</span>
         <select>
         	<option>武汉</option>
         	<option>重庆</option>
         	<option>成都</option>
         	<option>北京</option>
         </select><br />
         <span>个人简介：</span>
         <textarea cols="50" rows="10">请填写个人简介</textarea>
         <input type="submit" value="提交"/>
         <input type="reset" value="重置"/>
        </form>

结果图：