草庐IT

【前端修炼场】 — HTML常用的标志语言

一碗黄豆酱 2023-07-12 原文

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

文章目录

前言

之前我们使用过的那些标志语言,都没有具体讲解过,这一篇我将带诸位详细学习一下!

标志语言

我相信大家能来学习前端,对于基础的编程语言肯定有涉猎,就像是c语言一样我们都会有头文件,函数声明等等。

当然我们的html也是会有文档声明,大家肯定有疑问,为什么前面我们使用的时候没有声明也没有报错,那么下面我们先介绍一下声明是什么后,来回答这个问题!

基本结构介绍

声明介绍

  1. 先在我们的文件夹中新建一个文件,用于这篇的学习使用

  2. 首先我们在VSCode中输入 !后会出现如下提示,然后右键即可

<!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>
    
</body>
</html>

此时我们可以看看到出现一大堆东西,我们也就认识html,head,body,title这些我们前面接触过的东西。

那么开头这个< !DOCTYPE html >是什么?

1.这就是大名鼎鼎的文档声明!DOCTYPE是文档声明标签,声明什么呢?声明我们使用的html使用的格式或者说准则,因为在此之前准则太多了,当然目前我们使用的都是HTML5准则。
2.而且我们看到< !DOCTYPE html >也没有涉及具体准则表示数字呀,因为这种格式默认使用最新准则也就是HTML5。

标签修饰

不知各位道友是否记得,在此之前我们提及过,标志语内可以加修饰,就是高亮字体里面可以加修饰。如代码第二行< html lang=“en” >。这个里面的lang="en"就是我们添加的修饰部分,修饰html。

那么这个修饰词是什么意思?lang 是 language(语言)的缩写,en 是” english“(英文)的缩写,意思就是我们这段html代码所以的语言是英文。
”zh-CN“是中文

那么,这个代码有什么意义呢?我相信大家在日常浏览一些软件的官网时,由于厂商是国外的,所以都是外文,这时,我们的网页会弹出询问,是否要翻译为中文,如下图所示:

这时候不免会疑问,为什么是浏览器知道我们需要翻译,他是如何做到的?我们可以打开任意一个外文网站的源码,可以看到第一行如下图:

他有我们上面讲过的 lang=“en”,这就相当于告诉网站我们的内容是英文的,那么我们浏览器的插件就会识别到我们这个内容与我们本地系统语言不一致,从而提示我们可以进行转换。

效果展示:

<!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>
    <center> hello world</center>
</body>
</html>

此时我在body 也就是内容里面打上hello word ,上方语言设定为英文

网页:


可以看到百度翻译提示我可以翻译文字


那如果我将代码中的语言设定为中文呢?

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <center> 我爱中国!</center>
</body>
</html>

网页:


此时没有提示我需要翻译,因为本身就是中文


我相信肯定有道友就会问,那我内容写英文,前面语言设定是中文,会是什么结果?结果是还会弹出提示框,可以翻译网页。因为我们浏览器的插件会检测出来语言不匹配。

所以我们需要注意的是,只要我们将内容和我们设定的语言种类保持一致即可!我们网页用的中文那么我们就令lang=“zh-CN”

编码形式

 <meta charset="UTF-8">

可以看到上面这一行代码,那么他是干啥的呢?他是用来告诉浏览器需要用什么方式去解码,通俗的来讲,就像是我们用秘法进行通讯,那么收信人也需要特定手法打开进行,这个meta 加上后面的修饰词的目的就是为了告诉计算机我们的编程是用上面形式进行的,这样浏览器就可以进行解码。

在此说明,大家以后都用UTF-8,俗称万国码,只要是世界上存在的都可以被编译出来。

常用HTML标签

接下来,我带着各位道友正式介绍HTML标签啦!

标题标签

首先我将各级标签写在下方:

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

我们将其在放在前面的html结构里面,如下图:

网页展示:

我们可以很明显的看到各级文字的大小变化。是不是和我的文字标题一样?字体大小逐级减小。

