前端与 HTML｜青训营笔记

83721LPF
114 阅读3分钟

标题：📖 前端与 HTML｜青训营笔记

网址：juejin.cn/post/712234… 这是我参与「第四届青训营 」笔记创作活动的的第1天

1.什么是前端

HTML（超文本标记语言 Hyper Text Markup Language）是用来描述网页的一种语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

用一句话描述：前端工程师使用Web技术栈解决多段图形用户界面交互问题的工程师。

2.前端技术栈

从宏观上来看，HTML定义网页的结构，CSS描述网页的外观，JavaScript设置网页的行为。

举个例子，如果将一个网页比作一个人的话，HTML就是一个人的身体，而CSS就是人的衣服，这些构成了一个植物人，加上javascript植物人就能对外界刺激做出反应，产生行为，成为真正的人。

浏览器可以通过http协议和服务器进行通信

前端.png

前端应该关注的方面：功能、美观、安全、性能、体验、兼容、无障碍

3.HTML是什么

（1）页面标签

首先来看一下简写

简写.jpg 下面是一个示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题</title>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<h1>一级标题<h1>
<p>我的第一个网页</p>
</body>
</html>

这是最简单的HTML文档，可以解释为：浏览器，我遵循W3C标准XHTML1.0过渡版本规范（文件类型声明），采用的编码是utf-8,我的标题是“网页标题”，描述我外观的样式表是我同目录的mycss.css文件，与我有关的javascript代码在我同级的myks.js文件中，我的内容有一个段落，段落的内容是“一级标题 我的第一个网页”。

DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。

DOM.png

（2）内容划分

内容划分.png

（3）语义化

语义化就是构成HTML结构的标签要有意义，比如：head表示页面头部，main表示页面主题，footer表示页面底部。那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。

（4）HTML使用者
  • 开发者-修改、维护界面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人阅读页面内容
（5）如何做到语义化
  • 了解每个标签和属性的含义
  • 思考适合描述的标签
  • 不适用可视化工具生成代码

总结

HTML的标签需要逐个学习并熟练使用，这样后期的项目进展才会较为顺畅。

avatar
文章
阅读
粉丝