前端与HTML观后总结 | 青训营笔记

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

1.什么是前端？

顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

通俗一点就是我们所有能看到的页面内容（界面）。

前端图片

2.前端可以做什么？

解决GUI人机交互问题

GUI：图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。

Web跨终端开发

官方解释：任何基于TCP/ I P模型应用层协议的Web应用的请求方，都可视为“Web终端”，与此相对的就是Web Service。终端的核心价值是Web Service的表现形式与交互形式。

我来一句话概括：其实Web原本并非跨终端，但应用场景多了，就变成了"跨终端"。

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

Web技术栈的自由探索

3.什么是前端工程师呢？

一句话总结：就是使用Web技术栈解决多端图形用户交互问题的工程师。

4.前端技术栈有哪些？

1.首先前端必学的三种语言（基础）

1. HTML（Hyper Text Markup Language，超文本标记语言）,用来描述网页的一种语言。

温馨小提示：HTML不是一种编程语言，而是一种标记语言（Markup Language），标记语言是一套标记标签（Markup tag）。

1. CSS（Cascading Style Sheets，层叠样式表/级联样式表），描述了如何在屏幕、纸张或其他媒体上显示HTML元素。
1. JS(JavaScript)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言, 是一种脚本语言，是不需要进行编译的，也是浏览器中的一部分，经常用在web客户端脚本语言，主要是用来给html增加动态功能，是属于Web的编程语言。

温馨小提示 ：JS和Jave是完全不同的语言，不论是概念还是设计。

上述患难三兄弟又俗称前端三剑客，各司其职，分工合作：

HTML：定义网页的内容（结构/骨架）。
CSS：规定网页的布局（样式）。
JS：对网页进行编程（行为）。

2. 进阶学习：

前端虽然入门较为容易，但前端发展十分迅速，技术更新非常快，这就需要我们不断地去学习，努力抓住前端技术的前沿

1.. 学习前端框架（对界面部分进行封装，方便前端界面开发的框架 )

按照技术语言可以分为:

CSS框架：Bootstrap、Layui、Zui、Amaze UI
JS框架：jQuery、Foundation、easyui、Angular、React、Node
JSUI库：Angular Material、Material UI、Evergreen UI、VUX（移动端）、element UI、iView、Naive-UI、jQuery UI、flex、extjs、MiniUI、QUICK UI

按照设备类型分为:

PC前端框架：开发电脑网站用的，上面的几种框架都支持
移动前端框架：开发手机端wap网站或App用的，比较有名的有uviewui和uni-app，其中前者是ui组件库，后者是js封装底层框架。

核心知识的学习，例如：

Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
JSON（JavaScript Object Notation，JavaScript 对象表示法）是轻量级的文本数据交换格式。对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用。
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，一个让JavaScript运行在服务端的开发平台。

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

功能：

这个产品有什么功能？
解决什么问题？
满足客户什么需求？

美观：界面审美能否吸引客户。
无障碍：是否适用性高，色盲者，盲人等使用需要一定的考虑。
安全：能不能保证用户数据的安全？有没有漏洞被利用？
性能：页面动画是否流畅？网页响应速度是否快速？
兼容性：比如网页不仅适用于pc电脑端，也能够适用于移动手机端。网页是否适用于不同的浏览器？
体验感:作为与用户直接交互的界面，用户的体验感十分重要。

6.步入HTML，什么是HTML呢？

HTML：超文本标记语言（Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

Hyper Text（超文本）：一些图片，标题，链接，表格等。

Markup Language（标记语言）：标记标签。

//h1：一级标题标签
<h1>
    文章标题
</h1>
//a：链接标签 href是标签属性，属性值表示可以跳转的地址
<a href="https://www.baidu.com/">百度</a>

7.放在页面最前面有什么作用？

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

怪异模式（BackCompat）：浏览器使用自己的怪异模式解析渲染页面。
标准模式（CSS1Compat）：浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

