前端与 HTML | 青训营笔记

69 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第1天,以下是我的课堂笔记。 本次课程主要分为两个大板块:
1.介绍前端
2.介绍HTML

1.介绍前端

1.1 前端技术栈

image.png

1.2 前端需要关注哪些方面

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

1.3 前端的边界

随着新技术的不断发展,前端现在能做的东西已经超出了页面这种简单的范畴,前端在互联网行业是发展的非常快的一个领域,技术在持续的更新,我们也需要不断地学习才能跟上技术的发展

1.4 前端的开发环境

相对来说是比较容易上手(入门门槛低)

image.png

2.介绍HTML

2.1 什么是HTML

Hyper Text:图片、标签、链接、表格
Markup ,Language:</h1>文章标题</h1>
图片:
image.png

2.2 完整HTML代码的例子

image.png

效果:

image.png

浏览器将HTML代码进行解析,解析出的DOM树:

image.png

2.3 HTML语法

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

2.3.1 标题标签

image.png

2.3.2 列表标签

image.png

2.3.3 链接

image.png href:超链接
targete="_blank":新窗口打开

2.3.4 多媒体元素

image.png alt:替代性文本(当图片加载不出时显示这段文字)
width:图片宽度
controls:播放控件

2.3.5 输入

image.png textarea:输入多行文字

2.3.6 选择

input type="checkbox":多选
input type="radio":单选

image.png

image.png

2.3.7 文本内容

image.png

image.png

2.4 内容划分

image.png

2.5 原则

2.5.1 语义化

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

  • 有序列表用ol;无序列表用ul
  • lang属性表示内容所使用的语言

如何做到语义化

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

2.5.2 谁在使用我们写的HTML

  • 开发者-修改、维护页面
  • 浏览器–展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容

image.png