前端-各类标签的用途及代码实现

最新推荐文章于 2024-05-16 18:40:51 发布

淘气包ya

最新推荐文章于 2024-05-16 18:40:51 发布

阅读量583

点赞数 11

分类专栏： WEB前端学习文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_67756456/article/details/134886001

版权

WEB前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.标签之标题

标题的标签分为六类：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

代码实现：

<body>
    <h1>h$*6快速生成六个标签</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4 align="left"> align 属性用来调整位置</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
</body>

调试结果

二.标签之段落

段落标签：<p>

主要用于文本呈现，是最常用的标签之一

代码实现

<body>
    <p>这是一个段落标签，主要用于写文本描述</p>
    <p> br 标签用来换行<br>这是同一行</p>
    <hr> <p>hr是水平线标签</p>
</body>

调试结果

三.标签之图片

图片标签：<img>

图片的路径分为三种：绝对路径（服务端主机中的绝对路径）、相对路径（同一文件下可以用相对路径）、网络路径（直接引用网络上的图片）

代码实现

<body>
    <p>图片一定要和文件在同一个文件夹底下</p>
    <p>五个属性<br>src:路径<br>alt：图片的替代文本<br>width：宽<br>height:高<br>title:悬停在图片上显示的文字</p>
    <h1>三种图片路径</h1>

    <h2>绝对路径</h2>
    <img src="F:\testphoto\11.webp" alt="erro">

    <h2>相对路径</h2>
    <p>子级关系用/，父级关系用../，同级关系用./</p>
    <img src="1.jpg" alt="图片发生错误时的替代文本">

    <h2>网络路径</h2>
    <img src="https://www.touxiangwu.com/touxiang/105954.html" alt="erro">
</body>

调试结果

四.标签之超文本链接

超文本链接标签：<a>

代码实现

<body>
    <a href="https://www.baidu.com">点击这里跳转</a>
    <a href="https://www.taobao.com"><img src="F:\testphoto\11.webp" alt="ERRO"></a>
    <p>a标签中hrf代表要跳转的文件，图片也可以</p> 
</body>

调试结果

五.标签之文本

七类文本标签代码实现及其功能

    <p>p标签</p>
    <em>em标签：定义着重文字</em>
    <i>i标签：定义粗体文字</i>
    <b>b标签：斜体文字</b>
    <strong>strong标签：加重语气</strong>
    <span>sapn标签：元素没有特定的含义</span>
    <del>del标签：删除字</del>

调试结果

六.标签之列表

列表分为：

有序列表：<ol>;

无序列表：<ul>;

有序和无序体现在序号：

代码实现

<body>
    <p>快速写o/ul li框架：ul>li*5</p>
    <h2>ol为有序标签</h2>
    <ol>
        <li>实例1</li>
        <li>实例2</li>
        <li>实例3</li>
    </ol>
    <ol type="a">
        <p>type属性可以更改序列号类型</p>
        <li>实例1</li> 
        <li>实例2</li>
        <li>实例3</li>
    </ol>
    <h2>ul为无序标签</h2>
    <ul>
        <p>type属性可以更改序列号类型</p>
        <li>实例1</li> 
        <li>实例2</li>
        <li>实例3</li>
    </ul>
    <p>type属性可以更改序列号类型</p>
    <li>实例1</li> 
    <li>实例2</li>
    <li>实例3</li>

    <h3>无序列表嵌套</h3>
    <ul>
        <li>在售</li> 
        <ul>
            <li>手机</li>
            <li>电脑</li>
        </ul>
        <li>已下架</li>
        <ul>
            <li>平板</li>
            <li>耳机</li>
        </ul>
        <li>实例3</li>
    </ul>

</body>

调试结果

七.标签之表格

表格标签：table、包含行：tr、列：td

     table的属性
     border:边框格式
     width
     height

    单元格合并
    水平合并:colspan
    垂直合并:rowspan

代码实现

    <table border="2" width="200" >                                                                                                                                                                                                                                                                                                                  
        <tr>
            <td>11</td>
            <td colspan="2">12</td>
        </tr>
        <tr>
            <td rowspan="2">21</td>
            <td colspan="2">22</td>
        </tr>
        <tr>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>

调试结果

八.标签之from表单

表单用来搜索作用：<from>

代码实现

<body>
    <h1>表单用于输入框,由三个部分组成:表单，表单域（输入框），表单按钮</h1>
    <form action=""></form>
    账号：<input type="text">
    密码：<input type="password">
    <input type="submit" value="提交">
    <button>点击提交</button>
    <p> input type="submit" value="提交" 和 button 都可以作为表单按钮</p>
    <h2>input的类型有常用的有三种</h2>
    <ul>
        <li>text</li>
        <li>password</li>
        <li>submit</li>
    </ul>
</body>

调试结果

九.块元素

    块元素：独占一行的标签
    常见的块级元素：p form  h1-h6 hr table ul ol div 

    行内元素：只在一行只占自身的元素
    常见的行内元素：a b em  span strong （标签之文本这一类的标签）

    行内块级元素 ：能够识别宽度高度
    常见的行内块级元素有：img button input

十.标签之容器

容器的标签：<div>

容器可以理解为一个盒子，一个盒子里面装了很多标签

    关于div的一些标签解释

    </div> 
    <p>老版本的div标签</p>
    <div id="header">头部</div>
    <div id="nav"> 导航</div>
    <div id="article">
    <div id="section">子文章</div>    
    </div>
    <div id="aside">侧边栏</div>
    <div id="footer">脚部</div>
        
    <p>新版本标签</p>
    <header>头部</header>
    <nav>导航</nav>
    <section>定义文档中的节</section>
    <aside>侧边栏</aside>
    <footer>脚部</footer>
    <article>代表一个独立的、完整的内容块，如一篇完整的文章</article>

淘气包ya

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端-各类标签的用途及代码实现

图片的路径分为三种：绝对路径（服务端主机中的绝对路径）、相对路径（同一文件下可以用相对路径）、网络路径（直接引用网络上的图片）标题的标签分为六类：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>容器可以理解为一个盒子，一个盒子里面装了很多标签。表格标签：table、包含行：tr、列：td。主要用于文本呈现，是最常用的标签之一。表单用来搜索作用：<from>七类文本标签代码实现及其功能。超文本链接标签：<a>容器的标签：<div>图片标签：<img>有序列表：<ol>;无序列表：<ul>;
复制链接

扫一扫