前端学习(三):body标签(一)
进击のpython
*****
前端学习——body标签
body中的相关标签,因为是主要展现在页面的内容区域
所以相对来说内容多,杂,要背记的部分很多
当学完这节的内容之后,你可以试着写一片精致的文章网页
hx标签,为你的网页加上标题
h1~h6任君选择
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<h7>我是h7</h7>

可以看出来,是没有h7的,最小就是h6,最大的是h1
所以文章标题就这么写了:
<h1>上海迪士尼松口了!游客将可携自用食品入园,酒精饮料仍将被禁止</h1>

p标签,为你的文章加上段落
p标签,全称paragraph,译:段落

标记蓝色部分,刚开始在没学之前,第一反应就是这么写:
<body>
<h1>上海迪士尼松口了!游客将可携自用食品入园,酒精饮料仍将被禁止</h1>
记者从上海迪士尼乐园管理方了解到,园方管理团队正积极与相关方面沟通,将在继
续聆听各方意见和建议的基础上,于下阶段推出包括入园安检和外带食物政策等方面
的多项举措,进一步完善园区运营,优化游客体验。
</body>
那我们看看是怎么样的结果呢?

发现并没有像我们想的那样,而且换行部分变成了空格,而且两行之间的间距也不是很一样
其实这种文字就叫段落,我们需要用p标签来处理:
<body>
<h1>上海迪士尼松口了!游客将可携自用食品入园,酒精饮料仍将被禁止</h1>
<p>记者从上海迪士尼乐园管理方了解到,园方管理团队正积极与相关方面沟通,将在继</p>
<p>续聆听各方意见和建议的基础上,于下阶段推出包括入园安检和外带食物政策等方面</p>
<p>的多项举措,进一步完善园区运营,优化游客体验。</p>
</body>

这就和我们想要的是一样的了,而且也发现每个p标签之间都是独立的,各占一行,同时彼此也有间距
那既然我们就把所有的段落都写出来吧!
<body>
<h1>上海迪士尼松口了!游客将可携自用食品入园,酒精饮料仍将被禁止</h1>
<p>记者从上海迪士尼乐园管理方了解到,园方管理团队正积极与相关方面沟通,将在继</p>
<p>续聆听各方意见和建议的基础上,于下阶段推出包括入园安检和外带食物政策等方面</p>
<p>的多项举措,进一步完善园区运营,优化游客体验。</p>
<p>上海迪士尼度假区保安、安全、消防和健康服务部总监薛斌君表示:“我们理解目前的</p>
<p>入园安检流程可能会给部分游客带来不适感。园方管理团队一直在积极听取各方反</p>
<p>馈,并在相关部门的支持指导下,认真研究优化安检流程,以达到两大重要目标:第</p>
<p>一也是一切的前提,即确保游客和演职人员的安全;第二,为我们的游客提供更为舒</p>
<p>适的体验。”</p>
<p>薛斌君说,上海迪士尼乐园的安检团队正在对现有的人工包检方式进行优化,通过更</p>
<p>友好、人性化的流程和服务,降低包检对游客体验的影响。建议游客在安检时可以自</p>
<p>己打开包袋,如安检人员有要求,游客可自行将包内相关个人物品取出并在经过检查</p>
<p>后放回。园方管理团队将与各相关部门继续通力合作,持续调整优化入园安检流程,</p>
<p>考虑下一步要加大安检设备的投入,采用如x光机等在内的多种科技手段,</p>
<p>辅助人工服务,不断提升游客入园的体验。</p>
<p>此前,上海迪士尼乐园翻包安检。</p>
<p>与此同时,薛斌君表示,上海迪士尼乐园管理方认真关注并倾听了很多关于现行的禁</p>
<p>止携带入园物品的建议,尤其是针对食物和饮料。根据这些反馈意见,将很快调</p>
<p>整外带食物政策。除需再行加工、保温存储及带刺激性气味的食品外,游客</p>
<p>将可以携带供自己食用的食品进入乐园。该政策确定后,乐园将尽快向公众介绍</p>
<p>具体细节。与此同时,将继续加强园区内食品的多样化供应,增加更多不同品</p>
<p>种、口味和价位的食品,为游客提供更为丰富的餐饮选择。此外,游客将继续</p>
<p>可以携带瓶装水和饮料入园,遍布乐园的50多个直饮水供应点和20多个热水供应点也</p>
<p>将继续为游客免费提供饮用冷热水。酒精饮料仍将被禁止携带入园。</p>
<p>据薛斌君介绍,系列优化措施还要从加强入园政策的提前告知入手。目前上海迪士尼</p>
<p>乐园正在更新各个官方购票渠道和平台上的购票流程,确保游客在购买门票前即知晓</p>
<p>乐园准则和游客须知,提前做好安排</p>
<p>薛斌君表示:“园方管理团队正在各部门的支持合作下,尽快确定并落实各项运营优化</p>
<p>措施。在准备实施这些措施的过程中,我们也希望能得到公众的理解和支持。对园方</p>
<p>管理团队来说,每天看到广大游客的笑脸是我们不断前行与努力的最大动力。”</p>
<p>来源:北京晚报微信公号、人民日报客户端</p>
</body>

