1.1 认识网页和网站
1.1.1 网页 网站及常见术
网页由HTML编写，通过www网传播，且被浏览器编译后供用户获取信息的页面文件，被称Web页
Web站点中有一个特殊的网页叫做主页（Homepage） 用HTML编写的网页文件的拓展名一般为“*.htm” 或“*.html”
Web站点也称为网站 www信息是由无数的Web站点组成 网页则是Web站点的基本信息单位 超链接将站点上的一个或多个网页链接成为一个便于浏览的有机整体
网站是多个网页的集合体 将网站内容可将网站分为五种类型:门户网站 ，企业网站，个人网站，专业网站，职能网站
常见术语
Interent:由各种不同类型的计算机网络链接起来的全球性网络。
WWW:其功能是让Web客户端(常见浏览器）访问Web服务器中的网页。
浏览器:将interent中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷的获取Ineerent中的内容。
URL:统一资源定位符，指定通信协议和地址，如“http://www.baidu.com"是一个URL，“http://"表示通信协议为超文本传输协议，“www.baidu.com"表示网站名称。
IP：网际协议。Interent中的每台计算机都有唯一的IP地址，表示该计算机在Interent中的位置。IP通常分为A B C 三类。
域名：网站名称。在全世界是唯一的。域名的书写格式：机构名.主机名.类别名.地区名。
HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议
FTP：文件传输协议
1.1.2静态网页和动态网页
静态网页：客户端的浏览器发送URL请求给www服务器，服务器查找需要的超文本文件并不加处理的直接下载到客户端，运行在客户端的页面是已经是先放好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。
动态网页：由javascript,ActiveX,Flash网页技术
1.2网页的基本构成元素
1.2.1文本：
具有体积小、网络传输速度快等特点，可使用户更方便下载和浏览文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体
1.2.2.图片和动画
通过插入图片，可以丰富网页的视觉效果，提供直观的信息展示。常见的图像格式包括GIF、JPEG、BMP、TIFF和PNG等。
1.2.3：超链接
允许用户点击文本或图像跳转到其他网页或资源，是网页互动性的重要组成部分。
1.2.4：音频和视频
随着网络带宽的增加，音频和视频在网页中的应用越来越广泛，能够提供更加生动和动态的内容展示。
1.2.5：交互表单
网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6：其他元素
网页中除了以上几种最基本的元素之外，还有一-些其他的常用元素，包括悬停按钮JavaScript与ActiveX 等各种特效，它们不仅能点缀网：页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3页面布局结构
1.3.1：网页页面布局
包括对头部、导航栏、内容区域、侧边栏和页脚等页面部分的设计。常用布局方法有栅格布局、弹性盒子布局（Flexbox）和CSS Grid布局等。
1.3.2：网页色彩搭配
色彩是网页设计中影响用户第一印象的重要因素。色彩搭配需要考虑色彩心理学，以及如何使用色轮来选择和谐的颜色组合，包括主色、辅助色和强调色等
1.4web前端技术简介
1.4.1：初识web前端
Web前端主要涉及网页的视觉呈现和用户交互部分。它是用户直接与网站或Web应用进行交互的界面。
1.4.2：web前端开发的三大核心技术：
HTML、CSS和JavaScript是前端开发的基础技术。
1.4.2.1HTML
用于构建网页的结构
1.4.2.2CSS语言
用于设计网页的样式和布局
1.4.2.3JavaScript
则用于实现网页的动态效果和用户交互功能。
1.4.3：前端开发工具：
前端开发工具是帮助开发者更高效地编写和调试代码的工具。
1. 4.3.1浏览器
浏览器不仅是查看网页的工具，也是前端开发的重要环境。现代浏览器如Chrome、Firefox、Safari等提供了开发者工具，可以用来检查HTML、CSS、JavaScript的执行情况。
1.4.3.2. 网页编辑器
网页编辑器是编写HTML、CSS和JavaScript代码的工具，如Sublime Text、Visual Studio Code、Atom等。它们提供了代码高亮、自动完成、代码折叠等功能，提高了编码效率。
1.4.3.3. 切图软件
切图软件如Adobe Photoshop、Sketch等，用于将设计稿中的元素切分成适合网页使用的图片。这些软件可以导出不同格式和尺寸的图片，满足不同设备和屏幕的需求。
1.5HTML语法基础
1.5.1：HTML概述
HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是种用来制作趣文本文档的简单标记语言。
1.5.1.1 语言
HTML是一种用于创建网页的标记语言，它使用标签来标记各种类型的元素，这些元素共同构成了网页的结构和内容。
1.5.1.2. 超文本
超文本指的是文本中嵌入了链接，允许用户通过点击链接快速跳转到其他文档或页面。HTML利用<a>标签创建这样的超链接，实现从一个网页跳转到另一个网页的功能。
1.5.1.3. 标记
在HTML中，标签是构成网页的基本元素。标签通常成对出现，如<p>和</p >分别表示段落的开始和结束。这些标签会告诉浏览器如何显示页面上的内容。
1.5.2 HTML基本结构
一个基本的HTML文档包含几个关键部分，包括文档类型声明、<html>、<head>和<body>等标签。
1.5.2.1. HTML文档标签
<html>…</html>
<html>标签表示HTML文档的开始和结束。它是一个根元素，所有的HTML内容都应该包含在这个标签之内。
1.5.2.2 .HTML文档头标签
<head>…</head>
<head>标签包含了文档的元数据，如文档的标题、链接到样式表和脚本文件、字符编码声明等。它为文档提供了额外信息，但不直接显示在页面内容中。
1.5.2.3. 文档编码
文档编码指的是字符集编码，它告诉浏览器应该使用哪种字符编码来正确显示网页内容。通常在<head>部分的<meta>标签中指定，例如<meta charset=“UTF-8”>。
1.5.2.4. HTML文档主体标签<body>…</body>
<body>标签包含了所有可见的页面内容，比如文本、图片、链接、表单、按钮等。用户在浏览器中看到的所有东西几乎都是放在<body>标签内的
1.6创建HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="xxx" />
<meta name="description" content="xxx" />
<title>第一个网页项目</title>
</head>
<body>
<!-- 单行注释内容 -->
<p>第一个项目</p>
<!--
第一行
第二行
注释内容
-->
<p>2023软件技术2</p>
<!-- 链接至百度，修正拼写错误 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
1.7网页头部标签
1.7.1<title>标签：
页面标题标签，可将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的的用途。
1.7.2<meta>标签
元信息标签，在HTML中是一个单标签，可重复出现在头部标签中，用于说明本页的作者、制作工具、所包含的关键字、以及描述网页的信息
<meta>标签的俩大属性：HTTP标题属性（http-equiv)和页面描述属性（name),name属性，主要用于设置搜索引擎关键字和描述与之对应的属性值为content。name属性的俩个重要参数，keywords(关键字），desceiption(网站内容描述）
keywords用来告诉搜索引擎使用的关键字
description用来告诉搜索引擎网站的主要内容
1.7.3<link>标签
<link>标签用来链接外部资源和当前HTML文档，<link>标签只在首部标签<head>和</head>中。通常用于链接外部样式表
1.7.4<script>标签
<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可在文档中包含一段客户端脚本程序，可在文档中任意位置，但常位于<head>标签内
1.8HTML5文档注释特殊符号
1.8.1注释
HTML5使用<!--......-->为标签为文档进行注释，以<!--开头，以-->结束，中间的....用注释文字代替即可
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: large;
}
</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/lin.jpg"/>
<!--水平线-->
<hr size="2"color="black" width="100%"/>
<p align = "center" >网页制作教程Copyright©广东南方职业学院</p>
</body>
</html>
扫一扫
2436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
