如何用html制作一个简单的网页

news2025/7/11 1:24:52

        哈喽,大家好!我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作,其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。

        了解html

       1. 学习html之前先要知道html是什么

        HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等

        超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

        2.一个html基础网页

       标记符<html>:说明该文件是用超文本标记语言来描述的,它是文件的开头,而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个简单的网页</title>
	</head>
	<body>
		<h1>这是一个标题</h1>
		<h2>这是一个标题</h2>
		<h3>这是一个标题</h3>
		<h4>这是一个标题</h4>
		<h5>这是一个标题</h5>
		<h6>这是一个标题</h6>
		<p>这是一个段落</p>
	</body>
</html>

 

        < head></head>是他的头部部分

        <title></title>里面的内容就是这个网页的名字

        <body></body>是他的身体部分也就是我们常看到的网页内容

        <h1></h1>—<h6></h6>定义了一级到六级标题

        <p></p>定义了一个段落

        3.html基本标签

<html>
	<head>
		<title>李清照-清平乐</title>
	</head>
	<body>
		<h1>清平乐</h1>
		<hr>
		<!--span:不换行的行内标签-->
		<!--加粗b或strong;网页版没有差别
		b:纯粹加粗 strong:主旨在强调-->
		<!--倾斜<i>或<em>
		i;纯粹强调,em;主旨在强调-->
		<span>年年雪里,常插<b>梅花</b>醉,挼尽<strong>梅花</strong>无好意,赢得满衣<br>清泪!</span><br>
		<span>今年<i>海角</i>天涯,萧萧<em>两鬓</em>生华。</span><br>
		<span>看取晚来风势,故应<i><b>难看</b></i>梅花。</span><br>
		<!--加粗和倾斜可以同时使用-->
		
		
	</body>
<html>

 

 4.链接

 

普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

5.图片

<img src="./img/核桃.png" title="核桃" alt="核桃" width="100" height="100"/>

6.特殊符号

<html>
	<head>
		<title>特殊符号</title>
	</head>
	<body>
		<h1>空格符号</h1>
		符  号<br>
		符&nbsp;&nbsp;&nbsp;号<br>
		<!--半角空格-->
		符&ensp;&ensp;&ensp;号<br>
		<!--全角空格-->
		符&emsp;&emsp;&emsp;号<br>
		<hr>
		<h1>大于小于号</h1>
		&lt;span&gt;符号&lt;/span&gt;<br>
		<hr/>
		<h1>双引号</h1>
		&quot;符号&quot;
		<hr>
		<h1>版权符号</h1>
		&copy;&ensp;符号版权
	</body>
<html>

 好了,了解了以上的这几点,我们就能制作一个简单的网页了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			<h1>明年起 电动车禁止上电梯 电梯停用不公示原因最高罚2万<h1>
		</p>
		<p>
			<h6>发布时间:2016-11-22&nbsp;06:58:22&emsp;来源:郑州晚报</h6>
		</p>
		<hr>
		<p><img src="pic.jpg"></p>
		<p>&emsp;&emsp;报社讯 电梯里要安装监控设备,电动车不能上电梯。近日,《郑州市电梯使用安全管理办法》通过并对外公
			<br>布,电梯需要安装监控设备并保护有效运行,违者最高可被罚3万元。同时明确乘坐电梯的7种禁止行为,包括电
			<br>动车禁止上电梯等。该《办法》字2017年1月1日起施行。郑报融媒记者 董艳竹 李雪</p>

		<p>&emsp;&emsp;这7种行为《办法》</p>

		<p>
			<ol>
				<li>乘坐明示处于非正常状态的电梯;</li>
				<li>在超过额定载重量时乘坐电梯;</li>
				<li>携带自行车(含电动自行车,已折叠的自行车除外)乘坐电梯;</li>
				<li>违反电梯安全警示标志操作电梯;</li>
				<li>采用扒撬等非正常手段开启电梯层门、轿门;</li>
				<li>拆除、破坏电梯的安全注意事项、使用标志、应急救援电话、电梯安全责任投保信息、报警装置、安全
					<br>部件及其他附属设施;</li>
				<li>其他危机电梯安全运行和他人乘坐安全的行为。</li>
			</ol>
		</p>
		<p>
			<h3>使用:电梯需安装监控并有效运行</h3>
		</p>

		<p>&emsp;&emsp;办法》所称的电梯,包括载人(货)电梯、自动扶梯和自动人行道等。</p>

		<p>&emsp;&emsp;对于电梯要不要安装监控一事,《办法》明确,不仅要安装还要保持有效运行。电梯使用单位应当安装电
			<br>梯安全运行监控设备,并与市特种设备安全监督管理部门的质量安全监管平台链接,保持起有效运行。
		</p>
		<p>&emsp;&emsp;住宅小区电梯需要改造、修理、更新的,电梯使用单位和业主委员会应当及时组织落实,业主应当履行资金
			<br>筹集义务。
		</p>
		<p>&emsp;&emsp;其中,已建立住宅专项维修资金的,按照规定在住宅专项维修资金中列支。未建立住宅专项维修资金或者
			<br>住宅专项维修资金余额不足的,业主对费用承担有约定的,按照约定承担;没有约定或者约定不明确的,乡镇人
			<br>民政府、街道办事处应当协助组织业主筹集落实资金。
		</p>
	</body>