必须强调strong!绝对倾斜em!
我们发现文章中有加粗的部分,应该怎么做呢????
有两个标签,<em></em>和<strong></strong>
em是倾斜,而strong则是加粗!根据文章的特性,我们选择相应的标签
那我们就对刚才的继续修改:
<body>
<h1>上海迪士尼松口了!游客将可携自用食品入园,酒精饮料仍将被禁止</h1>
<p>记者从上海迪士尼乐园管理方了解到,园方管理团队正积极与相关方面沟通,将在继</p>
<p>续聆听各方意见和建议的基础上,于下阶段推出包括入园安检和外带食物政策等方面</p>
<p>的多项举措,进一步完善园区运营,优化游客体验。</p>
<p>上海迪士尼度假区保安、安全、消防和健康服务部总监薛斌君表示:“我们理解目前的</p>
<p>入园安检流程可能会给部分游客带来不适感。园方管理团队一直在积极听取各方反</p>
<p>馈,并在相关部门的支持指导下,认真研究优化安检流程,以达到两大重要目标:第</p>
<p>一也是一切的前提,即确保游客和演职人员的安全;第二,为我们的游客提供更为舒</p>
<p>适的体验。”</p>
<p>薛斌君说,上海迪士尼乐园的安检团队正在对现有的人工包检方式进行优化,通过更</p>
<p>友好、人性化的流程和服务,降低包检对游客体验的影响。建议游客在安检时可以自</p>
<p>己打开包袋,如安检人员有要求,游客可自行将包内相关个人物品取出并在经过检查</p>
<p>后放回。园方管理团队将与各相关部门继续通力合作,持续调整优化入园安检流程,</p>
<p><strong>考虑下一步要加大安检设备的投入,采用如x光机等在内的多种科技手段,</strong></p>
<p><strong>辅助人工服务,不断提升游客入园的体验。</strong></p>
<p>此前,上海迪士尼乐园翻包安检。</p>
<p>与此同时,薛斌君表示,上海迪士尼乐园管理方认真关注并倾听了很多关于现行的禁</p>
<p>止携带入园物品的建议,尤其是针对食物和饮料。<strong>根据这些反馈意见,将很快调</strong></p>
<p><strong>整外带食物政策。除需再行加工、保温存储及带刺激性气味的食品外,游客</strong></p>
<p><strong>将可以携带供自己食用的食品进入乐园。</strong>该政策确定后,乐园将尽快向公众介绍</p>
<p>具体细节。与此同时,<strong>将继续加强园区内食品的多样化供应,增加更多不同品</strong></p>
<p><strong>种、口味和价位的食品,为游客提供更为丰富的餐饮选择。</strong>此外,游客将继续</p>
<p>可以携带瓶装水和饮料入园,遍布乐园的50多个直饮水供应点和20多个热水供应点也</p>
<p>将继续为游客免费提供饮用冷热水。酒精饮料仍将被禁止携带入园。</p>
<p>据薛斌君介绍,系列优化措施还要从加强入园政策的提前告知入手。目前上海迪士尼</p>
<p>乐园正在更新各个官方购票渠道和平台上的购票流程,确保游客在购买门票前即知晓</p>
<p>乐园准则和游客须知,提前做好安排</p>
<p>薛斌君表示:“园方管理团队正在各部门的支持合作下,尽快确定并落实各项运营优化</p>
<p>措施。在准备实施这些措施的过程中,我们也希望能得到公众的理解和支持。对园方</p>
<p>管理团队来说,每天看到广大游客的笑脸是我们不断前行与努力的最大动力。”</p>
<p>来源:北京晚报微信公号、人民日报客户端</p>
</body>

