大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: HTML和CSS 修改讲义

B站视频地址

说在前面

小前端:入门基础知识,力求简洁实用,供侧重于后端的同学学习

大前端:对JavaScript/ECMAScript更深入细致的理解,和前后端分离后前端流行框架vue.js,供侧重于前端的同学学习


元素(element)

复习:HTML是什么

学习HTML,其实就是学习一系列的标记(markup),而标记的核心就是元素。

元素由标签(名)、属性和文本内容组成,比如:

<h1 style="color:red">一起帮·源栈欢迎您!</h1>

其中:

  • 元素(element):整个这一行就是一个元素
  • 标签(tag)h1,又分为 开始 标签(<h1>)和 结束 (</h1>)标签
  • 文本(text)一起帮·源栈欢迎您!,放置在开始标签和结束标签之间
  • 属性(attribute)style="color:red",放置在开始标签中,又分为
    1. 属性名:等号(=)左边,style
    2. 属性值:等号(=)右边,color:red,用双引号()括起来。
      注意,这个双引号必须是半角的,而且以后我们学习的所有语言,所有的标点符号,都是半角的!

演示:依次取消标签和属性之后,页面呈现的变化

元素嵌套

即:一个元素中还可以包含另外一个或若干个元素。(演示)

这是HTML非常重要的一个特性!

元素嵌套不仅仅可以为HTML提供丰富呈现,还是(以后我们将要学习的)DOM树的基础。

PS:有了嵌套,元素和元素之间就会形成类似于(复习)层级关系。

但是注意:元素不能任意嵌套。至于应该如何嵌套,除了查文档(MDN):

  • 一是按语义理解,比如body是正文,title是页面标题,所以页面正文中就不应该有页面标题。
  • 二是看Visual Studio(VS Code默认还没有)提示,如果违反了HTML语法标准,VS会有波浪线提示:


HTML文档结构

VS中生成的html页面为我们提供了一个(HTML5)标准的html文档框架:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!--标题-->
    <h1>一起帮·源栈欢迎您!</h1>
</body>
</html>

以这种格式组织的html文件被称之为HTML文档。严格的说,一个HTML文档才是一个(完整的)网页,否则就只是一个片段

文档声明

文档顶部的
<!DOCTYPE html>

被称之为:文档声明。

(向浏览器)指明该文件的文档类型(Document Type)是html。

这是HTML 5的写法,浏览器会(应该)按HTML5规范进行解析。

嵌套结构

此外就是一个嵌套结构:

  • html:文章的顶级标签
    • head:头,里面的内容一般不予显示
    • body:正文,由浏览器显示的内容

这三部分内容也(应该)是必不可少的。

PS:此后不再强调“应该/必须”是指的“规范”应该,“按规范”必须……


head元素

head中的内容通常用于指示浏览器:

<head>
    <!-- 编码格式utf-8 -->
    <meta charset="utf-8" />
    <!-- tab上标题 -->
    <title>首页·一起帮</title>
    <!-- tab上图标 -->
    <link rel="shortcut icon" type="image/ico" href="/Images/logo.ico" media="screen" />
</head>

head中还有一些常用标签可用于SEO

<head>
    <!-- SEO用的描述和关键字 -->
    <meta name="description" content="大神自由飞的原创首发精品文章,菜鸟入门编程开发必看……" />
    <meta name="keywords" content="源栈 一起帮 自由飞" />
    <!-- tab上标题 -->
    <title>首页·一起帮</title>
</head>

(演示:略)


文字类标签

code is everything!

    <!--标题-->
    <h1>一起帮·源栈欢迎您!</h1>
    <h2>飞哥祝你学习进步,早日年薪过万!</h2>
    <!--还可以有h3,h4,h5,h6-->     <!--段落:注意HTML解析时忽略文本中的换行-->
    <p>你觉得这些选择本身,真的能够决定你的人生成败么?
         真正决定成败的,不是你选择之后的付出和努力么?你只是不敢选!
         所以随波逐流。你需要精神的力量,所谓勇气。
         而勇气,来源于鸡汤(划掉),来源于真心。
         只有当你真心想做一件事的时候,你才能迸发出你最大的热情,从而最全力以赴最持之以恒的投入,因此最有可能取得成功
         ——退一万步讲,就算不那么成功,做着自己喜欢做的事,开开心心一辈子也赚到了。</p>
    <p>同样有用的,还有榜样。榜样的力量是无穷的。</p>

    <!--换行-->
    我应该扪心自问:<br />
    我应该      扪心自问:<br /><!-- 多个空格会被省略成一个半角空格 -->
    我是在做个生意呢,还是在做一件事业?<br />

    <!--标注-->
    <i>教育是人照亮人。</i><br />
    <b>我有没有尽我最大的努力,去照亮他们?</b>

节选自飞哥的:教学质量还是招生营销?2020年,我理想主义一次

注意以上代码还包含了以下知识点

注释

复习注释的作用

注释不会被浏览器显示出来。换言之,浏览器不会将注释中的内容呈现给用户。

HTML中使用不多,因为:
  • HTML逻辑简单,一般不需要注释说明,也较少调试
  • 注释会增加HTML文件大小,影响性能(尤其是互联网早期)

自闭合标签

br就是一个自闭合标签。

如果开始标签和结束标签之间没有/不需要文本,就可以使用自闭合标签(是不是类似于一种简写?)

关于语义和样式

为了演示说明区别,我们会告诉大家:

  • h1比h2更大
  • p和p之间有间距,br没有
  • i倾斜,b加粗
  • ……

但是,我们不能因为要达到这种效果而选择使用这些标签。“实现某种效果”是CSS的工作!

我们选择使用何种标签,应该根据标签中的内容而定。比如:

  • 这是页面的一级标题,所以用h1标签
  • 这是一段话,所有用p标签;这是一行文字(典型场景:名片中一行一行的个人信息),所有结尾加br标签
  • 这几个文字要强调一下,所以用i或者b标签

PS:为什么这么绕?历史原因……

转义字符

@想一想@

我就想在页面显示大于(>)小于(<)符号,怎么办?

F12,或者,善用搜素引擎(bing:

字符 转义字符
" &quot;
& &amp;
< &lt;
> &gt;
不断开空格(non-breaking space) &nbsp;

这种能够“原样呈现”被某种语言所“占用”符号的特定符号,被称之为“转义字符”(有点绕,但飞哥也没查出个清晰易懂的解释,大家意会吧,^_^)



作业

@找找看@ 我们当前页面用了那些文字标签?


学习笔记
源栈学历
今天学习不努力,明天努力找工作

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 HTML和CSS 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码