前端与HTML ｜ 青训营笔记

北冥_有鱼
92 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第1天 下面是我对学习前端与HTML的笔记总结

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

前端技术栈

  • JavaScript（行为）
  • css（样式） <===========> 服务器端
  • HTML（内容）

前端应该关注哪些方面？

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容
  • 体验

HTML是什么？

HyperText Markup Language

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>段落内容</p>
	</body>
</html>

DOM树

dom.png

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 

  • 整个文档是一个文档节点 
  • 每个 HTML 元素是元素节点 
  • HTML 元素内的文本是文本节点 
  • 每个 HTML 属性是属性节点 
  • 注释是注释节点

HTML语法

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

内容划分

image.png

语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML

    • 有序列表用ol;无序列表用ul

    • lang属性表示内容所使用的语言

fa3bjl73.bmp

  • article : 代表一个在网页中自成一体的内容 , 通常需要包含一个 header/h1~h6 和一个 footer
  • header : 代表网页或 section 的页眉
  • footer : 代表网页或 section 的页脚。通常包含一些基本信息，如：作者、相关文档链接、版权资料等
  • section : 代表文档中的“节”或“段”。通常需要包含 h1~h6
  • nav : 代表页面的导航链接区域
  • main : 表示主要内容
  • aside : 最典型的应用是侧边栏

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