这是我参与「第五届青训营」伴学笔记创作活动的第1天,以下是我的课堂笔记。 本次课程主要分为两个大板块:
1.介绍前端
2.介绍HTML
1.介绍前端
1.1 前端技术栈
1.2 前端需要关注哪些方面
功能、美观、安全、性能、无障碍、兼容、体验
1.3 前端的边界
随着新技术的不断发展,前端现在能做的东西已经超出了页面这种简单的范畴,前端在互联网行业是发展的非常快的一个领域,技术在持续的更新,我们也需要不断地学习才能跟上技术的发展
1.4 前端的开发环境
相对来说是比较容易上手(入门门槛低)
2.介绍HTML
2.1 什么是HTML
Hyper Text:图片、标签、链接、表格
Markup ,Language:</h1>文章标题</h1>
图片:
2.2 完整HTML代码的例子
效果:
浏览器将HTML代码进行解析,解析出的DOM树:
2.3 HTML语法
· 标签和属性不区分大小写,推荐小写
· 空标签可以不闭合,比如input、meta
· 属性值推荐用双引号包裹
· 某些属性值可以省略,比如required、readonly
2.3.1 标题标签
2.3.2 列表标签
2.3.3 链接
href:超链接
targete="_blank":新窗口打开
2.3.4 多媒体元素
alt:替代性文本(当图片加载不出时显示这段文字)
width:图片宽度
controls:播放控件
2.3.5 输入
textarea:输入多行文字
2.3.6 选择
input type="checkbox":多选
input type="radio":单选
2.3.7 文本内容
2.4 内容划分
2.5 原则
2.5.1 语义化
· HTML中的元素、属性及属性值都拥有某些含义
·开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
2.5.2 谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器–展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容