鱼C论坛

 找回密码
 立即注册
查看: 7251|回复: 46

[庖丁解牛] 0 0 0 3 - 增加说明文字、区块

[复制链接]
发表于 2017-1-6 16:57:31 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2021-8-11 08:29 编辑

0002,我们完成了一个最基本的网页!

基本到什么也干不了

这怎么可以呢?

所以我们在页面中增加说明文字、邀请按钮、区块来提升下B格。


  • 标题层次结构


  • 在HTML中,标题标签共有6个标题标签,默认<h1>最大,<h6>最小。

    既然没有指定,直接上最大!修改<body>,如下:
    1. <h1>我爱鱼C</h1>
    复制代码

    屏幕快照 2017-01-06 下午4.46.28.png


  • 说明文字


  • 说明文字,就是一个文本段落,最好的方式将它放在<p>标签里。

    这样做的目的,就是让你的代码,结构化,而不是把内容直接扔到代码里!

    1. <p>WWW.FihsC.com - 让编程改变世界</p>
    复制代码


  • URL超链接


  • 超链接,更准确的说是文本链接。链接标签<a>,跳转的URL可以用标签的href属性指定。

    创建 “传送门”,页面跳到小天才养殖场主页
    1. <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
    复制代码

    屏幕快照 2017-01-06 下午4.57.06.png



  • 区块

  • 区块是干嘛滴呢?

    很简单,就是让你的代码封装到某个内容区域内!

    实现模块化的代码结构!

    因为,当你把所有属性设置,直接扔在<body>下面,就很尴尬了。

    就像你虽然穿了裤子、衣服、裤衩儿。

    人家为什么还会对你指指点点?

    很简单。

    你把所有衣服都套在脑袋上了!

    懂了不,这就是通过区块化代码,提升整个代码的可读、可修改性。

    百利而无一害!

    HTML5中,有很多“区块”标签,<header>、<section>、<aside>、<footer>等,后续会用到。

    今天只用最初级的<div>

    修改代码如下:
    1. <body>
    2.         <div>       
    3.           <h1>我爱鱼C</h1>
    4.           <p>WWW.FihsC.com - 让编程改变世界</p>
    5.           <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
    6.         </div>
    7. </body>
    复制代码


    将<body>里面所有的内容元素,扔进到<div>区块里,结构性一下就很强了有木有!

    为了便于管理,总要起个名字对应这个区块是不!

    添加id属性,命名为container。

    修改<div>,如下:
    1. <div id="container">
    复制代码


    虽然页面外表没有变化,但是很有内涵了!

    这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


    官方 Web 课程:

评分

参与人数 2荣誉 +6 鱼币 +6 贡献 +4 收起 理由
鱼C-小师妹 + 1 + 1 + 1 感谢楼主无私奉献!
睦ちゃん她爹 + 5 + 5 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 2017-3-31 10:30:16 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到html的世界</title>
  6.         </head>
  7.         <body>
  8.                 <div id="container">
  9.                         <h1>我爱鱼C</h1>
  10.                         <p>bbs.fishC.com - 是你在改变我,谢谢你</p>
  11.                         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  12.                 </div>
  13.         </body>
  14. </html>
复制代码
屏幕快照 2017-03-31 上午10.29.19.png

点评

我很赞同!: 5.0
我很赞同!: 5
加油加油!  发表于 2017-3-31 10:31

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +6 收起 理由
不二如是 + 6 + 6 + 6 只要行动,永远不晚

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2018-1-11 09:51:14 | 显示全部楼层
学习笔记:
在HTML中,标题标签共有6个标题标签,默认<h1>最大,<h6>最小。我自己动手尝试了一下的确这样。
说明文字,就是一个文本段落,最好的方式将它放在<p>标签里。这个不是很懂它的作用可能现在我们还不能看出来吧。
超链接,<a href=”链接”>名称</a>。
区块感觉就是用来标记这块代码是什么,看起来清楚一点不然后面代码多了自己都不知道这是啥那是啥了。id="contianer"还可以自己取名!~
作业:
  1. <!doctype html>
  2. <head>
  3. <title>欢迎来到HTML世界</title>
  4. </head>
  5. <body>
  6.                 <div id="contianer">
  7.                         <h6>我爱鱼C</h6>
  8.                         <p>WWW.FihsC.com - 让编程改变世界</p>
  9.                         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  10.                 </div>
  11. </body>
复制代码
准备先去上课,然后继续回图书馆学习HTML,图书馆安静!主要还有空调吹!~~不二老师的教程已经让我喜欢上HTML了!!!感谢不二老师!!!




点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-2-1 16:01

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 热爱鱼C^_^

查看全部评分

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

使用道具 举报

发表于 2018-1-20 20:54:41 | 显示全部楼层
本帖最后由 易改乌江水 于 2018-1-20 20:56 编辑

