1.1 认识网页和网站
1.1.1 网页、网站
网页和网站的区别:网站和网页并不是总分的关系,网站是由一个个网页组成的。
1.网页
网页是由HTML编写,通过WWW网传输,且被浏览器编译后供用户获取信息的页面文件,又称Web页,集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。
2.常用术语
Internet:因特网
WWW:其功能是让web客户端(常用浏览器)访问web服务器中的网页
URL:统一资源定位符,指定通信协议和地址
IP:网络协议
域名:常把域名看做网络的网址
HTTP:超文本传输协议
FTP:文件传输协议
发布:上传网站
站点:一个网站所有内容所存放的文件夹
超链接:从一个网页指向一个目标的连接关系
1.1.2 静态网页和动态网页
三大核心技术:HTML CSS(静态网页) JavaScript(动态网页)
注:判断一个网页是否是动态的就看网页是否存在JavaScript
1.2 网页的基本构成元素
1.2.1 文本
特点:体积小,网络传输速度快,是网页最主要的基本元素
作用:用文字表达信息的内容和含义
1.2.2 图片和动画
特点:更加生动和直观,具有强烈的视觉冲击力
作用:更有效的吸引浏览者的注意
1.2.3 超链接
作用:引流
1.2.4 音频视频
1.MP3
特点:压缩率高,音质不错
作用:网页效果多样化
2.flv
特点:文件小,加载速度快
作用:网页效果多样化
1.2.5 交互表单
收集个人信息
1.2.6 其他常见元素
不仅能点缀网页,使网页更活泼有趣,还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
1.3.1 网页页面布局
1.3.2 网页的色彩搭配
RGB色彩模式
注:并不是前端开发者的重点工作
1.4 Web前端技术简介
1.4.1 初识Web前端
Web前端即指平常上网浏览的网页
1.4.2 WEB前端开发的三大核心技术
1.HTML
页面结构文件
2.CSS语言
页面样式文件
3.JavaScript语言
页面动态功能
1.4.3 前端开发工具
1.浏览器
谷歌浏览器
特点:普及性强
缺点:可能会导致同样网页的显示效果不同
2.网页编辑器
HBuilderX
3.切图软件
1.5 HTML语法基础
1.5.1 HTML概述
1.语言
HTML作为一种超文本标记语言,有指定的语法规则,超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
2.超文本
是可以添加图片、声音、动画、影视等内容的文本。
3.标记
HTML5实际上不是一种编程语言,而是一种标记语言。
单标签:<XXX><XXX>
双标签:<XXX></XXX>
1.5.2 HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>这是我的第一个网页项目!</p>
<p>2023级软件技术4班刘某!</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
HTML文档分为三个文件加一个HTML文档
CSS文件夹:存放CSS文件,网页样式
IMG文件夹:存放图片、视频等资源
JS文件夹:存放动态文件(使网页实现动态功能)
1.HTML文档标签
<html>...</html>
2.HTML文档头标签
<head>(头标签)...</head>(尾标签)
3.HTML文档主体标签
<body>...</body>------>存放网页主体内容
注:1.<p>...</p>:换行标签
2.<a>...</a>:超链接标签
1.6 创建HTML文档
1.7 网页头部标签
1.7.1 <title>标签
该标签是页面标题标签
1.7.2<meta>标签
该标签有三个参数:keywords、description、charset
1.keywords
索引关键字
2.description
网站内容描述
3.charset
字符
1.7.3<link>标签
该标签引入的是CSS文件,有三个参数:rel、sref、type
1.rel
指定文件样式
2.sref
指定文件路径
3.type
指定文件类型
1.7.4<script>标签
该标签引入的是JS文件,有两个参数:src、type
1.src
指定文件路径
2.type
指定文件类型
1.8 HTML文档注释和特殊符号
1.8.1 注释
单行注释:<!--XX-->
多行注释:<!--
XXX
XXX
-->
1.8.2 特殊符号
特殊符号 | 字符实体 | 实例 |
空格 | | 银河商务 热线:400-111-111 |
大于 | > | 3>2 |
小于 | < | 2<3 |
引号 | " | |
版权号(@) | © | Copyright©网页设计教程 |
1.9 综合案例——临江仙·送钱穆夫
<!--综合案例-->
<!DOCTYPE himl>
<html>
<head>
<meta mame="koywomde" contenl="宋调,苏轼"charmet="uf-8" />
<meta name="descriplion"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>
<!--使用<br>的效果-->
<p> 一别都门三改火,天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井,有节是秋筠。<br/>
惆怅孤帆连夜发,送行淡月微云。<br/>
尊前不用翠眉颦。<br />
<font color= "brown" face="微软雅黑">人生如逆旅,我亦是行人。</font></p>
<img src="img/1.1.jpg" />
<!--水平线-->
<hr size="2" color="black" width="100%"/>
<p align="center">网页制作教程 Copyright©广东南方职业学院</p>
</body>
</html>