Web前端入门级教程学习（一）_第1页
Web前端入门级教程学习（一）_第2页
Web前端入门级教程学习（一）_第3页
Web前端入门级教程学习（一）_第4页
Web前端入门级教程学习（一）_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端入门教学（一）1、什么是前端前端对于网站来说，通常是指网页，网站的前端部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。前端设计一般可以理解为网站的视觉设计，比如UI设计；前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript等。前端开发的核心部分主要是：HTML，CSS，JavaScript

三个部分。HTML

是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构；

CSS

部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等；

JavaScript

是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。2、网页组成一个网页的组成部分主要包括下面几个部分：文字、图片、输入框、视频、音频、超链接

等。3、Web标准说到Web标准，不能不说W3C组织（WorldWideWebConsortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C最重要的工作是发展Web规范，这些规范描述了Web的通信协议。简单的说就是就是确定Web页面的语法格式和规范的。与之类似的一个组织是「EuropeanComputerManufacturersAssociation」（ECMA组织），这个组织制定了标准的脚本语言规范ECMAScript，而JavaScript就参照的这个规范。那么Web标准规范了下面三个部分：HTML标准（结构标准），相当人的骨架结构。CSS样式（表现）标准，相当于给人化妆变的更漂亮。JavaScript行为标准，相当与人在唱歌，页面更灵动。4、浏览器内核浏览器内核是一个浏览器的核心部分，也就是「渲染引擎」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。这里涉及到一个「兼容性问题」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。常见浏览器以及对应的内核：内核代表浏览器描述TridentIE

IE浏览器IE内核，是微软开发的一种排版引擎GeckoFirefox

火狐浏览器Gecko是当年最流行的排版引擎之一，仅次于TridentWebkitSafari

Safari浏览器苹果浏览器内核，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高ChromiumChrome（前期）fork自苹果的Webkit内核，谷歌前期使用，后期谷歌联手Opera自研和发布了Blink引擎BlinkChrome/Opera

Chrome/歌剧Blink内核诞生于2013年4月。Blink其实是基于WebKit的PrestoOpera前内核,已废弃2013年被Blink取代5、认识HTML通常我们看到的网页，都是以

.htm

或

.html

后缀结尾的文件，因此将其俗称为HTML文件。HTML指的是超文本标记语言，它是用来描述网页的一种语言。所谓超文本，有2层含义：它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。6、HTML结构标准HTML基本结构如下：<!DOCTYPEhtml>

是告诉浏览器，以下文件用HTML哪个版本解析，这里是HTML5版本。<html></html>

标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。<head></head>

是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入JavaScript脚本，CSS格式等。<body></body>

是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。7、html标签分类HTML标签从数量上分为单标签和双标签。单标签：

<!Doctypehtml>

双标签：

<html></html>，<head></head>，<title></title>8、html标签关系分类包含（嵌套关系）：<head><title></title></head>

父子关系并列关系：

<head></head><body></body>

兄弟姐妹9、开发工具前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是Windows系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。推荐使用的是「VisualStudioCode」，VScode是一款轻量级的编辑器，安装包小，启动速度快，而且功能非常强大，以及成为前端不可缺少的编码利器。提到Web开发工具不得不提到JebBrain全家桶的「

Webstorm

」软件。目前已经被广大Web开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论