这是我参与【第五届青训营】伴学笔记创作的第1天。
本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开,层层解析前端技术栈的构成,以及作为前端最为基础的技术 - HTML 基础语法和基本功能,在实际研发过程中如何做到 HTML 语义化。
一、本堂课重点内容:
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
二、详细知识点介绍:
前端技术栈
前端的开发环境
HTML基本标签
- 第一行标记了标记了HTML版本,决定了渲染模式
- html 根标签 body 显示的主体
- DOM树:树形结构
- 标签:
1.标题 h1~h6 依次降低字号
2.列表 有序列表
ol中包含li:自动显示序号,从小至大
无序列表
ul中包含li:默认出现⚪
自定义列表
dl:定义列表
dl中包含dt、dd,dt:自定义列表标题 dd:值(描述)——多对多关系
3.链接 target:打开新页面
4.图片音乐视频 图片:img - src 属性值
- alt 可替换文本
- width 宽
音乐:audio - src 属性值
- controls 播放控件
视频:video - src 属性值
- controls 播放控件
5.输入input 这里插入一个比较全面的input标签介绍 HTML表单标签(input)
6.单选框radio 分组用name
7.下拉选择select 8.快捷输入datalist 9.文本类标签 - 快捷引用
长引用blockquote 短引用cite(名字章节)q(内容) - 代码code(等宽字体展示) pre:多行代码
- 强调strong(内容重要紧急)em(语气强调)
内容划分
语义化
- HTML中的元素、属性及属性值都拥有某些含义。
- 开发者应该遵循语义来编写HTML
- 好处: 传达内容,而不是样式
三、参考:
- developer.mozilla.org/en-US/docs/… MDN上的 HTML 参考,包含每个标签和属性的详细说明
- 如何实现语义化(建议)