使用br标签分行显示文本
要是每行都是用p来做,那属实是挺麻烦的
但是还用不了回车,怎么办呢?html考虑到了这个问题
为我们提供了空格的方法<br/>???????
这不应该是向上面一样成对出现的嘛?
其实不是,这个标签其实是空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签
那这有了回车了,就可以将刚才的代码进行修改了:
<body>
<h1>上海迪士尼松口了!游客将可携自用食品入园,酒精饮料仍将被禁止</h1>
<p>记者从上海迪士尼乐园管理方了解到,园方管理团队正积极与相关方面沟通,将在继<br>
续聆听各方意见和建议的基础上,于下阶段推出包括入园安检和外带食物政策等方面<br>
的多项举措,进一步完善园区运营,优化游客体验。<br>
上海迪士尼度假区保安、安全、消防和健康服务部总监薛斌君表示:“我们理解目前的<br>
入园安检流程可能会给部分游客带来不适感。园方管理团队一直在积极听取各方反<br>
馈,并在相关部门的支持指导下,认真研究优化安检流程,以达到两大重要目标:第<br>
一也是一切的前提,即确保游客和演职人员的安全;第二,为我们的游客提供更为舒<br>
适的体验。”</p>
<p>薛斌君说,上海迪士尼乐园的安检团队正在对现有的人工包检方式进行优化,通过更<br>
友好、人性化的流程和服务,降低包检对游客体验的影响。建议游客在安检时可以自<br>
己打开包袋,如安检人员有要求,游客可自行将包内相关个人物品取出并在经过检查<br>
后放回。园方管理团队将与各相关部门继续通力合作,持续调整优化入园安检流程,<br>
<strong>考虑下一步要加大安检设备的投入,采用如x光机等在内的多种科技手段,<br>
辅助人工服务,不断提升游客入园的体验。</strong></p>
<p>此前,上海迪士尼乐园翻包安检。</p>
<p>与此同时,薛斌君表示,上海迪士尼乐园管理方认真关注并倾听了很多关于现行的禁<br>
止携带入园物品的建议,尤其是针对食物和饮料。<strong>根据这些反馈意见,将很快调</strong><br>
<strong>整外带食物政策。除需再行加工、保温存储及带刺激性气味的食品外,游客<br>将可以携带供自己食用的食品进入乐园。</strong>该政策确定后,乐园将尽快向公众介绍<br>
具体细节。与此同时,<strong>将继续加强园区内食品的多样化供应,增加更多不同品<br>种、口味和价位的食品,为游客提供更为丰富的餐饮选择。</strong>
此外,游客将继续<br>
可以携带瓶装水和饮料入园,遍布乐园的50多个直饮水供应点和20多个热水供应点也<br>
将继续为游客免费提供饮用冷热水。酒精饮料仍将被禁止携带入园。</p>
<p>据薛斌君介绍,系列优化措施还要从加强入园政策的提前告知入手。目前上海迪士尼<br>
乐园正在更新各个官方购票渠道和平台上的购票流程,确保游客在购买门票前即知晓<br>
乐园准则和游客须知,提前做好安排</p>
<p>薛斌君表示:“园方管理团队正在各部门的支持合作下,尽快确定并落实各项运营优化<br>
措施。在准备实施这些措施的过程中,我们也希望能得到公众的理解和支持。对园方<br>
管理团队来说,每天看到广大游客的笑脸是我们不断前行与努力的最大动力。”</p>
<p>来源:北京晚报微信公号、人民日报客户端</p>
</body>

为你的网页添加一些空格
加空格???不不不,你也发现了,无论我连续输入多少个空格或者回车,都只有一个空格显示
这种现象叫做空白折叠现象
那我确实是想多写几个空格,怎么办呢?
在html中有个特别厉害的表,叫做HTML特殊字符编码对照表
该表中定义了包括空格在内的许多特殊符号写法!
空格是 ,那空格不好看出来
我们写一个黑桃三吧,首先找到黑桃的符号♠
<p>♠3</p>

