1.1 认识网页和网站
网页和网站的区别:网站包含网页 但是网页与网站有着很大的区别 网站内还有包含网页以外的其他东西.(例如:服务器 数据库等) 但网站和网页不为总分关系,网页只是单独的一页.
常用术语:
Internet 因特网
www 万维网
web 首页
HTMY 俗称电脑
Hypertext 超文本(内涵超链接的网页)
IP 国际协议
URL 统一资源定位符,指定通信协议和地址
域名 指网站名称 在全世界是唯一的.
HTTP 超文本传输协议
FTP 文件传输协议
发布 指将制做好的网页传到网络上的过程,也称为上传网站.
站点 ;一个站点就是一个网站所有内容所存放的文件夹
超链接: 从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,可以是相同网页的不同位置 也可以是一个图片,一个图片,一个电子邮件等.
客户机和服务器: 客户端和服务端
1.1.2 静态网页和动态网页
三大核心技术:HTML CSS (静态网页) JavaScript(网页加上JavaScript才能成为动态网页)
1.2 网页的基本构成元素
1.文本 2.图画和动画 3.超链接 4.音频和视频 5.交互表单 6.其他常见元素
1.3页面布局结构
1.1.3网页页面布局
1.3.2 网页色彩搭配
网页安全色:在不同硬件环境,不同系统,不同浏览器中都能够正常显示的颜色集合
网页色彩的表达 :在网页设计中,颜色值通常的表达方式是十六进制
常见色彩搭配:相近色配色与近似色配色
1.4 Web前端技术简介
1.4.1初识Web前端
1.4.2 Web前端开发的三大核心技术
web前端三大核心技术_csdn 根据w3c标准,一个网页主要由三部分组成:结构、表现还有行为。-CSDN博客
1.4.3 前端开发工具
1 浏览器 : 网页运行平台 eg:IE浏览器 Chrome浏览器 Firefox浏览器 Safari 浏览器 Opera 浏览器等
2 网页编译器: 打开和编辑网页源代码的工具,eg: Adobe Dreamweaver编译器 Sublime Text编译器 NotePad++编译器 EditPlus编译器 HBuilder编译器等
3 切图软件 : 处理图片的软件 eg:Photoshop和Fireworks两种.
1.5 HTML语法基础
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实际上不算一种编程语言,而是一种标记语言.
1.5.2 HTML基本结构
HTML文档标签格式为<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML第一节代码</title>
</head>
<body>
我的第一个网页
2023软件一班
</body>
</html>
1.5.2.1 HTML文档标签<html>...</html>
1.5.2.2 HTML 文档头标签<head>...</head>
1.5.2.3 文档编码
文档编码格式如下:
1.5.2.4 HTML 文档主体标签<body>...</body>
1.6 创建HTML文档
1 首先老样子左上角文件新建
2 选择项目 点击普通项目 轻击创建
1.7 网页头部标签
在网页的头部中,通常存放一些介绍页面内容的信息.
1.7.1 <title>标签
<title>标签是页面标题标签 .它将是HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途.这个标签只能应用于<head>与</head>之间.<title>标签是对文件内容的概括.一个好的标题能使读者从中判断出该文件的大概内容.
1.7.2<meta>标签
<meat>标签是元信息标签,在HTML中是一个单标签.该标签可重复出现在头部标签中,用来指明本页的作者.制作工具.所包含的关键字,以及其他一些描述网页的信息.
1.7.2.1 keywords
keywords用来告诉搜索引擎网页使用的关键字.
1.7.2.2 description
description用来告诉搜索引擎网站主要内容.
1.7.3<link>标签
<link>标签用于连接外部资源和当前HTML文档,它只在首部标签<head>和</head>中,通常用于连接外部样式表.
1.7.4 <script>标签
<script>标签是脚本标签,用于为HTML文档定义客户端脚本信息.
1.8 HTML5 文档注释和特殊符号
1.8.1 注释
为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。
1.8.2 特殊符号
由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头,以“;”结束。
1.9 综合案例--临江仙·送钱穆父
以一首宋词为例子，参照给定的 HIL代码和图片资源，利用HBuilder 设计 Web网页在编写时要遵守 HIL代码的编写规范，并养成良好的编码习惯。
以下为完整代码，以供参考。
<!--综合案例-->
<!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 >
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井，有节 是秋筠。<br/>
惆怅孤帆连夜发，送行淡月微云。<br/>
尊前不用翠眉颦。<br/>
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
<!--水平线-->
<hr size="2" color="blank" width="100%" />
<p align="center">网页制作教程Conyright©@花海少爷</p >
<img src="img/3b24ad3b44b25937952906df784cd4a.jpg">
</body>
</html>
