这是我参与「第四届青训营」笔记创作活动的的第1天
什么是前端？
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端小程序
- IVR/AR等
- Web技术栈
- JavaScript-行为 （负责网页模型的定义和页面的逻辑交互）**
- CSS-样式 （负责页面元素的外观和位置等页面样式（如颜色大小等））
- HTML-内容 （负责页面元素和内容）
- 网络协议栈 （HTTP与服务端进行通讯）
前端应该关注的方面
- 功能的实现
- 是否美观
- 无障碍
- 安全性
- 性能（如页面渲染速度）
- 兼容性（多端页面的优化）
- 用户体验
初识HTML
HTML(HyperText Markup Language)不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。标记语言并不具有编程语言的逻辑与行为的能力，它由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
1.元素的概念
一份HTML文档由若干个元素组成，注意元素并不等于标签。
- HTML元素 = 开始标签 + 结束标签 + 元素内容
<p>这里是内容</p>
- 一些元素只有一个标签，如img、input、br等
<img src="">
- HTML元素标签不区分大小写, 不过为了统一标准尽量用小写
<P>这里是内容</P>
- 元素可以嵌套在其他元素中间
<p>这里是<em>内容</em></p>
- 元素可以拥有属性，属性包含有元素的额外信息,下面< a>标签中包含了href,title,target三个属性
<a href="" title="" target=""></a>
2.HTML结构
先看一份标准的HTML文档代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的测试站点</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>
-
<!DOCTYPE html>: 声明文档类型,放在HTML文档最前面，浏览器会按照W3C的HTML5标准来解析渲染页面 -
<html></html>:<html>元素。这个元素包裹了整个完整的页面，是一个根元素。 -
<head></head>:<head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。 -
<meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别HTML文档中的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。 -
<title></title>: 设置页面标题，出现在浏览器标签上，当标记/收藏页面时它可用来描述页面。 -
<body></body>:<body>元素。包含了访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