</html>

这次的分享就到次结束了,希望能帮到你们。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406984.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

查看Chrome浏览器版本及下载对应的webdriver,并下载安装

查看Chrome浏览器版本及下载对应的webdriver&#xff0c;并下载 文章目录查看Chrome浏览器版本及下载对应的webdriver&#xff0c;并下载一&#xff0c;查看自己电脑的Chrome的版本二&#xff0c;webdriver的对应版本三&#xff0c;安装一&#xff0c;查看自己电脑的Chrome的版…

nvm介绍、安装、报错处理以及使用

前言 工作中我们偶尔可能同时在进行多个项目开发&#xff0c;而多个不同的项目所使用的 node 版本又是不一样的&#xff0c;在这种情况下&#xff0c;对于维护多个版本的node 将会是一件非常麻烦的事情&#xff0c;因为需要操作做卸载安装操作&#xff0c;而nvm 就是为解决这个…

关于Vue3的defineProps用法

之前只是单纯的会用&#xff0c;因为vue关于父子组件通讯差别有一点点大。 1.在父组件内传递变量的时候&#xff0c;需要加冒号:&#xff0c;否则你就只是单纯的传递了一个字符串而已。 2.在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。 我个人在这里…

axios基本使用及跨域问题详解

前端请求自然也发展迅速&#xff0c;从原生的XHR到jquery ajax&#xff0c;再到现在的axios和fetch。axios&#xff08; https://axios-http.com/zh/ &#xff09;是Vue推荐的http库&#xff0c;这个还是要了解一点的。 安装 $ npm install axios基本使用的例子 1、在main.j…

Vue项目:学生管理系统

&#x1f482; 个人主页: 陶然同学&#x1f91f; 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦&#x1f485; 想寻找共同成长的小伙伴&#xff0c;请点击【Java全栈开发社区】…

Nginx的安装配置教程

一、Nginx的下载与安装 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好 1.下载 在Nginx的官网的下载页面…

JavaScript-匿名函数

什么是匿名函数 1、匿名函数,即没有名称的函数 2、如果单独只写一个匿名函数&#xff0c;此时是不符合语法要求的 会报错。需要给 匿名函数包裹一个括号&#xff0c;使之成为表达式。 3、被小括号包裹的内容会被js识别为一个函数表达式 如何执行和使用匿名函数&#xff1f; …

前端直传阿里云OSS

阿里云对象存储服务&#xff08;Object Storage Service&#xff0c;简称OSS&#xff09;&#xff0c;是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。 目前通过Web端直传文件&#xff08;Object&#xff09;到OSS&#xff0c;有两种方案&#xff1a; 一、利用OSS…

web渗透之文件上传漏洞

目录一、原理二、利用方式三、文件上传的风险处四、文件上传漏洞的危害五、文件上传漏洞常见的绕过方式1、前端绕过检测2、mime类型检测绕过3、黑名单绕过&#xff08;1&#xff09;、相似扩展名&#xff08;2&#xff09;、apache配置文件&#xff08;3&#xff09;、大小写绕…

如何将html模板资源转为vuecli项目

