鱼C论坛

 找回密码
 立即注册
查看: 18658|回复: 121

[技术交流] <002>帮小甲鱼完成宣传页面

  [复制链接]
发表于 2015-7-2 12:00:51 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 戴宇轩 于 2015-7-3 08:34 编辑

如果上一课你选了A,B或D,那你现在可以关掉这个页面……

Screenshot_2015-07-01-20-45-49_mh1435755273198.jpg
小甲鱼知道你要帮忙,很高兴,于是在便笺上潦草地写下了这些东西,然后递给你。。。
IMG_20150701_210949_mh1435757590378.jpg
    来看看便笺上写了什么。你能确定它的大致结构吗?换句话说,有没有明显的标题,段落?有没有少了点什么,比如页面标题?
    画个草图,在上面标出你看到的结构,再增加你认为缺少的内容。

创建鱼C的页面

    当然,现在唯一的问题是,你还没有创建过任何Web页面。。。
    别担心,以下就是你要做的工作:
1. 用你喜欢的文本编辑器创建一个HTML文件(.html)
2. 写下小甲鱼在便笺上写下的菜单,不要考虑标签
3. 将文件保存为"index.html"
4. 在你喜欢的浏览器中打开"index.html"等待见证奇迹的时候吧!
这是编辑器里的内容,看起来很不错!
你输入的内容.PNG
我用的编辑器是Visual Studio Code,https://www.visualstudio.com/products/code-vs
下面是在浏览器中的实际效果。。。 实际上.PNG
如果你看到的是乱码,右键单击页面,然后在编码里选中"Unicode(UTF-8)"

增加一些结构

我们刚才只是写入了一些文本,然后在浏览器中查看而已,所以我们并没有告诉浏览器其中的结构,下面我们就来给这段文字加上结构!
这是我们输入的内容,上面已经有了一些结构,试着补全它的结构
  1. <h1>零基础入门学习Python, ¥0.00</h1>
  2. 在这里,你可以学到面向对象的Python编程,甚至还有Tkinter和Pygame!!!

  3. 极客首选之Python, ¥0.00
  4. <p>大坑待填Oo……</p>

  5. 更多信息请访问http://blog.fishc.com/
复制代码

看答案之前自己先试一试!
答案:
游客,如果您要查看本帖隐藏内容请回复


完工了吗?

你已经写出了一个带标记的HTML页面,但是你已经见过了<html>, <head>, <body>和<title>这样的标记,我们只要增加这些标记,让它成为一个一流的HTML页面!
  1. <html>
  2.   <head>
  3.     <title>FishC Study</title>
  4.   </head>
  5.   <body>
  6.     <h1>零基础入门学习Python, ¥0.00</h1>
  7.     <p>在这里,你可以学到面向对象的Python编程,甚至还有Tkinter和Pygame!!!</p>
  8.    
  9.     <h1>极客首选之Python, ¥0.00</h1>
  10.     <p>大坑待填Oo……</p>
  11.    
  12.     <p>更多信息请访问http://blog.fishc.com/</p>
  13.   </body>
  14. </html>
复制代码
1. 首先,我们用<html>将整个文档包围起来
2. <head>标签负责告诉浏览器关于这个页面的信息,比如标题
3. 在<head>里插入<title>,使标题显示在浏览器顶端
4. 页面主体包括<body>和</body>,还有它里面的所有内容,也就是我们看到的内容


再次测试

成功.PNG
太棒了!页面正确地显示了我们想要的内容!
成功.PNG

标记剖析

好的,你已经见过不少标记,我们来看看这些标记是怎样工作的。。。
无标题.png
无标题2.png



小练习

小甲鱼匆忙跑过来,对你说

宗旨.jpg
然后拿出一张纸条

宗旨.png
你能帮小甲鱼完成宗旨页面吗?(回复在本帖)
答案下一课揭晓。。。



评分

参与人数 3荣誉 +30 鱼币 +30 贡献 +30 收起 理由
~风介~ + 5 + 5 + 5 感谢楼主无私奉献!
小甲鱼 + 20 + 20 + 20 我能说一句吗?太赞了!!!!
Minhal + 5 + 5 + 5 热爱鱼C^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-7-2 12:41:33 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-2 13:35:06 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-3 11:56:57 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-5 23:01:29 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-6 22:00:39 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-7 06:51:10 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-7 22:24:44 From FishC Mobile | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-8 09:01:17 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-8 19:30:30 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-13 12:08:26 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-21 21:38:00 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-28 11:02:43 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-7-28 11:15:40 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-8-6 22:10:15 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-8-7 14:08:44 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-8-7 14:12:54 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-8-10 11:49:15 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

发表于 2015-8-10 21:37:47 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

 楼主| 发表于 2015-8-11 08:21:25 | 显示全部楼层
此帖仅作者可见
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 18:31

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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