分分钟教会你使用HTML写Web页面

在学习如何使用HTML编写网页之前,我们必须先搞清楚什么是HTML?当然了不是系统的给大家介绍HTML的前世今生,如果对其身世感兴趣的小伙伴可以去问度娘,她会给你想要的答案。

所谓HTML,就是我们常听到的“超文本标记语言”,是标准通用标记语言下的一个应用,目前最新的版本是5.0,上面的图片就是官方发布的Logo。“超文本”就是指页面的内容不仅有文字,还有可以有图片、链接,甚至是声音、动画和小程序等非文字元素。你只需知道Web页面就是网页,而HTML就是用来写网页的一种标记语言即可。

了解了HTML的概念之后,我们再来看HTML文档的大体结构:简单来说,包含两大部分,一个是头(Head),另一个就是主体,也就是身体(Body),Head部分主要用来描述关于网页的信息,Body部分则是网页的具体内容。通常我们用三对标签来表示一个页面的整体结构,它们分别为<html></html>,<head></head>和<body></body>。我们使用VS新建一个HTML文件,来看看它的具体结构,如下图所示:

说到标签,也叫作标记符。一个标签就是左右分别有一个小于号(<)和大于号(>)的字符串。开始标签是指不以斜杠(/)开头的标签,其内部是一串允许的属性-值对。结束标签则是以一个斜杠(/)开头的标签。网页文档的结构和格式的定义是由HTML元素来完成的,而HTML元素是由单个或一对标签定义的包含范围。下图给出了HTML元素的四种主要形式:

在HTML中常用的Head元素如下图所示

常用的字符集如下图所示

说了这么多,我想你也许有点不耐烦了,那种迫不及待的想动手的激动心情我能理解。下面我们就来小试牛刀一把,编写一个简单的网页。

首先就是要新建一个HTML文件,建好之后的样子如上面的那个整体结构图

然后我们就在相应的标签之间插入我们想要展示的内容即可,我先把代码给一下:

<!DOCTYPE html>
<html >
<head>
    <title>廊坊师范学院</title>
</head>
<body>
    <!--这是一个关于我们学校的网页Demo-->
			<center>
				<h2><img src="image/2.jpg" /><font color="bule">廊坊师范学院</font></h2>

						       <b>厚德博学,弘毅致远</b>

						<hr color="blue">
						<p>
						<b><i><font color="green" size="3">廊坊师范学院地处被誉为“京津走廊上一颗璀璨明珠”的河北省廊坊市。
                            1946年建校,2000年经教育部批准,升格为省属普通本科院校。升本以来,学校为社会输送了4万余名各级各
                            类专业人才。<br>
						    学校分两个校区办学,占地2000亩,教育教学设施与设备条件优越,馆藏文献140万册,电子图书107万册。
                            设有14个二级学院和继续教育学院、图书馆、社科部、期刊部等教辅单位,14个党政部门;含有普通本、专科
                            教育、高职教育、成人教育等多种教育模式;现有全日制在校生近20000名,教职员工 1394名,其中专任教师
                            902人,具有副高级以上职称的教师491名,具有博士、硕士学位及研究生以上学历的教师638名。<br>
                            学校坚持以学科专业建设为龙头,努力打造以教师教育学科专业为主体,理、工、经、管、法等多科协调发展
                            的专业格局。现开设本、专科专业108个,涵盖九大学科门类。其中汉语言文学专业为国家级特色专业和国家级
                            专业综合改革试点,同时还拥有一大批省级特色专业、教育创新高地、重点发展学科、实验教学示范中心、教学
                            团队、专业综合改革试点和精品课程。
						      </font></i></b></br>
                            <img src="image/1.jpg" width="600" height="320">
                            <a href="http://www.lfsfxy.edu.cn/" target=”_blank“><font color="bule" size="12">更多了解</a></br>

		</center>
</body>
</html>

在上面的例子中我应用了文字,图片以及链接等等简单的网页元素,而且并没有对布局进行设计,因为也只是看了两个小时的视频,在这里想说的是用HTML写Web页面是一件很简单的事,也就是我题目所说的“分分钟教会你使用HTML写Web页面”。

