这是我参与⌈第四届青训营⌋笔记创作活动的第7天。隔了一周的时间才整理第一天的笔记......前端学习仍然需要了解一些关于Internet的内容，这些内容可以帮助我们更好地理解相关工作原理。

什么是前端

官方定义前端就是网站前台部分，展现给用户的网页。前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发是网站的前台代码实现，我们这里所说的前端当然是指前端开发。

解决GUI（图形用户界面）人机交互问题
跨终端
1. PC/移动浏览器
2. 客户端或小程序
3. VR/AR等
Web技术栈

前端技术栈

HTML

结构

HTML（HyperText Markup Language）不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。
CSS

表现
JavaScript

行为

浏览器通过http协议与服务器端进行通信，浏览器从服务器中获取相应代码并对网页进行渲染。浏览器也可以把用户提交的表单或操作行为通过http协议提交到服务器端。

浏览器是如何对网页进行渲染的：

浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).
样式将被载入和解析，构成层叠样式表模型CSSOM(CSS Object Model).
在DOM和CSSOM之上，渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象（这在Webkit内核中被称为renderer或者渲染对象render object，在Gecko内核中被称为框架frame）。渲染树映射除了不可见元素（例如或者含有display:none;的标签）外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中，每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。换句话讲，渲染树是DOM的直观表示。
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout.浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素（tables需要多次pass绘制，pass表示像素处理和顶点处理）。
最后布局完成，渲染树将转化为屏幕上的实际内容，这一步被称为绘制painting.

前端应该关注什么

功能是核心

HTML基础

html文件的基本结构
html常用标记

1. 文本标记

标题标记：

    <hn align="center">标题文本</hn>  n为1~6，h1表示一级标题

字体标记：

    <font face="字体名称" size="字号">文字</font> size取值范围为1~7

段落标记：

    <p>段落文本</p>

换行标记：

    <br>

预格式化标记：

    <pre></pre>

转义字符：

&nbsp;表示空格、&gt;表示大于、&copy;表示版权符号

文字修饰标记：

    <b></b>、<strong></strong>表示加粗等

2. 列表标记

有序列表
无序列表
自定义列表

    <ul>  无序列表是ul，有序列表是ol
        <li>1</li>
        <li>2</li>
        <li>
            <ul>
                <li>3.1</li>
                <li>3.2</li>
            </ul>
        </li>
    </ul>

自定义列表

3. 超链接

    <a href="#" target="" title="">文本、图片或容器</a>

href:指定连接的地址。可以是本地地址、文章锚点、网络地址。上面我们指定的就是网络地址。

target:跳转方式。用来设置打开链接的方式。

_blank:在新的页面窗口打开
_self：在当前打开，相当于覆盖了当前网页内容。（默认）
_parent:在父窗口打开（跟框架有关）
_top:在当前浏览器打开，框架消失（跟框架有关）

title:提示文字，当鼠标放到超链接使提示的文字。

4.图片标记

    <img src="图片路径" alt="图片无法加载时的提示文本" height="图片高度" width="图片宽度">

5.其他常用标记

其他常用标记可参考MDN 上HTML的相关文档，包含每个标签和属性的详细说明： https://developer.mozilla.org/en-US/docs/Web/HTML/Element

前端与HTML|青训营笔记