在学习怎样使用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>

以下我们来看一下使用IE浏览器执行的结果

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

可是想要做出不管内容还是结构俱佳的网页，是须要我们认真研究和学习的，现在比較流行的B/S模式的应用，须要我们可以设计和制作出比較好的前端页面，因此还须要进一步的去学习和总结。今天就先到这里，赶紧动手DIY自己想象之中的Web页面吧。

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

  1. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  2. 编写大型项目web页面 从写web登陆页面开始

    web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用的cutterman) sketch 可以使用阿里的工具 ...

  3. web页面放到手机页面，缩放问题

    有时候写页面样式不规范,很多页面元素写死尺寸时,web页面尺寸比较大放到移动端访问时,就背缩放了,div或者按钮变得好小 可以加段js,效果会好点 <script> ! function( ...

  4. 谷歌/微软/必应web页面免费翻译插件

    随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...

  5. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  6. web页面实现指定区域打印功能

    web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...

  7. X5的UI部分和传统Web页面开发的差异

    http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...

  8. paip.powerdesign cdm pdm文件 代码生成器 java web 页面 实现

    paip.powerdesign cdm pdm文件 代码生成器 java web 页面 实现 准备从pd cdm生成java web 页面...但是,ms无直接地生成软件.... 只好自己解析cdm ...

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

    一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...

随机推荐

  1. 设计模式 ( 十五 ) 中介者模式Mediator（对象行为型）

    设计模式 ( 十五 ) 中介者模式Mediator(对象行为型) 1.概述 在面向对象的软件设计与开发过程中,根据“单一职责原则”,我们应该尽量将对象细化,使其只负责或呈现单一的职责,即将行为分布到各 ...

  2. Android 文件共享服务器

    http://download.csdn.net/detail/liduanw/6271075 你可以将自己的手机作为(局域网)服务器,  使用方法: 1> 指定共享根目录 2> 点击启动 ...

  3. vs2016 创建 vsto excel 文件项目的一个问题

    新工作需要些一个基于Excel开发一个工具,vs的 vsto 功能很好用,封装了基于开发office 开的一些工具.但是在实际使用时,创建项目总是报错,提示打开excel文件失败.项目是需要创建一个e ...

  4. Qt新建线程的方法（有QRunnable，QThreadPool，moveToThread和QtConcurrent的例子）

    看了不少Qt线程的东西,下面总结一下Qt新建一个线程的方法. 一.继承QThread 继承QThread,这应该是最常用的方法了.我们可以通过重写虚函数void QThread::run ()实现我们 ...

  5. Android学习笔记：进度条ProgressBar的使用以及与AsyncTask的配合使用

    ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.Pro ...

  6. Android项目实战手机安全卫士（02）

    目录 项目结构图 源代码 运行结果 项目源代码 项目结构图 源代码 清单 01.  SplashActivity.java package com.coderdream.mobilesafe.acti ...

  7. 清华集训2014 day1 task2 主旋律

    题目 这可算是一道非常好的关于容斥原理的题了. 算法 好吧,这题我毫无思路,直接给正解. 首先,问题的正面不容易求,那么就求反面吧: 有多少种添加边的方案,使得这个图是DAG图(这里及以下所说的DAG ...

  8. Oracle10g数据泵EXPDP和IMPDP备份与恢复数据

    Oracle10g数据泵EXPDP和IMPDP备份与恢复数据 一.数据库备份前准备工作 新建备份DIRECTORY目录,并授权给用户 步骤: 1.登录sqlplus 账户名:ptemp 密码:0000 ...

  9. Linux笔记——linux下的语音合成系统

    1.festival 安装:sudo apt-get install festival 使用: (SayText "Hello!") 2. espeek(ubuntu 自带) # ...

  10. Swift - 表格图片加载优化（拖动表格时不加载，停止时只加载当前页图片）

    列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...