超链接标签，列表标签，布局标签，表单标签，表单项标签

最新推荐文章于 2023-05-11 08:57:54 发布

小萌新上大分

最新推荐文章于 2023-05-11 08:57:54 发布

阅读量179

点赞数 1

分类专栏：前端文章标签：表单标签布局标签超链接标签列表标签标签项标签

本文链接：https://blog.csdn.net/m0_64365315/article/details/126259201

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

超链接标签

a 标签属性：

href：指定访问资源的URL

target：指定打开资源的方式 _self：默认值，在当前页面打开 _blank：在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签演示</title>
</head>
<body>
      <a href="http://baidu.com " target="_blank"> 点我跳转</a>
</body>
</html>

列表标签

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

无序列表中的 type 属性用来指定标记的形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签演示</title>
</head>
<body>
<ol>
  <li> java</li>
  <li> C</li>
  <li> go</li>
</ol>



<ul>
  <li> java</li>
  <li> C</li>
  <li> go</li>
</ul>


</body>
</html>

效果

表格标签

table ：定义表格

border：规定表格边框的宽度

width ：规定表格的宽度

cellspacing：规定单元格之间的空白

tr ：定义行

align：定义表格行的内容对齐方式

td ：定义单元格

rowspan:规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

th：定义表头单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签演示</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
  <tr  align="center">
    <th>学号</th>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>张三</td>
    <td>30</td>
    <td>40</td>
  </tr >
  <tr align="center">
    <td>2</td>
    <td>李四</td>
    <td>50</td>
    <td>60</td>
  </tr>
  <tr align="center">
    <td>3</td>
    <td>王五</td>
    <td>70</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

效果

布局标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局标签演示</title>
</head>
<body>
<div>我是div标签</div>
<div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>
</body>
</html>

效果

表单标签

表单：在网页中主要负责数据采集功能，使用表单项(元素)：不同类型的 input 元素、下拉列表、文本域

form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。

form标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL 以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 #

method ：规定用于发送表单数据的方式 method取值有如下两种：

get：默认值。如果不设置method属性则默认就是该值请求参数会拼接在URL后边 url的长度有限制 4KB

当使用get方式，输入aaa提交时

post：浏览器会将数据放到http请求消息体中请求参数无限制的

打开开发者工具输入信心提价-->Network-->payload-->Form data下就会有显示

表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：表单项，通过type属性控制输入形式 input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

select：定义下拉列表，定义列表项

textarea：文本域如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。

注意：以上标签项的内容要想提交，必须得定义 name 属性。每一个标签都有id属性，id属性值是唯一的标识。单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签演示</title>
</head>
<body>
  <form>
    <input type="hidden" name="id" value="123">
    <label for="username"> 用户名：</label>
<!--    label标签可以扩大选择的范围，比如用户点用户名就可以直接进行输入了-->
   <input type="text" name="userName" id="username">  <br>
    <label for="password">密码：</label>
      <input type="password" name="password" id="password"><br>

    <input type="radio" value="1" name="gender"> 男
    <!--     value 的值是向服务器提交的值，不写默认就是on后端到时候无法区分， name 设置一样了才能是单选按钮，产生互斥效果-->
    <input type="radio" value="2" name="gender"> 女
    <br>
     爱好：<input type="checkbox" value="1" name="hobby"> 打游戏
     <input type="checkbox" value="2" name="hobby">  吃饭
     <input type="checkbox" value="3" name="hobby"> 睡觉
    <br>
    城市：<select name="city">
    <option value="1">北京</option>
    <option value="2">天津</option>
    <option value="3">河北</option>
  </select>
    <br>
    头像：<input type="file">
    <br>
    个人描述：<textarea  cols="20" rows="5" name="desc"></textarea>
    <br>
    <br>
    <input type="submit" value="点击登录">
    <input type="button" value="普通的按钮">
    <input type="reset" value="重置按钮">

  </form>

</body>
</html>