文章目录
前端介绍
前端：
前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师
解决GUI人机交互问题；
跨终端（PC/移动浏览器；客户端/小程序；YR/AR等）；
Web技术栈（html/css/js/HTTP网络协议）
前端技术栈：
HTML（内容）、CSS（样式）、 JavaScript（行为）运行在浏览器里；浏览器通过HTTP网络协议与服务器通信
前端关注方面：
美观、功能、无障碍（如色盲症）、安全、性能（流畅；体验型好）、兼容性（浏览器；手机）、用户体验
前端边界？
用node.js开发服务端应用；
用electron/rn(react native)开发客户端应用；
用Web RTC进行在线传输，实现多人会议；
用WebGL开发流畅3D游戏；
用WebASSEMBLY将C++/Rust或其他语言编写的代码编译成直接在浏览器里可运行的代码；… …
发展快，技术不断更新，需要不断学习
开发环境
浏览器；
编辑器。
HTML
HTML:HyperText MarkUp Language
超文本：包括图片、标题、链接、表格等内容；
标记语言：用标签如h1表示一级标题
文章标题
标签上可设置属性<img src="photo.jpg"/>;包括属性名（src）与属性值
完整例子
<!doctype html>标记版本，浏览器用什么渲染
//根
//需要但不用呈现给用户的
</head>
<body>//呈现给用户的内容
</body>
</html>
DOM树（每个节点是dom节点）
HTML语法
标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required(必填字段)、readonly
HTML标签
标题h1~h6 :一级标题~六级标题
列表:
有序列表：（order list）
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
（如电影票房排行榜有排序）
无序列表：(unordered list)
<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
(如购物清单无序有小黑点)
有属性名+属性值列表（key value）
<dl> //(定义列表)definition list
<dt>导演：</dt> //definition title
<dd>陈凯歌</dd> //definition description
<dt>主演：</dt> //（多对多）一个dt可以有多个dd；多个dt也可以有多个dd
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
链接
target="_blank":新窗口打开
src与href:
src嵌入页面;href外部引用
多媒体（图片/音频/视频）
<img src="" alt="" width=""/> //alt=""替代文本信息，不加载时显示
<audio src="" controls></audio> //controls表示播放控件
<video src="" controls></video>
auto-play：不是加了就能自动播放；之前打开过这个域名下的网站，并且手动点过播放，浏览器认为你认识这个网站，知道它的行为，自动播放会生效。
表单类控件–输入
<input placeholder="请输入用户名"> //输入框
<input type="range"> //滑动条
<input type="number" min="1" max="10"> //输入数字控制范围
<input type="date" min="2018-02-10"> //日期
<textarea>Hey</textarea> //多行文字
<p>
<label><input type="checkbox"/>🍎</label>
<label><input type="checkbox" checked />🍏
</label>
</p>
<p>
<label><input type="radio" name="sport"/>⚽</label>
<label><input type="radio" name="sport"/>🏀</label>
</p>
<p>
<select>
<option>🥑</option>
<option>🥩</option>
</select>
</p>
<input list="countries"/>
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
用户在选项中选择：
1.多选
2.多个选项name相同时用户只能选择一个（互斥）
3.下拉选择：option写在select里
4.用户可自己输入，又给用户一些提示在list中设置提示的文字；其他输入并不影响，只是有一些快捷输入方式
文本
<blockquote cite="http://t.cn/RfjKO0F">
<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>
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
引用：（3个）
blockquote:块级引用
cite标签：短引用（作品、书的名字，章节标题等）
q:短引用（具体引用内容）
code:代码引用;多行代码外用pre包裹（用特殊的编程字体：等宽字体展示）
表示强调：突出重要严重，强调紧急;突出语气、语境的强调，重读等
<iframe>:嵌入别的内容并且不用与页面太多交互都可以用，但是缺点也很多比如弹出弹窗的阴影不能覆盖到整个页面
内容划分
页头header(导航nav)
页面主题main(文章article可以有多个)不主要aside
页尾footer(放版权等等)
语义化是什么
1.HTML中的元素、属性及属性值都拥有某些含义
2.开发者应该遵循语义来编写HTML
如有序列表用ol，无序列表用ul；lang 属性表示内容所使用的语言（方便浏览器翻译识别）
谁在使用我们写的HTML：
开发者 – 修改、维护页面
浏览器 – 展示页面，根据标签等
搜索引擎 – 提取关键词、排序，搜索引擎优化
屏幕阅读器 – 给盲人读页面内容，图片受制于网络流量等不能显示；无障碍对于正常人也不方便如字体大小、页面颜色对比度在室外等
语义化的好处：
代码可读性；可维护性；搜索引擎优化提升；无障碍性
传达内容而不是样式：如标题文字可以用style，也可以直接用
标签（更推荐）如何做到语义化?
了解每个标签和属性的含义；思考什么标签最适合描述这个内容；不使用可视化工具生成代码
如废除center样式标签，留下语义内容标签
UI库尤其要注意语义化
plus:
看MDN 、W3C了解规范
绝大多数场景不用考虑ie
跨域：请求只能使用本域的资源，不能使用别的资源，浏览器有同源策略限制获取
和推荐button
使用div代替按钮,要告诉浏览器是按钮，给div加额外标签aria相关属性role=“button”，但是不够简洁
离线存储：Local storage本地存储内容；控制请求显示,离线显示离线内容、有网络时显示在线内容用Service Worker
重点：语义化、HTML特性
总结
提示：这里对文章进行总结：
例如：以上就是今天的笔记内容，本文简单介绍了前端与HTML的相关重要概念及理解，更多有关前端的介绍参考后续文章。
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
