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

最新推荐文章于 2024-11-06 15:48:13 发布

m0_55070913

最新推荐文章于 2024-11-06 15:48:13 发布

阅读量137

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_55070913/article/details/126080989

版权

面试同时被 3 个专栏收录

131 篇文章 3 订阅

订阅专栏

阿里巴巴

124 篇文章 0 订阅

订阅专栏

学习路线

122 篇文章 1 订阅

订阅专栏

本文介绍了前端开发中的基本标签，包括表单类型的`input`标签，如密码输入框和复选框；表格结构，如创建带有标题的2行3列表格；以及图像标签的`title`和`alt`属性，强调`alt`属性在项目协作中的重要性。文章还提到了前端开发工具和资源，鼓励读者提升前端技能。

摘要由CSDN通过智能技术生成

??? 作者：
??? 潜力创作新星华为云享专家博主
??? Python+Android
??? 博客记录学习的思路，项目和错误,寻找志同道合的朋友
??? 如果觉得有帮助记得一键三连 ┗|｀O′|┛ 嗷~~

在这里插入图片描述

html页面的骨架，相当于人的骨头，只有骨头是不是看着有点瘆人，只有HTML也是如此。

css,相当于把骨架修饰起来，相当于人的皮肉。

js(javascripts),动起来，相当于人的血液，大脑等一切能使人动起来的器官或者其他的。

在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有，除此之外牛客里面还有招聘（社招和校招）、一些上岸大厂的大佬的面试经验。 牛客是可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随一生的刷题app

刷题页面，功能完善，短时间坚持可看效果。

查看出现此处，筛选定制，查询指定大厂出现频率

首页功能强悍，完全免费

???表单类型

问题 1：
请依次写出以下类型的输入框。
1、类型为密码，默认值为"nowcoder"
2、类型为复选框，且状态为已勾选

解答：

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

在这里插入图片描述

总结：
???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>

在这里插入图片描述

总结：
???<table></table>定义一个表格
???<tr></tr>被包含的都是一列
???<th></th>粗体的标题，是被包含的内容加粗
???<td></td>就是内容
???table里面的border属性就是边界，可以看见小框框和小框框，小框框和大框框之间的距离都是1px,是不是看着太丑了，这个没关系，后面有css函数可以优化。

??? 图像标签属性

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

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

在这里插入图片描述

总结：
???1、<img src=" 图片地址 " title=" 标题属性 " alt=" 代替文本属性 " >
???2、title:鼠标移入图片显示的值 alt:图片无法加载时显示的图片
???3、一般alt很常用，在工程项目中，一般项目很大由数十个人完成前端页面工作。假如项目在你的电脑上图片可以显示，别人的电脑运行同一个项目无法显示图片，这时候可以根据alt快速的找到是拿一张图片显示不出来，提高了问题解决的效率。

???

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

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

在这里插入图片描述
总结：
???a 标签的href属性是跳转链接，项目中常用于项目内各功能页面跳转
???默认target的值为_self，就是以当前页面加载跳转链接
???target="_blank" ,重新新建一个页面执行加载跳转链

可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随程序员一生的app

觉得有用的可以给个三连，关注一波！！！带你玩转前端

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