我先讲一下互联网中我为啥要学前端这门知识,前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。从广义上来所有用户终端产品与视觉和交互有关的部分,都属于前端工程师的专业领域。从狭义上讲,Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品,涵盖用户PC端、移动端等网页,处理视觉和交互问题。相对于其他,前端更加直观,视觉,与客户沟通交互比较良好。
一、5大浏览器: 渲染引擎其实就是内核
IE、谷歌、火狐、欧朋、苹果
IE:Trident (内核) 微软 1995年 【Trident 三叉戟的意思】
谷歌: webkit (内核) 谷歌 【webkit 引擎的意思】
火狐:firefox (英文名) Gecko(内核) 【Gecko 壁虎的意思】
欧朋: opera (英文名) blink(内核)以前内核是:presto【blink 眨眼的意思】
苹果: safari(英文名) webkit(内核)
首先我们需要下载一个好的工具那就是VScode,
然后创建html页面
html:5 +回车
!+回车
1.网站:在网络上用于展示特定内容的组合;
2.网页:网页时网站中的一员 构成网页最基本的元素: 图片.链接.文字.声音.视频等元素组成 。
二、什么是 html?
Hyper Text Mark-up Language ; 超文本标记语言.
超文本: 不仅可以书写文字.还包括: 图片、音频、视频、超链接等.
标记语言: 是由一套标记标签组成的
标记: 构成网页的基本单位
标签: 由尖括号括起来的关键字
双标签:<开始标签>内容<结束标签>
单标签:<标签名> 或 <标签名/>
注释: 对代码的解释和说明, 不会被浏览器执行
ctrl + /
shirt+alt+a
三、HTML文档的基本结构
<!DOCTYPE html>
<!--
<!doctype> 文件类型定义DTD
作用:告诉浏览器该文档的版本信息,让浏览器解析器知道使用哪种语法解析文档
文档第一代码是HTML5标准网页声明,告知浏览器用HTML5标准解析此网页。
不是标签,是声明语句
必须写在HTML文档的第一行
-->
<html lang="en">
<!--
网页的根元素
定义整个HTML文档,包含head和body
lang属性
- 作用:定义当前文档显示文字的语言
- 语法:lang=“en”
(lang是language的简写)
- 取值:
en定义语言为英语
zh-CN定义语言为中文 -->
<head>
<!--
网页的头部信息 其内容不会显示在网页中
定义文档的头部,包含文档的标题(title),可以包含文档脚本(script),样式(style),meta信息以及更多的其他信息。
-->
<meta charset="UTF-8">
<!--
文档字符集
字符集(Character set)是多个字符的集合,便于计算机识别和存储各种文字。
在<head>标签内,通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
charset属性:设置编码方式
UTF-8:万国码,通用性较好
(2)常用的字符集
- UTF-8被称为万国码,包含全世界所有国家需要用到的字符
- GB2312简单中文,包括6763个汉字
- GBK包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
- BIG5繁体中文,港澳台等用
-->
<title>标题</title>
<!--
网页标题
添加到收藏夹时的标题显示在搜索引擎结果中的页面标题。
-->
</head>
<html>
<head></head>
<body></body>
</html>
父子关系---嵌套关系
兄弟关系---并列关系