前端与初见HTML ｜青训营笔记

zati
80 阅读5分钟

前端与初见HTML ｜青训营笔记

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

本章内容按照下面的顺序去编写：

1.前端是什么？

2.了解HTML

3.深入HTML

1.前端是什么 ？

那就废话不多说，直接进入正题。所谓的前端到底是什么呢？

前端指的是：网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页（简而言之就是你在手机或者电脑上直观看到的页面。）

一个网页是由HTML，CSS和JavaScript组成的，在网络上也会说“前端三剑客”。那么这三个到底是什么东西呢？

我们把一个网页去必比作一个人的话：

  • HTML ：身体
  • CSS ： 衣着打扮
  • JavaScript ： 产生交互的行为，比如说话，吃饭等

这三个东西相结合才能生成一个人，同理，这三个语言相结合才能生成一个我们所看到的网页。

2.了解HTML

截屏2022-07-27 00.06.00.png

在正式接触代码之前，我们先来了解一下什么是HTML？

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)

  • HTML 不是一种编程语言，而是一种标记语言 (markup language)

  • 标记语言是一套标记标签 (markup tag)

  • HTML 使用标记标签来描述网页

现在我们理解了什么是HTML，但是出来了一个新词标记标签，这又是什么东西？

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如   和   
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

现在我们知道HTMl语言是什么，那么前面说他不是一个编程语言，那么是如何在网页显示的呢？

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。例如：

<html>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

上面的例子会在网页上显示一个Hello World

在前面的解释中出现一个次叫做HTML文档，这是什么？

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

3.深入HTML

现在我们已经了解了HTML是什么，那么下面就来说明HTML常用的标签以及注意事项。

  1. <！DCOTYPE>：<！DOCTYPE>声明不是HTML标记；这是向Web浏览器发出的有关该页面所写入HTML版本的指令。
  2. <html>：<html>标签告诉浏览器这是一个HTML文档。<html>标记表示HTML文档的根。
  3. <head>：<head>元素是所有head元素的容器。<head>元素可以包括文档的标题，脚本，样式，元信息等。
  4. <title>：所有HTML文档中都需要<title>标记，它定义了文档的标题。显示在浏览器工具栏中。
  5. <meta>：</meta>标记提供有关HTML文档的元数据。元元素通常用于指定页面描述，关键字，文档的作者，最后修改的以及其他元数据。
  6. <link>：<link>标记定义文档和外部资源之间的链接。<link>标记用于链接到外部样式表。
  7. <script>：<script>标记用于定义客户端脚本（JavaScript）。<script>元素包含脚本语句，或者通过src属性指向外部脚本文件。
  8. <style>：<style>标记用于定义HTML文档的样式信息。在<style>元素内，您指定HTML元素应如何在浏览器中呈现。
  9. <body>：<body>标记定义文档的正文。<body>元素包含HTML文档的所有内容，例如文本，超链接，图像，表，列表等。
  10. <div>：div标签定义HTML文档中的一个分区或一个部分。
  11. <table>：table标记定义一个HTML表。
  12. <img>：图像标签在HTML页面中定义图像。
  13. <p>：p标签定义一个段落。
  14. <a>：a标记定义超链接，该超链接用于从一个页面链接到另一页面。
  15. <br>：<br>标记插入一个换行符。
  16. <ul>：ul标记定义一个无序（项目符号）列表。
  17. <li>：li标签定义一个列表项。
  18. <button>：button标记定义了一个可单击的按钮。
  19. <font>：字体标签指定字体，字体大小和文本颜色。
  20. <center>：中心标签用于使文本居中对齐。
  21. <form>：form标记用于创建HTML表单供用户输入。
  22. <source>：source标签用于为媒体元素（例如<video>，<audio>和<picture>）指定多个媒体资源。
  23. <span>：<span>标记用于对文档中的行内元素进行分组。<span>标记本身不提供视觉更改。
  24. <video>：video标签指定视频，例如影片剪辑或其他视频流。
  25. <audio>：音频标签定义声音，例如音乐或其他音频流。
  26. <header> : <header>标签是可表示介绍内容的容器，或者一组导航链接。
  27. <nav> : <nav>标签的内容主要用于导航
  28. <article> : <article>标识页面中的主体内容。以博客为例，每个帖子都是一个重要内容，可采用 Article 标识每一个帖子。
  29. <section> : <section> 用于标记页面上的重要的部分。该标记类似于将文档分为多个章节。
  30. <aside> : <aside>标签表示和页面主要内容有关，但不是页面的一部分，经常表示一个相关链接
  31. <footer> : <footer>标签和 Header 相对，表示文档或者章节的页脚，比如版权信息放在此标记中。

注意事项：

  • 有些HTML标签没有闭合标签，比如img，mate
  • HTMl标签通常都是成对出现的，即开放标签和闭合标签同时出现。
  • 注意语法规范，不要忘记<>两个箭头符号，没有肩头符号浏览器就不会认为这是一个HTML标签
  • 还有很多的HTML标签请查阅MDN文档学习

最后给大家说一下，学编程最好的方法就是搜索和实践，只有不断的搜索和实践，你才能进步。

avatar
文章
阅读
粉丝