但是想要做出无论内容还是结构俱佳的网页,是需要我们认真研究和学习的,如今比较流行的B/S模式的应用,需要我们能够设计和制作出比较好的前端页面,因此还需要进一步的去学习和总结。今天就先到这里,赶紧动手DIY自己想象之中的Web页面吧。

时间: 2024-08-01 10:27:21

分分钟教会你使用HTML写Web页面的相关文章

前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 前端的小玩意(9.3)--做一个仿360工具箱的web页面(我的工具里的模板和样式) http://blog.c

Android ios嵌套web页面

我们现在做一个活动页面,Android和ios的活动页面用web来做,方便更改,下面有几个小问题: 1.在Android和ios中,虽然web上面可以存localstorage,但是到了Android和ios上面就失效了,也就是说不能存储localstorage,而cookie是可以存储: 2.Android和ios传参给web页面这个和简单,只需要在web端写一个正常的函数,在Android和ios直接调用方法,以下的data就是传回来的参数,如 function receiveAppWish

python使用Django制作第一个web页面

第一步:打开pycharm,点击File>New File 选择Django,填写完点击Create创建如下图: 第二步:项目名和应用名都写的web,目录列表如下: 第三步:将web目录下面的view.py改成 from django.http import HttpResponse def hello(request): return HttpResponse("<h3>使用Django的第一个web页面</h3><hr>") 第四步:将ur

[转]移动端web页面使用字体的思考

一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番. 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体,为了满足

web页面嵌入excel(一)

写这篇文章之前,先提几个问题,希望高手留言指点.讨论: 1. 水晶报表(Crystal Reports)的表头能不能冻结,即:记录多的时候,记录翻页而报表的头部持久显示:如果能怎么实现. 2. 水晶报表在设计的时候表头字段是拖上去的,如果要做一个报表定制工具,这个表头能用程序控制吗?(非vs2005自带的水晶报表) 3. OWC组建在用vs2005做Web开发的时候为什么添加不到工具栏,而vs2003可以,vs2005的Winform程序也可以. 正是前面提到的问题1和问题2无法解决,现在要把整

[500lines]500行代码学写web server

项目地址:https://github.com/aosabook/500lines/tree/master/web-server.作者是来自Mozilla的Greg Wilson.项目是用py2写成.下面文章中贴出的是已经转换后的能在python3.4下运行的代码,所以可能会与原先的有少许不同. 简单地讲,你在浏览器里输入一个网址,浏览器作为客户端会通过DNS解析域名找到对应的IP,并将这串字符串的一部分作为请求发给这个IP的服务器,服务器解析字符串,解析出你的请求内容做出相应处理,然后把一串字

移动Web页面,为什么都喜欢width=device-width,并且关闭系统缩放功能?

如题,这种方式做的移动Web页面,设计稿通常是按照960*640的规格进行设计,再开发的时候,通常会把里面量到的尺寸缩小一半再开发. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1″> 那既然要缩小一半再开发,为什么不直接设置width=640,然后按照设计稿的尺寸进行开发呢? 对于第一种方法,我暂时能想到好处之后图片缩小了一半,不知道还有什么其

如何在Web页面中集成文件上传功能

当前,个人主页制作非常流行.当用户开发好自己的页面时,需要将文件传输到服务器上,解决这个问题的方法之一 是运行FTP服务器并将每个用户的FTP默认目录设为用户的Web主目录,这样用户就能运行FTP客户程序并上传文件到指定的 Web目录.由于Windows NT 和 Windows98均不提供直接的基于窗口形式的FTP客户程序,用户必须懂得如何使用基于命令行 的FTP客户,或掌握一种新的基于窗口形式的FTP客户程序.因此,这种解决方案仅对熟悉FTP且富有经验的用户来说是可行 的. 如果我们能把文件

使用textarea标签按Enter键后web页面中成换行 vue

对于textarea标签的换行问题,其实就是要将textarea里的Enter键替换成web页面中"<br/>". 以下是我的一些方法. 首先我是写一个方法(methods) formatSolution(s) { if (s) { return s.replace(/\s/g,'<br/>') } else return '' }, 然后在到html找到相应的位置. <tbody> <tr v-for="(x,index) in f