第一章 网页制作的基础知识

1.1 认识网页和网站

1.1.1 网页和网站

       网页和网站的区别:网页是由HTML编写,通过www网传输,被浏览器编译后供用户获取信息的页面文件,又被称为Web页。

       Web站点也称为网站,www信息是由无数的web站点组成的。网站是多个网页的集合。

2 常用术语

Internet

URL:统一资源定位符

IP:网际协议

HTTP

FTP

超链接

发布

站点

超链接

客户机和服务器

1.1.2 静态网页和动态网页

1.静态网页和动态网页的区别:

静态网页通常由HTML/CSS编写。

而常见的动态网页技术则有javaScript,ActiveX和Flash等。


1.2 网页的基本构成元素


1.2.1.文本 

文本具有体积小,网络传输速度快等特点。


1.2.2.图片和动画

图片比文本更加生动和直观,可以传输一些文本不能表达的信息,具有强烈的视觉冲击力。


1.2.3.超链接  

超链接技术是www流行起来的主要原因。将各种不同空间的文字信息组织在一起的网状文本。


1.2.4.音频视频

音频文件可使网页更生动形象,使页面效果多样化,网页中常见的音频格式有mid和MP3。


1.2.5.交互表单

        交互表单‌是一种允许用户与计算机系统进行交互的数据收集工具,通过表单,用户可以输入、选择或提交信息,而系统则通过处理这些数据来响应用户的需求或操作。

        网页中的表单通常用来接收用户在浏览器的输入,然后将这些信息发送到用户设置的目标端。


1.2.6.其他常见元素 

网页中除了以上几种最基本的元素之外,还有一些其他的常用元素,包括悬停按钮 JavaScript与ActiveX等各种特效。


1.3 页面布局结构


1.3.1 网页页面布局

根据不同的网页制作风格,可以将网页分为个人网页和商业网页。

常见的结构布局包括:

88513a930be0472c9f64c1a5956ed1ac.png


1.3.2 网页色彩搭配

   网页安全色:

   网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。


1.4    Web前端技术简介


1.4.1 初识WEB前端


1.4.2 WEB前端开发的三大核心技术

HTML      CSS      javaScript


1.4.3 前端开发工具

浏览器:IE浏览器,Googlechrome              

编辑器::HBuilderx

1.5 HTML 基本结构

1.5.1 HTML概述

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

1.5.1.1 语言
HTML作为一种超文本标记语言,有指定的语法规则,超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。
1.5.1.3 标记
HTML实际上不算是一种编程语言,而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记。

1.5.2 HTML基本结构
 

HTML文档是由一系列的元素和标签组成的。

1.5.2.1 HTML文档标签<html>...</html>

格式为:

<html>HTML文档的内容</html>

1.5.2.2 HTML文档头标签<head>...</head>

格式为:

<head>头部的内容</head>

1.5.2.3文档编码

<meta charset="UTF-8">

1.5.2.4 HTML文档主体标签<body>...</body>
格式为:

<body>网页的内容</body>

1.6 创建HTML文档

使用HBuilder新建项目,创建项目名称,打开项目;

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。

< title>标签位于<bead>与</head>中,用于标示文档标题,格式如下:<title>标题</title>

1.7.2 <meta>标签

   标签分两大属性:HTTP标题属性(http-equiv)和页面描述属性(name)。


<meta>标签的name属性的语法:

<meta name="参数"content="参数值">

1.7.2.1 keywords

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

1.7.2.2 description

description 用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签

<link>标签用于连接外部资源和当前HTML文档,它只在首部标签<head>和</head>中,通常用于连接外部样式表。 格式如下:
<link rel = "stylesheet"href="外部样式表文件名.css"type=" text/css”/>

1.7.4 <script>标签

<script>标签是脚本标签,用于为HTML文档定义客户端脚本信息。 格式如下:
<scripttype=" text/css"src="脚本文件名n.js" ></script>

1.8  HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性,可为其添加注释部分。注释是文档中的说明文字不会被浏览器执行。

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法 号,所以,如果要在页面中显示这些特殊符号,就必须使用相应的HTML代码表示。

1.9 综合案例——临江仙 · 送钱穆父

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值