这是我参与第五届青训营伴学笔记创作活动的第一天!
主要内容
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
前端工程师是使用Web技术栈解决多端图形用户界面交互问题的工程师。 html负责内容，css负责样式，JavaScript负责行为，浏览器通过网络协议与服务器端响应，再进行渲染，形成我们看到的界面。
重点html传达内容，而不是样式！！！
前端关注哪些方面？
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容性
- 体验
前端的边界？
- node.js服务器
- electron桌面应用
- react
- WebAssembly
标题标签？
有序？无序？自定义列表哪个好？
超链接？
<a href="要跳转的地方" target="_blank">超链接文本</a>
超链接之后超链接文本会变色，默认情况下在本窗口内跳转，如需在其他窗口中跳转需指定_blank。
<img src="" alt="">
src为需要插入的图片的路径可以用绝对路径也可使用相对路径。alt替换文本图片加载不成功时显示。
<video src="" controls></video>
视频标签利用controls来控制播放，也可配合loop循环播放。
<audio src="" controls></audio>
音频标签同样利用controls来控制播放，也可配合loop循环播放。
输入属性？
输入属性值的不同会有不同的显示效果
<input placeholder="请输入用户名">
提示文本，让用户有更好的体验感。
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2020-02-15">
<textarea>你好！</textarea>
textarea文本域标签，cols规定可见宽度，rows规定可见行数，右下角可拖拽。
<p><label><input type="checkbox">苹果</label> <label><input type="checkbox" checked>草莓</label></p>
label标签绑定内容与标签的关系，checkbox为多选框，多选多。
p><label><input type="radio" name="fruit">苹果</label> <label><input type="radio" name="fruit">草莓</label></p>
label标签绑定内容与标签的关系，radio为单选钮，只能选择一个。
文本标签？
<blockquote cite="引用的链接"><p>内容</p></blockquote> blockquote长引用
<p>我最喜欢的动物是<cite>狗</cite></p> cite双标签短引用
<p>在<cite>第一章</cite>,我们讲过<q>字符串是不可变量</q>。</p> q双标签短引用
<pre><code>const add = (a,b) => a+b;const multiply = (a,b) => a*b;</code></pre>
code引用代码
网页内容划分你了解吗？
- header网页头部footer 网页底部
- nav 网页导航 main 主要内容 aside 网页侧边栏
- section 网页区块 article 网页文章
html的语法？
- 标签和属性不区分大小写，推荐使用小写
- 空标签可以不闭合
- 属性值推荐使用双引号包裹
- 某些属性值可以省略
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
谁在使用我们写的html？
- 开发者-修改、维护界面
- 浏览器-展示页面
- 搜索引擎-提取关键字、排序
- 屏幕阅读器-给盲人读页面内容
要综合考虑到各种情况对于界面的影响！要按照规范去写！
重点html传达内容，而不是样式！！！重点html传达内容，而不是样式！！！重点html传达内容，而不是样式！！！重要的事情说三遍嘻嘻嘻^.^
加油！拒绝摆烂！让我们不负青春！在青训营度过充实的一天！