文本标签自带加粗,间距默认存在,自占一行

段落标签

上面既然讲了标题,那肯定得有段落。接下来听我细细讲来。

<!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>
    <h1>女朋友是老大</h1>
        <p>
            要爱护她,保护她
        </p>
        <p>
            一生一世在一起!
        </p>

</body>
</html>

比如我写上述这么一段话,他的网页如下:

我们注意到上述段落之间是有默认间隔的,这样我们在页面上看去就比较整洁

换行标识

这个标识其实咱们前面已经使用过,就是< br >,在他后面的文字会被换行到下一行。
我猜测有的道友看到想说,那你想换行为什么不直接在用一个段落标识< p >?那是因为段落之间会有间距,那我只是单纯的换行的话,那用添加段落的方法就不好了。

接下来我来演示一下他们之间的区别

  1. 初始设置

    网页展示:

    我们明显看到这一段文字太长了,看着不舒服,那么们如何实现换行?

  1. 分段实现换行(验证是否可行)

    网页展示:

很明显哈,各位道友,明显不是我们想要的效果,我们想要的是我们平时写文章那样只是换个行,行间距很小,这个就是换个段落,达不到预期效果,所以这种换行方法不可取。


  1. 利用< br >换行

    网页展示:

    换行成功!所以利用br换行可行!

水平线标识

不知诸位是否注意到,我的文字会出现很多分割线,那么我们在做网页时,有时候也需要添加这种水平线,那么我们如何操作呢?

<hr/>

上述标签即为我们的空标记—水平线。

我们在刚才的html中使用一下看看是否有用。


我们在两段之间加上我们的水平线标识。

网页展示:

后期我们不会使用这种方法,我们会使用css

加粗标识

如果我们想使我们的某些文字加粗的话,那么我们就会用到下面这个标识。

<strong></strong >

在标识内的文字会被加粗。同样我们使用上面的html试一下。

网页展示:

<strong></strong >标签是加粗强调突出内容,虽然< b >< /b >这个标签也可以加粗但是不会强调内容一般不使用,大家可以自行试一下


倾斜标识

<em></em>

如果我们需要倾斜某些字体,我们需要用到上述标识,依旧使用前面html试一试。

网页展示:


< em >< /em >标签是倾斜强调突出内容,虽然< i >< /i >这个标签也可以倾斜但是不会强调内容一般不使用,大家可以自行试一下


删除线标识

各位道友平时去藏物阁买东西时,一定看见过打折的时候,不要99只要9.9,那个99上面有个划掉的线,就是接下来要将的删除线。

<del></del>

依旧使用前面html试一试。

网页展示:


<s></s>也可作为删除线标识,一般不使用


下划线标识

如果诸位想要使用下划线作为强调,可以使用下面标识。

<u></u>

依旧使用前面html试一试。

网页展示:


上标 / 下标标识

大家看论文的时候,或者书籍的时候,时常会看到在一些名词上面有个角标,或者下角标,然后在书页的低端进行解释,那么如何在网页里面实现呢?那就需要用到下面标识。

<sup></sup> 上标
<sub></sub> 下标

依旧使用前面html试一试。


网页展示:

上述所以的标签可以嵌套使用,上面意思呢?就是我可以即加粗也倾斜,只要我们和套娃一样一层一层加上标识,标识顺序无影响。


总结

这篇我们介绍一些基础的标志词,对于我们想要在网页上进行一个基本的编写已经没有问题了,希望各位道友可以自行多加练习!早日晋升下一阶段 —— 化丹期!

有关【前端修炼场】 — HTML常用的标志语言的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  6. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  7. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  10. 7个大一C语言必学的程序 / C语言经典代码大全 - 2

    嗨~大家好,这里是可莉!今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值,将两个值的内容进行交换。这里提供两种方法来进行交换,第一种为创建临时变量来进行交换,第二种是不创建临时变量而直接进行交换。1.创建临时变量来

随机推荐