第一章网页的基础知识

hhmy123456

已于 2024-10-13 10:38:21 修改

阅读量694

点赞数 19

文章标签： html5

于 2024-09-12 21:52:26 首次发布

本文链接：https://blog.csdn.net/2401_86933352/article/details/142092784

版权

1.1认识网页网站

1.1.1认识网站和网页及常用术语

网页：是构成网站的基本元素，包含文字、图片、链接、多媒体等各种信息，可以展示丰富的内容，用户通过在浏览器中输入网址来访问特定的网页，从而获取信息。

网站：‌‌是指在互联网上，根据一定的规则，使用 HTML（超文本标记语言）等工具制作的相关网页的集合。

常用术语：

url（统一资源定位符）：用于标识互联网上资源的地址。

域名：是互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。

ftp（文件传输协议）：用于在网络上进行文件传输的标准协议。

超链接：从一个网页指向另一个目标的连接关系

1.1.1网页和网站的区别

网页是网站的组成部分，网站是由多个网页组成的集合体，通过链接相互连接，形成一个整体。通常，网站还包括‌导航菜单、菜单、‌底部信息等共享的元素

1.1.2网页和网站的联系

网站是由多个网页组成的，每个网页都是网站的一部分。

1.1.3静态网页和动态网页的区别

静态网页是只有html css

动态网页只要有JavaScript就是动态网页

1.2网页的基本构成元素

1.2.1.文本

体积小传输快

1.2.2.图片和动画

生动

1.2.3.超链接

可从一个位置到另一个位置

1.2.4.音频和视频

使网页多样化

1.2.5.交互表单

可收集用户信息

1.2.6.其他常见元素

可使页面活泼

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

rgb 三元色

每一个网站都有自己的主色调

1.4 Web前端技术简介

1.4.1 初识WEB前端

是基于互联网的、通过超链接将多个文档等资源连接起来形成的信息系统，方便人们浏览、共享和交互信息

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

HTML：设计页面结构决定是用文字图片

CSS：页面样式文件,决定加粗或居中

JavaScript ：是一种前端编程语言、动态技术，用于为网页添加动态交互功能，如表单验证、页面特效、动画等，也可用于服务器端开发（Node.js）等多种场景

1.4.3 前端开发工具

1.浏览器

2.网页编辑器

3.切图软件

1.5 HTML语法基础

1.5.1 HTML概述

1.语言

2.超文本

3.标记

1.5.2HML基本结构

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

标记范围，超出标签之外的内容不出现在页面上

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

定义HIML文档。

3.文档编码

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

主体部分

1.6创建HTML文档

1.7网页头部标签

1.7.1<title>标签

设置标题

1.7.2<meta>标签

1.keywords

设置关键字

2.description

描述页面面内容

1.7.3 <link>标签

样式脚本

1.7.4 <script>标签

指定文件路径、类型

1.8 HTML5文档注释和特殊符号

1.8.1 注释

ctrl+/

1.8.2 特殊符号

空格、<、>、"、©

实践代码

<!DOCTYPE html>
<html><!-- 告诉内容范围 -->
	<head>
		<meta charset="utf-8" /> <!--字符集-->
		<meta name ="keyword"content="xxx"/><!-- 关键词 -->
		<meta name ="description"content="xxx"/><!-- /*描述网页内容*/ -->
		<title>第一个网页项目</title><!-- 设置标题 -->
		<link rel="stylesheet" href="css/index.css" type="text/css"/><!-- css样式脚本 指定路径 文件类型 -->
		<script src="js/index.js" type="text/javascript"></script><!-- javascript指定文件路径 类型 -->
	</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: large;
			}
		</style>
	</head>
	<body bgcolor="antiquewhite" text="#333333">
		<h2 align="center">临江仙·送钱穆父</h2>
		<p >宋 苏轼</p >
		<!-- 使用<br/>的效果 -->
		<p >一别都门三改火，天涯踏尽红尘。<br/>
		        依然一笑做春温。<br />
		    无波真古井，有节是秋筠。<br />
		    惆怅孤帆连夜发，送行淡月微云。<br />
			尊前不用翠眉颦。<br />
			<font coler="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>