前端与HTML ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天主题：前端与HTML 解决**GUI

这是我参与「第四届青训营」笔记创作活动的第1天

前端介绍

前端：

前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师

解决GUI人机交互问题；

跨终端：

PC/移动浏览器；客户端/小程序；YR/AR等；

Web技术栈（html/css/js/HTTP网络协议）

HTML：

HTML:HyperText MarkUp Language

超文本：包括图片、标题、链接、表格等内容；

标记语言：用标签如h1表示一级标题

前端技术栈：

HTML（内容）、CSS（样式）、 JavaScript（行为）运行在浏览器里；浏览器通过HTTP网络协议与服务器通信

前端应该关注：

美观、功能、无障碍（如色盲症）、安全、性能（流畅；体验型好）、兼容性（浏览器；手机）、用户体验

前端边界？

用node.js开发服务端应用；
用electron/rn(react native)开发客户端应用；
用Web RTC进行在线传输，实现多人会议；
用WebGL开发流畅3D游戏；
用WebASSEMBLY将C++/Rust或其他语言编写的代码编译成直接在浏览器里可运行的代码；

开发环境

HTML

HTML:HyperText MarkUp Language

超文本：包括图片、标题、链接、表格等内容；

标记语言：用标签如h1表示一级标题

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：外部引用；

多媒体（图片/音频/视频）

<!--alt=""替代文本信息，不加载时显示-->
<img src="" alt="" width=""/>
<!--controls表示播放控件-->
<audio src="" controls></audio>

<video src="" controls></video>

表单类控件–输入

<body>
<input placeholder="请输入用户名"><br>
<input type="range"><br>
<input type="number" min="1" max="10"><br>
<input type="date" min="2018-02-10"><br>
<textarea>Hey</textarea>
</body>

<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可以有多个)

页尾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 ｜ 青训营笔记