HTML的基本信息——小白篇(2)_html中dctype-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48101294/article/details/110674706

返回目录

HTML的基本信息（重点）

 <! --DCTYPE: 告诉浏览器，我们要使用什么规范、版本>
    <! DOCTYPE html> ：这个告诉我们当前用HTML5来显示网页  
    
 <! --lang：告诉网页使用那种语言>    
    <! html    lang="en">:这个告诉我们当前使用英语来显示网页。zh-CN是中文，en是英语等。。。
       
    <! --head标签代表网页头部--  >
    <head>
     
    <!  ---meat 描述性标签，它用来描述我们网站的一些信息---   >
    <! --charset:告诉网页使用哪种字符集编码> 
    <meta  charset ="UTF-8">:这个告诉我们当前使用UTF-8字符来显示网页。注意：不写会出现乱码。
    <!--charset常用指：GB2312、BIG5、GBK、UTF-8，其中UTF-8称为万国码，包含了全世界国家的需要的用到的字符。-->  
    
    <! -- title网页标题--     >       
    <titile>  我的第一个网页  </titile>   
    </head>   
    <!-- body标签代表网页主体>  
    <body>         
    </body>     
    </html>

网页基本标签

技巧：一定要记住标签的语义。

1. 标题标签< h1>到< h6>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>基本标签学习</title>
</head>
<body>
<!--标题学习 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>

网页显示结果

在这里插入图片描述

2. 段落标签< p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--段落学习 -->
<p>怪我没能力跟随你去的方向。</p>
<p>饥饿是最好的调味，孤独是最强的催眠</p>
<p>也许时间是一种解药，也是我现在正服下的毒药</p>
</body>
</html>

网页显示结果

在这里插入图片描述

语义	标签	推荐使用
倾斜	< strong>< /strong>或< b>< /b>	< strong>< /strong>
加粗	< em>< /em>或< i>< /i>	< em>< /em>
删除线	< del>< /del>或< s>< /s>	< del>< /del>
下划线	< ins>< /ins>或< u>< /u>	< ins>< /ins>

换行标签(< br >)加水平线(< hr>)删除线(< del>)下划线(< u>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--水平线学习 -->
<hr>

<!--换行学习 -->
相信太难，不如沉默来得简单<br/>
有一天，我发现自怜资格都已没有，只剩下不知疲倦的肩膀，担负着简单的满足<br/>
我的人生就是一错再错错完了再从头，也许放弃掉一些活得更轻松我却不再是我<br/>
<!--删除线学习-->
<del>哈哈哈哈</del>
<br/>
<!--下划线学习>
<u>吼吼吼吼</u>
</body>
</html>

网页显示结果

在这里插入图片描述

粗体斜体

<!--粗体学习 -->
<strong>只因为我不想打扰，只因为怕你解释不了，只因为现在你的眼睛里，她比我还重要。</strong>
</br>
<!--斜体学习 -->
<em>我一个人孤单旅行到处走走停停，也一个人看书写信自己对话谈心，只是心又飘到了哪里，就连自己看也看不清，我想我不仅仅是失去你。</em>
</body>

网页显示结果

在这里插入图片描述

特殊符号

空格：&nbsp
&g查看特殊符号
在这里插入图片描述

< div>和< span>标签

< div>和< span>标签没有语义，它们就是一个盒子，用来装内容。

<div>一行盒子</div>
   <div>二行盒子</div>
   <div>三行盒子</div>
   <span>跨行盒子</span>
   <span>跨行盒子</span>
   <span>跨行盒子</span>

显示结果：
在这里插入图片描述

案例学习：

素材：

默一生孤独

究竟是从什么时候起?从那个无忧无虑的少年变成了如今这个多愁善感，执笔写字的青 年;又是何时起，那个爱说爱笑、天真无邪的少年匆匆远去;只剩下一个遥不可及的影子徘徊在 记忆中。当少年学会了掩饰;不再没心没肺地大笑时，也许少年已不再年少，早在不知不觉中 褪去了青涩的着装。

眼眸里流光浮影，闪烁着过往的许许多多。怀念着过去还看今朝。干般苦涩难言的孤寂 又与何人说;而此刻相伴在身边的梧桐是否知晓明白。猜不透，往事青华，尘世繁华;究意让我 学会了什么?梧桐端守数十年的光阴，又知晓了什么?到最后不过是孤独二字相伴。

——作者：余神