8. HTML 语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input，meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required（required 属性规定必需在提交之前填写输入字段），readonly（ readonly 属性规定输入字段为只读。只读字段是不能修改的）

1. 标题标签

在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。

这里要注意一下，一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。其中，h1表示的是这个页面的大标题。就像写作文一样，你见过哪篇作文有两个大标题吗？但是，一篇作文却可以有多个小标题。

举例

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

分析

从预览图可以看出，标题标签的级别越大，字体也越大。标题标签h1~h6也是有一定顺序的，h1用于大标题，h2用于二级标题，……，以此类推。在一个HTML页面中，这6个标题标签不需要全部都用上，而是根据你的需要来决定。

h1~h6标题标签看起来很简单，但是在搜索引擎优化中却扮演着非常重要的角色。不过对于这些深入的内容，如果放在这里讲解，估计大家会看得一头雾水。

2.列表标签

在html中也可以创建列表，html列表一共有三种：

有序列表：使用ol标签来创建有序列表，使用li来表示列表项
无序列表：使用ul标签来创建无序列表，使用li来表示列表项
定义列表：使用dl来表示列表项，使用dt来定义示定义的内容，使用dd来对内容进行解释说明。

如下：

javaScript
1. 第一章
2. - const
  - let
3. 第二章
4. - function
  - object
java
1. 第一章
2. - class
  - package
3. 第二章
4. - private
  - public

3.链接标签

//a：链接标签 href是标签属性，属性值表示可以跳转的地址
<a href="https://www.baidu.com/">百度</a>

4.表单：让用户提供输入信息

<form>
        账号：<input type="text">
        <br>
        密码：<input type="password">
        <br>
        性别：<input type="radio" name="sex" id="nv"><label for="nv">女</label>
        <input type="radio" name="sex" id="nan"><label for="nan">男</label>
        <br>
        爱好：<input type="checkbox" name="hobby" id="basketball"><label for="basketball">篮球</label>
        <input type="checkbox" name="hobby" id="soccor"><label for="soccor">足球</label>
        <input type="checkbox" name="hobby" id="run"><label for="run">跑步</label>
        <br>
        生日：<input type="text">
        <br>
        邮箱地址：<input type="text">
        <br>
        电话：<input type="text">
        <br>
        地址：<select>
            <option value="山西省" selected="selected">山西省</option>
            <option value="山东省">山东省</option>
            <option value="河南省">河南省</option>
        </select>
        <br>
        验证码：<input type="text"><input type="button" value="获取验证码">
        <br>
        备注：<textarea rows="10" cols="40"></textarea>
        <br>
        <input type="checkbox"  id="agree" checked="checked"><label for="agree">同意</label><a href="#">《隐私条款》</a>和<a href="#">《隐私权相关政策》</a>
        <br>
        <input type="submit" value="提交"> <input type="reset" value="重置">
    </form>

5.表格

名称	2016-11-22	小计
重量	单价
苹果	3公斤	5元/公斤	15元
香蕉	2公斤	6元/公斤	12元
总价	27元

 <table align="center" border="1" cellpadding="20" cellspacing="0">  
        <caption>购物车</caption> 
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>
        <tr>
            <th >重量</th>
            <th >单价</th>
        </tr>
        <tr>
            <th>苹果</th>
            <td>3公斤</td>
            <td>5元/公斤</td>
            <td>15元</td>
        </tr>
        <tr>
            <th>香蕉</th>
            <td>2公斤</td>
            <td>6元/公斤</td>
            <td>12元</td>
        </tr>
        <tr>
            <th colspan="3">总价</th>
            <td>27元</td>
        </tr>
    </table>

9. 什么是DOM树？

相信很多初学前端的小伙伴，学了html, css, js之后，欣喜之余还有一丝小傲娇，没有想到那些大佬们口中又提到了DOM树。

你两眼一抹黑，年轻人总是要接受社会的爱(du)护(da) 。

