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

HS_UZH

于 2024-09-13 09:24:54 发布

阅读量502

点赞数 18

文章标签： html

本文链接：https://blog.csdn.net/HS_UZH/article/details/142057909

版权

前排声明：为了交作业而写的博客，写的不好，我也不是专门开发网页的

1.1 认识网页和网站

1.1.1 网页，网站

何为网页？

网页是一个单纯的页面(也就是HTML文件+JS+CSS等)

网站是一个域名指向的服务器

常用术语：

URL：统一资源定位器，用于规定网页文件所在的位置，使用的协议等

域名：相当于IP地址的另一个名字，对人类而言更易读，需要DNS服务进行

FTP：一种文件传输协议，基本功能就是上传和下载文件，但还有一些简易的权限管理能力

IP:服务器本身的地址，也是域名完成解析后的数据

发布：将网页上传到网站服务器上

超链接：一个新的URL，用于告诉浏览器一个新的地址，使其跳转，或者是获取另一个地址的资源

1.1.2 静态网页和动态网页

何为静态？

服务器发送数据到浏览器,HTML+CSS，这种就是静态，没有本地代码执行，也没有动态改变内容

如果在静态网页+Javascript(俗称JS)可以随着外界操作而改变自身，则为动态网页

(视频不算，具体判断标准为是否使用了JS)

1.2 网页的基本元素

1.2.1 文本

最简单的文本方法就是：直接写

没错，就一个单纯的txt，当然，不好看QwQ~~~

这时就需要

<p>这里输入文本</p>

这样就可以输入一段HTML的正文

还可以这样

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
以此类推

哪怕是这些，也够做出一些简易的文本效果了

需要换行的话使用br标签

<p>第一行</br>第二行</p>

1.2.2 图片and动画

HTML本身是文本，理论上无法存储图片，但可以外链一张图

<img src="目标图片URL"/>

就像这样，就能插入图片，

还有一种是利用base64编码，这种可以将图片资源变成文本打包在HTML中，但会导致HTML文件膨胀


    <img src="data:image/png;base64,某张png格式文件的base64编码后的文本"/>

1.2.3 超链接

点击跳转这种就是典型

使用如下

<a href="点击跳转的超链接">被点击的内容</a>

1.2.4 音视频

你可以这样

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  你的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  你的浏览器不支持 Video 标签。
</video>

来实现音频和视频的插入

1.2.5 交互表单

简单的说就是一些输入框，可以被js读取并提交至服务器，或者本地处理。由于过于复杂所以此处不提供示范代码

1.2.6 其它常见元素

其它的比如说嵌入WebGL着色器，嵌入第三方网站，嵌入一些SDK比如Live2D技术啥的，甚至做3D小游戏渲染，这些以后或许都。。。不会教，嗯UwU~~~

1.3 页面布局

1.3.1 网页页面布局

大体分四种吧，

国子型，比如绝大多数的政府网站

厂字型，比如你现在看到的这个博客？？？

海报型，比如github主页

Flash型，这种。。。。现在Flash似乎都已经寄了，学校的教材好老QwQ~~~~

1.3.2 网页色彩搭配

建议以一种颜色做主颜色，然后调亮度饱和度对比度

想更好建议上网搜些已经成熟的配色

1.4 web前端技术简介

1.4.1 web前端三大技术

HTML：负责网页的布局以及各种框架

CSS：样式表，你的字体是啥，啥颜色都由它管

JS：逻辑处理，在线计算器？在线地图？甚至是在线办公？JS就是干这个的！！！

1.4.2 前端开发工具

我个人推荐VScode+Edge，当然，你也可以用任何浏览器+任何文本编辑器，你甚至可以IE+记事本，按你的习惯来~~~

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

其实这本质上不算语言而是一种超文本标记格式

1.5.1.2 超文本

超文本本质上就是在文本的基础上加入各种资源，比如音视频，图片等

标记

如下是一个标记

<xxx></xxx>

大多数标记都有前后两个标记，少量除外都是这样的，如果前面的那些(1.2节)看不懂，不止这样还是否看得懂

实操：第一个网页

我们创建一个文件并往里面写入如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
		<p>Hallo world</br>换行</p>
	</body>
</html>

嗯，似乎前面没有讲解html，head，meta，title等标签呢，总之我们主要是body标签内处理，外面的那些可以直接抄来用就行然后执行完成后就差不多是这样,第一行是标准头后面的html标签内的才是真正被执行的，任何之外的字符都会被无视，标签内也分两部分为head和body两部分，上面的都是body内的，下面我们来大概介绍一些head内1

head标签内可用的标记

关于title

这是网页标题，将标题文本写在里面就行

关于meta

meta很有意思，可以设置网页的一些特殊效果

<meta charset = "utf-8"/>

设置字符集为UTF8

<meta name="keywords" content="xxx"/>

设置网站的关键字(用于搜索引擎的处理)

<meta name="description" content = "xxx"/>

设置网站描述

关于link和script标签

用于引入JavaScript和CSS文件

需要注释？？？

<!-- 这样就是注释 -->

之后需要额外添加啥可以自行添加，至于JS和CSS以后再学~~~~~~

自己操作一下？？？

现在一些常见的情况也解决了，是时候写个好看点的网页了

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="宋词,苏轼"/>
		<meta 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>
		<p>
			别都门三改火，天涯踏进红尘。</br>
			依然一笑作春温。</br>
			无波真古井，有节是秋殇。</br>
			惆怅孤帆连夜发，送行淡月微云。</br>
			尊前不用翠眉颦。</br>
			<font color="brown" face="微软雅黑">
				人声如逆旅，你我皆行人
			</font>
		</p>
		<img src="img/aa.jpg"/>
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程&copy;版权符号插入</p>
	</body>
</html>

运行效果