您的位置：首页 > Web前端

web前端工程师要学习那些内容

2020-04-24 11:02 302 查看

一，最简单也是最基础的H5+C3

1，HTML4

<!DOCTYPE html>
<html>  <head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
1.基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h>
<p>这是一个段落。</p>

2.换行标签（br）

3.水平线标签（ hr）

4.文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本,缩小字体</small>
<strong>重要的文本，字体加粗</strong>

5.其他标签
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
（sub）下标文本
（sup）上标文本

6.链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

7.引入图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">

8.样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>

9.区块元素
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

10.无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>

11.有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

12.定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>

13.表格（Tables）
<tr>添加行 <td>添加单元格 <th>加粗字体
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

14.框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>

15.表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">文本字段
<input type="password">密码域
<input type="checkbox" checked="checked">复选框
<input type="radio" checked="checked">单选按钮
<input type="submit" value="Send">提交按钮
<input type="button" value="Send">普通按钮
<input type="reset">重置按钮
<input type="hidden">隐藏域
</form>

16.<select>菜单列表类表单元素
内容在表单内部，可以选择
<form>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
</form>

17.多行文本框
<textarea name="comment" rows="60" cols="20"></textarea>

18.字符实体（Entities）
(&lt);等同于 <
(&gt); 等同于 >
(&#169); 等同于 ©

2，在面试中经常会问到H5在H4的基础上增加了那些新的标签

1，新的语义标签
<hrader></header>	 		定义了文档的头部区域
<footer></footer>			定义了文档的尾部区域
<nav></nav>					定义文档的导航
<section></section>	 	定义文档中的节（section、区段）
<article></article>	 		定义页面独立的内容区域
<aside></aside>				定义页面的侧边栏内容
<detailes></detailes>		用于描述文档或文档某个部分的细节
<summary></summary>	标签包含 details 元素的标题
<dialog></dialog>			定义对话框，比如提示框

2，增强型表单
color			主要用于选取颜色
date				从一个日期选择器选择一个日期
datetime		选择一个日期（UTC 时间）
datetime-local选择一个日期和时间 (无时区)
email			包含 e-mail 地址的输入域
month			选择一个月份
number		数值的输入域
range			一定范围内数字值的输入域
search			用于搜索域
tel				定义输入电话号码字段
time				选择一个时间
url				URL 地址的输入域
week			选择周和年

3，<datalist> 元素规定输入域的选项列表
使用 <input> 元素的 list 属性与 <datalist> 元素的 id 绑定

<keygen>提供一种验证用户的可靠方法
标签规定用于表单的密钥对生成器字段。

<output>用于不同类型的输出
比如计算或脚本输出

**HTML5 新增的表单属性**

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required  属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。　

4，视频和音频　　 video   audio
5，canvas 绘图
6，地理定位    HTML5 Geolocation（地理定位）
7，拖放API     dragstart：拖动开始	drag：拖动中   	dragend：拖动结束
8，Web Worker
9，Web Storage
10，WebSocket（双工通讯的协议）

3，JavaScript

DOM+BOM+ECS5/6

**dom**
DOM(Document Object Model),文档对象模型。简单的说就是一套操作文档内容的方法。

DOM操作的四种基本方法：getElementById(), getElementsByTagname(), getAttribute(), setAttribute()

**bom:**
BOM简单的说就是浏览器对象模型，对BOM的操作就是对浏览器的功能和属性的操作；

BOM的核心是window,它是一个浏览器的功能实例，浏览器会为HTML文档创建一个专属的window对象，并为每一个框架创建额外的window对象。
window对象是BOM的顶层，所有其他对象都是通过window对象衍生的；但是在调用子对象的时候并不强制要求声明

DOM的document也是window的子对象之一；以下两种写法是相同的:

window.document.getElementById("herd")
document.getElementById("herd")

4，vue+react+angular

①.vue
号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。毕竟用这神器，代码码的飞快，项目也能快速上线。同时他也是双向数据流。有些人认为Vue是Angular和React的结合，既有Angular的模板语法也有React的组件化体系。

②.React
这个框架本身比较容易理解，他的结构很清晰，就是由十几个API组成，然后异步渲染，我们只需要处理好接口和维护就好了，但是很多人反映上手还是有一定的的难度的。React是单向数据流，代码写起来会较双向数据流的多一些，但是同样的排查问题时思路清晰很多。

③.angular
大家眼里比较“叼”的框架，甚至有人说三大框架中只有她能称的上一个完整的框架，因为他包含的东西比较完善，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能。对于刚开始学习使用框架的小伙伴们，可以推荐这个框架，学会之后简直能颠覆之前你对前端开发的认知。使用 TypeScript能够提高代码可维护性，有利于后期重构。双向数据流很方便，但是等业务复杂之后，你可能就搞不清楚数据流了。还有令人不开心的脏值检查，以及directive的封装并没有解决视图与数据关系完全分离，有时候还要用$digist强制触发检测。

5，bootstrap+layUI

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，它区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是为服务端程序员量身定做，开发者无需涉足各种前端工具的复杂配置，只需面对浏览器本身，使得开发十分便捷。

6，前端开发者常用的工具

vscode+svn/git+ps+吸色器

点赞
收藏
分享
文章举报

zhou_xijian 发布了3 篇原创文章 · 获赞 0 · 访问量 114 私信关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航