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

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

如何用html制作一个简单的网页相关推荐

  1. 教你快速制作一个简单的网页

    像下面这样一个简单的网页怎么制作呢? 通过这篇文章,可以让你基本掌握一个HTML的结构和常用标签的使用 需要用到的常用标签 <b> 加粗</b> ~~~~~~~~~~~~~~~ ...

  2. 使用HTML+CSS制作一个简单的网页

    简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条.分页栏.悬浮列表等内容. 网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 ...

  3. ps制作html图标素材,如何用PS制作一个简单的扁平化图标?

    今天咱们来做个简单粗暴的扁平化图标,对于扁平化我相信大家已经相当熟悉了,那么用Photoshop做一个简单扁平化图标当作PS入门教程还是不错的. 首先启动Photoshop,下面的版本为苹果版的PS不 ...

  4. 如何用Python制作一个简单的二维码生成器

    目录 前言 1.安装第三方库 2.QRCode参数解释 3.自定义二维码生成器 4.给二维码加图片 5.全部代码 6.结果 前言 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick ...

  5. 使用H5中的表单标签制作一个简单的网页登陆页面

    简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...

  6. 如何制作一个简单的网页

    先创建一个文本文档,将后缀名改为"html" 然后右击这个,选择打开方式,用记事本打开 开头与结尾要用<html>来写,后一个要加"/" 头部用he ...

  7. 用DIV+CSS技术制作一个简单的网页 我的家乡主题

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

  8. 【Vue】使用vue框架制作一个简单的网页

    参考代码(主要参考了样式):link 本文代码地址(Gitee):link 项目上线地址:http://renboo123.gitee.io/curryblog 百度网盘:https://pan.ba ...

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

    1.新建一个记事本 2.开始写html代码 制作一个简单的网页<html><head><title>网页的名字</title></head> ...

  10. 如何做一个简单的网页导航

    如何运用html和css制作一个简单的网页导航 代码示例: <!DOCTYPE html> <html><head><meta charset="u ...

最新文章

  1. CUDA Pro:通过向量化内存访问提高性能
  2. 吴恩达新书《Machine Learning Yearning》完整中文版 PDF 下载!
  3. 目标检测--Beyond Skip Connections: Top-Down Modulation for Object Detection
  4. android上传视频 断点续传,断点续传上传
  5. CubieBoard开发板不用ttl线也不用hdmi线的安装方法
  6. 给你的博客加上“Fork me on Github”彩带(转)
  7. java对象持久化技术_Java对象持久化技术Hibernate 一
  8. 在Eclipse/MyEclipse中安装spket插件
  9. 图像处理之全景拼接---基于sift的全景图像拼接
  10. MySQLl数据量不一样,导致走不同的索引
  11. HWSD土壤数据集下载及打开方法
  12. K3Cloud BOS设计 自定义添加 申请表单
  13. 公众号推送长图最佳尺寸_微信公众平台图片最佳尺寸?
  14. Linux内核有加网速功能吗,Linux下使用有线网络和WiFi能不能叠加网速?网友评论不一...
  15. LC-3 子程序调用与模拟栈调用递归函数
  16. 移动IM产品发展史及趋势预测
  17. SitePoint Smackdown:Atom,括号,Light Table,Sublime Text
  18. 【源码】二维平面应力问题中的弹性材料模型仿真
  19. 怎么把电脑设为服务器共享文档,共享电脑设置 服务器
  20. 聚力赋能·共享共创|吉鼎科技与厦门6大高校“敏捷开发教学研讨会”圆满成功!

热门文章

  1. 美国软件是如何最终装备在中国攻击直升机上的(二)
  2. 前端特效-霓虹灯按钮
  3. mysql emoji表情_mysql utf8mb4与emoji表情
  4. st8s003 c语言编译器,stm8s003f3p6
  5. 使用PYQT5打开海康威视工业相机并获取图像进行显示
  6. java开发kpi考核_如何量化考核技术人的KPI?
  7. 面试:list集合去重
  8. P问题、NP问题、NPC问题、NP hard问题
  9. 最新2020版IDEA下载安装教程
  10. get和post的区别