初入WEB前端日记（2）HTML5 语义化标签、列表

最新推荐文章于 2021-05-31 07:16:58 发布

宋辰轩

最新推荐文章于 2021-05-31 07:16:58 发布

阅读量155

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/106992092

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

小白一枚，初入WEB前端

1.语义化标签

介绍了标题标签（h1-h6）、分组标签（hgoup）、强调（em）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标签在网页HTML中专门负责网页结构，在使用标签时，网页关注的是标签的语义，而不是它的样式 -->
    <!-- 标题标签
         h1-h6有六级标题，重要性以次递减
        在网页中独占一行的元素称之为块元素 -->
    <!-- hgroup标签为分组标签，可以将一组相关的标题放进hgroup里 -->
    <hgroup>
        <h1>主标题</h1>
        <h2>副标题</h2>
    </hgroup>
    <!-- em标签用于表示语音语调的加重 -->
    <p>你今天<em>真</em>好看</p>
</body>
</html>

2.列表

介绍了三种列表和列表的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        
    </style>
    <title>Document</title>
</head>
<body>
    <!-- 列表
        1.有序列表--ol
        2.无序列表--ul   ul一般做网页的导航菜单
        3.定义列表--dl，在dl中使用dt表示定义的内容，dd表示解释说明 -->
<ul>
    <li>铅笔</li>
    <li>橡皮</li>
    <li>尺子</li>
</ul>
<ol>
    <li>铅笔</li>
    <li>橡皮</li>
    <li>尺子</li>
</ol>
<dl>
    <dt>结构</dt>
    <dd>结构用来表示网页的段落</dd>    
    <dt>备注</dt>
    <dd>暂无</dd>
    <!-- 列表可以套娃，套娃如下 -->


<ul>
    <li>一.标题</li>
    <ul>
        <li>1.标题一</li>
        <li>2.标题二</li>
    </ul>
</ul>
</dl>
</body>
</html>

效果如下：

在这里插入图片描述

3.超链接

先写到这，回家继续学

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 超链接可以跳转到其他网页或者是此网页的其他位置
        使用<a>标签定义超链接 
        超链接是行内元素，可以在元素内放出了<a>之外的其他元素（禁止套娃！！）-->
    
    <!-- 下面是一个很简单的超链接 -->
    <a href="https://www.baidu.com" >百度</a>
</body>
</html>

效果如下：

在这里插入图片描述

可以进行自己网页的跳转，举个例子

<a href="列表.html">列表跳转</a>

在这里插入图片描述

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端日记（2）HTML5 语义化标签、列表

小白一枚，初入WEB前端1.语义化标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&
复制链接

扫一扫

专栏目录