续第一章网页的基础知识

1.2 网页的基本构成元素:如导航栏、广告动画、图片、交互表单、文本和超链接等。
1.2.1 文本:特点 体积小、网络传输快。方便用户浏览与下载文本信息 是网页最主要的基本元素

也是页面中最主要的信息载体。
1.2.2 图片和动画

相较于文本来说更加的生动与直观,网页中的网站标识、背景、链接等都可以是图片。可以更有效的吸引浏览者的注意
1.2.3 超链接  

可从一个网页指向另外一个目的端的链接,指定从一个位置到另外一个位置。可以为文本链接、图片链接和锚链接等。可在当前页面或页面外进行跳转。
1.2.4 音频视频

网页中常用的音频格式有mid和MP3。其中mp3为压缩文件,压缩率高,音质也不错,是背景音乐的首选。网页中的视频文件是flv格式 具有文件小、加载速度快的特点 是网络视频格式的首选。
1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入,然后发送到用户设置的目标端。目标可以是文本文件、网页和电子邮件等...且表单一般用来收集联系信息,接收用户要求,获得反馈意见,让浏览者注册为会员并以会员的身份登录网站。
1.2.6 其他常见元素 

网页中除了以上最基本的几种元素之外 还包括一些常用元素 如 悬停按钮、JavaScript与ActiveX等特效。不仅能点缀网页 还能在网上娱乐等有着不可忽视的作用。


1.3 页面布局结构

对于一个网站来说,除了内容之外 确定网页的总体风格和布局也尤为重要。
1.3.1 网页页面布局

网页可分为个人网页和商业网页。前者风格多样、内容较为专一、形式较为灵活

易创造出美感。而后者为内容丰富、信息量大 但一般都有统一的布局
1.3.2 网页色彩搭配

网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后,这些颜色在任何终端用户的显示设备上都将显示为相同的效果。网页安全色是红色、绿色和蓝色。当颜色数字信号值为0,51,102,153,204和255时,构成的颜色组合一共有 216 种颜色。

1.4 Web前端技术简介。

1.4.1 初识Web前端

    Web前端即指平常上网浏览的网页,如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念,下面对Web前端的相关概念进行详细讲解。
        Web前端开发是从网页演变而来的,名称上有明显的时代特征。随着用户体验要求越来越高,前端开发的技术难度越来越大,Web前端开发这个职业也从设计和制作不分的局面中独立出来。
        早期的前端其实就是Tabel布局,后来发展到Div+CSS网站重构,再到JavaScript 逐渐成为Web前端开发的语言以及Web2.0的出现,每个阶段都涌现出相应的产品,如SNS博客、微博等。随着人们对网页需求的不断增大,Web前端技术也正加速地发展。
1.4.2 Web前端开发的三大核心技术


1.4.2.1 HTML:HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分,其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
1.4.2.2 CSS语言:CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,并拥有对网页对象和模型样式进行编辑的能力。
1.4.2.3 JavaScript语言 :

JavaScript 是一种属于网络的脚本语言,已经被广泛地用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引|擎,属于浏览器的一部分,因此JavaScript代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌入在 HTML,中的方式来实现自身的功能。

1.4.3 前端开发工具


1.4.3.1 浏览器

 浏览器是网页的运行平台,是可以把HTML文件展示在其中,供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器······

1.IE浏览器:IE是Intermet Explorer 的简称,是由微软公司推出的一款网页浏览器采用 Trident 内核实现

2.Chrome:又称Google Chrome 

Google Chrome 是由 Googl公司开发的一款设计简单、高效的Web浏览器,采用JavaScript引擎,可快速运行复杂的大型网站,从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写,采用Webki和Blink内核实现,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

3.Firefox Firefox浏览器一般指Mozillafirefox,中文俗称“火狐”,是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器,采用Gecko内核实现,支持多种操作系统。如 windos和Mac OS X及GNU/Linux等

4.Safari:Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统MacOSX中的浏览器,采用Webkit内核实现,使用了KDE的KHTML作为浏览器的运算核心。无论在Mac还是PC上运行时,Safari都可提供极致愉悦的网络体验方式。

5.Opera:Opera 浏览器是由挪威Opera Software ASA 公司制作的一款支持多页面标签式浏览的浏览器,采用Presto内核实现。它是跨平台浏览器,可以在Wimndows,Mac和 Linux 3个操作系统平台上运行

1.4.3.2 网页编辑器

①Adobe Dreamweaver:Adobe Dreamweaver 是一款所见即所得的网页编辑器,中文名称为“梦想编织者”或“织梦”。Dreamweaver支持HTML5/CSS3 源代码的编辑和预览功能,最大的优点是可视化性能带来的直观效果,开发界面可以分屏为代码部分与预览视图,当开发者修改代码部分时,预览视图会随着修改内容实时变化。

