前端学习笔记-HTML

  • A+
所属分类：Web前端
摘要

一个简单的html实例各项说明格式：
<hr/>效果：页面显示水平横线格式：
便宜好用的国外VPS推荐

HTML部分

了解HTML

一个简单的html实例

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
 </body>
</html>

各项说明

  • 第一行标签声明该网页使用html5编写的
  • 第二行标签：告诉浏览器我是一个html文档,告诉搜索引擎页面的内容是中文
  • 第三行标签:用于给网页添加一些配置信息，如指定网站的标题 / 指定网站的小图片
  • 第四行标签:指定字符集
  • 第五行标签:网页标题
  • 第七行标签：专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)，一定将要显示的内容放在此处
  • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
  • 外挂一些外部的css/js文件，
  • 添加一些浏览器适配相关的内容
    GBK(GB2312)和UTF-8区别?
  • GBK(GB2312)里面存储的字符比较少,仅仅存储了汉字和一些常用外文,体积比较小
  • UTF-8里面存储的世界上所有的文字,提交比较大。
    GBK与utf-8怎么选择？
  • 如果网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
  • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
    如何网页乱码如何解决？
  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
  • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
    一道面试题
    H1标签它的作用是什么？
    H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的

基础标签

h1-h6标题标签

<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
一共只有6级标题

hr水平线标签

格式：
<hr/>效果：页面显示水平横线

p标签：段落标签

格式：

<p>我是一段文本</p>
<p>我是一段文本</p>
我是一段普通文本
我是一段普通文本

img标签：图片标签

格式：

<img src="/i/eg_tulip.jpg"  
alt="上海鲜花港 - 郁金香" 
title="你好"  
width="300" height="478"/>解释：
src:图片的路径
alt:图书无法显示时，替换的文字
title:鼠标放到图片上显示的文字
width：图片的宽度
height:图片的高度
同时修改高度和宽度会导致图片变形，可选择其中一个设置，系统会自动进行比列调整

图片标签中的路径问题
其实想给src属性赋值有两种方式
通过相对路径赋值(掌握)
相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径
    同级

  • 同级就是"图片"和".html文件"存储在同一个文件夹中
  • 格式: src="QRCode.jpg" alt="前端学习笔记-HTML"
  • 含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
    下级
  • 下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
  • 格式: src="images/QRCode.jpg" alt="前端学习笔记-HTML"
  • 含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹，然后再在images文件夹中找到名称叫做QRCode.jpg的图片
    上级
  • 上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
  • 格式: src="../QRCode.jpg" alt="前端学习笔记-HTML"
  • 含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg
  • 其中../代表找到当前文件夹的上一级文件夹
    通过绝对路径赋值(了解)
  • 绝对路径就是每次都从指定的盘符开始查找
  • 格式: src="C:UsersJonathan_LeeDesktopHTML基础QRCode.jpg" alt="前端学习笔记-HTML"
  • 含义: 在C盘下找到Users文件夹, 然后在Users文件夹中找到Jonathan_Lee文件夹, 然后在Jonathan_Lee文件夹中找到Desktop文件夹, 然后在Desktop文件夹中找到HTML基础文件夹, 然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片
    注意:
  • 路径中不要出现中文, 否则可能出现未知问题
  • 如果是通过"相对路径"来指定图片, 不能跨盘符
  • 例如.html文件在C盘, 那么不能去查找D盘图片

br标签：换行标签

a标签：超链接标签

  • 作用：控制页面与页面之间的跳转
  • a标签的格式: 
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转

  • _self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
  • _blank: 用于在新的选项卡中跳转, 也就是新建界面跳转
  • a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的
    注意点
  • a标签不仅可以让文字可以点击, 还可以让图片也能够被点击
  • 一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方
  • 如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://
  • a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址
    base标签:统一超链接标签打开网页方式
    base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
    注意点:
  • base标签必须写在head标签的开始标签和结束标签之间
  • 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
    瞄点
  • 要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
  • 如果和HTML中的标签绑定一个独一无二的身份证号码呢?
    在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
    所以要想实现通过a标签跳转到指定的位置分为两步
  • 给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
  • 告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
    格式:
<a href="#center">跳转到中部</a>`
`<h2 id="center">我是中部</h2>

注意点:

  • 通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
  • a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
    格式:
<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面33333</h2>

列表标签

