这是我参与「第四届青训营」笔记创作活动的的第1天~
本堂课重点内容提要：
- 前端概要（定义/ 技术栈/ 应该关注的部分）
- HTML（是什么/ html语法/ DOM树/ 常用tag）
前端概要
-
什么是前端：使用web技术栈解决多端图形用户界面GUI的人机交互问题。
-
前端技术栈：html（结构）css（美观）js（行为），三者在浏览器中运行，而浏览器可以通过http协议和服务器进行通讯。
-
前端应该关注哪些方面（一个产品最直观的感受取决于前端）
- 功能
- 美观
- accessibility
- 安全（eg.数据安全）
- 性能（快 流畅）
- 兼容（多设备使用）
- 用户体验
-
前端的边界：有很多需要考虑的，远远超过页面的范畴。
HTML
什么是HTML?
HTML=hypertext markup language，其中hypertext超文本，指的是图片/标题/链接/表格...；markuplanguage指的是标记语言，通过放置tag来达到目的。
<img src="......"> 其中<img>为tag/element,src为属性attr.，"......"为属性值。
html文档结构
- doctype，指明正在使用的html版本，最终浏览器会根据这个版本选择渲染模式
- html，所有html代码包含在htmltag里
- head，放置页面的原数据，页面需要的但是不会直接呈现给client的
- body，真正呈现给用户的内容
DOM树
浏览器收到html代码后会将其解析为一个dom树形结构
html语法
- 标签和属性不区分大小写，推荐使用小写（之后会用到react/vue组件用大写，所以原生的就小写
- 空标签可以不闭合 eg. input meta （空标签就是这个标签里面不会再放其他内容
- 属性值用双引号包裹
常用的tag/element：
标题：<h1>-<h6>
列表：<ol>/<ul>/<dl>
<ol>：有序列表-前面会有默认123<ul>：无序列表，前面有黑点<dl>：definition list，内含dt（definition title）dd（definition description）
链接：<a>
anchor，超链接
多媒体：<img>/<audio>/<video>
其中属性alt替换显示内容为文本；controls出现为true默认显示播放控件
输入：<input><textarea>
选择：<select>
<input type=checkbox>可多选 <input type=radio name=>通过相同name属性互斥单选
下拉选择<select> <option>
有限选择的输入框 <input list> <datalist id=>
文本类标签：<blockquote><cite><q>
cite和q都是段引用，区别在于，cite一般表示作品的名字和章节，而q表示具体的内容
代码标签：<code>
粗体斜体标签<strong>/<em>
内容划分
html语义化
一句话来讲就是按规范行事，使用正确标签 如何做到语义化？参考mdn documentation
- 了解每个标签和标签的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
