鱼C论坛

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

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

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

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

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

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

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

基本到什么也干不了

这怎么可以呢?

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


  • 标题层次结构


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

    既然没有指定,直接上最大!修改<body>,如下:
    <h1>我爱鱼C</h1>
    屏幕快照 2017-01-06 下午4.46.28.png


  • 说明文字


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

    这样做的目的,就是让你的代码,结构化,而不是把内容直接扔到代码里!
    <p>WWW.FihsC.com - 让编程改变世界</p>

  • URL超链接


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

    创建 “传送门”,页面跳到小天才养殖场主页
    <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>

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

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

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

    添加id属性,命名为container。

    修改<div>,如下:
    <div id="container">

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

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


    官方 Web 课程:

评分

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

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 2017-3-31 10:30:16 | 显示全部楼层
交作业
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到html的世界</title>
        </head>
        <body>
                <div id="container">
                        <h1>我爱鱼C</h1>
                        <p>bbs.fishC.com - 是你在改变我,谢谢你</p>
                        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>
        </body>
</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"还可以自己取名!~
作业:
<!doctype html>
<head>
<title>欢迎来到HTML世界</title>
</head>
<body>
                <div id="contianer">
                        <h6>我爱鱼C</h6>
                        <p>WWW.FihsC.com - 让编程改变世界</p>
                        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>
</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 编辑

学了不二老师的课后,我把我从前做的电子物理课本浏览改了一下当做作业。
<!DOCTYPE HTML>
<html>
        <body style="background-color:skyblue">
                <h1  style="text-align:center"> 
                九 年 级
                </h1>
                <div id ="unit_13">
                        <p style="text-align:center">
                                <a  href="html2.html">
                                        <img border="0" src="physics\the grade nine\13\13-1.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_14">
                    <p style="text-align:center">
                                <a  href="html3.html">
                                        <img border="0" src="physics\the grade nine\14\14-16.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_15">
                        <p style="text-align:center">
                                <a  href="html4.html">
                                        <img border="0" src="physics\the grade nine\15\15-31.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_16">
                        <p style="text-align:center">
                                <a  href="html5.html">
                                        <img border="0" src="physics\the grade nine\16\16-54.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_17">
                        <p style="text-align:center">
                                <a  href="html6.html">
                                        <img border="0" src="physics\the grade nine\17\17-73.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_18">
                        <p style="text-align:center">
                                <a  href="html7.html">
                                        <img border="0" src="physics\the grade nine\18\18-86.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_19">
                                <p style="text-align:center">
                                <a  href="html8.html">
                                        <img border="0" src="physics\the grade nine\19\19-104.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_20">
                        <p style="text-align:center">
                                <a  href="html9.html">
                                        <img border="0" src="physics\the grade nine\20\20-118.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_21">
                        <p style="text-align:center">
                                <a  href="html10.html">
                                        <img border="0" src="physics\the grade nine\21\21-144.jpg" />
                                </a>
                        </p>
                </div>
                <div id ="unit_22">
                        <p style="text-align:center">
                                <a  href="html11.html">
                                        <img border="0" src="physics\the grade nine\22\22-165.jpg" />
                                </a>
                        </p>
                </div>
        </body>
</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 | 显示全部楼层
<!doctype html>
<!DOCTYPE html>
<html>
<head>
                <meta charset="utf-8">
                <title>欢迎来到HTML世界</title>
</head>
<body>
                <div  id="container">
                <h1>我爱鱼C</h1>
                <p>WWW.FihsC.com - 向前端老师致敬</p>
                <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>                
</body>
</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-12-22 13:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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