网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解

  有关自动换行标签:

  在上节大家有学得最基础的HTML语法,大伙儿应当都还没忘掉吧!标签便是我们要显示信息在网页页面的关键一部分,假如我还在<body>里边打「第1行」:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

它也会一切正常显示信息「第1行」,这一没什么难题。那假如像Word一样在第1行后边按Enter,立即键入第2行、第3行得话,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行
      第2行
      第3行
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

  你能发觉文本是并列的,并沒有自动换行,它并不会像Word按住Enter就跳到下一行,因此在编码里边的Enter并不意味着换行符,按Enter并沒有一切反应。假如要自动换行,大家务必应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行<br>
      第2行<br>
      第3行<br>
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

  那样就成功自动换行了。

  这一<br>标签较为尤其,在HTML里绝大多数的标签全是一组的,比如大家以前学得的<html></html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行<br/>
      第2行<br/>
      第3行<br/>
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

因此无论是写出<br>或是<br/>都是沒有问题的,可是不能把反斜杠写在前面</br>,那样是错的,在线编辑器也会提示:
 

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

此外在一些较为优秀的JavaScriptLibrary(函式库)很有可能会限定一定要关起來<br/>才行。但是如今没相关起來也没有关系。

HTML里边仅有好多个标签是单独标签。除开<br>是单独的标签之外,大家再看另一个单独的标签 <hr/>分隔线标签

有关分隔线标签:<hr/>

<hr/>也是单独标签,它的功能便是会画出一条水平线,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行<br/>
      <hr/>
      第2行<br/>
      <hr/>
      第3行<br/>
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

它和<br>一样,可以写出<hr>或是<hr/>都是沒有問題的,一样不能把反斜杠写在前面</hr>,,那样是错的。此外假如在<hr>前面不放<br>的話,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行<br/>
      <hr/>
      第2行
      <hr/>
      第3行<br/>
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

它依然会自动换行。

  有关注释:<!-->

  假如的编码写了很多东西,现在我不愿应用它,但又不确定性以后是否会采用。我不愿意把它删除,要想把它存着不许它显示信息得话,可以用注释,它的书写是在注释起止处写上<!--,完毕处写上-->关掉注释。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行<br/>
      第2行
      <hr/>
      第3行<br/>
      <!--第4行<br/>
      第5行<br/> -->
      第6行<br/>    
     </body>
</html>

輸出結果:

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

你能被注释的地区就确实不容易显示信息在电脑浏览器了。换句话说无论是HTML、CSS、JavaScript,要是大家把它注释掉之后,这种编码都不容易强制执行。而注释除开这一作用之外,假如编码愈来愈长得话,大家还可以用这一方式 区别大家的编码,譬如说:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
      第1行<br/>
      第2行
      <hr/>
      第3行<br/>
      <!--第4行<br/>
      第5行<br/> -->
      <!--本文開始-->
      第6行<br/>    
    </body>
</html>

譬如说我们去Airbnb这类大型网站,点一下鼠标点击→查验网页页面原始码,

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

  你能见到它的原始码十分的长,假如做的项目较为大的情况下,有时自身也会难以找的到当时写的原始码在哪儿,因此注释就好用的。但是这种原始码上传入互联网后全是公布的,如果有不宜对外开放出示的一些保密信息,也不提议写在注释里。

  此外像Airbnb里的那样一段编码,

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

这一段code有尤其提到IE适用的难题,由于IE众所周知适用度较为低,因此大家一般会加一些<script src="xxxxxxxx.js">的JavaScript语法,让它可以适用HTML5或者CSS3全新命令,让它不容易沒有任反应或者破图,这一便是注释的在其中一种操作方法,可以暂时了解一下。

网站建设教程[学习HTML] 03. 换行与分隔线(br, hr)以及注解-梦幻科技

关于<meta charset="UTF-8"> 这一行的功能,将于下一堂讲解

联系我们

13751415268

853408942

:853408942@qq.com

:9:30-22:30

QR code