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

一.前端

1.前端工程师需要解决的问题：

多端图形用户界面交互的问题

2.前段技术栈：

HTML，负责页面，结构，内容
CSS，设置页面的样式
JS，定义页面的定位

3.前端的作用

使用nodejs来完成服务端
通过electron来封装应用
通过react native技术栈完成手机端应用
通过WebGL完成流畅的3D渲染
通过WebAssembly加载c++等其他语言的程序

4.前端应该关注哪些方面？

功能，安全，体验，性能，美观，兼容，无障碍

二.HTML（超文本编辑语言）

1.head和body

head用于放页面元素和设置页面标题

body用于写入给用户呈现内容的代码

2.DOM树

浏览器拿到html代码后会进行一个解析，解析出一个DOM树

3.html语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合 eg：input meta
属性值推荐用双引号包裹
某些属性只可以省略 eg：required

三.HTML常用标签

1.标题h1~h6：

<h1></h1>

2.列表：

列表有三类标签：

（1）有序列表：

<ol>
	<li></li>
</ol>

（2）无序列表：

<ul>
	<li></li>
</ul>

（3）特殊列表：

<dl>
	<dt></dt>
	<dd></dd>
</dl>

3.链接：

（1）在当前页面跳转

<a href=""></a>

（2）在新窗口跳转

<a href="" title="_blank"></a>

4.多媒体

（1）图片

<img src="图片地址" alt="当图片因为某些原因而无法加载会显示这串文字">

（2）音频

<audio src="音频地址" controls></audio>

controls：默认显示浏览器播放控件

（3）视频

<video src="视频地址" controls></video>

5.短引用

<cite></cite>

6.代码引用

<code></code>

7.引用多行代码

<pre>
	<code></code>
</pre>

8.文字加粗

<strong></strong>

9.斜体

<em></em>

10.显示引号“”

<q></q>

四.语义化是什么

HTML中的元素，属性以及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

五.如何做到语义化

了解每个标签的属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

六.谁在使用我们写的HTML

开发者-修改，维护页面
浏览器
搜索引擎-提取关键词排序
屏幕阅读器-给盲人读页面内容

七语义化的好处

代码可读性强
可维护性高
搜索引擎优化
提升无障碍性

前端与HTML｜ 青训营笔记