前端与 HTML | 青训营笔记

用户790825816225
286 阅读2分钟

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

本节课的重点内容

  • 前端开发注意点
  • HTML的结构与一些简单的HTML标签

前端开发注意点

在进行前端开发的过程中，我们要做出相对较好的产品，需要注意以下几个方面：

  1. 功能：做出的产品需要满足用户的需求
  2. 美观：做出的产品界面需要符合用户的审美
  3. 无障碍：产品对一些特殊人群以及在特定条件下也能够正常使用，例如：产品对一些残疾人士来说也能够正常的使用，或者在特定条件下，如强光下，正常人也能正常使用。
  4. 安全：网站是否存在漏洞
  5. 性能：产品能够流畅的使用等，如：动画播放是否流畅
  6. 兼容：产品对于大多数浏览器来说都能够正常使用

HTML

HTML结构的介绍

  • [DOM结构]

下面是DOM基本结构图 document.png

一个页面应该包含 <html>、<head>、<body>,而<head>标签下应该包含<meta>与<title>等标签，<body>标签主要包含页面的内容标签，即展示在页面上的标签结构

[小案例]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html学习</title>
  </head>
  <body>
    <h2>这是字节青训营学习第一天</h2>
  </body>
</html>

在页面上展现的效果如何下：

2.png

  • -[HTML各部分简介]

<head>

它的内容不会在浏览器中显示，它的作用是保存页面的一些[元数据],它包含了诸如页面的 [<title>]（标题）、指向 [CSS]的链接。

<meta>

它主要指定页面的编码方式

<title>

它主要指定页面的标题，如：

image.png

<body>

展示在页面上的内容

image.png

简单的HTML标签

课程介绍了一些HTML标签，如 h1~h6标签，列表（ol。ul、dl）标签，多媒体（img、video、audio）标签，a标签等

[h1~h6标签]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html学习</title>
  </head>
  <body>
    <h1>这是字节青训营学习第一天</h1>
    <h2>这是字节青训营学习第一天</h2>
    <h3>这是字节青训营学习第一天</h3>
    <h4>这是字节青训营学习第一天</h4>
    <h5>这是字节青训营学习第一天</h5>
    <h6>这是字节青训营学习第一天</h6>
  </body>
</html>

效果如下： image.png

列表（ol。ul、dl）标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html学习</title>
  </head>
  <body>
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
    </ol>
    <ul>
      <li>梨子</li>
      <li>橙子</li>
    </ul>
    <dl>
      <dt>片名</dt>
      <dd>人生大事</dd>
      <dt>演员</dt>
      <dd>朱一龙</dd>
    </dl>
  </body>
</html>

效果如下：

image.png

a标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html学习</title>
  </head>
  <body>
    <a href="https://www.baidu.com">baidu</a>
  </body>
</html>

效果如下：

image.png

多媒体标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html学习</title>
  </head>
  <body>
    <img src="C:\Users\Lenovo\Desktop\document.png" />
    <video width="800"  src="E:\Download\MobileFile\新录音 1.m4a" controls></video>
    <audio width="800"  src="E:\Download\MobileFile\新录音 1.m4a" controls></audio>
  </body>
</html>

效果如下：

image.png

结尾

在青训营第一天主要学习html基础，这些基础比较简单，但还是需要多加练习的。

avatar
文章
阅读
粉丝