这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
一、本堂课重点内容
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
二、详细知识点介绍
前端含义
- 解决 GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- ·Web 技术栈
前端技术栈
前端技术整体分三层：
HTML（内容）、CSS（样式）、JavaScript（行为）
关注方面
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容性
前端边界
开发环境
HTML含义
HyperText Markup Language，是首字母缩写。
HyperText 这个是包含图片、标题、链接、表格；Language这个是包含标签。
- 标签内包含标签名、属性名和属性值
<!doctype html>标记渲染模式,可避免浏览器渲染出问题<head></head>用于存放页面元数据<html></html>文档根标签，存放所有其他标签<head></head>存放网页标题<body></body>存放网页内容
相关示例如下：
HTML语法
- 标签和属性不区分大小写，但是推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
HTML标签
- 标题标签： 有六个，从 h1 - h6 ，数字越⼤，则字体越⼩
- 有序列表标签：
<ol>里面包含li，有顺序，前面有序号 - 无序列表标签：
<ul>里面包含li，无顺序，前面有黑点 - 定义列表标签：
<dl>里面包含dt(头)与dd(尾)，自定义关系与顺序 - 图片标签：
<img>里面包含src，src是写图片信息，alt是不被加载是出现的温习信息 - 音频标签：
<audio>里面包含src，src是写音频信息 - 视频标签：
<video>里面包含src，src是写视频信息 - 输入标签：
<input>创建输入框，给用户输入信息。placeholder 可以进行输入框的提示或者表达该输入框需要填写的内容，作为引导使用；type 用于设置输入框的类型；date 可用于输入日期；min max 可用于规范输入的最小值和最大值。 - 选择框标签：
<select>、<option>可创建一个下拉选择框选择 - 文本标签：
<textarea>可创建一个文本输入框 - 长引用标签：
<blockquote>长引用，引用别人的一段话，cite属性表示引用的资料来自哪里 - 短引用标签：
<cite>短引用，引用别人的一小文字 - 代码引用标签：
<code>代码引用，显示代码内容 - 强调标签：
<strong>加粗内容
内容划分
- header里面包含nav
- main包含article
- 旁边包含aside
- footer包含尾部
语义化含义
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML。有序列表用 ol；无序列表用 ul；lang 属性表示内容所使用的语言
三、课后个人总结
- 对于HTML，要传达的不是样式，而是内容，切切实实的让用户了解到。
- 要熟悉HTML各个标签的含义，了解其作用，写的时候要按照规范来。
- 浏览器的兼容性也要考虑到，不兼容会影响用户阅读体验。
