该笔记的原始学习内容可以见前端教程

1.Web前端基本介绍

Web前端分为三层：HTML、CSS、JS

HTML：超文本标记语言，描述网页的基本结构
CSS：层叠样式表，对网页进行美化
JS：Javascript，描述页面行为

2.浏览器的组成

浏览器由两部分组成，分别是渲染引擎和JS引擎。

2.1 渲染引擎

渲染引擎也被称为浏览器内核，是用来解析HTML和CSS的，决定了浏览器如何显示网页内容以及页面信息。渲染引擎是浏览器出现兼容性问题的根本原因。

2.2 JS引擎

JS引擎也被称为JS解释器，用来解析网页中的js代码，浏览器通过内置的解释器执行js代码。

3.HTML简介

HTML是超文本标记语言。

超文本表示其中可以表示图片、视频、音频等超出文本限制的内容，同时还可以从一个文件跳转到另一个文件
标记语言表示HTML中有一套标记标签，但是没有编译过程，HTML标签直接由浏览器解析执行

3.1 HTML的历史

(图源：03-初识HTML | 千古前端图文教程 (qianguyihao.com))

3.2 HTML中的专有名词

网页：由标记组成的页面
主页：王爷的起始页面
标记：如果称<p>是开始标记，则</p>是结束标记，均被称为标签
元素：标签及被标签标记的内容
属性：标签中的辅助信息
XHTML：符合XML标准的HTML
http：超文本传输协议

3.3 HTML的基本结构

HTML中标签通常是成对出现，也有少数是单边标记(<br>、<img>)，同时属性和标记之间通过空格分隔。

3.3.1 html中的骨架标签

标签名	定义	说明
<html></html>	HTML标签	根标签
<head></head>	文档的头部	头部标签中需要设定title
<title></title>	文档标题	标签页面中显示的题目
<body></body>	文档主体	页面中的内容

3.3.2 文档声明头与页面语言

文档声明头，即DocType Declaration，简称DTD。具体形式是：

1 2	<!DOCTYPE html> <!--表示是一个html文档，在html5中常用-->

页面语言

一般在文档声明头下指定页面语言类型，例如：

1
2
3

<!DOCTYPE html> 
<html lang='en'>
<!--<html lang='zh-CN'>-->

3.3.3 头部标签(head中的标签)

标签名	说明
<title>	指定整个网页的标题
<base>	为页面上所有链接规定默认地址
<meta>	提供页面的基本信息
<link>	定义文档与外部资源的关系

1.meta标签

meta标签表示基础配置项目，常见的meta标签如下：

charset：字符集，一般选择utf-8

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

viewport：视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width表示视口宽度等于屏幕宽度

Keywords：关键词，可以提高搜索曝光率

<meta name="Keywords" content="小新,拜仁,Neuerliu" />

Description：页面描述
自动跳转
<meta http-equiv="refresh" content="3;http://www.baidu.com">表示3秒后自动跳转百度页面

2.title标签

设定网页标题

3.base标签

base标签用于指定基础路径，指定后所有的a链接都是以该路径为标准

3.3.4 body标签

1.body标签的属性

bgcolor：设定网页的背景颜色
background：设置网页的背景图片
text：设置网页中的文本颜色
leftmargin：网页的左边距
topmargin：网页的上边距
rightmargin：网页的右边距
bottommargin：网页的下边距
link：默认显示的链接颜色
alink：鼠标放在链接上的颜色
vlink：点击链接后链接显示的颜色

2.注意事项

标签不能交叉嵌套
标签必须闭合
属性值要加""

诺小新 | Neuerliu

前端入门:(一)HTML基本介绍