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

标签：网页标签基础知识 HTML 文档浏览器标题制作

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>

标签：网页,标签,基础知识,HTML,文档,浏览器,标题,制作
From： https://blog.csdn.net/2302_80974792/article/details/142078212

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

1.1 认识网页和网站

1.11 网页、网站

1.12 静态网页和动态网页

1.2 网页的基本构成元素

1.3 页面布局结构

1.3.2 网页色彩搭配：

1.4 Web前端技术简介

1.4.1 初识WEB前端

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

1.4.3 前端开发工具:

1.5.1 HTML 概述

1.5.2 HTML 基本结构

1.6 创建 HTML 文档

相关文章

赞助商

阅读排行

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

1.1 认识网页和网站

1.11 网页、网站

1.12 静态网页和动态网页

1.2 网页的基本构成元素

1.3 页面布局结构

1.3.2 网页色彩搭配：

1.4 Web前端技术简介

1.4.1 初识WEB前端

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

1.4.3 前端开发工具:

1.5.1 HTML 概述

1.5.2 HTML 基本结构

1.6 创建 HTML 文档

相关文章

赞助商

阅读排行

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