1.1 认识网页和网站
1.1.1 网页，网站
网页和网站的区别：非绝对总分 网站可包含多个网页
- 网页是可以在任何浏览器上查看的文档，是一个页面，其中提供了所有相关信息。
- 网站是相互链接的多个网页的组合，共同作为网站工作。每个网站都包含一个唯一的域地址，所有网页都链接在一个特定的域下，这意味着网页依赖于该域
常用术语：
Internet， WWW， 浏览器， URL， IP， 域名， HTTP， FTP， 站点， 发布， 超链接， 导航条， 客户机， 服务器 等等....
URL: 统一资源定位符，指定通信协议与地址，如“http://ww.baidu.com" 是一个URL，”http://" 表示通信协议为超文本传输协议，“www.baidu.com" 表示网站名称。
FTP: 文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正的实现资源共享
发布: 指将制作好的网页传到网络上的过程，也称为上传网站
超链接: 从一个网页指向另一个目标的连接关系
1.1.2 静态网页和动态网页
三大核心技术
HTML (静态网页) CSS（静态网页） JavaScript （加入这个 成为动态网页）
静态网页：指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。
动态网页：动态网页根据不同浏览者的请求来显示不同内容，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。
1.2 网页的基本构成元素
1.2.1 文本，图片和动画，超链接，音频视频，交互表单
交互表单：个人信息收集（ep：填写账号填写信息）
1.3 网页布局结构
2.网页色彩搭配
（1）网页安全色。指在不同硬件环境，不同操作系统，不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的结果。网页安全色是红色，绿色和蓝色。 当颜色数字信号值为0，51，102，153，204，255.构成的颜色组合一共有216种颜色。
（2）网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。
（3）常见的色彩搭配 1.采用相近色配色 2.采用近似色配色
1.4 Web前端技术简介
1.4.1 初识Web前端
指平常上网浏览的网页
1.4.2 Web前端开发的三大核心技术
HTML：制作网页的标准语言。”超文本“就是指页面内可以包含图片，超链接，音乐，程序等非文字元素。超文本标记语言的结构包括”头部（Head）”和“主体（body）“两部分，其中”头部“提供关于网页的信息，”主体“提供网页的具体内容
CSS语言：
用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所以的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
JavaScript语言：
JavaScript是一种属于网络的脚本型语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。他的解释器被成为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能
1.4.3 前端开发工具
1.浏览器
2.网页编辑器
（1）Adobe Dreamweaver
（2）Sublime Text
（3）NotePad++
（4）EditPlus
（5）HBulider 主流的编辑器
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 标记
HTMLS实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和 Web 浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开Web 网页文件，提供查看Web资源的客户端程序。
1.5.2 HTML基本结构
HTML文档具由一系列的元麦和标然组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息文档的基本结构。
文档的基本结构
1.5.2.1 HTML文档标签<html>…</html>
HTML文档标签的格式为
<html>HTML文档的内容</html>
html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到
遇到</html>为止。每个HTML文档均以<html>开始，以</html>结束。
1.5.2.2 HTML 文档头标签<head>…</head>
HTML 文档包括头部（head）和主体（body)。HTML文档头标签的格式为
<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或
皆文本文件地址、创作信息等网页信息说明。
1.5.2.3 文档编码
文档编码格式如下：
<meta charset="utf-8" />
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使
用的编码语言。文档必须声明的编码应该与实际编码一致，否则会造成乱码。对于中文网页的设计者来说，用户一般使用GB2313（简体中文）。
1.5.2.4 HTML文档主体标签<body>…</body>
HTML文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的
主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档
<！--示例 1.2程序-->
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<title>我的第一个网页</title></head>
<body>
开始学习网页设计与制作！
<hr size="3" color="black">
百度
<script type="text/javascript">
document.write("链接到百度");</ script>
</body>
</html>
1.7 网页头部标签
在网页的头部中，通常存放一些介绍页面内容的信息。ep：页面标题，描述，关键词链接的CSS样式文件和客户端的JavaScript脚本文件等。 页面标题及页面描述称为页面的摘要信息，摘要信息的生成在不同的搜索引擎中会存在比较大的差别，即使是同一个搜索引擎也会由于页面的实际情况而有所不同。一般情况下，搜索引擎会提取页面标题标签中的内容作为摘要信息的标题，而描述则常来自页面描述标签的内容或直接从页面正文中截取。如果希望自己发布的网页能被百度等搜索引擎拽索，那么在制作网页时就需要注意编写网页的摘要信息。
1.7.1 <title>标签
<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保有磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。
< title>标签位于<bead>与</head>中，用于标示文档标题，格式如下:
<title>标题</title>
例如，京东商城的文档标题：
<title>京东（JD.COM）-正品低价、品质保障、配送及时、轻松购物！</title>
打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。
1.7.2 <meta>标签
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
<meta>标签分两大属性：HTTP标题属性（http-equiv）和页面描述属性（name）。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置拽索关键字和描述。<meta>标签的name属性的语法：
<meta name="参数"content="参数值”>
name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用。
name 属性主要有以下两个参数：keywords（关键字）和description（网站内容描述）。
1.7.2.1 keywords
keywords用来告诉搜索引擎网页使用的关键字。ep：京东网
键字设置如下：
<meta name="keywords"content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，
食品，生鲜，京东”/>
1.7.2.2 description
description 用来告诉搜索引擎网站主要的内容。例如，京东商城网站主页的内容描述
设置如下：
<meta name="description"content=“京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。”/>
1.7.3 <link>标签
<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。<link>标签并不将其他文档实际链接到当前文档中，只是提供链接该文档的一个路径，link标签最常用的是用来链接CSS样式文件，格式如下：
<link rel="stylesheet”href=“外部样式表文件名，css "type="text/css”/>
如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。
1.7.4 <script>标签
<seript>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。格式如下：
<scripttype="text/css"src="脚本文件名n.js"></script>
1.8 HTML5文档注释和特殊符号
1.8.1 注释
为增加 HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTMIL5 使用<！--…-->标签为文档进行注释，注释标签以“<！一-”开头，以“一->”结束，中间的“…”替换为注释文字内容即可。<! --…-->标签支持单行和多行注释。
<！--示例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>带有注释语句的页面</title></head>
<body>
你好，HTML5!
<！一-接下来出现一条水平线-->
<hr size="3" color="black">
这是一个多行注释语句
注释语句不会被浏览器执行
也不会在浏览器中显示
-->
<p>网页制作工作室 热线:400-111-1111</p>
</body>
</html>
1.8.2 特殊符号
由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头，以“；”结束。
| 特殊符号 | 字符实体 | 实例 |
| 空格 | | 银河商务 热线：400-111-1111 |
| 大于(>) | > | 3> 2 |
| 小于 | < | 2< 3 |
| 引号 | " | |
| 版权号 | © | Copyright© 网页设计教程 |
1.9 综合案例——临江仙 · 送钱穆父
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="宋词,苏轼" />
<meta name="description" content="本网站收录精选宋词" />
<title>宋词精选</title>
<style type="text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#444444">
<h2 align="center">临江仙·送钱穆父</h2>
<p >宋 苏轼</p>
<!--使用<br/>的效果-->
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井，有节是秋筠。<br/>
惆怅孤帆连夜发，送行淡月微云。<br/>
尊前不用翠眉颦。<br/>
<font color="brown" face="微软雅黑">
人生如逆旅，<br/>
我亦是行人。<br/>
</font></p >
<img src="img/1.jpg"/>
<!--水平线-->
<hr size="2" color="black" width="100%" />
<p align="center">网页制作教程Copyright©江西应用工程职业学院</p >
</body>
</html>
个人课堂笔记
<!DOCTYPE html> !DOCTYPE：文件类型
<meta charset="utf-8" /> 字符集
<meta name="Keywords" content="猫咪"/> 关键词
<meta name="description" content="这只是一个小猫咪的网站"/> 描述<link ref="stylesheet" 文件样式
href="/css/IGoMeow.css" 文件位置
type="text/css"/> 文件类型在css文件夹中新建css文件： Index.css
<link ref="" href="" type=""/> ref引用的是啥 href具体引用上面类型 type引用文件类型
ep：<link ref="stylesheet" href="/css/IGoMeow.css" type="text/css"/>
引用JavaScript
在js文件夹中新建js文件： index.js
<script> type="“ src=""</script> type引的什么文件 src引的文件的路径
ep： <script> type="text/javascript src="/js/index.js"</script>
资源文件 如图片视频 都放在img文件夹中
<!-- 注释内容 -->
扫一扫
963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