学了不二老师的课后,我把我从前做的电子物理课本浏览改了一下当做作业。
  1. <!DOCTYPE HTML>
  2. <html>
  3.         <body style="background-color:skyblue">
  4.                 <h1  style="text-align:center">
  5.                 九 年 级
  6.                 </h1>
  7.                 <div id ="unit_13">
  8.                         <p style="text-align:center">
  9.                                 <a  href="html2.html">
  10.                                         <img border="0" src="physics\the grade nine\13\13-1.jpg" />
  11.                                 </a>
  12.                         </p>
  13.                 </div>
  14.                 <div id ="unit_14">
  15.                     <p style="text-align:center">
  16.                                 <a  href="html3.html">
  17.                                         <img border="0" src="physics\the grade nine\14\14-16.jpg" />
  18.                                 </a>
  19.                         </p>
  20.                 </div>
  21.                 <div id ="unit_15">
  22.                         <p style="text-align:center">
  23.                                 <a  href="html4.html">
  24.                                         <img border="0" src="physics\the grade nine\15\15-31.jpg" />
  25.                                 </a>
  26.                         </p>
  27.                 </div>
  28.                 <div id ="unit_16">
  29.                         <p style="text-align:center">
  30.                                 <a  href="html5.html">
  31.                                         <img border="0" src="physics\the grade nine\16\16-54.jpg" />
  32.                                 </a>
  33.                         </p>
  34.                 </div>
  35.                 <div id ="unit_17">
  36.                         <p style="text-align:center">
  37.                                 <a  href="html6.html">
  38.                                         <img border="0" src="physics\the grade nine\17\17-73.jpg" />
  39.                                 </a>
  40.                         </p>
  41.                 </div>
  42.                 <div id ="unit_18">
  43.                         <p style="text-align:center">
  44.                                 <a  href="html7.html">
  45.                                         <img border="0" src="physics\the grade nine\18\18-86.jpg" />
  46.                                 </a>
  47.                         </p>
  48.                 </div>
  49.                 <div id ="unit_19">
  50.                                 <p style="text-align:center">
  51.                                 <a  href="html8.html">
  52.                                         <img border="0" src="physics\the grade nine\19\19-104.jpg" />
  53.                                 </a>
  54.                         </p>
  55.                 </div>
  56.                 <div id ="unit_20">
  57.                         <p style="text-align:center">
  58.                                 <a  href="html9.html">
  59.                                         <img border="0" src="physics\the grade nine\20\20-118.jpg" />
  60.                                 </a>
  61.                         </p>
  62.                 </div>
  63.                 <div id ="unit_21">
  64.                         <p style="text-align:center">
  65.                                 <a  href="html10.html">
  66.                                         <img border="0" src="physics\the grade nine\21\21-144.jpg" />
  67.                                 </a>
  68.                         </p>
  69.                 </div>
  70.                 <div id ="unit_22">
  71.                         <p style="text-align:center">
  72.                                 <a  href="html11.html">
  73.                                         <img border="0" src="physics\the grade nine\22\22-165.jpg" />
  74.                                 </a>
  75.                         </p>
  76.                 </div>
  77.         </body>
  78. </html>
复制代码

毕竟虽然听说过css,但毕竟不会用所以没用,只能用这种蠢笨的方法

点评

我很赞同!: 5.0
我很赞同!: 5
没关系,先用起来再说  发表于 2018-1-20 22:00

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

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

使用道具 举报

发表于 2018-1-30 17:10:18 | 显示全部楼层
打开notepad++才想起来之前看过一点点,不过因为备考,没再看了。现在我想python和html同时学,不知道会不会学混了啊。
360截图-1916578.jpg
360截图-1984921.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
文艺  发表于 2018-1-30 17:54

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 热爱鱼C^_^

查看全部评分

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

使用道具 举报

发表于 2018-2-26 09:46:21 | 显示全部楼层
本帖最后由 夕颜梦雨 于 2018-2-26 09:47 编辑

交作业
0003.png

点评

我很赞同!: 5.0
我很赞同!: 5
很棒的作业~  发表于 2018-2-26 09:49

评分

参与人数 1荣誉 +6 鱼币 +6 收起 理由
不二如是 + 6 + 6 加油~

查看全部评分

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

使用道具 举报

发表于 2017-1-7 20:21:20 | 显示全部楼层
怎么不给区块起个类名
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-7 21:02:01 | 显示全部楼层
alltolove 发表于 2017-1-7 20:21
怎么不给区块起个类名

起的名字就叫,“container”
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-15 23:19:19 | 显示全部楼层
通俗易懂,感谢楼主!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2017-2-16 07:12:24 | 显示全部楼层
dreamdnj 发表于 2017-2-15 23:19
通俗易懂,感谢楼主!!

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

使用道具 举报

发表于 2017-2-27 18:57:07 | 显示全部楼层
菜鸟来学习学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-27 23:21:29 | 显示全部楼层
评论一下吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-1 16:27:49 | 显示全部楼层
应该是h1最大,h6最小吧
1.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-2 15:54:11 | 显示全部楼层
hanlenry 发表于 2017-3-1 16:27
应该是h1最大,h6最小吧

说对了,估计一不小心输入错了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-27 21:15:43 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-17 14:52:00 | 显示全部楼层
交作业


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>div区块--变得有内涵</title>
</head>
<body>
   <h1>我爱鱼C</h1>     <!--标题标签 h1最大   h6最小-->
   <p>让编程改变世界!<br/>Change the world by program!</p>   <!--段落标签-->
   <a href="http://www.fishc.com/" style="text-decoration: none">传送门</a><br/>
   <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539"
      style="text-decoration: none">HTML5-庖丁解牛</a>
   
</body>
</html>
0002.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-7 19:18:33 | 显示全部楼层
  1. <!doctype html>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.                 <meta charset="utf-8">
  6.                 <title>欢迎来到HTML世界</title>
  7. </head>
  8. <body>
  9.                 <div  id="container">
  10.                 <h1>我爱鱼C</h1>
  11.                 <p>WWW.FihsC.com - 向前端老师致敬</p>
  12.                 <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  13.                 </div>               
  14. </body>
  15. </html>
复制代码

交作业

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-6-7 20:14

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 加油!

查看全部评分

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

使用道具 举报

发表于 2017-7-5 07:51:45 | 显示全部楼层
继续学习,感谢楼主分享。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-5 16:11:41 | 显示全部楼层
在学习。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-25 22:49:01 | 显示全部楼层
感谢楼主1!!! 学习中
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-1-7 07:16:41 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 00:27

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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