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

    目录

     

    超链接标签

    a 标签属性：

    列表标签

     表格标签

    table ：定义表格

    tr ：定义行

    td ：定义单元格

    th：定义表头单元格

    布局标签

    表单标签

    form标签属性

     表单项标签

     

    超链接标签

     

    a 标签属性：

    href：指定访问资源的URL

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>超链接标签演示title>
    6. head>
    7. <body>
    8.       <a href="http://baidu.com " target="_blank"> 点我跳转a>
    9. body>
    10. html>

    列表标签

     

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>列表标签演示title>
    6. head>
    7. <body>
    8. <ol>
    9.   <li> javali>
    10.   <li> Cli>
    11.   <li> goli>
    12. ol>
    13.  
    14.  
    15.  
    16. <ul>
    17.   <li> javali>
    18.   <li> Cli>
    19.   <li> goli>
    20. ul>
    21.  
    22.  
    23. body>
    24. html>

    效果

     

     表格标签

    table ：定义表格

    border：规定表格边框的宽度

    width ：规定表格的宽度

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

    tr ：定义行

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

    td ：定义单元格

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

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

    th：定义表头单元格

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表格标签演示title>
    6. head>
    7. <body>
    8. <table border="1" cellspacing="0" width="500">
    9.   <tr  align="center">
    10.     <th>学号th>
    11.     <th>姓名th>
    12.     <th>数学th>
    13.     <th>语文th>
    14.   tr>
    15.   <tr align="center">
    16.     <td>1td>
    17.     <td>张三td>
    18.     <td>30td>
    19.     <td>40td>
    20.   
    21.   <tr align="center">
    22.     <td>2td>
    23.     <td>李四td>
    24.     <td>50td>
    25.     <td>60td>
    26.   tr>
    27.   <tr align="center">
    28.     <td>3td>
    29.     <td>王五td>
    30.     <td>70td>
    31.     <td>80td>
    32.   tr>
    33. table>
    34.  
    35. body>
    36. html>

    效果

     

    布局标签

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>布局标签演示title>
    6. head>
    7. <body>
    8. <div>我是div标签div>
    9. <div>我是div标签div>
    10. <span>我是span标签span>
    11. <span>我是span标签span>
    12. body>
    13. 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 属性指定提交的值。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表单项标签演示title>
    6. head>
    7. <body>
    8.   <form>
    9.     <input type="hidden" name="id" value="123">
    10.     <label for="username"> 用户名：label>
    12.    <input type="text" name="userName" id="username">  <br>
    13.     <label for="password">密码：label>
    14.       <input type="password" name="password" id="password"><br>
    15.  
    16.     <input type="radio" value="1" name="gender"> 男
    17.     
    18.     <input type="radio" value="2" name="gender"> 女
    19.     <br>
    20.      爱好：<input type="checkbox" value="1" name="hobby"> 打游戏
    21.      <input type="checkbox" value="2" name="hobby">  吃饭
    22.      <input type="checkbox" value="3" name="hobby"> 睡觉
    23.     <br>
    24.     城市：<select name="city">
    25.     <option value="1">北京option>
    26.     <option value="2">天津option>
    27.     <option value="3">河北option>
    28.   select>
    29.     <br>
    30.     头像：<input type="file">
    31.     <br>
    32.     个人描述：<textarea  cols="20" rows="5" name="desc">textarea>
    33.     <br>
    34.     <br>
    35.     <input type="submit" value="点击登录">
    36.     <input type="button" value="普通的按钮">
    37.     <input type="reset" value="重置按钮">
    38.  
    39.   form>
    40.  
    41. body>
    42. html>

     

  • 相关阅读:
    OpenGl材质
    Rabbitmq元数据导入导出
    virtio_net 与 virtio-pci 驱动关联浅析
    如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问
    【进阶版】机器学习之EM经典算法原理+代码（11）
    Android 9.0 网络之netd详解
    Python一周小结
    计算机视觉与深度学习 | 基于点线融合的视觉惯性SLAM前端
    go的面向对象学习
    单向链表浅析（小学生都能看懂）
  • 原文地址：https://blog.csdn.net/m0_64365315/article/details/126259201