前端常见标签

<li> (List Item):定义列表中的一个项目(项)
<ul> (Unordered List):定义无序列表
<ol> (Ordered List):定义有序列表
<a> (Anchor Tag):定义超链接

在这里插入图片描述

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
  • 苹果
  • 香蕉
  • 橙子

在这里插入图片描述

<ol>
    <li>步骤一</li>
    <li>步骤二</li>
    <li>步骤三</li>
</ol>
  1. 步骤一
  2. 步骤二
  3. 步骤三

在这里插入图片描述

<a href="https://example.com">访问示例网站</a>

访问示例网站

在这里插入图片描述

<ul>
    <li>
        新闻资讯
        <ul>
            <li><a href="http://www.people.com.cn/">人民日报</a></li>
            <li><a href="http://www.gmw.cn/">光明日报</a></li>
        </ul>
    </li>

    <li>
        搜索引擎
        <ul>
            <li>
                雅虎
                <ul>
                    <li><a href="http://www.yahoo.com/">雅虎</a></li>
                    <li><a href="http://www.yahoo.co.jp/">雅虎日本</a></li>
                </ul>
            </li>
            <li><a href="http://www.excite.com/">Excite</a></li>
            <li><a href="http://www.google.com/">谷歌</a></li>
        </ul>
    </li>
</ul>

在这里插入图片描述
<h1><h6> 共6个不同级别的标题,其中 <h1> 是最重要的(级别最高),而 <h6> 是最不重要的(级别最低)

<h1>欢迎来到我们的网站!</h1>
<h2>欢迎来到我们的网站!</h2>
<h3>欢迎来到我们的网站!</h3>
<h4>欢迎来到我们的网站!</h4>
<h5>欢迎来到我们的网站!</h5>
<h6>欢迎来到我们的网站!</h6>
欢迎来到我们的网站!
欢迎来到我们的网站!
欢迎来到我们的网站!
欢迎来到我们的网站!
欢迎来到我们的网站!
欢迎来到我们的网站!

在这里插入图片描述
<hr> 标签表示水平线(Horizontal Rule),它在网页中创建一条水平分割线,通常用于视觉上划分内容区域或段落。

<hr>

在这里插入图片描述

<tr>:全称为 Table Row(表格行)
<td>:全称为 Table Data Cell(表格数据单元格)

<table>
    <caption>2023年第一季度员工销售业绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>销售额(元)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>销售部</td>
            <td>500,000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>市场部</td>
            <td>450,000</td>
        </tr>
        <!-- 更多行数据... -->
    </tbody>
</table>
2023年第一季度员工销售业绩表
姓名部门销售额(元)
张三销售部500,000
李四市场部450,000
  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端中,可以使用HTML、CSS和JavaScript来实现标签页。 1. HTML结构 首先需要定义标签页的HTML结构,一般使用ul和li标签来构建,如下所示: ``` <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane active">Tab 1 content</div> <div id="tab2" class="tab-pane">Tab 2 content</div> <div id="tab3" class="tab-pane">Tab 3 content</div> </div> ``` 其中,ul.tabs定义了标签页的外层容器,每个标签页使用li标签定义,同时需要设置一个active类来表示当前选中的标签页。此外,需要一个tab-content的容器来包含所有标签页的内容,每个标签页的内容使用div.tab-pane来定义,同时需要设置一个与对应标签页链接href相同的id属性。 2. CSS样式 接下来需要定义标签页的样式,例如: ``` .tabs { list-style: none; margin: 0; padding: 0; } .tabs li { display: inline-block; } .tabs li a { display: block; padding: 10px; background-color: #EEE; color: #333; text-decoration: none; } .tabs li.active a { background-color: #FFF; border-bottom: 2px solid #333; } .tab-content .tab-pane { display: none; padding: 10px; } .tab-content .tab-pane.active { display: block; } ``` 其中,ul.tabs样式定义了标签页的外观,li样式定义了每个标签页的样式,a样式定义了每个标签页链接的样式,active类样式定义了当前选中的标签页的样式,tab-content样式定义了标签页内容的外观,tab-pane样式定义了每个标签页内容的样式,active类样式定义了当前选中的标签页内容的样式。 3. JavaScript交互 最后需要添加JavaScript代码实现标签页的交互效果,例如: ``` var tabs = document.querySelectorAll('.tabs li'); var tabContents = document.querySelectorAll('.tab-content .tab-pane'); tabs.forEach(function(tab, index) { tab.addEventListener('click', function() { tabs.forEach(function(tab) { tab.classList.remove('active'); }); tab.classList.add('active'); tabContents.forEach(function(content) { content.classList.remove('active'); }); tabContents[index].classList.add('active'); }); }); ``` 其中,使用querySelectorAll方法获取所有标签页和标签页内容元素,使用forEach方法遍历所有标签页,为每个标签页添加点击事件处理程序,在点击事件处理程序中,先将所有标签页和标签页内容的active类移除,再为当前点击的标签页和对应的标签页内容添加active类。这样就完成了标签页的交互效果。 以上是一种常见的实现标签页的方法,当然还可以使用其他的方式实现,具体需要根据实际需求进行选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值