一分钟学前端-02_HTML常用元素

myzbx 2024-12-01 18:28 32 浏览

上一篇我们介绍了前端的HTML认识。

今天我们来聊聊，html的一些常用元素:

前端开发中，有很多个元素，我们挑一些使用频率最高，使用次数最多的元素，跟大家分享一下。

div元素：通常用来对页面布局搭建及元素分组的一个块元素

<div class="layout-wrap">
        <div class="top">
            顶部
        </div>
        <div class="left">
            左侧
        </div>
        <div class="right">
            <div class="right-top">右侧顶部</div>
            <div class="right-bottom">右侧底部</div>
        </div>
    </div>

上述代码，再加上css样式即可搭建出自己想要的布局：

p元素：段落标签，用来展示一段文本

    <p>人生就像一场单程的旅行，即使有些遗憾，我们也没有从头再来的机会，与其纠结无法改变的过去不如微笑着珍惜未来。因为生活，没有如果</p>

span元素：组合文本的行内元素，用来组合的行内元素

<p><span>人生</span>就像一场单程的旅行，即使有些遗憾，我们也<span>没有从头再来的机会</span>，与其纠结无法改变的过去不如微笑着<span>珍惜未来</span>。因为生活，没有如果</p>

img元素：图片元素，用于在页面中展示图片

<img src="https:///www.superwbs.com/superwbs-server/upload/6O95pvqNqC20XhGz9WfqFrC2.png" alt="" srcset="">

input元素：简单的表单元素，标签用于搜集用户信息

<input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <input type="button" value="提交">

table元素：简单的表格元素，用来展示表格

<table border="1" width="100%">
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小成</td>
            <td>男</td>
        </tr>
    </table>

（本期完）

小成讲前端---本系列将隔天不定时更新

欢迎点赞，关注我！！

HTML 简介

上一篇：Http基础知识学习总结-加油吧少年
下一篇：Web技术-深入了解HTML基础理论和应用

一分钟学前端-02_HTML常用元素

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」