这是我参与「 第四届青训营 」笔记创作活动的第一天
什么是前端？
- 解决GUI人机交互问题
- 跨终端 { PC/移动浏览器 客户端/小程序 VR/AR等 }
- Web技术栈 前端技术栈 HTML、CSS、JavaScript、网络协议（http）
前端关注点
功能、体验、美观、安全、性能、兼容、无障碍。
前端边界
node.js、ELECTRON、React Native、Web RTC、Web GL、WebASSEMBLY
开发环境
- 浏览器：IE/Edge、Chrome、Firefox、Safari
- 编辑器：VSCode、Vim、WebStorm
什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta 属性值推荐用双引号包裹
<input type=" " name=" ">
- 某些属性值可以省略，比如required、readonly
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML 段落
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
HTML 链接
HTML 链接是通过标签 <a> 来定义的。
<a href="https://juejin.cn/">这是一个链接</a>
内容划分
header、main、aside、footer。
语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不适用可视化工具生成代码
