基于 seajs 的高性能网站开发和优化实践_王保平(淘宝),小企业网站模板,厦门企业官方网站建设,233小游戏达标要求 网页的形成过程 常用的浏览器及常见的浏览器内核 web 标准三层组成 什么是HTML 熟练掌握HTML文档结构 熟练掌握HTML常用标签
1. 初识web前端 Web前端是创建Web页面或App等前端界面呈现给用户的过程。 Web前端开发是从网页制作演变而来#xff0c;早期网站主…达标要求 网页的形成过程 常用的浏览器及常见的浏览器内核 web 标准三层组成 什么是HTML 熟练掌握HTML文档结构 熟练掌握HTML常用标签
1. 初识web前端 Web前端是创建Web页面或App等前端界面呈现给用户的过程。 Web前端开发是从网页制作演变而来早期网站主要内容都是静态用户使用网站的行为也以浏览为主。 随着互联网技术的发展各种终端设备应用程序与用户沟通交互的界面都是由Web前端开发完成。现今前端开发领域就更加广泛包含后端(nodejs)小程序开发Android和ios的App开发游戏大数据桌面应用等。 目前Web前端开发已成为互联网公司必备职业之一。
2. 了解网页和浏览器
2.1 什么是网页 网页是网站的基本单位也叫Web页面是承载各种网站应用的平台。 网页由主要由文字图片和链接构成除此之外网页的元素还包括表格、动画、音频、视频等等。
2.2 网页的形成过程
代码通过浏览器解析、渲染然后形成Web页面通过浏览器打开展示的效果。 2.3 浏览器
浏览器browser application是用来访问和浏览万维网页面的客户端软件是显示、运行网页的平台。
国际上常用的浏览器有
1.IE浏览器 → Edge浏览器
2.谷歌Chrome浏览器
3.safari浏览器
4.火狐Firfox)浏览器
5.Opera浏览器
被称为五大浏览器其中谷歌浏览器在全球市场上占有率最高开发人员一般使用的都是谷歌浏览器来进行测试。 2.4 浏览器的组成部分
浏览器有以下主要部分组成 用户界面 包括浏览器中可见的地址输入框浏览器前进返回按钮打开书签打开历史记录等用户可操作性的功能选项。 浏览器引擎(渲染引擎) 渲染引擎负责读取网页内容整理讯息计算网页的显示方式并显示页面。 JS 解释器 用来解释和执行 JavaScript 代码例如 V8 引擎执行 javascript语言来实现网页的动态效果。 网络功能模块 浏览器开启网络线程发送请求或下载资源文件的模块。 数据持久化存储 处于持久层浏览器需要在硬盘中保存类似 cookie 的各种数据。 2.5 什么是浏览器的内核(重点) 浏览器内核包括两部分:渲染引擎和js引擎。渲染引擎负责读取网页内容整理讯息计算网页的显示方式并显示页面js引擎是解析执行js获取网页的动态效果。
浏览器内核名称IE浏览器内核Trident内核也是俗称的IE内核Chrome浏览器内核以前是Webkit内核现在是Blink内核Safari浏览器内核Webkit内核Firefox浏览器内核Gecko内核俗称Firefox内核Opera浏览器内核最初是自己的Presto内核现在是Blink内核
2.6 浏览器的战争
浏览器大战Browser wars)指不同的网络浏览器为了争取用户优先使用占取市场份额的战争。
浏览器本身只是一个用来检索、展示以及传递Web信息资源的一个应用程序但是由于他本身的意义让他成为了互联网的入口让市场有了供给需求的关系因此浏览器之间的竞争是不可避免的。 3. Web 标准
Web标准使得Web开发更加容易Web标准由万维网联盟W3C制定。
3.1 为什么要Web标准 对于浏览器开发商和 Web 程序开发人员在开发新的应用程序时遵守指定的标准更有利于 Web 更好地发展。 开发人员按照 Web 标准制作网页这样对于开发者来说就更加简单了因为他们可以很容易了解彼此的编码。 将确保所有浏览器正确显示您的网站而无需费时重写。
3.2 Web 标准构成 Web标准不是某一个标准而是由W3C和其他标准化组织制定的一系列标准的集合。 w3c 万维网联盟组织制定web标准的机构。 主要包括结构Structure、表现Presentation和行为Behavior三个方面。 web主要包括结构、表现、行为三方面
含义内容结构用于对网页元素的进行整理和分类指的就是html表现用于设置网页元素的版式、颜色、大小等外观样式指的就是css行为指网页模型的定义以及交互的编写主要指的就是javascript
简单理解结构写到html文件中表现写到css文件中行为写到Javascript文件中。 4. VSCode的基本使用
Visual Studio Code (简称 VS Code / VSC) 是由微软开发的一款开源源代码编辑器免费开源的现代化轻量级代码编辑器支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 diff、git 等特性支持插件扩展并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。
4.1 VSCode安装
VSCode是免费的软件下载地址链接:官网下载
4.2 扩展程序安装各种插件
1.汉化
安装插件Chinese(simplified) 安装一遍然后重启软件即可。
2.在浏览器中打开网页
安装插件Open HTML in Default Browser用默认浏览器打开 HTML 文件 。
3.格式化代码
安装插件JS-CSS-HTML Formatter当你CtrlS保存代码时自动格式化代码。
5. HTML简介
HTML 的全称为 超文本标记语言Hyper Text Markup Language
所谓超文本因为它可以加入图片、声音、动画、多媒体等内容不仅如此它还可以从一个文件跳转到另一个文件与各地主机的文件连接。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag)
总结 网页是由网页元素组成的 这些元素是利用html标签描述出来然后通过浏览器解析就可以显示给用户了。简而言之HTML语法是用来描述文档内容的。
5.1 HTML发展历程 5.2 什么是XHTML?
XHTML 指的是可扩展超文本标记语言XHTML 是更严格更纯净的 HTML 代码
HTML和 XHTML之间有什么区别 XHTML 与 HTML 4.01 几乎是相同的 XHTML 是更严格更纯净的 HTML 版本 XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML例如它要求标签必须小写标签必须被正确关闭标签顺序必须正确排列对于属性都必须使用双引号等。
5.3 HTML文档结构
要创建一个HTML文档最简单的方法是创建一个文本文件然后将其扩展名保存成.html。
组成文档结构的元素只有4个这也是任何HTML文档都必须有的元素。 html文档中最大的标签我们称为根标签。 head元素提供了关于这篇文档的信息。 title定义页面标题。 body定义文档的主体用户所看到的内容。
5.4 完整的文档结构 文档结构说明 !DOCTYPE文档类型和版本的声明HTML5版本号可以省略。 langHTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。 根据 W3C 推荐标准您应该通过 html 标签中的 lang 属性对每张页面中的主要语言进行声明。 charsetUTF-8字符集 注意: 1.UTF-8则包含全世界所有国家需要用到的字符是目前最常用的字符集编码方式。 2.记住一点以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
5.5 HTML元素
元素Element由开始标签、闭合标签以及标签之间的内容组成。 5.6 HTML属性
元素可以用属性进行配置。属性由属性名和属性值组成例如 属性总是写在开始标签中。 属性名和元素名之间要有一个空格。 属性名后面要跟一个等号。 属性值使用双引号括起来。 一个元素可以有多个属性这些属性之间以空格分隔。
6.HTML常用标签
首先 HTML和CSS是两种完全不同的语言我们学的是结构就只写HTML标签认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多这里我们学习最为常用的后面有些较少用的我们可以查下手册就可以了。
6.1 排版标签
排版标签主要和css搭配使用显示网页结构的标签是网页布局最常用的标签。
6.1.1 标题标签
辅助记忆 head 头部
为了使网页更具有语义化我们经常会在页面中用到标题标签HTML提供了6个等级的标题 h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6 注意 h1 标签表示页面中最重要标题信息要求只能有一个h1标签。 6.1.2 段落标签
辅助记忆 paragraph 段落
标签表示文本的段落段落通常在文档中表示为文本块会自动在其前后创建一些空白。
p 文本内容 /p
6.1.3 水平线标签
辅助记忆 horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开使得文档结构清晰层次分明。
hr /
6.1.4 换行标签 辅助记忆 break 打断 ,换行 在HTML中用来设置文本强制换行显示。
br/
6.1.5 div标签 辅助记忆 division 分开 div标签本身没有含义在html中布局使用最多标签为div用来为HTML文档内大块的内容提供结构。 div 这是块内容 /div
div 这是块内容 /div
div 这是块内容 /div 注意点: div/div是块级元素独占一行 6.1.6 span标签 辅助记忆span 跨度跨距 。 span本身没有什么含义可用作文本的容器包含着文本内容还可以通过对span标签对象设置不同样式实现我们要的美化效果。 span 文本内容 /span
span 文本内容 /span
span 文本内容 /span 注意点: span/span是行内元素 6.1.7 排版标签总结 6.2 文本格式化标签(熟记)
在网页中有时需要为文字设置粗体、斜体或下划线效果这时就需要用到HTML中的文本格式化标签使文字以特殊的方式显示。 注意点: strong、em 、del 、ins 标签(推荐使用)有语义起到加重语气的效果; b、 i 、s、 u标签是没有的语气 6.3 图像标签img (重点)
辅助记忆 image 图像
HTML网页中任何元素的实现都要依靠HTML标签要想在网页中显示图像就需要使用图像标签其基本语法格式如下
img src图像URL /
属性 src该属性指定图片文件所在的位置可以是相对路径也可以是绝对路径。 alt该属性指定一段文本用来作为该图片的提示信息。 height指定图片的高度属性值可以是百分比也可以是像素值。 width指定图片的宽度属性值可以是百分比也可以是像素值。 title当光标放置图片上时的提示的文本信息。 注意引入路径问题 1. 图像文件和HTML文件位于同一文件夹只需输入图像文件的名称即可如img srclogo.gif /。
2. 图像文件位于HTML文件的下一级文件夹输入文件夹名和文件名之间用“/”隔开如img srcimages/img01/logo.gif /。
3. 图像文件位于HTML文件的上一级文件夹在文件名之前加入“../” 如果是上两级则需要使用 “../ ../”以此类推如img src../logo.gif /。
6.4 链接标签(重点)
辅助记忆 anchor 锚
在HTML中创建超链接非常简单只需用标签环绕需要被链接的对象即可其基本语法格式如下
a href跳转目标 target目标窗口的弹出方式文本或图像/a
属性: href( Hypertext Reference的缩写)意思是超文本引用用于指定链接目标的url地址当为标签应用href属性时它就具有了超链接的功能。 target用于指定链接页面的打开方式其取值有_self和_blank两种其中_self为默认值_blank为在新窗口中打开方式。 注意点 1.外部链接需要添加 http://www.baidu.com 2.内部链接直接链接内部页面名称即可 比如 a hrefindex.html 首页 3.如果当时没有确定链接目标时通常将链接标签的href属性值定义为#(即href#)表示该链接暂时为一个空链接。 4.不仅可以创建文本超链接在网页中各种网页元素如图像、表格、音频、视频等都可以添加超链接。 6.5 锚点定位
通过创建锚点链接用户能够快速定位到目标内容。
创建锚点链接分为两步 使用链接文本创建链接文本被点击的元素 a href#con 使用相应的id名标注跳转目标的位置。 (找目标位置元素) p idcon关于我们/p
6.6 网页的icon图标和网站相关信息
head 元素包含了所有的头部标签元素,使用link标签添加icon图标meta标签添加网站相关信息。 添加icon图标 link relshortcut icon hrefhttp://example.com/favicon.ico typeimage/x-icon meta元素可提供有关页面的元信息meta-information,是html语言head区的一个辅助性标签位于文档的头部,属性定义了与文档相关联内容。 meta charsetUTF-8
meta namekeywords content弱电工程,弱电工程公司,和智电子,弱电工程公司,安防监控工程,综合布线,酒店弱电工程 /
meta namedescription content和智电子科技有限公司, 是一家集施工研发,销售,服务于一体的高新技术企业,公司已成功承揽过各类企业弱电工程,酒店弱电工程,政府弱电工程,安防监控工程,智能弱电工程,综合布线工程等。 /
6.7 使用特殊字符
实体是浏览器用来替代特殊字符的一种编码下表中列出了网页中常用的一些特殊字符。
最常用的字符实体
显示结果描述实体名称实体编号空格(不换行空格)nbsp;#160;空格全角emsp;#8195;小于号lt;#60;大于号gt;#62;©版权copy;#169;
6.8 注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字就需要使用注释标签。使用ctrl / 或者 ctrl shift / 快捷键就可
!-- 注释语句 -- 注意注释内容不会显示在浏览器窗口中但是作为HTML文档内容的一部分也会被下载到用户的计算机上查看源代码时就可以看到。 7. HTML标签分类
1.双标签
由开始标签和结束标签组成的一对标签它可以嵌套和承载内容。
div我是文字/div
2.单标签
指没有内容的标签在开始标签中自动闭合。
br/
8. HTML标签关系
标签的相互关系就分为两种
1.嵌套关系
head title /title
/head
2.并列关系
head/head
body/body
提示 如果两个标签之间的关系是嵌套关系子元素最好缩进一个tab键的身位。如果是并列关系最好上下对齐。
9.HTML标签的语义化
所谓标签语义化就是指标签的含义合适的地方给一个最为合理的标签。 方便代码的阅读和维护 同时让浏览器可以很好地解析从而更好分析其中的内容 使用语义化标签会具有更好地搜索引擎优化。
