HTML 标签、表格、列表、表单详细汇总

原创已于 2022-05-27 18:27:20 修改 · 1.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

于 2021-12-24 17:33:00 首次发布

笔记专栏收录该内容

5 篇文章

订阅专栏

这篇博客详尽地介绍了HTML标签的各个方面，包括基础标签、文本格式化、图像和路径处理、超链接、特殊字符、表格的创建与单元格合并、列表的运用以及表单元素的使用。无论是初学者还是进阶开发者，都能从中受益。

一、HTML标签

1. html基础标签

<!DOCTYPE html>
<!-- 文档类型声明 -->
<html lang="en">
<!-- 语言种类 en--英语/zh-CN---汉语 -->

<head>
    <!-- <head>头部标签</head> -->
    <meta charset="UTF-8">
    <!-- charset="UTF-8"----字符集   UTF-8---万国网 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题(网页左上角)</title>
</head>

<body>
    <!-- <body>文档主体</body> -->
</body>

</html>

2. html常用标签

1.<!--标题标签-->
<h1>~<h6>
<h1></h1>
<!--依次递减-->
2.<!--段落标签-->
<P></p>
3.<!--换行标签-->
<br />
<!--单标签  强制换行   在段落内换行-->

3. html文本格式化标签

1.<!-- 加粗  -->
<strong></strong>
<b></b>
2.<!-- 倾斜 -->
<em></em>
<i></i>
3.<!-- 删除线 -->
<del></del>
<s></s>
4.<!-- 下划线 -->
<ins></ins>
<u></u>

4. < div>和< span>标签

<!-- 布局网页 --- 盒子   -->
<div>分割、分区</div><!-- 独占一行 大盒子 -->
<span> 跨度、跨距 </span><!-- 可在一行显示 小盒子  修饰某一小段文字-->

5. 图像标签和路径

1.图像标签

<!-- 单标签  -->      
<img src="图片路径" alt="替换文本" title="显示文本" width="300" height="200" border="15"/>
<!-- src：指定文件的路径和文件名 （必写）  -->
<!-- alt: 替换文本 -->
<!-- title:显示文本 -->
<!-- width: 图像宽度-->
<!-- height：图像高度 -->
<!-- border：图像边框粗细 (一般在css中写)-->

2. 图像路径

1.相对路径

同一级路径：位于html文件同一级
<img src="123.gif" >
下一级路径：位于html文件下一级
<img src="images/123.gif" >

上一级路径：位于html文件上一级
<img src="../123.gif" >

2.绝对路径

从盘符开始的路径（电脑中的位置）
<img src="D:\123\456.GIF" >
完整的网络地址
<img src="http：//www.itcast.cn/123/456.gif" >

6. 超链接标签

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
<!-- href:目标url地址（必须写） -->      
<!-- target：链接页面打开方式
1._self默认值（本页面打开）
2._blank新窗口打开
 -->

1.外部链接

<a href="https://www.123.cn" target="_blank">文本或图像</a>

2.内部链接

<a href="123.html" target="_blank">文本或图像</a>

3.空链接

<a href="#" target="_blank">文本或图像</a>

4.下载链接

地址链接的是文件.exe 或者是 zip 等压缩包形式

<a href="123.zip " target="_blank">文本或图像</a>

5.网页元素链接

<a href="https://www.123.cn" target="_blank"><img src="123.gif" ></a>

6.锚点链接

<a href="#123" >文本或图像</a>
<h3 id="123">目标标签</h3>

7. 特殊字符

1.<!-- 空格符 --> 
&nbsd; 
2.<!-- 小于号 -->   
&lt; 
3.<!-- 大于号 -->   
&gt;

二、HTML 表格

作用：显示、展示数据

1.表格标签

<table>
<tr>
<th>*.1</th><th>*.2</th><th>*.3</th>
</tr>
<!-- 1.  -->  
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<!-- 2. --> 
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
</table>
<!-- table:定义表格标签 -->  
<!-- tr：表格中的 行（必须嵌套在table内） -->   
<!-- th：表格中的 【表头】单元格 （必须嵌套在tr内）会居中加粗显示 -->   
<!-- td：表格中的 单元格（必须嵌套在tr内） -->

