第1章网页制作的基础知识

最新推荐文章于 2024-09-12 16:43:23 发布

ChengJianCong@

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量762

点赞数 28

文章标签：前端

本文链接：https://blog.csdn.net/2302_80974792/article/details/142078212

版权

1.1 认识网页和网站

1.11 网页、网站

网页和网站的区别：

1、含义不同

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；

网页是网站的基本元素，展示给用户。

2、关系不同

网站包含了网页，网页是包含了HTML代码集合，呈现一个界面。

3、组成不同

网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成

4、功能不同

网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

常用术语：

URL：统一资源定位符，指定通信协议和地址

IP：网络协议

HTTP：超文本传输协议

FTP：文件传输协议

站点：存放内容的

1.12 静态网页和动态网页

HTML CSS 动态+JavaScri

1.2 网页的基本构成元素

1.2.1.文本：体积小,网络传输速度快，网页的最基本的元素，页面中最主要的载体
1.2.2.图片和动画：图片比文本跟生动和直观
1.2.3.超链接：是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等
1.2.4.音频视频：
1.2.5.交互表单：用于收集用户信息
1.2.6.其他常见元素：网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaScript与 ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局：

1.3.2 网页色彩搭配：

1.4 Web前端技术简介

1.4.1 初识WEB前端

1.4.2 WEB前端开发的三大核心技术：

HTML：HTML 是一种用于创建网页的标准标记语言，通过使用 HTML 标签，开发者可以定义文档的结构和内容。HTML 元素可以分为标签和属性，标签用于定义文档结构，属性用于定义文档的样式和内容。

CSS语言：CSS 是一种用于描述文档样式的语言，通过使用 CSS 样式，开发者可以定义文档的外观和布局。CSS 选择器可以用来选择 HTML 元素，并通过 CSS 属性来修改元素的样式

JavaScript语言：JavaScript 是一种脚本语言，可以在文档加载过程中执行代码。它可以使网页更加动态和交互性，通过使用 JavaScript，开发者可以实现许多复杂的功能，如验证表单、动态效果等。

1.4.3 前端开发工具:

浏览器：谷歌浏览器 GoogleChrome
编辑器：HBuilderX

IE浏览器：IEl浏览器是Internet Explorer 的简称，是由微软公司推出的一款网页浏览器采用Trident内核实现，有6.0,7.0，8.0，9.0，10.0和11.0等版本。

Chrome浏览器：Chrome 浏览器一般指 Google Chrome。Coogle Chrome 是由 Goog公司开发的一款设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Weki和Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面

Firefox浏览器：Firefox浏览器一般指Mozilla frefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows和MacOSX及GNU/Linux等。

Safari 浏览器：Safari浏览器是由苹果公司出品的用于苹果计算机操作系统Mac0X中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。论是在 Mac还是在PC上运行时，Safari都可提供极致愉悦的网络体验方式。

0pera 浏览器：0pera浏览器是由挪威 Opera Software ASA 公司制作的一款支持多更面标签式浏览的浏览器，采用Presto内核实现。它是跨平台浏览器，可以在Windows，M和 Linux3个操作系统平台上运行。

1.5.1 HTML 概述

1.语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

2.超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

3.标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等

1.5.2 HTML 基本结构

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

HTML文档标签的格式为<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释遇到</html>为止。每个HTM文档均以<html>开始，以</html>结束

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

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容< head>
文档头部内容在开始标签<head>和结東标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

3.文档编码
文档编码稍式如

4.HTML 文档主体标签<body>…</body>
HTML文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</bdy>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中

1.6 创建 HTML 文档

<!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" src="/js/index.js"></script>
        <title>第一个网页</title>
    </head>
    <body>
    <p>我的第一个网页</p>
    <!-- 注释内容 -->
    2023软件技术    
    <!--
    多行注释第一行 
    多行注释第二行 
    -->
    <a href="http://www.baidu.com">百度一下</a>
    </body>
    
</html>

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML,文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加人书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下:<title>标题</title>
例如，京东商城的文档标题:
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。

1.7.2 <meta>标签

1. keywords
keywords 用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关字<meta name="keyuwords”content=“网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个劫食品,生鲜,京东"/>
1.7.3 <link>标签

1.7.4 <script>标签

为增加 HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“…”替换为注释文字内容即可。标签支持单行和多行注释。
1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头，以“;称为字符实体。结束。
表1-1 常用的特殊符号及对应的字符实体
示例

特殊符号	字符实体	示例
空格		银河商务  热线:400-111-1111
大于(>)	>	3>2
小于(<)	<	2<3
引号(”)	&quot ;
版权号(©)	&copy ;	Copyright©网页设计教程

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 : 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&copy;广东南方职业学院</p>

</body>
</html>

ChengJianCong@

关注

28
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
第1章网页制作的基础知识

HTML：HTML 是一种用于创建网页的标准标记语言，通过使用 HTML 标签，开发者可以定义文档的结构和内容。HTML 元素可以分为标签和属性，标签用于定义文档结构，属性用于定义文档的样式和内容。CSS语言：CSS 是一种用于描述文档样式的语言，通过使用 CSS 样式，开发者可以定义文档的外观和布局。CSS 选择器可以用来选择 HTML 元素，并通过 CSS 属性来修改元素的样式JavaScript语言：JavaScript 是一种脚本语言，可以在文档加载过程中执行代码。
复制链接

扫一扫