前端的那些基本标签【a table tr caption image等等......】

本文涉及的产品
转发路由器TR,750小时连接 100GB跨地域
简介: 前端的那些基本标签【a table tr caption image等等......】

表单类型

问题 1:

请依次写出以下类型的输入框。

1、 类型为密码,默认值为"nowcoder"

2、类型为复选框,且状态为已勾选

解答:

<form>
    <!-- 补全代码 -->
    <input type="password" value="nowcoder"/>
    <input type="checkbox" checked/>
</form>

image.pngimage.png总结:

🥭🥭1、表单 input是单标签 ,但凡和输入相关的都用它。

🥭🥭2、password是密码,checked是选中checkbox, value默认值,这些都是固定的类型,记下来或者多敲敲就记住了。

表格结构

问题 2:

请写出具有表格标题为"nowcoder"的2行3列表格结构。


解答:

<table border=1px>
    <!-- 补全代码 -->
    <caption>nowcoder</caption>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
         <td>2</td>
         <td>2</td>
         <td>2</td>
     </tr>
</table>

image.png总结:

定义一个表格

被包含的都是一列

粗体的标题,是被包含的内容加粗

就是内容

table里面的border属性就是边界,可以看见小框框和小框框,小框框和大框框之间的距离都是1px,是不是看着太丑了,这个没关系,后面有css函数可以优化。

图像标签属性

问题 3:

请写出具有标题属性和代替文本属性的图片标签。

<!-- 补全代码 -->
<img title="" alt="">

image.png总结:

🥭🥭1、代替文本属性

🥭🥭2、title:鼠标移入图片显示的值 alt:图片无法加载时显示的图片

🥭🥭3、一般alt很常用,在工程项目中,一般项目很大由数十个人完成前端页面工作。假如项目在你的电脑上图片可以显示,别人的电脑运行同一个项目无法显示图片,这时候可以根据alt快速的找到是拿一张图片显示不出来,提高了问题解决的效率。

问题 4:

请写出可以在新窗口打开文档的a标签。

<!-- 补全代码 -->
<a href="www.baidu.com" target="_blank">百度</a>

image.png

总结:

标签的href属性是跳转链接,项目中常用于项目内各功能页面跳转

默认target的值为_self,就是以当前页面加载跳转链接

target="_blank",重新新建一个页面执行加载跳转

目录
相关文章
|
10月前
|
存储 JavaScript 前端开发
前端xss攻击——规避innerHtml过滤标签节点及属性
前端xss攻击——规避innerHtml过滤标签节点及属性
490 4
|
10月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
290 0
|
10月前
|
前端开发
若依框架---如何使用多数据源?前端table中如何显示图片?
若依框架---如何使用多数据源?前端table中如何显示图片?
437 2
|
6月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
6月前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
151 3
|
6月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
350 1
|
6月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
97 13
|
9月前
|
数据采集 移动开发 前端开发
前端基本标签,快捷键
前端基本标签,快捷键
|
8月前
|
前端开发
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
461 0
|
10月前
|
前端开发 搜索推荐 开发者
【Web 前端】什么是语义化标签?
【4月更文挑战第22天】【Web 前端】什么是语义化标签?

热门文章

最新文章

  • 1
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
  • 3
    前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
  • 4
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 6
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
  • 7
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 9
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
  • 10
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布