网页知识的基础知识

爱意不止玫瑰

已于 2024-09-30 20:56:05 修改

阅读量507

点赞数 22

文章标签：笔记

于 2024-09-11 17:25:48 首次发布

本文链接：https://blog.csdn.net/aka4912/article/details/142078955

版权

1.1 认识网页和网站

1.1.1 网页网站

网页网站的区别：网页对应一个网址网页是网站的基本元素，网站是有独立域名，独立存放空间的内容的集合

常用主语：internrt,WWW，浏览器 URL，HTTP，发布，站点，超链接，导航条，客户机和服务器，IP,HTTP,FTP,

1.1.2静态网页和动态网页

HTML CSS(静态) JavaScript（动态）

静态：静态网页是指客户端的浏览器发送URL请求给 WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS 语言编写

动态：只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页

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.4web前端技术简介

1.4.1初识web前端

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

HTML:HTML,是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。

CSS:CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

javaScript:Javaseript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的测览效果。它的解释器被称为JavaScnpt引擎，属于浏览器的一部分，因此JavaSeript代码由浏览器边解释边执行。通常JavaScript脚本通过嵌人在HTML中的方式来实现自身的功能万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离

1.4.3前端开发工具 HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE浏览器、Chrome浏览器、Firefox浏览器、Safan 浏览器和 Opera浏览器等，

i1.4.3.1 浏览器
1.4.3.2 网页编辑器HTML，CSS和JavaSeript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容，因此本书本对开发工具告特定委示。任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍儿需的两黄兴发工4:Adobe Dreamweaver, Sublime Text, NotePad++, EdiPhe Al
1.4.3.3 切图软件HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有页制作工具，但是这些工具生成的代码仍然是以HTML为基础的，因电即所得的!计网贡非常重要L代码端设
1.5 HTML语法基础TML是制作网页的基础语言，是初学者必学的内容。虽然现在有页制作工具，但是这些工具生成的代码仍然是以HTML为基础的，因电即所得的!计网贡非常重要L代码端设
1.5.1 HTML概述
1.5.1.1 语言HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议现定了浏览器运行HTML文档时所遵循的规则和进行的操作。协议的制定使测览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用TML播述的文件需要通过Web浏览器HTTP显示出效果。
1.5.1.2 超文本超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个ETL文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂
1.5.1.3 标记HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释、显示出文字图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和
双标签两大类:单标签指的是只存在一个标签的写法，如<meta><input>等。双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签、结束标签需要在左尖括号后添加一个关闭符“/”
HTML只是一个纯文本文件。创建一个HTML文档、需要HTML编辑器和Web浏览器个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开网页文件，提供查看Web资源的客户端程序，
1.5.2 HTML基本结构HTML文档是由一系列的元素和标签组成的。元素名不区分大小写。TML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文省头对文省进行一些必要的定义，主体部分是文档要显示的信息。其基本结构见例1.1。
1.5.2.1 HTML文档标签<html>...</html>文档标签<htm>……</himl>
<加D处子文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释相IL文标签的为逻到<tml>为业。每个HTL,文档均以<html>开始，以</html>用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用CB2313(简体中文)。
4.HTML 文档主体标签<body>…</body>
HTML文档主体标签的格式为
ctady>网页约内容</body>
主体位于头部以后，以<body>为开始标签，</bodv>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中
1.6 创建 HTML 文档
又有超链接和视频

1.5.2.2 HTML文档头标签<head>...</head>
1.5.2.3 文档编码
1.5.2.4 HTML文档主体标签<body>...</body>
1.6 创建HTML文档
1.7 网页头部标签
1.7.1 <title>标签
1.7.2 <meta>标签
1.7.2.1 keywords
1.7.2.2 description
1.7.3 <link>标签
1.7.4 <script>标签
1.8 HTML5文档注释和特殊符号
1.8.1 注释
1.8.2 特殊符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="Keywords" content=""/>
		<meta name="desciption" content="/">
		<link rel="stylesheet"
		      herf="/css/index.css"
			  type="text/css"/>
			  <script type="text/javascript"
			  scr="/js'index.js"></script>
		
		<title></title>
	</head>
	<body>
	       <P>我的第一个网页</p>
			<p>2023软件一班</p>   
			<a herf="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>
 	<bodybgcolor="antiquewhite" text="#333333">
 		<h2 align="center">临江仙·送钱穆父</h2>
 		<p>宋 苏轼</p >
 		<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>