这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
- 前端概览
- 什么是前端
- 用web技术栈解决多端用户端的GUI交互问题
- 前端的技术栈
- HTML(内容)
- CSS(样式)
- JS(行为)
- 网络协议
- 服务器端
- 前端的关注点
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容
- 体验
- 前端的边界
- 发展快
- 易上手
- 编译器+浏览器
- 什么是前端
- HTML
- HTML 简介
- 超文本标记语言
- DOM 树
- 常用标签
- html标签
- <html>
- 包含整个HTML代码
- 头
- <head>
- 不向用户展示的后台布置
- 主干
- <body>
- 向用户展示的文本与超文本部分
- 标题
- 六级标题
- <h1>
- <h2>
- ...
- <h6>
- 六级标题
- 段落
- <p>
- 列表
- 有序
- <ol>
- 无序
- <ul>
- 列表元素
- <li>
- key-value
- <dl> 表示键值对列表
- <dt> 键
- <dd> 值
- 有序
- 图片
- <img src="" alt="" width="">
- src是图片地址
- alt是图片内容/称呼
- width是宽度
- <img src="" alt="" width="">
- 链接
- <a href="" target="_blank">here
- href是链接地址
- target是点击链接后链接颜色
- here是显示的链接可触区
- <a href="" target="_blank">here
- 音频
- <audio src="" controls>
- src是音频地址
- controls表示用浏览器自带播放器
- <audio src="" controls>
- 视频
- <video src="" controls>
- 与音频同
- 输入
- <input placeholder="">
- placeholder是占行符
- <input type="">
- type
- range 范围
- number 数字
- date 日期
- checkbox 选项
- radio 单选用name控制
- type
- 多行输入
- <textarea>
- <input placeholder="">
- 选则
- 下拉选择
- <select>
- 可输入选择
- <datalist>
- 套用input，用这个list
- 选项
- <option>
- 下拉选择
- 引用
- 长引用
- <blockquote cite="">
- 短引用
- <cite>
- 引号
- <q>
- 长引用
- 代码
- <code>
- 多行代码
- <pre>
- 在后面加上<code>嵌套
- 文本类标签
- 重要，严重
- <strong>
- 重读
- <em>
- 重要，严重
- html标签
- 页面
- HTML 语义化
- HTML中的元素、属性及属性值都拥有某些含义；开发者应该遵循这些含义去开发程序。
- 意义
- 方便后续维护
- 利于浏览器展示页面
- 便于搜索引擎提取关键词
- 对无障碍有益
- 怎样做
- 了解含义
- 思考标签使用场景
- 不使用可视化工具生成代码
- HTML 简介
