位置: IT常识 - 正文

【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”(web前端修炼之道)

编辑:rootadmin
【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”

推荐整理分享【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”(web前端修炼之道),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:web前端修炼之道,前端进阶之旅,前端进阶教程,前端进阶训练营,web前端修炼之道,前端进阶之旅,前端高手进阶,web前端修炼之道,内容如对您有帮助,希望把文章链接给更多的朋友!

此文为【前端修炼场】第四篇,上一篇文章链接:上一篇

文章目录前言一、 常用标识符1.1 特殊标识符1.1.1 "<" 和 ">"(<;)1.1.2 空格(&emsp;)1.1.3 商标(™/ ®)1.1.4 版权(©)1.1.5 彩蛋(😀)1.2 无意义标签1.2.1 div标签1.2.2 span标签二、hr 属性值讲解2.1 创建hr2.2 更改hr颜色2.3 更改hr宽度2.4 更改hr位置2.5 消除hr阴影总结前言

在此之前,诸位道友已经接触不少的标识符了,并且对于VSCode肯定也有诸多的不满!你是否也疑惑,为什么在VSCode里面换行或者空格都不会体现在网页上,这也太不方便了,其实还有更不方便的,我们许多特殊符号也无法正常显示!接下来我将为诸位逐一介绍。

在这里我们先回顾一些我们之前所讲的标签的类型:

标记类型格式常规标记 / 双标记<标记 属性=“属性值“ 属性=“属性值“></标记>空标记 / 单标记<标记 属性=“属性值“ />

上述即为两种分类及其用法,这篇文章主要为了讲解一些特殊标签以及我们前面用到的水平线<hr>的相关属性值!话不多说,走起!

一、 常用标识符

在我们使用html时有许多的标识符,那么一些常用的标识符诸位道友掌握了么?接下来由我来为大家梳理一番!

1.1 特殊标识符

首先我将以表格的形式列举出来,然后进行逐一讲解

特殊符号实现代码“<” 和">"&lt; 和 &gt;空格&emsp;商标&trade;版权&copy;1.1.1 “<” 和 “>”(&lt;)

注:接下来所有的特殊符号都会进行展示,代码段中仅仅是我们body里面的部分,框架就不放在里面了。

我们我们利用 &lt;来表示 <,用&gt;来表示 >

代码实现:

这篇文章我们讲解 &lt; 特殊符号 &gt;的建立

效果展示:

&gt 末尾一定要注意不要忘了加上" ;"

1.1.2 空格(&emsp;)

我们的空格是利用&emsp;实现,为了形成对比,我创建两段代码做对比

代码实现:

这篇文章我们讲解 &lt; 特殊符号 &gt;的建立 <br> &emsp;&emsp;这篇文章我们讲解 &lt; 特殊符号 &gt;的建立

效果展示:

我们可以很明显看到,第二段比第一段空出两个字的间距,所以一个&emsp;表示空一个字的间距

1.1.3 商标(™/ ®)

下图摘自百度百科,如有侵权,告知必删

那么我们如何实现这两个符号在网页上?

1. 商标标识我们利用 &trade;实现 2. 注册商标标识利用&reg;实现

代码展示:

&trade; <br> &reg;

网页展示:

1.1.4 版权(©)

不知道大家在平时网上冲浪的时候有没有注意过网页的最底部,都有很多神秘代码,如下图

大家注意看最后一行有个小图标©,那个就是商标的图形,那么我们如何在网页中显示这个呢?我们利用的是&copy;

代码展示:

一碗黄豆酱&copy;

网页展示:

