技术宅社区

 找回密码
 ╱人◕‿‿◕人╲订下契约(注册新用户)

QQ登录

只需一步,快速开始

搜索
查看: 420 | 回复: 0
收起左侧

版主手册 - 动态帖子修炼手册

 关闭 [复制链接]

签到天数: 656 天

连续签到: 49 天

[LV.9]以坛为家II

国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫1全职猎人|伊耳谜宫崎骏|千寻魔道祖师|金凌歌王|寿岭二Free|叶月渚野良神|雪音刀剑神域|诗乃刀剑神域|有纪刀剑神域|亚丝娜刀剑乱舞|狮子王歌王|一之濑时矢

发表于 2018-5-28 02:02:14 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有帐号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
这里是帖子排版滴进阶教学,嘘(禁声),敲黑板(咚咚咚)。
好吧,与其说是进阶,其实是现对上个版本而言的。这里将从零开始教会你所有必须的知识,对,从零开始。
标签

你所见之的技术宅社区的全部网页内容,寻根究底,无非是基于HTML语言的一系列HTML文档,如同用World编写一系列的doc文档。 而我们说发布的帖子,就如同你给一份原有的world文档增添新的一个章节。(想象一下这个画面)

首先打开你的浏览器(Chrome、或者火狐,或者任何一个除老土的IE以外先进的浏览器),打开百度首页(www.baidu.com)或者浏览其它任何一个网站, 敲击键盘上的F12按键打开开发者工具,你便可了然一份网页的真身,如图所示。

001.png

单点击左边的三角折叠起来其中复杂的内容后,显而易见,一份HTML文档,是以一系列相互嵌套的尖括号包裹的标签构成的。 用拙劣的英文水平将其翻译,可得:整个HTML文档,首尾以“HTML标签”包裹,随之而来的是一个“头部标签”——head,紧接着是一个“身体标签”,而后……就没有而后了。 网页的全部结构便呈现于此。事实上,标签,是构成网页结构的基本单元(元素)

通常来说,网页所要呈现在浏览器上面的内容都写在body标签里面,如下图所示。而head标签,则是给浏览器在加载页面的时候读取信息用的。例如 我们可以像下面的这份代码一样,给head标签里添加一个title标签,顾名思义,是标题的意思,那么浏览器在读取的时候,就将标题呈现在 网页的顶端。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>我是标题</title> <!--注释:呈现在网页顶端-->
  5. </head>
  6. <body>
  7. 我是正文内容 <!--注释:呈现在网页正文空白处-->
  8. </body>
  9. </html>
复制代码
002.jpg

HTML文档里有各种各样的标签,如同给world文档添加字体、字号、段落一样,HTML文档通过标签给内容添加各种效果。比如,我们可以使用p标签来 生成一个段落,使用br标签换行(br标签不是成对的,一个标签代表一行),使用strong标签来给文本加粗(粗体)等等。HTML的常用标签,借助万能的百度, 你可以轻而易举地学习到很多,这里便不再赘述。

盒子和样式

前面我们了解到了,标签是构成网页文档的基本单元,那么现在我们来学习一个万能的标签,它叫做“div”。打开一个记事本,输入如下内容,保存为HTML文档 而后使用浏览器打开即可看到效果。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>我是标题</title>
  5. <meta charset="utf-8"> <!--注释:这里不懂可以百度一下哦-->
  6. <style>
  7. #div1{
  8. background:grey;
  9. color:white;
  10. }
  11. #div2{
  12. background:red;
  13. color:white;
  14. width:200px;
  15. height:200px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="div1">我是没有定义宽高,灰色背景的div1</div>
  21. <div id="div2">我是宽高为200像素,红色背景的div2</div>
  22. </body>
  23. </html>
复制代码

我们在body标签里面加上了一个style标签,顾名思义,样式、风格、主题的意思。前面我们提到过,head标签里面写的内容是给浏览器读取的, 现在我们便将body标签里的两个div,我将它们分别写上了id,为div1和div2,添加了样式规则。(其中的英文很好理解,就不解释了,字体颜色 、宽高、背景颜色什么的)那么浏览器读取的时候,就会按照我们规定的规则,将div呈现出来。如下图。

注意一条特征,div标签在没有定义宽度的时候是100%宽度,即撑满整个浏览器页面,那么我们可以将div标签理解成一个你可以任意定义的盒子, 你希望它长成什么样,完全取决于你在style标签里给他的样式。关于style标签和div的更多内容,欢迎通过百度了解。

脚本,算法和数学

在body标签还有一个奇特的标签,叫做script标签,在这里放置的东西,是可以进行数学运算的。要学习这个概念之前,请先准备两个工具,一个是记事本,一个是浏览器。

变量

我们前面有提供网页的基本结构,将其全部复制到记事本,清空body标签里面的全部内容,并另存为后缀为html的文档,用浏览器打开查看效果。 每操作一次可以刷新一下浏览器查看最新的效果。

我们在head标签里面添加一个script标签,并在里面写上“var a = 3; alert("a")”。你写完后的效果应该是如下的样子。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>我是标题</title>
  5. <script>
  6. var a = 3;
  7. alert(a);
  8. </script>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
复制代码

打开浏览器运行后,你会发现它弹出了一个“数字3”。什么意思捏?在script标签里面,可以写上一段数学运算脚本,通过var关键字,可以定义 一个变量。这里,我们把a变量的值设定为3;而后我们通过alert来弹出a变量的值,也就是3。alert(XXX)是什么?alert可以帮助我们召唤浏览器 的弹窗,对我们定义的各种数学量进行呈现,比如括号里面放的便是需要呈现的东西的名字,比如这里我们就希望它呈现变量a的值。

你可以多加尝试,比如这样写“var a = 3 + 5;alert(a)”弹出来的一定是8,请注意在script标签里,所有的量都可以“计算”。你也许注意到了分号, 一句话的结束,可以在尾部加上分号,这样就避免了换行的麻烦,总之需要一个分隔符把它们隔开。script的中文名叫做“精灵”,或者“脚本”,这里翻译 为脚本更合适。写脚本的时候,需要一句一句来,每句话结束用分号隔开。你还可以做这样的尝试:“var a = 3;var b = 9;alert(a+b)”。你可以很容易理解 什么叫做一句话。这里的一句话,我们称为“语句”。

数组

很多时候,我们也许需要一个一行n列的表格来存储一系列的值,那么,当我们使用“var a = 3;var b = 5;var k = 18;”诸如此类的变量未免太过于麻烦。 此时我们可以使用数组来存储一系列的值。使用一对方括号来生成一个数组:“var array = [3,4,17]”。其实,var关键字可以定义任何东西,而非仅仅是变量。 我们通过使用“alert(array[0],array[1],array[2])”来分别弹出数组array在第0个位置,第1个位置和第2个位置存储的数值,那么弹出的结果自然是3,4和17。 我们也许会很奇怪为什么是从0开始算位置的,但是这是电脑的特性,即规定了从零开始计数,我们记住它即可。

数组
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复

使用道具 举报

本版积分规则

小黑屋手机版腾讯分析

GMT+8, 2019-11-18 08:48 Processed in 0.061058 second(s), 19 queries , Redis On.

© 2019 技术宅(基宅) Powered by Discuz! X3.4 Theme by Jvmao 粤ICP备18082987号-1

快速回复 返回顶部 返回列表