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

目录

一.标签之标题

二.标签之段落

三.标签之图片

四.标签之超文本链接

五.标签之文本

六.标签之列表

七.标签之表格

八.标签之from表单

九.块元素

十.标签之容器


一.标签之标题

标题的标签分为六类:<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>

  • 11
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui中的动态编辑标签实现可以借助el-tag组件和el-input组件,具体实现步骤如下: 1.使用el-tag组件展示标签,并在标签上绑定点击事件,点击标签时触发编辑模式。 2.在编辑模式下,使用el-input组件替换原标签,编辑完成后再将el-input组件替换回el-tag组件。 3.在el-input组件上绑定blur事件,在失去焦点时触发编辑完成事件,并将编辑的内容传递给父组件进行保存。 以下是示例代码: ```html <template> <el-tag v-if="!isEdit" @click="handleEdit">{{ value }}</el-tag> <el-input v-else v-model="editValue" @blur="handleEditComplete"></el-input> </template> <script> export default { props: { value: { type: String, required: true } }, data() { return { isEdit: false, editValue: this.value } }, methods: { handleEdit() { this.isEdit = true; this.$nextTick(() => { this.$refs.input.focus(); }) }, handleEditComplete() { if (this.editValue !== this.value) { this.$emit('update:value', this.editValue); } this.isEdit = false; } } } </script> ``` 在父组件中使用该组件时,只需将需要编辑的标签内容通过value属性传递给该组件,并监听update:value事件获取编辑完成后的内容即可。 ```html <template> <dynamic-tag :value="tag" @update:value="handleTagUpdate" /> </template> <script> import DynamicTag from '@/components/DynamicTag.vue' export default { components: { DynamicTag }, data() { return { tag: '标签名' } }, methods: { handleTagUpdate(value) { this.tag = value; } } } </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值