前端的那些基本标签【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",重新新建一个页面执行加载跳转

目录
相关文章
|
6月前
|
存储 JavaScript 前端开发
前端xss攻击——规避innerHtml过滤标签节点及属性
前端xss攻击——规避innerHtml过滤标签节点及属性
384 4
|
6月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
229 0
|
6月前
|
前端开发
若依框架---如何使用多数据源?前端table中如何显示图片?
若依框架---如何使用多数据源?前端table中如何显示图片?
352 2
|
2月前
|
前端开发 数据安全/隐私保护
【前端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标签 按钮 【附注册信息综合案例】
|
2月前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
59 3
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
111 1
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
50 13
|
5月前
|
数据采集 移动开发 前端开发
前端基本标签,快捷键
前端基本标签,快捷键
|
4月前
|
前端开发
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
311 0
|
6月前
|
前端开发 搜索推荐 开发者
【Web 前端】什么是语义化标签?
【4月更文挑战第22天】【Web 前端】什么是语义化标签?