什么是列表标签?

  • 列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
    HTML中列表标签的分类
  • 无序列表(最多)(unordered list)
  • 有序列表(最少)(ordered list)
  • 定义列表(其次)(definition list)

无序列表

格式：

<ul>
<li>需要显示的条目</li>
</ul>

li其实是英文list item的缩写

  • list是列表的意思
  • item是条目的意思
    所以结合起来就是 列表条目的意思
    无序列表作用：
  • 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分
    什么叫有先后之分?
  • 例如: 排行榜
    什么叫没有先后之分?
  • 例如: 中国有哪些城市
    注意点:
  • 1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
  • 2.ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
  • 3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签
  • 无序列表应用场景:
    1.新闻列表
    2.商品列表
    3.导航条

有序列表

  • 有序列表作用：给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分
    有序列表格式：
<ol>
<li></li>
</ol>

定义列表

  • 定义列表的作用：给一堆数据添加列表语义
    *先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
    定义列表的格式：
<dl>
<dt></dt>
<dd></dd>
</dl>
  • dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
  • dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述
    定义列表的应用场景：
  • 1.做网站尾部的相关信息
  • 2.做图文混排
    注意点
  • 1.和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
  • 2.和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
  • 3.一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.
  • 4.推荐使用一个dt对应一个dd,和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

表格标签

什么是表格标签？

  • 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
  • 表格标签作用: 用来给一堆数据添加表格语义
    格式：
<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>
  • 其中表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格
  • 其中表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
  • 其中表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格
    注意点
  • 表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
  • 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
    表格标签属性：
  • border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
  • width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
  • height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
  • cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
  • cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
  • align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
    给table设置align属性, 是让表格在浏览器中居左/居右/居中
  • 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
  • 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
  • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
  • 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
    valign: 规定表格相对周围元素的对齐方式, 它的取值有top、middle、bottom
  • 给table设置valign属性, 无效
  • 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
  • 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
  • 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
    bgcolor:规定表格的背景颜色
  • 给table设置bgcolor属性, 是给整个表格设置背景颜色
  • 给tr设置bgcolor属性, 是给当前行设置背景颜色
  • 给td设置bgcolor属性, 是给当前单元格设置背景颜色
  • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
    表格中其它的标签
    表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
  • th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中
  • caption标签:给整个表格设置标题
    一定要嵌套在talbe标签内部才有效
    表格的结构
  • thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
  • tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
  • tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现
    表格合并
    1.水平方向上的单元格合并
    可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
    例如:
<td colspan="2"></td>

含义: 把当前单元格当做两个单元格来看待
注意点:

  • 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
    一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
    2.垂直方向上的单元格合并
  • 可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
    例如:
<td rowspan="2"></td>

含义: 把当前单元格当做两个单元格来看待

表单标签

格式：

<form>
表单元素
</form>

常见的表单元素
1.input标签：input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

<form>
<!--明文输入框-->
账号:<input type="text"><br>
<!--暗文输入框-->
密码:<input type="password"><br>
<!--给输入框设置默认值-->
账号:<input type="text" value="lnj"><br>
密码:<input type="password" value="123"><br>
<!--
单选框
注意点:
1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值
-->
性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
<!--多选框-->
爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
</form>

2.按钮标签button

定义一个普通按钮
作用:配合JS完成一些操作
<input type="button" value="我是按钮" onclick="alert('lnj')">
定义一个图片按钮
作用:配合JS完成一些操作
<input type="image" src="images/register.jpg" onclick="alert('lnj')">
定义重置按钮
作用:清空表单中的数据
注意点:
重置按钮有默认的按钮标题, 默认叫做 重置
也可以通过value属性来修改默认标题
<input type="reset" value="清空">
定义提交按钮
<input type="submit">
作用:将表单中的数据提交到远程服务器
注意点:
要想把表单中的数据提交到远程服务器,必须满足两个条件
1.告诉表单需要提交到哪个服务器
可以通过form标签的action属性来告诉表单,需要提交到那个服务器
2.告诉表单,表单中的哪些数据需要提交
隐藏域
作用: 用于悄悄咪咪的收集用户的一些数据, 隐藏域是不会出现在界面中的
<input type="hidden" name="cc" value="it666">

3.Label标签

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
  <label for="account">账号:</label><input type="text" id="account">

4.Datalist标签
作用: 给输入框绑定待选项
datalist格式:

<datalist>
<option>待选项内容</option>
</datalist>

