前端与HTML-day2笔记
前端：使用web技术栈，解决GUI人机交互问题。
服务器端通过网络协议 + 技术栈：HTML（内容），CSS（样式），JavaScript（行为）
前端应该关注：功能，美观（做出来的界面是否好看），无障碍（是否所有人都能用），安全，性能，兼容性（电脑上，手机上……），体验（前端，用户体验是很重要的）
开发环境：
浏览器：IE\chrome、Firefox、safari
编辑器：VSCode、Vim、webstorm
HTML(HyperText Markup Language)：传达内容而不是样式
：src 属性
Html标签是在该标签下写的
Head标签会放一些页面元素
Body是主题内容
DOM树：
Document—html—head（meta、title）、body（h1、p）
语法：
标签和属性不区分大小写、推荐小写
空标签可以不闭合，比如：input、meta
属性值推荐双引号包裹
某些属性值可以省略，比如：required、readonly
列表：
Ol：有序列表
Ul：无序列表
Dl：属性列表
链接：
文字
图片：
<img
src=”图片链接”
alt=“可替代文本，图片加载时显示“
width=“大小“
/>
音频：
<audio
src=”链接”
controls
/>
视频：
<video
src=”链接”
controls
/>
输入：
Hey<textarea> ![]() 选择输入： </label></p> <label><input type="radio" name="sport" />⚽</label> <label><input type="radio" name="sport" />🏀</label> </p> <p> <select> <option>🥑</option> <option>🐂</option> <option>🐏</option> </select> </p> <input list="countries" /> <datalist id="countries"> <option>Greece</option> <option-United Kingdom</option> <option>United States</option> </datalist> ![]() 引用： 长引用： blockquote cite="http://t.cn/RfjKOOF"> <p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种民众，就没有天才。</p> </blockquote> 短引用： <p>我最喜欢的一本书是<cite>小王子</cite>。</p> <p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p> 代码： <p><code>const</code>声明创建一个只读的常量。</p> <pre><code> const add = (a, b)=>a + b; const multiply = (a, b)=→>a* b; </code></pre>强调：
在投资之前，一定要做风险评估
。
Cats are cute animals.
内容划分：
页头（header）
导航（nav）
主体（main、article、aside）
参考链接，版权等（footer）
语义化：
HTML的元素、属性和属性值都拥有某些意义
开发者应遵循语义来编写：
有序列表用ol，无序列表用ul
Lang属性表示内容所使用的语言
好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性
了解每个标签和属性含义；思考什么标签最适合描述该内容；不使用可视化工具生成代码（MDN规范文档：HTML（超文本标记语言） | MDN (mozilla.org)）
给谁用？
开发者：修改、维护页面
浏览器：展示页面
搜索引擎：提取关键词、排序
屏幕阅读器：给盲人读页面内容
