0 0 0 3 - 增加说明文字、区块,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-1-6 16:57:31

0 0 0 3 - 增加说明文字、区块

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

在0002，我们完成了一个最基本的网页！

基本到什么也干不了{:10_262:}

这怎么可以呢？

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

[*]标题层次结构

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

既然没有指定，直接上最大！修改<body>,如下：
<h1>我爱鱼C</h1>

[*]说明文字

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

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

<p>WWW.FihsC.com - 让编程改变世界</p>

[*]URL超链接

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

创建 “传送门”，页面跳到小天才养殖场主页{:10_297:}
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>

[*]区块
区块是干嘛滴呢？

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

实现模块化的代码结构！

因为，当你把所有属性设置，直接扔在<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">

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

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

lyzklkl 发表于 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>

像番茄加两个蛋 发表于 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了！！！感谢不二老师！！！

易改乌江水 发表于 2018-1-20 20:54:41

本帖最后由易改乌江水于 2018-1-20 20:56 编辑

学了不二老师的课后，我把我从前做的电子物理课本浏览改了一下当做作业。
<!DOCTYPE HTML>
<html>
<body style="background-color:skyblue">
<h1style="text-align:center">
九年级
</h1>
<div id ="unit_13">
<p style="text-align:center">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="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">
<ahref="html11.html">
<img border="0" src="physics\the grade nine\22\22-165.jpg" />
</a>
</p>
</div>
</body>
</html>

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

ttyhtg 发表于 2018-1-30 17:10:18

打开notepad++才想起来之前看过一点点，不过因为备考，没再看了。现在我想python和html同时学，不知道会不会学混了啊。

夕颜梦雨 发表于 2018-2-26 09:46:21

本帖最后由夕颜梦雨于 2018-2-26 09:47 编辑

交作业

alltolove 发表于 2017-1-7 20:21:20

怎么不给区块起个类名{:5_94:}

不二如是 发表于 2017-1-7 21:02:01

alltolove 发表于 2017-1-7 20:21
怎么不给区块起个类名

起的名字就叫，“container”

dreamdnj 发表于 2017-2-15 23:19:19

通俗易懂，感谢楼主！！

不二如是 发表于 2017-2-16 07:12:24

dreamdnj 发表于 2017-2-15 23:19
通俗易懂，感谢楼主！！

！！！

alanbruk 发表于 2017-2-27 18:57:07

菜鸟来学习学习

biyiy929 发表于 2017-2-27 23:21:29

评论一下吧

hanlenry 发表于 2017-3-1 16:27:49

应该是h1最大，h6最小吧

longwutian004 发表于 2017-3-2 15:54:11

hanlenry 发表于 2017-3-1 16:27
应该是h1最大，h6最小吧

说对了，估计一不小心输入错了

时间被轻轻踏碎 发表于 2017-3-27 21:15:43

{:10_266:}{:10_266:}{:10_266:}赞

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> 
<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>

馆长の微笑 发表于 2017-6-7 19:18:33

<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
</head>
<body>
<divid="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 向前端老师致敬</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>
交作业

aswyamato1989 发表于 2017-7-5 07:51:45

继续学习，感谢楼主分享。

542624047 发表于 2017-7-5 16:11:41

{:10_266:}在学习。

义云月 发表于 2017-8-25 22:49:01

感谢楼主1!!! 学习中

白文龙 发表于 2018-1-7 07:16:41

好

页: [1] 2

鱼C论坛's Archiver

0 0 0 3 - 增加说明文字、区块