第一章: 网页制作的基础知识

京天要思雨

已于 2024-10-07 23:51:35 修改

阅读量977

点赞数 13

文章标签：服务器运维

于 2024-09-11 22:13:45 首次发布

本文链接：https://blog.csdn.net/2301_81411119/article/details/142078153

版权

1.1 认识网页和网站

1.1.1 网页网站

网页和网站的区别:

一、性质不同

1、网址：指因特网上网页的地址。

2、网站：指在因特网上根据一定的规则。

3、网页：构成网站的基本元素。

二、作用不同

1、网址：了解网址是网络用户上网的基础，实际应用中IP地址和域名地址都被人们广泛使用。

2、网站：用于展示特定内容相关网页的集合。

3、网页：是承载各种网站应用的平台。

三、特点不同

1、网址：网址通常指因特网上网页的地址。Internet网址是因特网重要标识，浏览网络信息、运行网络应用软件都必须输入Internet网址。Internet网址随应用内容的不同而不同，访问服务器用 IP 地址或域名；收发电子邮件要使用电子邮件地址；访问网络中的文件则要使用文件地址。

2、网站：人们可通过浏览器等进行访问、查找文件，也可通过远程文件传输(FTP)方式上传、下载网站文件。

3、网页：网页通常用图像档来提供图画，网页要通过网页浏览器来阅读。

常用术语:

1.1.2 静态网页和动态网页

静态页面以展示为主，用户仅仅是通过页面获取相应的内容，而动态页面允许用户主动参与到页面之中。
动态网页在服务器端运行，客户机上看到的只是它的返回结果，不可能看到它的源文件。
静态网页只能通过服务器把网页文件原封不动地传给客户机，本身不进行任何处理。
动态网页更容易实现人机交互，与数据库相联系，能实现更为强大的功能。
静态网页适合内容不经常变动、对加载速度要求较高的场景，如个人博客、企业宣传页等。动态网页适合需要频繁更新内容、提供个性化服务的网站，如电子商务网站、社交网络平台等。

1.2 网页的基本构成元素
1.2.1.文本
1.2.2.图片和动画
1.2.3.超链接
1.2.4.音频视频
1.2.5.交互表单
1.2.6.其他常见元素
1.3 页面布局结构

1. 栅格布局

栅格布局是一种基于网格的页面布局方式。它将页面划分成多个等宽或不等宽的栅格或列，内容则按照这些栅格进行排列。这种布局方式有利于实现页面的结构化，使内容更加清晰、有序。栅格布局适用于多种页面类型，包括网页设计和印刷品设计。

2. 流式布局

流式布局是一种自适应页面布局方式。它根据用户设备的屏幕尺寸和分辨率自动调整页面元素的尺寸和位置。流式布局能够使页面在不同设备上呈现出最佳的显示效果，提高用户体验。这种布局方式适用于响应式网页设计。

3. 弹性布局

弹性布局是一种灵活的页面布局方式。它利用CSS的弹性盒子模型（Flexbox）实现页面的灵活布局。弹性布局可以轻松地调整页面元素的位置、尺寸和顺序，以适应不同的屏幕和设备。这种布局方式适用于需要灵活调整元素位置的页面设计。

4. 绝对定位布局

绝对定位布局是一种通过设定元素位置坐标来定位页面元素的布局方式。在这种布局方式中，元素的位置是相对于其最近的已定位祖先元素或视口来设定的。绝对定位布局适用于需要精确控制元素位置的页面设计，如创建弹出框、菜单等。

以上四种是常见的页面布局类型。每种布局方式都有其独特的特点和适用场景，设计师可以根据具体需求和目标选择合适的布局方式来实现最佳的页面设计效果。

1.3.1 网页页面布局

1.3.2 网页色彩搭配
1.4 Web前端技术简介
1.4.1 初识WEB前端
1.4.2 WEB前端开发的三大核心技术

HTML CSS JavaScript
1.4.3 前端开发工具

下载安装
浏览器：谷歌浏览器 GoogleChrome
编辑器：HBuilderX

1.5 HTML 语法基础

1.HTML文档标签<html>...</html>

2.HTML文档头标签<head>...</head>

3.文档编码:

4.HTML文档驻日标签<body>...</body>

1.6 创建HTML文档

1.7 网页头部标签

1.<title>标签

2.<meta>标签

description

3.<link>标签

4.<script>标签

1.8 HTML5 文档注释和特殊符号

1.单行注释

2.多行注释

3.代码笔记

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="Keywords" content=""/>
        <meta name="description" content=""/>
        <link rel="stylesheet"
            href="/css/index.css"
            type="text/css"/>
        <script type="text/javascript"
            scr="/js/index.js"></script>
        <title>第一个网页</title>
    </head>
    <body>
        <p>我的第一个网页</p>
        <!--单行注释-->
        <p>软件技术一班</p>
        <!--
        多行注释第一行
        多行注释第二行
        多行注释第三行
        -->
        <a href="http://www.baidu.com">百度一下</a>
    </body>
</html>

1.9课后习题

<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 >
        <!--使用<br/>的效果-->
        <p>一别都门三改火, 天涯踏尽红尘。</br>
                依然一笑作春温。</br>
            无波真古井，有节是秋筠。</br >
            惆怅孤帆连夜发，送行淡月微云。</br >
            尊前不用翠眉颦。</br >
            <font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
        < img src="作业.jpg"/></img>
        <!--水平线-->
        <hr size="2" color="black" width="100%"/>
        <p align="center"> 网页制作教程 Copyright&copy;</p >
    </body>
</html>