鱼C论坛

 找回密码
 立即注册
查看: 2268|回复: 2

[学习笔记] 【HTML5】第三期

[复制链接]
发表于 2020-4-1 07:59:12 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 风吹来了 于 2020-4-1 08:09 编辑

先复习一下上一期学的单词吧,body,head,title。要是忘了这三个单词什么意思的话,那么就去上一期的最后看一下,或者直接百度。

今天学的就是标题,这个标题又跟上一期的那个title标题不一样了,这个指的是显示在你网页内容里面的标题。

<h1>在这里可以输入你的标题</h1>

你看到这个h后面跟了个数字,有没有想会不会有h2呢?那么答案是肯定的,有!

h元素一共分为h1~h6,这六种形式,每种形式的用法都一样,只不过嘛,h后面的数字越大,那么它显示在页面上的字体效果反而会越小,不信?那我们就来试试。

<!DOCTYPE html>
<html>
<head>
        <title>我的剑,就是你的贱</title>
</head>
<body>
        <h1>剑</h1>
        <h2>剑剑</h2>
        <h3>剑贱剑</h3>
        <h4>剑剑贱剑</h4>
        <h5>剑贱贱贱剑</h5>
        <h6>贱贱贱贱贱贱</h6>
</body>
<html>

将上面这行代码复制一下,然后按照上一期讲的办法,具体我就不再说了,不然害怕你们喷我凑字数,然后你们就可以看到这个网页是什么样子了。

现在你可能会想,嘿嘿,那我以后想要小一点的字就用h6,大一点的就用h1,这个嘛,如果你只是学个HTML自娱自乐的话也不是不可以这么做,但是,如果你是想在前端开发上面做点事儿的话,那么恐怕就不太行了。

你可以去了解一下CSS,它是专门为网页设计样式的一种语言,但我们这里就不扯这个东西了,以后可能会出CSS的教程,也可能不会,所以你要是有兴趣的话我建议你可以自己去找点资料,就不用等我了。

好了,话题扯得有点远了,我们回到正题上来,h元素,一般用于定义文章的标题,h1定义最重要的标题,其他的则依次下降重要的级别。请注意,在下真的不建议您用h1~h6只为了实现不同的字体大小,除非,您只是为了学个HTML5自娱自乐或者是炫耀一下,否则真的建议您了解一下CSS。

同时浏览器会默认给h元素内容的上下分别加上一个空行。

这是我们现在了解到的第一个body元素里面的子元素,希望你能记得比较牢。

然后老规矩,继续学单词,毕竟每天也就这么一点点知识,你肯定很闲:

device:装置
width:宽度
scale:规模

接下来就当作课外读物看看就行:

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题,我们就只用它定义标题内容。

    语义化优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,如盲人阅读器根据语义渲染网页
有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

简单点说,语义化的意思就是这个标签该干什么你就让它干什么,比如说今天的h元素,那我们就只用它定义文章标题,就不要把它用在别的地方。

本帖被以下淘专辑推荐:

  • · HTML5|主题: 10, 订阅: 2
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-4-1 08:06:58 | 显示全部楼层
给两个建议:
1,代码最好用代码格式发
2,代码最好有缩进~

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
风吹来了 + 5 + 5 + 3 谢谢

查看全部评分

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

使用道具 举报

 楼主| 发表于 2020-4-1 08:09:25 | 显示全部楼层
qiuyouzhi 发表于 2020-4-1 08:06
给两个建议:
1,代码最好用代码格式发
2,代码最好有缩进~

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-23 09:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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