这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
一 本课堂重要知识点
1.- 前端概览
- 什么是前端
- 前端的技术栈
- 前端的边界
- 前端的关注点
- HTML
- HTML 简介
- 常用标签
- HTML 语义
二
详细知识点介绍
前端的边界
其中web assembly把c++转化为浏览器语言
前端开发环境(一编译器,一最新浏览器即可)
编辑器:
vscode
vim
webstorm
浏览器
ie/edge
chrome
firefox
safari
HTML是什么
即图片标题链接表格与标记语言 形成DOM树
html语法
- 标签和属性不区分大小写,推荐小写
- 空标签可以不闭合,比如input,meta
- 属性值用双引号包裹
- 某些属性值可以忽略,比如required,readonly
标题 从h1到h6字体依次变大 列表标签
有序列表
ol下属li
无序列表
ul下属li
定义列表
dl下属dt,dd
链接
- 属性名alt为替代性文本
- 属性名width为图片宽度
- audio(音频)
- video (视频)
- controls属性名是使用浏览器默认播放控件
语义化
html中元素,属性,及属性值都有某些含义,开发者应遵循。
谁在使用我们的html语言
1.开发者修改及他人维护页面时
2.页面通过浏览器显示时
3.进行信息筛选提取
4.对残疾人提供无障碍服务
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
三
个人总结 主要记住无序有序表格对应标签,及链接标签的不同对应项,明白前端开发作用及意义