从零开始学前端：程序猿小白也可以完全掌握！— 今天你学习了吗？（CSS）

复习：从零开始学前端： HTML框架和VS Code安装 — 今天你学习了吗？（CSS：Day01）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！— 今天你学习了吗？（CSS）
- 前言
- 第二节课：主要讲解了HTML的一些文本格式化标签、快捷键、和特殊符号
- - 一、VS Code新建文件
  - 二、使用正确的HTML编码格式
  - 三、问答
  - 四、文本格式化标签
  - 五、div标签和span标签
  - 六、特殊字符

前言

CSS的一切都是为了网站更加的好看~

第二节课：主要讲解了HTML的一些文本格式化标签、快捷键、和特殊符号

一、VS Code新建文件

在一个编辑器里点击新建文件然后命名文件为html文件即可，在文本编辑框输入!即可触发快捷填充HTML框架。

二、使用正确的HTML编码格式

使用小写元素名

HTML5元素名可以使用大写和小写字母（推荐使用小写字母）。
混合了大小写的风格会使界面不美观，观感很差。
小写风格看起来会更加的清爽。
小写字母更容易编写。

关闭所有HTML元素
在HTML5中，不一定要关闭所有元素，如p标签，但是建议每个元素都要添加关闭标签。

<!– 不推荐 -->
<p>这是一个段落。<!- 推荐-->
<p>这是一个段落。<p/>

关闭空的HTML元素（单标签、自结束标签）

<!– 我们可以这么些 -->
<meta charset="utf-8"><!– 也可以这么些 -->
<meta charset="utf-8" />

嵌套元素应当缩进一次（即两个空格）— 一个Tab键
避免一行代码过长（每行代码尽量少于80个字符。快捷键：Alt+Z可以快速使延长代码在可看见的界面显示）
https://www.bilibili.com/video/BV11b4y1Y7TZ/
不建议在注释标签中嵌套注释标签

结果：

原因：标注的是一整个注释，后半个注释并未起作用

三、问答

标签根据书写方式可分为？
单标签和双标签
标签根据关系可以分为？
包含关系（父子关系）和并列关系（兄弟关系）
举例双标签

<head></head>
<body></body>
<p></p>
<h></h>
...

标题标签和段落标签有什么区别，又有什么相同点？

区别：标题标签会给字体有加粗和字体放大效果，段落标签不会。

相同点：标题标签和段落标签都会独占一行。

四、文本格式化标签

常用文本格式化标签
在网页中有时需要为文字设置粗体、斜体、删除线、下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：用来调整文本的格式和排版。突出重要性，比普通文字更重要。

语义	标签	说明
加粗	`<strong></strong>`或者`<b></b>`	更加推荐`<strong>`语义更加强烈
倾斜	`<em></em>`或者`<i></i>`	更加推荐`<em>`语义更强烈
删除线	`<del></del>`或者`<s></s>`	更加推荐`<del>`语义更加强烈
下划线	`<ins></ins>`或者`<u></u>`	更加推荐`<ins>`语义更加强烈
定义小号字体	`<small></small>`	–
定义上下标	`<sup></sup>`上 `<sub></sub>下`	–

五、div标签和span标签

大多数HTML元素被定义为块级元素或内联元素（行内元素）。

块级元素：在浏览器显示时，通常会以新行来开始。
内联元素：在显示时通常不会以新行开始。

<div>元素是块级元素，它是可用于组合其他HTML元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML<span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义。<span>定义span，用来组合文档中的行内元素。

<hr>水平线元素

六、特殊字符

  <p>空格符："&nbsp;"<!-- &nbsp;--></p><p>小于号："&lt;"<!-- &lt; --></p><p>大于号："&gt;"<!-- &gt; --></p><p>和号："&amp;"<!-- &amp; --></p><p>人民币："&yen;"<!-- &yen; --></p><p>版权："&copy;"<!-- &copy; --></p><p>注册商标："&reg;"<!-- &reg; --></p><p>摄氏度："&deg;"<!-- &deg; --></p><p>正负号："&plusmn;"<!-- &plusmn; --></p><p>乘号："&times;"<!-- &times; --></p><p>除号："&divide;"<!-- &divide; --></p><p>平方2："&sup2;"<!-- &sup2; --></p><p>平方3："&sup3;"<!-- &sup3; --></p>

结果显示：

预习：从零开始学前端：链接跳转 — 今天你学习了吗？（CSS：Day03）

------故不积跬步，无以至千里；不积小流，无以成江海。

从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）相关推荐

从零开始学前端：对象序列化与反序列化、冒泡排序、数组去重 --- 今天你学习了吗？（JS：Day11）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:字符串和数组的方法 - 今天你学习了吗?(JS:Day10) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:过渡和动画 - 今天你学习了吗?(CSS:Day20) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：定时器、Math对象 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：购物车和鲜花价格排序 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：字符串和数组的方法 --- 今天你学习了吗？（JS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:作用域.执行顺序 - 今天你学习了吗?(JS:Day9) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：复习课程 --- 今天你学习了吗？（CSS：Day11）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS复合选择器 - 今天你学习了吗?(CSS:Day10) 文章目录从零开始学前端:程序猿小白也可以完 ...
从零开始学前端：链接跳转 --- 今天你学习了吗？（CSS：Day03）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:HTML的一些文本格式化标签.快捷键.和特殊符号 - 今天你学习了吗?(CSS:Day02) 文章目录从 ...

从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）