前端与 HTML | 青训营笔记

零距离6161
528 阅读2分钟

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

学习前端与HTML首先就要了解

一:什么是前端?

  1. HTML(内容)
  2. CSS (样式)
  3. JavaScript (行为)

二:什么是HTML?

  1. HTML 指的是超文本标记语言: HyperText Markup Language
  2. HTML 不是一种编程语言，而是一种标记语言
  3. HTML 使用标记标签来描述网页

三:前端应该关注哪些方面?

  1. 兼容
  2. 美观
  3. 性能
  4. 功能
  5. 安全
  6. 无障碍

在了解了什么是前端和HTML之后,我们应该熟悉作为一个前端程序员需要使用的开发环境

浏览器:Edge/Chrome/Firefox/Safari

编辑器:VSCode/Vim/WebStorm

首先下面来看一段示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例代码</title>
	</head>
	<body>
		<h1>我的第一个标题</h1>
		<p>我的第一个段落。</p>
	</body>
</html>

测试效果:

6cf731d69ea9df601f78d7fed37175c.png

其次,我们来分析一下各个部分表示什么意思?

  • <!DOCTYPE html> :说明为 HTML5 文档
  • <html> :HTML 页面的根元素 -<head>:元素包含了文档的元（meta）数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <body>:页面内容
  • <title>:文档的标题
  • <h1>:一级标题
  • <p>:一个段落

最后我们在认识一下HTML的语法

四:HTML语法包含哪些内容?

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如 required、readonly

五:语义化是什么?

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML 例如:有序列表用ol;无序列表用 ul

看到这里相信大家对前端已经有了一个初步的认识,接下来我们认识一下DOM树(将HTML代码转换成一个对应的树形结构)

a16f2bb8f9446aeb7a689d06e423951.png

其中每一个节点也是一个DOM节点(这里先简单提一下)

最后,重中之重,HTML是传达内容的而不是传达样式的!!!!

例如:当我们使用一段文字作为标题时,我们应该尽可能使用h1标签来包含内容,而不是将字体放大,加粗等等,同时这样也是为了后面的维护人员能更好的了解代码的含义

avatar
文章
阅读
粉丝