前端与 HTML | 青训营笔记

kecat
479 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

第一个网页

新建一个.txt的文件

  • 在其中添加一些文字，比如Hello World
  • 保存文件
  • 修改文件的扩展名为.html文件
  • 使用浏览器打开页面

这个网页有什么缺点

  • 只能显示一段普通的文本
  • 浏览器不知道是否对这段文本加粗，放大，段落之间的间距

显示一条新闻

如果我们要显示一条新闻，那么可以通过某些元素来告知浏览器这部分内容如何显示

<h2>新闻标题</h2>
<p>这是第一段内容：第一段内容</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>

image.png

  • 而我们编写的<h2></h2>，<p></p>就是HTML元素

认识HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

  • HTML元素是构建网站的基石

什么是标记语言（markup language）？

  • 由无数个标记（标签、tag)组成；
  • 是对某些内容进行特殊的标记，以供其他解释器识别处理；
  • 比如使用<h2></h2>标记的文本会被识别为“标题”进行加粗、文字放大显示；
  • 由标签和内容组成的称为元素（element）

什么是超文本（ HyperText ）呢？

  • 表示不仅可以插入普通的文本（ Text ），还可以插入图片，音频，视频等内容；
  • 还可以表示超链接（ HyperLink ），从一个网页跳转到另一个网页；

认识元素

我们会发现HTML本质上是由一系列的元素（element）构成的；

元素的组成

  • 剖析一个HTML元素的组成：

屏幕截图 2023-01-15 173847.png

  • 这个元素的主要部分有：
  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落 在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果
  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素

元素的属性

  • 元素也可以拥有属性（ Attribute ）：

屏幕截图 2023-01-15 174134.png

  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中

  • 一个属性必须包含如下内容：

    1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。）
    2. 属性名称，后面跟着一个等于号
    3. 一个属性值，由一对引号“ ”引起来

  • 创建一个超链接元素a：

<a href="http://www.baidu.com">百度一下</a>

属性的分类

  • 有些属性是公共的，每一个元素都可以设置
    • 比如class，id，title属性
  • 有些属性是元素特有的，不是每一个元素都可以设置
    • 比如meta元素的charset属性，img元素的alt属性等

元素的嵌套关系

  • 某些元素的的内容除了可以是文本以外，还可以去其他的元素，这样就形成了元素的嵌套
<ul>
    <li>
        <div>
            <span>第一段文字</span>
            <span>第二段文字</span>
            <span>第三段文字</span>
        </div>
    </li>
<ul>

屏幕截图 2023-01-15 175520.png

为什么需要注释?

  • 程序员才懂的冷笑话:
    • 在我写这段代码的时候, 只有我和上帝知道这段代码是什么意思
    • 一段时间之后, 只有上帝知道是什么意思了
  • 为什么会出现这样的情况？
    • 随着学习的深入, 你的一个程序不再是几行代码就可以搞定的了
    • 可能我们需要写出有上千行, 甚至上万行的程序
    • 某些代码完成某个功能后, 你写的时候思路很清晰, 但是过段时间会出现忘记为什 么这样写的情况, 这很正常
  • 和同时协同开发
    • 在实际工作中, 一个项目通常是多人协作完成的. 可能是几个或者十几个等等
    • 这个时候, 你可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能
    • 如果你的代码自己都看不懂了, 更何况你的同事呢？

HTML的注释

  • 什么是注释
    • 简单来说，注释就是一段代码说明
    • 注释只是开发者看的，浏览器不会把注释显示给用户看
  • 注释的意义：
    • 帮助我们自己理清代码的思路, 方便以后进行查阅
    • 与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
    • 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
    • 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
avatar
文章
阅读
粉丝