1.目标 将找到的html素材模板&#xff0c;转换为vue的文件。 这个网上照了一圈&#xff0c;没找到合适的方案&#xff0c;就自己尝试弄了一下 目标效果 2.具体步骤 1. 通过vueclie 创建项目 vue create 项目名称然后把默认的样式删除了 2. 将静态资源放到vue项目的 publi…

【python】自动填写问卷星问卷及提交

前言&#xff1a;问卷是很好的网络调查方式之一&#xff0c;近年来&#xff0c;问卷星被广泛应用于各方面的调查。本文介绍了利用python代码自动填写问卷星基本题目&#xff0c;拥有自动填写、解决智能验证、批量提交问卷等功能。 目录 1.下载浏览器驱动 2. selenium基本配置…

【Java 基础篇】Java 初识、编译运行机制及开发环境搭建

一、Java 语言初识二、Java 编译运行机制2.1 JVM、JRE、JDK 三大概念介绍2.2 Java 是如何运行的三、Java 开发环境搭建(文末附下载地址)四、第一个 Java 项目4.1 创建项目和 .Java 源文件4.2 输出 hello world一、Java 语言初识 Java 是由 Sun Microsystems 公司于 1995 年 5 …

十大经典排序算法(下)

&#x1f353;个人主页&#xff1a;bit.. &#x1f352;系列专栏&#xff1a;Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.6 快速排序 1. 算法步骤 2. 动图演示 3.代码实现 1.7 堆排序 1. 算法步骤 2. 动图演示 3. 代码实现 1.8 计数排…

JavaScript注册监听事件与清除监听事件

JavaScript中有两种方法可以注册监听事件&#xff0c;一种是传统的注册方式&#xff0c;on事件名称的注册方法&#xff0c;如btn.onclick,还有方法监听事件注册方式&#xff0c; addEventListener()和ie8以下的attachEvent()。 注册监听事件 传统方式 语法格式&#xff1a;元…

ES6笔记————let,箭头函数,剩余参数

目录 一.let,var,const区别 let const 区别 二&#xff0c;解构 1 数组解构 2对象解构 三&#xff0c;箭头函数 1 基础语法 2 省略写法 3 对象方法里的this 4 apply/call调用时的this 5 箭头函数中this 8 箭头函数应用 四&#xff0c;剩余函数 一.let,var,con…

【bug】Failed at the node-sass@4.14.1 postinstall script(终于圆满解决)

花了两个小时才解决 首先是从git上克隆项目到本地&#xff0c;然后安装nodele_modules&#xff0c;输入npm i安装 安装到一半报错 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass4.14.1 postinstall: node scripts/build.js npm ERR! Exit status 1 npm ERR! …

关于 Vue “__ob__:Observer“ 属性的解决方案

问题描述 我们操作 Vue 数据的时候&#xff0c;经常会看到这个属性: __ob__:Observer在我们操作这个数据的时候&#xff0c;如果想要单独拿这个数据里面的值&#xff0c;就会返回 undefined经过我在网上查找相关资料&#xff0c;发现 __ob__:Observer 是 Vue 中一个非常重要的…

【vue】diff 算法详解

一、diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图&#xff0c;所以 diff 算法本质上就是比较两个js对象的差异 特点 1. 比较只会在同层级进行&#xff0c;不会跨层级比较 2. 在diff…

原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧

目录 1. 案例分析&#x1f4a8; 2. 适配设备 &#x1f4a8; 3. 背景滚动&#x1f4a8; 4. hero操作&#x1f4a8; 5. 敌机的创建与运动&#x1f4a8; 6. 子弹的创建与运动&#x1f4a8; 7. 碰撞检测&#x1f4a8; 8. 统计得分&#x1f4a8; 9. 设置开始与结束界面&…

疫情散去想看电影,使用css3动画实现一个阿凡达2完美开场

在历经了艰苦卓绝的3年抗疫后&#xff0c;疫情终于还是来了&#xff0c;很多小伙伴变成了小洋人酸奶&#xff0c;我相信过不了多少天&#xff0c;疫情终将散去&#xff0c;那个时候就可以和家人走进电影院啦。 今天用css布局一个阿凡达2的影院场景&#xff0c;提前过一过瘾。 目…