在这里插入图片描述

2.表格属性

后期通过css设置

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="200">
<tr>
<th>*.1</th><th>*.2</th><th>*.3</th>
</tr>
<!-- 1.  -->  
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<!-- 2. --> 
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
</table>
<!-- align:对齐方式 left/左对齐;center/居中对齐;right/右对齐  -->     
<!-- border：边框 ""没有边框/1有边框 -->     
<!-- cellpadding：单元边沿与内容之间的空白 默认1 -->     
<!-- cellspacing：单元格之间的空白 默认2 -->     
<!-- width：表格宽度 -->     
<!-- height：表格高度 -->

3.合并单元格

<table  border="1" cellspacing="0" width="500" height="200">
<tr>
<td>1.1</td>
<td colspan="2">1.2</td>
</tr>
<tr>
<td>2.1</td>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<!-- colspan:左右合并 跨列  -->  
<!-- rowspan:上下合并 跨行 -->

三、HTML 列表

列表用来布局页面

1.无序列表

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

1.< li>没有顺序
2.< ul> 中只能套< li>
3.< li>中可以加任何标签
4.有自己的样式属性，使用时用css设置

2.有序列表

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

1.< li>有顺序
2.< ol> 中只能套< li>
3.< li>中可以加任何标签
4.有自己的样式属性，使用时用css设置

3.自定义列表

用来对术语和名词的解释列表前无项目符号

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

1.< dl> 中只能套< dt>< dd>
2.< dt>< dd>中可以加任何标签

四、HTML 表单

1.表单域

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

2.表单控件（表单元素）

1.input 输入表单元素

<input type="属性值" />

<form action="url地址" method="提交方式" name="表单域名称">
用户名：<input type="text" value="请输入"  maxlength="6"  > <br>
<!-- 这里value：值展示给用户-->   
<!-- maxlength：用户可输入字符长度-->  
<label for="111">密码：</label><input type="password" id="111"> <br>
<!-- label for="xxx"  id="xxx"   ：光标定位/选择对应的表单元素 （for属性 与 id属性 相同） --> 
性别：<input type="radio" name="123"value="男" checked="checked" > 男<input type="radio"name="123"value="女" >女 <br>
<!-- name：使其可以多选一 -->      
<!-- 这里value：后台传送数据 -->   
<!-- checked:默认勾选 -->   
爱好：<input type="checkbox" value="吃饭" name="456" >吃饭<input type="checkbox" value="睡觉" name="456"   >睡觉<input type="checkbox" value="刷剧" name="456"  >刷剧 <br>
<!-- 这里value：后台传送数据 -->   
</form>

值	描述
text	文本框默认宽度为20字符。
password	密码框字符会被掩码。
radio	单选按钮单选按钮多选一圆框加相同的name后可多选一）
checkbox	复选框多选按钮小方块对勾
name	给input元素赋名（1.单选按钮和复选框需加 2.向后台提供数据）
value	规定input元素值（1.值展示在文本框中 2.向后台提供数据）
checked	默认勾选主要针对单选框和复选框
maxlength	规定输入字符长度
hidden	隐藏的输入字段
image	图像形式的提交按钮
reset	重置按钮
submit	提交按钮
button	可点击按钮（点击不提交）
file	输入字段和 "浏览"按钮（文件域上传文件使用）

2.select 下拉表单元素

<select> <option> xxx </option>... </select>

<form>
籍贯：
<select>
<option>山东</option>
<option  selected = " selected ">陕西</option>
<option>北京</option>
<option>天津</option>
<option>山西</option>
<option>内蒙古</option>
...
</select>
</form>

< select>中至少包含一对< option>
< option>中定义 selected = " selected ",当前项为默认选项

3.textarea 文本域元素

定义多行文本输入控件，用于留言板、评论
<textarea > 文本内容... </textarea>

<form>
评论：
<textarea>xxxxx...<!-- 默认显示xxxxx... --> </textarea>
</form>