进击の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特殊字符编码对照表

该表中定义了包括空格在内的许多特殊符号写法!

空格是&nbsp;,那空格不好看出来

我们写一个黑桃三吧,首先找到黑桃的符号&spades;

<p>&spades;3</p>

学会了吧啊,记住空格是什么,其他的特殊的想用就来查


认识hr标签,添加水平横线

你看上面一点点,哎~~行了行了,这个水平横线的操作就是<hr/>做的

毕竟本质上,你现在看到的博客也就是一个网络文章嘛~


好,截止到目前为止,除了图片的插入,其他的我们都已经完成了

接下来我们去另一个网页看看还有什么我们没有见过的样式

(这个文件先不要删哦~后面还要完善呢!)


*****
*****

前端学习(三):body标签(一)的更多相关文章

  1. 前端学习(一) body标签(下)

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

  2. 前端学习(一) body标签(上)

    body标签中相关标签 主要内容: 字体标签:  h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  3. 前端学习(三十六)promise(笔记)

    一个页面:  头部.用户信息.新闻列表 jquery ajax:  1.$.ajax({    url:'',    dataType:'json', }).then(res=>{    //r ...

  4. 前端学习(三)css选择器(笔记)

    字体样式:    color:red:    font-size:12px:    font-weight:bold/normal;    font-style:italic/normal;    f ...

  5. 前端学习(三十九)移动端app(笔记)

    移动端App    开发App的三种方式    Native App         原生        底层语言        java         Android        oc      ...

  6. 前端学习(三十八)vue(笔记)

    Angular+Vue+React    Vue性能最好,Vue最轻=======================================================Angular     ...

  7. 前端学习(三十七)angular(笔记)

    MVC     后台    M         Module             数据层    V         View             视图层    C         Contro ...

  8. 前端学习(三十五)模块化es6(笔记)

    RequireJs:一.安装.下载    官网: requirejs.org    Npm:  npm i requirejs二.使用    以前的开发方式的问题:        1).js 是阻塞加 ...

  9. 前端学习(三十四)对象&模块化(笔记)

    人,工人 //类的定义    function Person(name,age){ //构造函数        //工厂模式        //1.原料        //var obj = new ...

  10. 前端学习(三十一)canvas(笔记)

    canvas             画布    画图.做动画.做游戏===========================================    canvas就是新标签 必须获取绘图 ...

随机推荐

  1. 最短路之Floyd

    #include<bits/stdc++.h>using namespace std;const int maxn = 300+10;int n,m,f[maxn][maxn],t; in ...

  2. linux下将多个ts文件合并为一个MP4文件

    1. 安装ffmpeg工具 sudo apt install ffmpeg 2. 确保所有ts文件无损坏后,确保当前目录(即存放ts文件的目录)无txt文件及mp4文件,在存放ts文件的目录下建立te ...

  3. Python实用笔记 (10)高级特性——生成器

    通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面绝大多数元素 ...

  4. 谈反应式编程在服务端中的应用,数据库操作优化,提速 Upsert

    反应式编程在客户端编程当中的应用相当广泛,而当前在服务端中的应用相对被提及较少.本篇将介绍如何在服务端编程中应用响应时编程来改进数据库操作的性能. 开篇就是结论 接续上一篇<谈反应式编程在服务端 ...

  5. 只需几行 JavaScript 代码,网页瞬间有气质了!

    最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 RoughNotation.干嘛用的呢?就是在网页上给文字加标注,比如下划线.方框.高亮文字背景等,不过是手写风格的!截图给大家感受下 ...

  6. HTTPS 和 SSL/TLS 协议:密钥交换(密钥协商)算法及其原理

    转自:https://blog.csdn.net/andylau00j/article/details/54583769 本系列的前一篇,咱们聊了“密钥交换的难点”以及“证书体系”的必要性.今天这篇来 ...

  7. web开发,前后分离接口规范

    1. 前言 随着互联网的高速发展,前端页面的展示.交互体验越来越灵活.炫丽,响应体验也要求越来越高,后端服务的高并发.高可用.高性能.高扩展等特性的要求也愈加苛刻,从而导致前后端研发各自专注于自己擅长 ...

  8. 奇妙的 CSS MASK

    本文将介绍 CSS 中一个非常有意思的属性 mask . 顾名思义,mask 译为遮罩.在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 ...

  9. HDU 4352 XHXJ's LIS HDU 题解

    题目 #define xhxj (Xin Hang senior sister(学姐)) If you do not know xhxj, then carefully reading the ent ...

  10. Instrction Arrangement UDH 4109 拓扑排序 or 最长路

    题目描述 Ali has taken the Computer Organization and Architecture course this term. He learned that ther ...