如何给输入框绑定待选列表

  • 搞一个输入框
  • 搞一个datalist列表
  • 给datalist列表标签添加一个id
  • 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>

5.select标签
作用: 用于定义下拉列表
格式:

<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>

注意点:

  • 下拉列表不能输入内容, 但是可以直接在列表中选择内容
  • 可以通过给option标签添加一个selected属性来指定列表的默认值
  • 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
<select>
   <option>北京</option>
<option>上海</option>
<option>广州</option>
<option>广西</option>
<option selected="selected">武汉</option>
</select>

6.textarea标签
作用: 定义一个多行输入框
格式:

<textarea>
11111
</textarea>

注意点:

  • 默认情况下输入框可以无限换行
  • 默认情况下输入框有自己的宽度和高度
  • 可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
  • 默认情况下输入框是可以手动拉伸的
    7.表单标签-h5补充
placeholder
<input type="text" placeholder="请输入用户名">
用于指定input输入框的占位符号, 特点: 用户输入数据之后占位符号会自动消失
autofocus
<input type="text" autofocus>
用于指定默认让哪一个输入框获取焦点, 特点: 不能同时让多个输入框获取焦点
multiple
<input type="file" multiple>
type="file" 就是告诉浏览器, 当前的input输入框是需要选择文件
特点: 默认情况下只能选择一个文件
如果在input标签中添加一个multiple属性, 就可以让input同时选择多个文件
autocomplete
<input type="text" autocomplete="off">
记录用户提交过的数据, 注意点: input输入框必须有name属性才能记录, 并且只有提交之后才能记录
required
<input type="text" required>
强制用户输入内容, 如果没有输入内容不能提交表单
accesskey
<input type="text" accesskey="s">
可以通过配置快捷键让输入框获取焦点
快捷键就是 Alt + 指定的符号

表单练习

<form action="http://www.baidu.com">
<fieldset>
<legend>注册界面</legend>
<p>
账号: <input type="text" name="account">
</p>
<p>
密码: <input type="password" name="pwd">
</p>
<!--
在单选框和多选框中,所有的项目的name必须一致
在表单标签中,除了按钮标签以外的标签,都可以通过value来指定需要提交到服务器的数据
-->
<p>
性别:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" checked="checked" name="gender" value="yao">保密
</p>
<p>
爱好:
<input type="checkbox" name="sport" value="basketball">篮球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" checked="checked" name="sport" value="crazy">足浴
</p>
<p>
简介:
<textarea cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日:
<input type="date" name="birthday">
</p>
<p>
邮箱:
<input type="email" name="email">
</p>
<p>
电话:
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="清空">
</p>
</fieldset>
</form>

video标签

什么是video标签?
作用: 播放视频
格式:
<video src="">
</video>
video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样
第二种格式
格式:
<video>
<source src="" type="">
<source src="" type="">
</video>
第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
注意点:
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>

auto标签

播放音频
<audio src="">
</audio>
<audio>
<source src="" type="">
</audio>

注意点:

  • audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
  • 只不过有3个属性不能用, height/width/poster

详情和概要标签

作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击
格式:

<details>
<summary>概要信息</summary>
详情信息
</details>

marquee标签

作用: 跑马灯
格式:
<marquee>内容</marquee>
属性:

  • direction: 设置滚动方向 left/right/up/down
  • scrollamount: 设置滚动速度, 值越大就越快
  • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
  • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
    注意点:
  • marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

HTML中废弃的标签

为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了

<br> <hr> <font>
<b> <u> <i> <s>

以上标签都是没有语义的,都是用来修改样式的

  • b(bold) 加粗文本, 没有任何语义的
  • u(underline) 给文本天津下划线, 没有任何语义的
  • i(italic) 将文本倾斜, 没有任何语义的
  • s(strikethourgh) 给文本添加删除线, 没有任何语义的
    注意点:
    以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签
    如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用
  • strong == b
  • ins == u
  • em == i
  • del == s
  • strong语义: 定义重要性强调的文字
  • ins语义(inseted): 定义插入的文字
  • em语义(emphasized): 定义强调的文字
  • del语义(deleted): 定义被删除的文字

字符实体标签

什么是字符实体?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体

&nbsp; 空格, 一个&nbsp;就是一个空格, 有多少个&nbsp;就有多少个空格
&lt; 小于符号 <
(less than)
&gt; 大于符号 >
(greater than)
&copy; 版权符号

便宜好用的国外VPS推荐