学会了吧啊,记住空格是什么,其他的特殊的想用就来查
认识hr标签,添加水平横线
你看上面一点点,哎~~行了行了,这个水平横线的操作就是<hr/>做的
毕竟本质上,你现在看到的博客也就是一个网络文章嘛~
好,截止到目前为止,除了图片的插入,其他的我们都已经完成了
接下来我们去另一个网页看看还有什么我们没有见过的样式
(这个文件先不要删哦~后面还要完善呢!)
*****
*****
前端学习(三):body标签(一)的更多相关文章
- 前端学习(一) body标签(下)
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- 前端学习(一) body标签(上)
body标签中相关标签 主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- 前端学习(三十六)promise(笔记)
一个页面: 头部.用户信息.新闻列表 jquery ajax: 1.$.ajax({ url:'', dataType:'json', }).then(res=>{ //r ...
- 前端学习(三)css选择器(笔记)
字体样式: color:red: font-size:12px: font-weight:bold/normal; font-style:italic/normal; f ...
- 前端学习(三十九)移动端app(笔记)
移动端App 开发App的三种方式 Native App 原生 底层语言 java Android oc ...
- 前端学习(三十八)vue(笔记)
Angular+Vue+React Vue性能最好,Vue最轻=======================================================Angular ...
- 前端学习(三十七)angular(笔记)
MVC 后台 M Module 数据层 V View 视图层 C Contro ...
- 前端学习(三十五)模块化es6(笔记)
RequireJs:一.安装.下载 官网: requirejs.org Npm: npm i requirejs二.使用 以前的开发方式的问题: 1).js 是阻塞加 ...
- 前端学习(三十四)对象&模块化(笔记)
人,工人 //类的定义 function Person(name,age){ //构造函数 //工厂模式 //1.原料 //var obj = new ...
- 前端学习(三十一)canvas(笔记)
canvas 画布 画图.做动画.做游戏=========================================== canvas就是新标签 必须获取绘图 ...
随机推荐
- 关于 charset 的几种编码方式
经常遇到charset=gb2312.charset=iso-8859-1.charset=utf-8这几种编码方式,它们有什么不同,看下面的图 编码方式 含义 charset=iso-8859-1 ...
- Python之浅谈装饰器
目录 闭包函数 装饰器 迭代器 闭包函数 就是将原先需要调用好几遍的函数和参数写入一个包内,下次调用时一起调用 def name(x): x=1 def age(): print(x) return ...
- django 类视图的使用
使用django框架也有挺长时间了,但是一直都没有用过django的类视图,因为之前跟着网上教程学习时,觉得类视图是进阶的知识,可能目前还达不到吧 但今天在做项目的时候用到了,感觉真的太方便了吧,而且 ...
- django admin 添加用户出现外键约束错误
今天在做mxonline项目时,注册了用户表进admin后,想在后台添加一个用户试试,结果出现了错误,经过一番搜索发现以下两个解决方法,不过我只用了一种 报错信息: IntegrityError: ( ...
- 浅谈JVM和垃圾回收
写在前面 简单的介绍一下JVM(Java Virtual Machine)吧,它也叫Java虚拟机.虽然它叫虚拟机,但是实际上不是我们所理解的虚拟机,它更像操作系统中的一个进程.JVM屏蔽了各个操作系 ...
- (二)ELK Filebeat简介
Filebeat简介 轻量级的日志传输工具,是一个日志文件托运工具,在你的服务器上安装客户端后,filebeat会监控日志目录或者指定的日志文件,追踪读取这些文件(追踪文件的变化,不停的读),并且 ...
- Mybatis源码初探——优雅精良的骨架
@ 目录 前言 精良的Mybatis骨架 宏观设计 基础支撑 日志 日志的加载 日志的使用 数据源 数据源的创建 池化技术原理 数据结构 获取连接 回收连接 缓存 缓存的实现 CacheKey 反射 ...
- mysql-如何删除主从同步
我用 change master 语句添加了一个主从同步, change master to master_host='localhost',master_user='slave',master_p ...
- 小程序checkbox-group只获取到一个值
wx:for循环不能写在checkbox-group标签上 wx:for循环不能写在checkbox-group标签上 wx:for循环不能写在checkbox-group标签上 wx:for循环不能 ...
- 从 (a==1&&a==2&&a==3) 成立中看javascript的隐式类型转换
下面代码中 a 在什么情况下会打印 1? var a = ?; if(a == 1 && a == 2 && a == 3){ console.log(1); } 这个 ...