Web编程入门(二): 描述网页的数据

1649644933   ·   发表于 2个月前   ·   编程代码
第一节:#Web入门一:html基本概念与入门常见问题#

「第一节复习在1楼」
「第二节内容在12楼」

大家好,我是那个学着说人话的下次一定。

如果你看了第一节,并且对HTML还是一头雾水,没关系,这一节开头会尽量简明地过一遍上一节主要的知识点。

为了适应葫芦侠的发帖模式(害),从这一节开始采用新的教学方法,平均一楼一个知识点,每个知识点都有对应的实例与实践内容,我会在把概念讲清楚的同时尽量说人话。

然后,因为我在前端编程和写教程方面也是初学者,所以如果有讲的不妥的地方,或者大家哪里有疑问,欢迎提出来。为了保证教程的观看体验,所有问题会在本节内容更新完毕后统一回复。

编程是一门实践性很强的课程,如果你不方便使用电脑,可以上网搜HTML在线开发工具(葫芦侠好像不能发外链,所以不推荐了),因为HTML、CSS、JavaScript在Web开发中基本是一体的,所以你选择的在线工具最好也支持CSS和JS。

好,废话不多说,开始这次的内容。
20 Reply   |  Until 1个月前 | 4784 View

test_test
发表于 2个月前

【过一遍 · 第一节】

在上一节中我们了解到,HTML全称超文本标记语言,是用来组织页面的。

什么叫超文本,就是同时包括文本与超越文本的信息,比如文字与超越文本的图片、音频、视频等等。想想你平常逛的网页,大部分不可能只有文字。

什么叫标记,如果你想在Word中把一段文字变成标题或者插入一张图片,你只需要用鼠标点几下就完成了,而在HTML中你可以使用对应的元素标记内容,完成相应的工作。比如:

[葫芦侠还会吞代码我是没想到的,这部分是HTML代码,请查看图片1]

可以看到,HTML做的都是你熟悉的事情,只不过采用的方式不同而已。

评论列表

  • 加载数据中...

编写评论内容

yaunwandian
发表于 2个月前

什么叫组织,比如有一堆信息:

“先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。出师表”

这段信息没头没尾的,为了更直观的表达意思,我们可以给它赋予结构,也就是所谓的对信息进行组织:

[这部分是代码,请看图1]

出师表是标题,而剩下的部分是段落,于是这段信息的结构就比较清晰了。

[这部分是演示图,请看图2]

评论列表

  • 加载数据中...

编写评论内容

lcr
发表于 2个月前

ps:葫芦侠胃口好,下面的h1、i、b等元素本来要用尖括号括起来的,知道意思就行了。

然后我们还了解到了语义和网页使用者。

什么是语义,上面的"出师表"三个字本来是没有语义的,被 h1 元素包裹以后它有了一个语义:主标题(一级标题)。
如何识别一段信息是否为主标题,对网页使用者们来说是有区别的。
网页使用者分为三类:普通网民、电子阅读器、搜索引擎。
拿上网冲浪的各位网民来说,判断一段信息是否是主标题,就看它是不是又大又粗还显眼就完了。
然而对剩下的两位来说,这种方式并不友好,因为它们是软件,不具备视觉器官。
电子阅读器和搜索引擎识别一段信息是否为主标题,主要看这段信息是不是被 h1 元素包裹,而非这段信息长啥样。
举几个例子,之后讲CSS的时候会介绍到 div 这个元素,这个元素默认没有语义也没有样式,它是一个容器,CSS可以定义其中内容的样式。我们可以为一个 div 定制样式,让它长的和 h1 一毛一样,人们可能会觉得毫无违和感,但是电子阅读器和搜索引擎可不认账,它们会将被 div 包裹的内容视为无语义的普通信息。

[这里演示图,请看图片1]

i 和 b 同样也是无语义元素。
i 元素对应着斜体强调元素 em ,但是 i 只有斜体没有强调。
b 元素对应着着重强调元素 strong ,同样的 b 只有加粗的样式效果,但没有着重强调的语义。
屏幕阅读器会用不同的口气读出被 em 和 strong 包裹的内容,但不会对 i 和 b 这样做。
所以才说,HTML定义网页的骨架,CSS定义网页的外表,长的再像,没有内涵,在死脑筋的计算机程序面前也是虚的。所以为了照顾机器,也为了自己网站的发展,请一定注意语义的问题,因为这会影响到你制作的网站的无障碍访问性和SEO(搜索引擎优化)。

评论列表

  • 加载数据中...

编写评论内容

家家酒
发表于 2个月前

既然讲到了元素,那就再提一嘴与元素有关的概念吧,详细的介绍请看上一节。

[元素的结构,请看图1]

评论列表

  • 加载数据中...

编写评论内容

1719963881
发表于 2个月前

元素可以这么嵌套:
[请看图1]
但不可以这么嵌套:
[请看图2]

评论列表

  • 加载数据中...

编写评论内容

asdfkns
发表于 2个月前

元素有两种分类法

第一种,按照样式分类:

块级元素(block):在页面中以块的形式展现,占一行。
内联元素(inline):在页面中占其实际内容的大小。

块级元素内能放内联元素,但内联元素内不能放块级元素。

第二种,按照结构分类

闭合元素(也称双标签):有开始标签、内容、结束标签的元素。
空元素(也称单标签):不需要通过内容来产生效果,只有开始标签的元素。

评论列表

  • 加载数据中...

编写评论内容

1797591992
发表于 2个月前

元素的属性

属性提供了元素的额外信息,比如:

[这部分是代码,请看图1]

class属性把这个元素分到了ohhhh这个类。

评论列表

  • 加载数据中...

编写评论内容

1649644933
发表于 2个月前

HTML文档的结构

[这部分是代码,请看图1]

head 中包含描述HTML文档的信息,比如网页的作者、描述、编码等,这些信息都是不直接显示的,head中的内容主要面向浏览器、搜索引擎等计算机程序。

body 也被称为主体,包含网页中可直接被浏览器显示的内容,比如文章标题、段落、图片、游戏、音视频等, body 中的内容主要面向我们这些小可爱(人类)。

评论列表

  • 加载数据中...

编写评论内容

zgw888666
发表于 2个月前

实体引用

用其他的形式来表示HTML中已经被赋予了语法含义的字符,比如:

小于号 用<表示
大于号 用>表示
普通空格 用 表示
双引号 用"表示
单引号 用'表示
& 用&表示

评论列表

  • 加载数据中...

编写评论内容

376383538
发表于 2个月前

注释

像[图片1]那样的内容会被浏览器跳过,常用来解释某段代码的逻辑。
还有一种只有IE浏览器支持的条件注释,感兴趣可以上网搜一下。

评论列表

  • 加载数据中...

编写评论内容
LoginCan Publish Content