DOM 是 Document Object Model（文档对象模型）的缩写。

为了那些被dom支配的日子，为了祖国的大好河山，为了下半辈子的幸福....

所以我们来谈谈什么是dom.

举个例子

我们日常生活中，经常会遇到一些写文档的工作，写一个论文 .docx 等等。我们可以改文本的字号，添加标题，增加内容，改变页眉页脚……

但在我们初期写html页面时，一旦代码确定，那么页面的整体显示就会确定下来！打开浏览器浏览你的页面，内心细腻的你，发现一处<p>我喜欢吃藕！</p>，但你明明想写的是"我喜欢吃"。那我们怎么办呢？我们吭哧吭哧的回到你的html文件，改了那段文本标签。

你想，我要是能在浏览页面时像写.docx 那样随便改文档就好了。正在你冥思苦想之际......

大佬们已经帮你想好了！

当你的服务器把html网页发送给用户时，用户的浏览器会解析你的html代码，生成dom树，css则会生成css规则树。有了这两个树，你的浏览器就可以渲染(生成整个页面)了！所有最终呈现的页面都是由我们的浏览器渲染生成的，这也是为什么我们在检查页面时(f12),对内容的修改会直接反应到页面上。因为它来到咱们这里，长什么样已经不是它可以控制的了。

你为她画了晓妆，你为她添了晚妆。

这个dom树有一个根节点<html>标签，由这个根，你的每一个<meta>标签，<p>标签，<title>,<h1>等等，以及他们的文本内容，在上面生长，我们可以很轻松的在这颗树上定位到他们的位置！这是给门牌号啊。这是数据的结构啊。

可上面说的明明是文档对象！

程序员都知道。对象就是对象数据 ➕ 对象函数

dom对象，在树形结构中，我们可以轻松定位到对应的标签位置，文本位置！

同时给大家提供了对这个结构修改-内容修改的内置函数，这也是对象模型的核心！

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

由DOM提供其他编程语言对于底层数据控制的支持。

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

提供了哪些方法呢？无非就是，四大计算机古典名著《增》《删》《改》《查》 。

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 .etc

这就跟js联系到了一起吧！有木有？我们先看一个简单的例子。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() { document.getElementById("p1").innerHTML = "我喜欢吃";
}
</script>
</head>
<body>
<p id="p1">我喜欢吃藕</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
</script>

<p>上面的段落被一段脚本改变了。</p>
</body>
</html>

呃呃呃，有了dom给你的文本定位，你拿到了p1家的门钥匙，月黑风高，你偷走了p1的藕……

id的添加是为了更好的定位，正是有了dom对象，这段js可以利用dom对象的方法，对dom树的内容进行修改。

于是乎我们可以在页面上通过js修改任何东西了。包括文本内容，层叠样式。

基于dom，利用js编程，我们可以让用户"动态的修改页面内容"，这使得网页更加灵活。

所以建议学习的顺序是学完js再对底层的dom有一个理解。

10 . 语义化是什么？

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

比如：

有序列表用ol；无序列表用ul
lang属性表示内容所使用的语言

语义化的好处

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

如何做到语义化？

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

谁在使用我们写的HTML

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

11.小结

温馨小提示：书写HTML注意：传达内容，而不是样式。

就算风吹散了冰雪，想念也会留存下来

前端与HTML观后总结 | 青训营笔记

前端与HTML观后总结 | 青训营笔记

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

1.什么是前端？

2.前端可以做什么？

3.什么是前端工程师呢？

4.前端技术栈有哪些？

1.首先前端必学的三种语言（基础）

2. 进阶学习：

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

6.步入HTML，什么是HTML呢？

7.放在页面最前面有什么作用？

8. HTML 语法

1. 标题标签

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

2.列表标签

3.链接标签

4.表单：让用户提供输入信息

5.表格

9. 什么是DOM树？

举个例子

10 . 语义化是什么？

谁在使用我们写的HTML

11.小结

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