1.1认识网页网站
1.1.1网页，网站
网页和网站的区别;
网址是指因特网上网页的地址，网站是根据一定规则构成的，而网页是网站的基本元素。
常用的术语;
internet
www；万维网WWW是World Wide Web的简称，也称为Web、3W等。WWW是基于客户机/服务器方式的信息发现技术和超文本技术的综合
浏览器
URL
ip与域名 ；IP地址是数字标识，因此在IP地址的基础上又发展出一种符号化的地址方案，来代替数字型的IP地址。每一个符号化的地址都与特定的IP地址对应。这个与网络上的数字型IP地址相对应的字符型地址，就被称为域名。
超链接；可以在网页与网页之间跳转
1.1.2静态网页和动态网页
MTML CSS JavaScript
只有MTML CSS为静态网页，加入了JavaScript就是动态网页
判断网页是否为静态动态用JavaScript来判断
1.2 网页的基本构成元素
1.2.1.文本
文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素
1.2.2.图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击确定好网页风格
1.2.3.超链接
超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的
导航和工具栏等
1.2.4.音频视频
这种结构的布局方式比较简单，
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩
主要用于突出需要表达的重点，
1.2.5.交互表单
1.2.6.其他常见元素
1.3 页面布局结构
1.3.1 网页页面布局
国字型 ,广字型，海报型，Flash型
1.4 Web前端技术简介
1.4.1 初识WEB前端
CSS用于描述网页的样式(View
Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都
现逻辑(Controller)。
是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概
用盖房子的例子来描述三
念进行详细讲解。
良好的结构(HTML)。然后给
1991年8月6日，来自欧洲核子研究中心的科学家Tim Bermers-Lee,启动了世界上第
后给房子添加电梯和地暖，与
一个可以正式访问的网站(http:/ino.cerm.ch),标志着万维网时代的到来。随着互联网
完毕。
的飞速发展，网站开发人员也变得炙手可热。
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越
1.4.2 WEB前端开发的三大核心技术
HTML CSS JavaScript
Html页面结构文件 css页面样式结构 JavaScript动态技术
1.4.3 前端开发工具
游览器，网页编辑器，切图软件
浏览器是网页的运行平台，是可以把 HTML 文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等
网易编辑器：HTML，CSS和JavaScript 源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。
切图软件：切图软件是对 U设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks 两种。
1.5MTML语法基础
1.5.1HTML概述
是一种超文本标记语言，是一种用来制作超文本文档的简单标记语言
1.5.1.1语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在
运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统
1.5.1.2超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都
是一种静态的网页文件，这个文件里面包含了HTML指令代码，
1.5.1.3标记
双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head> </head>,<body></body>等。
进行修
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要
在左尖括号后添加一个关闭符“/”。
1.5.2 HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>这是我的第一个网页项目</p>
<p>2023软件技术四</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
1.5.2.1 HTML文档标签<html>...</html>
<html>处于文档最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>
1.5.2.2 HTML文档头标签<head>...</head>
文档头部内容在开始标签<html>和结束标签</html>
1.5.2.3 文档编码
在计算机中，文本文件通常以文本编码方式进行存储。不同的文本编辑器和操作系统可能使用不同的编码方式，默认的编码方式也可能不同。因此，在处理文本文件时，需要确保使用正确的编码方式，以免出现乱码等问题
1.5.2.4 HTML文档主体标签<body>...</body>
HTML文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6创建HTML
一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用 HBuilder 快速编辑一个 HTML 文件，通过它来学习网页的编辑、保存过程。
(1)使用 HBuilder 新建项目。依次点击选择“文件”→“新建”→“项目”，如下图所示。
(2)选择普通项目，创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，如下图所示。
(3)会看到里面有首页index.html，如下图所示有is文件夹，有css文件夹，还有图片的文件夹，基本齐全。
4）网页完成后，可以执行菜单“运行”一“浏览器运行”,选择电脑中已有的浏览器进行预览，这里使用 Chrome 浏览器，如下图所示。
1.7 网页头部标签
1.7.1 <title>标签
<title>标签是页面标题标签。它将HTML文件标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的
标题。
1.7.2 <meta>标签
是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键词，以及其他一些描述网页的信息
<meta>标签分两大属性：HTTP标题属性(htp-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name属性，用于设置搜索关键字和描述。<meta>标签的name属性的语法：<meta name="参数”content="参数值">
1.7.2.1 keywords
设置关键字
1.7.2.2 description
设置描述的主要内容
1.7.3 <link>标签
用于连接外部资源和当前HTML文档，它只在首部标签<head>与</head>中通常用于连接外部样式表
rey指定文件 hret 指定文件路径
1.7.4 <script>标签
是脚本标签，用于HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护
src 指定文件路径, type 指定文件类型
1.8 HTML5文档注释和特殊符号
1.8.1 注释
<!-- 注释内容 -->
ctrl+/ 快捷键
1.8.2 特殊符号
由于大于号“>"和小于号”<"等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
1.9 综合案例——临江仙 · 送钱穆父
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="宋词，苏轼"charset="utf-8"/>
<meta name="description" content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type= "text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333" >
<h2 align="center">临江仙•送钱穆父</h2>
<P>宋 苏轼 </P>
<!-- 使用<b/>的效果 -->
<P>一别都门三改火，天涯路尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井，有节是秋筠。<br/>
烟帐孤帆连夜发，送行淡月微云。<br/>
尊前不用翠眉颦。<br/>
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font><p>
<img src="img/1.9.jpg"
<!-- 水平线 -->
<hr size="2" color="black" width="100%" />
<p align="2">第一次 look©666</p >
</body>
</html>
扫一扫
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
