HTML的基本信息——小白篇(2)
返回目录
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>网页显示结果
特殊符号
空格： 
&g查看特殊符号
< div>和< span>标签
< div>和< span>标签没有语义，它们就是一个盒子，用来装内容。
<div>一行盒子</div><div>二行盒子</div><div>三行盒子</div><span>跨行盒子</span><span>跨行盒子</span><span>跨行盒子</span>
显示结果：
案例学习：
素材：
默一生孤独究竟是从什么时候起?从那个无忧无虑的少年变成了如今这个多愁善感，执笔写字的青 年;又是何时起，那个爱说爱笑、天真无邪的少年匆匆远去;只剩下一个遥不可及的影子徘徊在 记忆中。当少年学会了掩饰;不再没心没肺地大笑时，也许少年已不再年少，早在不知不觉中 褪去了青涩的着装。眼眸里流光浮影，闪烁着过往的许许多多。怀念着过去还看今朝。干般苦涩难言的孤寂 又与何人说;而此刻相伴在身边的梧桐是否知晓明白。猜不透，往事青华，尘世繁华;究意让我 学会了什么?梧桐端守数十年的光阴，又知晓了什么?到最后不过是孤独二字相伴。——作者：余神
HTML的基本信息——小白篇(2)
返回目录
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>网页显示结果
特殊符号
空格： 
&g查看特殊符号
< div>和< span>标签
< div>和< span>标签没有语义，它们就是一个盒子，用来装内容。
<div>一行盒子</div><div>二行盒子</div><div>三行盒子</div><span>跨行盒子</span><span>跨行盒子</span><span>跨行盒子</span>
显示结果：
案例学习：
素材：
默一生孤独究竟是从什么时候起?从那个无忧无虑的少年变成了如今这个多愁善感，执笔写字的青 年;又是何时起，那个爱说爱笑、天真无邪的少年匆匆远去;只剩下一个遥不可及的影子徘徊在 记忆中。当少年学会了掩饰;不再没心没肺地大笑时，也许少年已不再年少，早在不知不觉中 褪去了青涩的着装。眼眸里流光浮影，闪烁着过往的许许多多。怀念着过去还看今朝。干般苦涩难言的孤寂 又与何人说;而此刻相伴在身边的梧桐是否知晓明白。猜不透，往事青华，尘世繁华;究意让我 学会了什么?梧桐端守数十年的光阴，又知晓了什么?到最后不过是孤独二字相伴。——作者：余神