QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1740|回复: 21

[系列教程] 0 0 0 3 - 增加说明文字、区块

[复制链接]
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是 发表于 2017-1-6 16:57:31 174021 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

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

x
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">
    复制代码


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









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

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:6 天
连续签到:1 天
lyzklkl 发表于 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 只要行动,永远不晚

查看全部评分

最佳答案
0 
累计签到:3 天
连续签到:3 天
易改乌江水 发表于 前天 20:54 | 显示全部楼层
本帖最后由 易改乌江水 于 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
没关系,先用起来再说  发表于 前天 22:00

评分

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

查看全部评分

最佳答案
23 
累计签到:458 天
连续签到:30 天
alltolove 发表于 2017-1-7 20:21:20 | 显示全部楼层
怎么不给区块起个类名
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-1-7 21:02:01 | 显示全部楼层
alltolove 发表于 2017-1-7 20:21
怎么不给区块起个类名

起的名字就叫,“container”
最佳答案
0 
累计签到:89 天
连续签到:1 天
dreamdnj 发表于 2017-2-15 23:19:19 | 显示全部楼层
通俗易懂,感谢楼主!!
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-2-16 07:12:24 | 显示全部楼层
dreamdnj 发表于 2017-2-15 23:19
通俗易懂,感谢楼主!!

!!!
最佳答案
0 
累计签到:7 天
连续签到:1 天
alanbruk 发表于 2017-2-27 18:57:07 | 显示全部楼层
菜鸟来学习学习
最佳答案
0 

尚未签到

biyiy929 发表于 2017-2-27 23:21:29 | 显示全部楼层
评论一下吧
最佳答案
0 
累计签到:26 天
连续签到:1 天
hanlenry 发表于 2017-3-1 16:27:49 | 显示全部楼层
应该是h1最大,h6最小吧
1.jpg
最佳答案
0 
累计签到:40 天
连续签到:1 天
longwutian004 发表于 2017-3-2 15:54:11 | 显示全部楼层
hanlenry 发表于 2017-3-1 16:27
应该是h1最大,h6最小吧

说对了,估计一不小心输入错了
最佳答案
0 
累计签到:45 天
连续签到:0 天
时间被轻轻踏碎 发表于 2017-3-27 21:15:43 | 显示全部楼层
最佳答案
0 
累计签到:132 天
连续签到:1 天
shishunfu 发表于 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
最佳答案
0 
累计签到:2 天
连续签到:1 天
馆长の微笑 发表于 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 加油!

查看全部评分

最佳答案
0 
累计签到:650 天
连续签到:75 天
aswyamato1989 发表于 2017-7-5 07:51:45 | 显示全部楼层
继续学习,感谢楼主分享。
最佳答案
0 
累计签到:145 天
连续签到:1 天
542624047 发表于 2017-7-5 16:11:41 | 显示全部楼层
在学习。
最佳答案
0 
累计签到:6 天
连续签到:1 天
义云月 发表于 2017-8-25 22:49:01 | 显示全部楼层
感谢楼主1!!! 学习中
最佳答案
0 
累计签到:21 天
连续签到:1 天
白文龙 发表于 2018-1-7 07:16:41 | 显示全部楼层
最佳答案
19 
累计签到:73 天
连续签到:7 天
像番茄加两个蛋 发表于 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了!!!感谢不二老师!!!




发表回复

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

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /2 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-1-22 08:38

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