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

猫咪朵朵

于 2024-09-11 13:18:55 发布

阅读量761

点赞数 26

文章标签： html

本文链接：https://blog.csdn.net/2301_80634189/article/details/142078830

版权

1.1 认识网页和网站

1.1.1 网页，网站

网页和网站的区别：网页是由HTML编写，通过网络传输，供用户获取信息的页面文件，相当于一本书的封面；网站是多个网页的集合，提供多样化的用户功能

常用术语：

Internet: 网络

浏览器：将 Internet 中的文件内容翻译成网页的软件

URL：指定的通信协议和地址

IP：网际协议。IP地址表示计算机在Internet中的位置

域名：网站名称，唯一性

Http：超文本传输协议

FTP：专门用来传输文件

发布：将网页上传网站的过程

站点：一个网站所有内容存放的文件夹

超链接：连接不同网页，站点和资源，并通过点击实现页面跳转的链接

1.1.2 静态网页和动态网页

网页开发的三大核心技术：HTML CSS JavaScript

静态网页：由 HTML/ CSS语言编写

动态网页：在静态网页的基础上加上JavaScript

1.2 网页的基本构成元素

文本：文章展示内容和主旨

图片：让文本更加生动和直观

超链接：通过跳转，引流，方便用户浏览网页内容

音频和视频：使网页效果更多样化

交互表单：个人信息的收集

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

颜色设置到代码里：RGB（红绿蓝），十六进制

1.4 Web前端技术简介

1.4.1 初识Web前端

1.4.2 Web前端开发的三大核心技术：HTML CSS JavaScript

HTML：控制页面结构

CSS：决定页面样式

JavaScript：由静态网页转变成动态网页

1.4.3 前端开发工具

浏览器：谷歌浏览器，GoogleChrome

编辑器:HBuilderX

1.5 HTML语法基础

1.5.1 HTML概述

语言：HTML作为一种超文本标记语言

超文本：加入图片，声音，视频等内容的文本

标记：标记语言

1.5.2 HTML基本结构

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

HTML文档格式为：<html>HTML文档内容</html>

<html>处于文档最前面，表示 HTML文档开始，直到遇到</html>为止，表示 HTML文档结束。

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

HTML文档头标签的格式为：<head>头部的内容</head>

文档头标签在开始标签<html>和结束标签</html>之间定义，其头部内容可以是标题名或者文本文件地址，创作信息等网页信息说明

1.5.2.3 文档编码

HTML文档编码格式为：<meta charset="utf-8" />

所有文档都必须声明它们所使用的编码语言，最常用的字符编码是utf-8。

1.5.2.4 HTML文档主体标签<body>...</body>

HTML文档主体标签格式为：<body>网页的内容</body>

网页的内容是网页的核心，网页中真正显示的内容都包含在主体中。

1.6 创建HTML文档

1.7 网页头部标签

1.7.1：<title>标签

格式为：<title> 标题</title>用于标示文档标题

1.7.2 <meta>标签

content：查找信息和分类信息

name属性主要有以下两个参数：Keywords（检索的关键字），description(网站内容描述）

1.7.3 <link>标签

格式：<link rel="stylesheet" href="/css/index.css" type="text/css">提供文档入径，最常用来链接css样式文件

rel:样式作用

href:css文件入径

type:文件类型

1.7.4 <script>标签

格式：<script type="text/javascript" src="js/index.js"></script>

为HTML文档定义客户端脚本信息

src:jc文件入径

1.7.5 其它标签

<p>..</p>:分段

<a>..</a>:超链接

1.8 HTML5文档注释和特殊符号

1.8.1 注释：

1.8.2 特殊符号：

1.8.3示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="Keyword" 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>
		<!--注释内容-->
		<p>2023软件一班</p>
		<!--注释第一行
		注释第二行
		-->
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</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: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.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程 Copyriight&copy;江西应用工程职业学院</p>
	</body>
</html>