②Sublime Text:Sublime Text的界面布局非常有特色,它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示,也具有代码自动完成提示功能。该软件还具有自动恢复功能,如果在编程过程中意外退出,在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

③NotePad++:NotePad++的名称来源于Windows系列操作系统自带的记事本NotePad,在此基础上多了两个加号,立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器,具有完整中文化接口并支持UTF-8技术。它具有语法高亮显示、代码折叠等功能,因此也非常适合作为计算机程序的编辑器。

④EditPlus:EditPlus是由韩国 Sangil Kim(ES-Computing)公司发布的一款文字编辑器,支持HTML,CSS,JavaScript,PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。

⑤HBuilder:HBuilder 是由 DCloud(数字天堂)推出的一款支持 HTML5 的 Web 开发IDE。HBuilder主要用于开发HTML,JS(JavaScript)和CSS、同时配合 HTML 的后端脚本语言如PHP和JSP也可以适用,还有前端的预编译语言如less 以及人们钟爱的 markdown都可以良好地进行编辑。
1.4.3.3 切图软件

切图软件是对UI设计师设计出的效果图进行切图操作,也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。


1.5 HTML语法基础

1.5.1 HTML概述

  HTML是Hyper Text Markup Language 的缩写,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
1.5.1.1 语言

  HTML作为一种超文本标记语言,有指定的语法规则,超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言,使用HTML描述的文件,需要通过Web浏览器HTTP显示效果。
1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个 HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言,简单且易学易懂。
1.5.1.3 标记

HTML5 实际上不算是一种编程语言,而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。标签通过指定某块信息为段落或标题等来标识文档的某个部分。它们被称为标记,也称标签,是用来划分网页的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。
        单标签指的是只存在一个标签的写法,如<meta><input>等。
        双标签指的是存在一对标签的写法,如<head></head>,<body></body>等。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。
1.5.2.1 HTML文档标签<html>...</html>

   HTML文档标签的格式为:<html>HTML文档的内容</html>
        <html>处于文档的最前面,表示 HTML文档的开始,即浏览器从<html>开始解释,直到遇到</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.5.2.3 文档编码

文档编码格式:<meta charset= " utf-8"/>


1.5.2.4

T HML文档主体标签<body>...</body>

  HTML文档主体标签的格式为:<body>网页的内容</body>
        主体位于头部以后,以<body>为开始标签,</body>为结束标签。它定义网页上显示的主要内容与显示格式,是整个网页的核心,网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档

①使用 HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目”
②创建项目名称为课堂练习,设置项目所在的位置确定即可,完成之后会在左边的项目栏管理器中出现
③打开项目“课堂练习”的文件夹,会看到里面有首页 index.html
④之后,便可以编写网页代码了,可以直接在 imdex.html 中编写代码
⑤在“创建文件向导”对话框中,选择好文件所在目录,并为文件命名,模板为html5
⑥本实例将文件命名为“示例程序1.2.html”,开始编写网页代码
⑦网页完成后,可以执行菜单“运行”然后选择“浏览器运行”,选择电脑中已有的浏览器进行预览

1.7 网页头部标签


1.7.1 <title>标签

<tite>标签位于<bead>与</head>中,用于标示文档标题
<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<tide>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。


1.7.2 <meta>标签

<meta>标签是元信息标签,在HTML中是一个单标签。该标签可重复出现在头部标签中,用来指明本页的作者、制作工具、所包含的关键字,以及其他一些描述网页的信息。
        <meta>标签分两大属性:HTTP标题属性(htp-equiv)和页面描述属性(name)。不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性,用于设置搜索关键字和描述。
<meta>标签的 name 属性的语法:<meta name="参数" content="参数值">
        name属性主要用于描述网页摘要信息,与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用。
        name属性主要有以下两个参数:keywords(关键字)和description(网站内容描述)

1.7.2.1 keywords

keywords用来告诉搜索引擎网页使用的关键字
1.7.2.2 description

description用来告诉搜索引擎网站主要的内容
1.7.3 <link>标签

   <link>标签用于连接外部资源和当前 HTML文档,它只在首部标签<head>和</head>中,通常用于连接外部样式表。且只是提供链接该文档的样式
1.7.4 <script>标签

 <scnipt>标签是脚本标签,用于为 HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序,可以位于文档中任何位置,但常位于<head>标签内,以便维护。


1.8  HTML5文档注释和特殊符号


1.8.1 注释

  为增加HTML5文档的可读性,可为其添加注释部分。注释是文档中的说明文字,不会被浏览器执行。HTML5 使用<!--···-->标签为文档进行注释,注释标签以“<!--”开头,以“-->”结束,中间的“···”替换为注释文字内容即可。<!--···-->标签支持单行和多行注释。

1.8.2 特殊符号

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值