1.1.5 彩蛋(&#128512)

我们如何在网页中添加可爱小表情呢?就像是😘😝🥺这种!请输入如下代码

代码展示:

&#128512

网页展示:

诸位道友可以尝试&#128513等等,自己进行摸索,会有惊喜奥!

1.2 无意义标签

很多道友看见我这个标题就觉得很迷惑,为什么这个标签是无意义的,我们还去学他干什么?因为虽然这个标签本身没有什么具体含义,但是他们由独特的作用,接下来听我细细说来!

1.2.1 div标签

div标签没有具体含义,但是它可以用来划分页面的区域。比如下图我们将网页划分成这三个区域,每个区域进行页面实现,这样比较整洁,一块一块实现比较方便我们后期维护。相信诸位道友肯定很迷惑,没关系我们后续会继续深入了解!

【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”(web前端修炼之道)

接下来我们就进行示例讲解。同上,我们只进行body内容的展示

代码展示:

<div>1111</div> <div>2222</div> <div>3333</div>

网页展示:

我相信大家注意到了,这个页面也看不出来div起到什么作用了,那么div到底干了些什么?

三段div的内容各独立占有一行(在没有约束的条件下)独立划分三块区域

此时诸位一定是疑惑多多,无法理解我所说的到底是什么意思,没关系,我们后面慢慢接触就懂了

1.2.2 span标签

span没有实际意义,主要用于对于文本独立修饰的时候,其宽度根据内容宽度占用,简单理解就是我们不改变文本大小,可以对于文本独立的进行修饰,比如颜色等等

接下来我们就进行示例讲解

代码展示:

<h3>一碗黄豆酱 <span style="color: red;">真帅</span></h3>

网页展示:

我们发现真帅二字变成红色的,是不是感觉很熟悉?我们前面的hr标签也进行了颜色更改的实验!我们这个也是利用修改span标签的属性style中的color进行颜色的控制!

二、hr 属性值讲解下面的内容我会带大家熟悉 “hr” 的各种属性值,拿下 hr,筑基成功不是梦!2.1 创建hr

接下来就是阿酱的实操教学,诸位道友拿上咱们的武器 — VSCode,跟我一起修炼吧!

打开VSCode,然后初始化后,创建水平线

网页展示:

2.2 更改hr颜色

我们的线条颜色更改是基于属性color进行控制

代码展示:

<hr color=”red“>

效果展示:

我们可以很明显看到我们的水平线的颜色已经更改为红色,剩下的颜色,诸位可以余下时间自行练习!

2.3 更改hr宽度

我们的线条宽度调整是基于属性 width 进行控制

代码展示:

<hr color="red"> <hr color="red" width="300">

效果展示:

为了效果明显,我建立两条水平线,大家可以看到上面没有设置宽度的水平线是占满我们的屏幕,而下面的则是一小段,这个数量300的单位是像素,我们后期会将。注意我们默认居中!

2.4 更改hr位置

我们的线条 靠左/靠右是基于属性 align 进行控制

代码展示:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <hr color="red"> <hr color="red" width="300"> <hr color="green" width="300" align="left"> <hr color="yellow" width="300" align="right"></body></html>

效果展示:

上述为了方便对照,我设置了四条曲线,其中属性值 left 表示靠左,right 表示靠右

2.5 消除hr阴影

我们可以先将浏览器放大,然后观察初始没有属性的水平线,如下:

可以很明显的看出来,在水平线的下方有阴影,那么我们如果想要去掉的话,该如何做?

消除水平线阴影的属性为 noshade

代码展示:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <hr noshade="noshade"></body></html>

效果展示:

可以很明显的发现阴影消失了

总结

从本次学习中,我相信大家对于基础标识符和hr的属性定有所掌握,我们如果想要对标签进行进一步的修饰,那么属性就起到非常重要的作用!

希望诸位下去自行练习掌握!

✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/299124.html 转载请保留说明!

上一篇:计算机视觉——车道线(路沿)检测(计算机视觉算法)

下一篇:React生命周期详解(react生命周期分为两类)

  • word文档如何调出字体工具栏(word文档如何调行高度)

    word文档如何调出字体工具栏(word文档如何调行高度)

  • 为什么微信提示音开着但不响(为什么微信提示对方账号安全性未知)

    为什么微信提示音开着但不响(为什么微信提示对方账号安全性未知)

  • iphone8plus64g够用吗

    iphone8plus64g够用吗

  • 华为bkkal10是什么型号(华为bkk-al10是什么型号手机)

    华为bkkal10是什么型号(华为bkk-al10是什么型号手机)

  • 7p怎么截屏(平果7p怎么截图)

    7p怎么截屏(平果7p怎么截图)

  • 充电老是断断续续的一直叮咚叮咚(充电老是断断续续的对手机好吗)

    充电老是断断续续的一直叮咚叮咚(充电老是断断续续的对手机好吗)

  • 手机超过15天怎么要求退换货(手机超过15天可以退吗)

    手机超过15天怎么要求退换货(手机超过15天可以退吗)

  • typec扩展坞pd充电啥意思(typec扩展坞pd充电)

    typec扩展坞pd充电啥意思(typec扩展坞pd充电)

  • 快手有几个版本(快手有几个版本哪个最好)

    快手有几个版本(快手有几个版本哪个最好)

  • 锁屏怎么显示微信消息(锁屏怎么显示微信步数)

    锁屏怎么显示微信消息(锁屏怎么显示微信步数)

  • 双十一用红包的钱可以退款吗(双十一用红包的订单退款了怎么办)

    双十一用红包的钱可以退款吗(双十一用红包的订单退款了怎么办)

  • 微信运动一般延迟多久(微信运动延迟多久更新)

    微信运动一般延迟多久(微信运动延迟多久更新)

  • 高通基带是什么意思(高通基带的手机有哪些)

    高通基带是什么意思(高通基带的手机有哪些)

  • 华为畅享9e上市时间(华为畅享9e上市时间及价格)

    华为畅享9e上市时间(华为畅享9e上市时间及价格)

  • 如何将微信语音转成mp3(如何将微信语音转换成文字发送)

    如何将微信语音转成mp3(如何将微信语音转换成文字发送)

  • ps添加背景怎么弄(ps中添加背景)

    ps添加背景怎么弄(ps中添加背景)

  • 苹果电脑丢了能追踪吗(苹果电脑丢了能不能找到)

    苹果电脑丢了能追踪吗(苹果电脑丢了能不能找到)

  • 苹果nfc功能在哪里设置(苹果nfc功能在哪里感应)

    苹果nfc功能在哪里设置(苹果nfc功能在哪里感应)

  • qq转文字的功能在哪(qq转文字的功能怎么取消)

    qq转文字的功能在哪(qq转文字的功能怎么取消)

  • vivox27支持面部识别吗(vivox27支持脸部解锁吗)

    vivox27支持面部识别吗(vivox27支持脸部解锁吗)

  • qq亲密关系怎么绑定(qq亲密关系怎么解除)

    qq亲密关系怎么绑定(qq亲密关系怎么解除)

  • 【GoF 23】23种设计模式与OOP七大原则概述

    【GoF 23】23种设计模式与OOP七大原则概述

  • 使用 JavaScript 检测用户是否在线(js检查json是否合法)

    使用 JavaScript 检测用户是否在线(js检查json是否合法)

  • web前端面试题(必背面试题)(web前端面试题目)

    web前端面试题(必背面试题)(web前端面试题目)

  • 土地入账成本包含哪些
  • 房地产零税率
  • 车辆购置税能否退税
  • 小规模发票冲红怎么申报
  • 购买车辆交纳的费用
  • 辅导期纳税人会计处理
  • 赠与合同收税吗
  • 小规模纳税人可以开数电专票吗
  • 供应商给的折扣比发票少怎么做账
  • 收到总公司投资款怎么做账务处理
  • 公司厂房拆迁要交税吗
  • 免税销售额和免税额区别
  • 销售无形资产增值税纳税义务发生时间
  • 已出账但未认证的抵扣联怎么办?
  • 增值税专用发票和普通发票的区别
  • 土地增值税的征税对象,是村集体
  • 如何防止虚开发票 等舞弊行为?
  • 企业为什么要缴纳增值税
  • 工程施工什么时候确认收入
  • 合同税率16%调整到13%怎么算
  • 出售股票公允价值变动损益
  • 出纳人员发现假章怎么办
  • 公司与客户合作协议范本
  • vue项目如何搭建
  • windows 7如何
  • 按产量和单价计算工业总产值
  • 如何实现php图片打印
  • centos apache配置文件
  • 员工油费补贴过期怎么办
  • 重装系统后软件打不开
  • 销售不动产应交的增值税计入
  • php模拟get请求
  • 房屋装修固定家具是否计入房产税
  • 无偿转让股权如何做账
  • 发票金额与银行付款金额少几分钱
  • php单独运行
  • 企业资产负债表有何作用
  • 马拉喀什的历史背景
  • 独立核算统负盈亏和独立核算自负盈亏的区别
  • winform 文件上传
  • 蓝桥杯第十四届模拟赛第三期
  • 反射dll
  • load命令怎么用
  • 具体包括以下哪些方面
  • 如何在sql server中建立一个表
  • PostgreSQL教程(十七):客户端命令(1)
  • 公司设计费会计分录
  • 车辆购置税 购置
  • 设计部工资计入哪个科目
  • 购买预付卡如何开发票
  • 出租周转材料的租金会计科目
  • 研发费用加计扣除的条件
  • 研发支出属于什么要素
  • 涉外收入申报单盖章
  • 职工医保报销会扣医保卡的钱吗
  • 进口形式发票能证明商品是进口的吗
  • 销售收入指开票金额吗
  • 网上打印的电子机票可以报销不
  • 可抵扣的税票
  • 房地产企业会计处理
  • sqlite迁移到mysql脚本的方法
  • hyper v虚拟机
  • windows自带截图软件
  • 不同的linux系统命令一样吗
  • macos卸载java
  • linux校验文件
  • win7系统无法共享win10系统打印机
  • windows10总是提醒更新
  • glimp使用方法
  • 基于javascript数独游戏论文参考文献
  • eclipse 代码提示指令在哪改
  • w32tm命令
  • c++11视频教程
  • JavaScript中的变量名不区分大小写
  • javascript框架库升级
  • 3种不同的播种方法
  • 伙食补助和伙食费
  • 广东省电子税务局app下载官网
  • 新版ukey税盘怎么设置密码
  • 无锡国税电子发票怎么开
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设