HTML---01标签form,table

本文详细介绍了HTML中的基础标签及其属性,包括文本标签、标题、水平线等,并通过实例展示了列表标签、超链接、图片标签及表格标签的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文本标签(body里面的标签)
标题(h1~h6) align:设置位置
水平线(hr) color:线的颜色
换行(br)
标签规定粗体文本(b)
将文本以斜体显示(i)
将文本以下划线显示(u)
段落(p)(书写两段小说进行演示)
段落缩进(blockquote)(主要用于解释或者强调)
上下标(sup和sub)(一般用于公式)y=x2  H2O  CaCo3
原样输出(pre)(希望网页上的东西和代码里面写的样式完全


1.marquee:
behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 
bgcolor:字幕背景颜色 
direction:设置字幕的滚动方向down  right  left  up

<marquee behavior="slide" bgcolor="#FF0000" direction="down">刘备</marquee>


列表标签:
     有序: <ol type="1">
<li>刘亦菲</li>
<li>刘亦菲</li>   
<li>刘亦菲</li>
</ol>
     无序: <ul type="circle">  
<li>刘亦菲</li>
<li>刘亦菲</li>
<li>刘亦菲</li>
              </ul>




下拉选项: 选择按钮
<select>
<option>陕西</option>
<option>四川</option>
<option>广东</option>
</select>






超链接标签:<a></a>
两个属性:href:设置这个超链接需要连接到的资源
 target:设置打开资源的方式
      _self: 当前窗口打开, _blank: 新窗口打开 

                 


        
超链接 :默认的协议为file://
        
协议:
file:// 本地文件协议
    http:// 网络上我们一般请求都使用的是http://,这个协议是基于请求和相应的
    thunder:// 迅雷下载协议
    mailto:  发送邮件的协议
<a href="http://www.baidu.com" target="_parent">超链接</a><br />
<a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
<a href="mailto:12345@qq.com">发送邮件</a>
<a href="#content1">第一章节</a>




打锚点    <a name="锚点名称"></a>   你想去哪里就给哪里打锚点
如何去到锚点处: <a href="#锚点名称">去到锚点处</a> 

 
   
图片标签:img
图片标签的属性:
src:连接的图片的位置
width:图片的宽度
height:图片的高度
alt:提示文本,当src属性是小的时候,alt属性才生效
title:当鼠标放到这张图片上的时候,会给与一个文字提示




使用转义字符将上述的内容展示在页面上
<    &lt;
>    &gt;
&    &amp;
空格  &nbsp;   需求:西部    开源
商标  &reg;
版权  &copy;   需求:给王老吉分别加上版权和商标


&lt;h1&gt;标题1&lt;/h1&gt;<br/>====><h1>标题1<h1>
&amp;<br /> ======>  &
西部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开源






table:整张表就用一个table来表示
caption:表的标题
tr:代表表中的一行
td:表中的一个单元格
th:表头,一般用于加粗显示字段名称
border:table标签的一个属性,用来调整表框的宽度
width:调整表的宽度
height:调整表格的高度
align:调整表格的位置


行合并和列合并:都是在td中操作的
行合并:rowspan
列合并:colspan








<form>   就是一个表单
<input type="text">  单行输入域
<input type="password"/>  密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
              <select/>  下拉选项
<input type="hidden"/>   隐藏域。特点:不会显示到html页面上,


但可以携带数据。 
<input type="file"/>  文件选择器
<textarea></textarea>  多行输入域
<input type="submit"/>  提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮 




form中有两大属性:
 action:表单要提交到哪个路径
 method:get,post
  get:浏览器会与表单处理服务器建立连接,在一个传输步骤中发送所有的表单数据:  


  浏览器会将数据直接附在表单action URL之后,这两者用?分隔


  post:一旦读到参数后,应用程序在使用这些表单值之前必须对这些参数进行解码,用 


 户特定的服务器会指定应用程序如何接受这些参数



 使用哪种?
  get:  1.简短字段的小表单,为了传输性能
      
 
  post: 1.字段很多或者很长的文本域(一些服务器操作系统在处理可以立即传递给应


用程序的命令行参数时,会限制其数目和长度)


2.在读取和解码方法做些额外工作的情况下


3.安全性,将参数作为单独的事务传输给服务器进行处理时,可以采取加密方

 

        法,而get则把参数放在了url中,还可以从服务器的日志文件中获取

    



        4.如果想在表单之外调用服务器端的应用程序,而且包括向其传递参数的过程


,就要采用 GET 方法,因为该方法允许把表单这样的参数包括进来作为 URL 的一


部分。而另一方面,使用 POST 样式的应用程序却希望在 URL 后还能有一 个来


自浏览器额外的传输过程,其中传输的内容不能作为传统 <a> 标签的内容




name和value:
     name:在input中如果是type="radio"单选时,把多个单选按钮的name设置成
     相同的这样可以实现关联,如性别男女只能选一个而不能选两个

  
     value:     1.在text文本框中 表示文本框中的值
      2.在submit和reset中,value就代表着两个按钮上的值
      3.在radion单选框中,value表示该单选框的真实值,与数据库连接
         <input type="radio" name="gender" value="女"/>男 
         在页面显示的是选择男性提交,但数据库实际收到的是女,可从get后的URL得知

 
     文本域为什么不写value,因为文本域需要输入,输入的就是value的值
     复选框和单选一样是要写value,不过写不写都不影响静态显示


     
在后台如果你想得到复选框的内容 就是value 来取
当你在接收表单数据的页面中获取数据时,得到的就是value的值 


        1. name是控件的名称(多个控件可以取同一个名称),value是控件的值;

2. 并不是所有控件的value都会显示出来,比如 checkbox, radio, hidden; 




### Element-UI 中 `el-table` 嵌套 `el-form-item` 的实现 在实际开发中,有时会遇到需要将表单控件嵌入到表格单元格中的场景。这种情况下可以利用 Vue 和 Element-UI 提供的功能来完成这一需求。 #### 1. 数据结构设计 为了支持动态编辑功能,通常需要定义一个数组作为表格的数据源,并为每一项提供额外的状态字段用于控制输入框的显示状态以及存储用户输入的内容[^3]。 ```javascript data() { return { tableData: [ { id: 1, name: '', age: '' }, { id: 2, name: '', age: '' } ], editingId: null // 当前正在编辑的行ID }; } ``` #### 2. HTML 结构 通过自定义列模板的方式,在 `<template>` 标签内放置所需的表单组件(如 `el-input`)。当点击某个按钮触发编辑模式时,切换对应单元格内的静态文本与可编辑输入框之间的显示状态。 ```html <el-table :data="tableData" border style="width: 100%"> <!-- 名字 --> <el-table-column label="姓名"> <template slot-scope="scope"> <el-form-item v-if="editingId === scope.row.id" prop="name"> <el-input v-model="scope.row.name"></el-input> </el-form-item> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <!-- 年龄 --> <el-table-column label="年龄"> <template slot-scope="scope"> <el-form-item v-if="editingId === scope.row.id" prop="age"> <el-input v-model="scope.row.age"></el-input> </el-form-item> <span v-else>{{ scope.row.age }}</span> </template> </el-table-column> <!-- 编辑操作 --> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> <el-button type="text" v-if="editingId === scope.row.id" @click="handleSubmit()">保存</el-button> </template> </el-table-column> </el-table> ``` #### 3. 方法逻辑 编写方法以响应用户的交互行为,比如进入编辑状态或者提交修改后的数据。 ```javascript methods: { handleEdit(row) { this.editingId = row.id; }, handleSubmit() { console.log('当前数据:', JSON.stringify(this.tableData)); this.$message.success('已成功更新!'); this.editingId = null; // 关闭编辑模式 } } ``` 以上代码片段展示了如何在一个基于Vue框架的应用程序里结合使用Element UI库里的`el-table`和`el-form-item`组件创建具备基本CRUD能力的界面。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值