整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

助你分分钟学会编写简单网页

起编程,相信很多人都不陌生,立马就会想到像:java、C、C#、C++、SQL等等用的比较广泛的编程语言。网页的编写虽然比不上这些编程语言那么的复杂,但是一个好的网页,是需要大量的:样式设计、利用ps修图、以及JavaScript等等技术相结合。那么今天就为大家简单的说说HTML的编写,对网页的基本编写的操作有个简单的认识,相信看完下面的内容,聪明的你,马上就能写出属于自己的网页呢~

编写工具:

Phase 5、 Programmer’s Notepad、SynWrite、PlainEdit.Net、Notepad++、CoffeeCup、jEdit、Sublime Text 2、Brackets、Aptana Studio 3(这10个都是我从网上搜的,小编除了Notepad++,其他都没用过~~~)其实编写工具一定要适合自己,才是最好的,所以小编一直都喜欢用”记事本”编写,O(∩_∩)O哈哈~,当然推荐一下:Dreamweaver也是相当好用的。

对于初学者来说,记事本绝对是最好的编写工具,因为所有的代码都要自己一个一个写,没有其他编写工具的快捷键提示。

编写方法:

新建文件:

新建一个记事本文件,并将后缀名改为 .html ,然后在鼠标右键选择用记事本打开。因为.html的文件默认的是以网页的形式打开的,所以,修改后缀名这一步也是写网页中重要的一步。

基本框架:基本的网页一般包括网页的标签<html>,网页的头<head>,网页的主体(身体)<body>,并且在网页的编写中有一个原则,就是几乎所有的标签都是一一对应的。即<>...</>。

网页的标题:

添加<title>...</title>标签即可编写网页的标题,随便写啥都可以~

网页内容的编写:

网页的内容只要你能想的到的,都可以写上去,直接在<body>...</body>里随便的输入内容吧~

效果图:

修饰:

利用各种标签来对你想到的内容进行格式、颜色、等内容上的修改,下面我简单列举几个常用的标签,小伙伴们可以自己动手试试达到想要的效果,没有涉及到的还请谅解。

添加背景图片:<body background="图片所在路径+图片全名">

背景颜色:<body color="颜色的英文名称或者颜色代码,可去网上搜索">

添加图片:<img src="图片所在路径+图片全名">

文字设置:<font size=”文字大小” face=”字体” color=”文字颜色”>...</font>

居中:<center>...</center>

换行:<br>

段落:<p>...</p>

超链接:<a href=\"链接的地址\">链接的名字</a>

移动字体:<marquee direction=lift或者right>写上你想写的字</marquee>

字体加粗:<b>添加文字</b>

字体斜体:<i>添加文字</i>

字体下划线:<u>添加文字</u>

字体删除线:<s>添加文字</s>

字体加大:<big>添加文字</big>

可以试试在<head>...<head>中试试加入我的这段代码哦~

<head>

<title>我的网页demo</title>

<div id="boom"><marquee direction=lift>欢迎各位小伙伴转发~关注~赞~评论~有任何错误或是问题都说出来哦

~~~</marquee></div>

<script language="javascript">

function Color()

{

var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";

color=color.split("|");

document.getElementById("boom").style.color=color[parseInt(Math.random() * color.length)];

}

setInterval("Color()",400);

</script>

</head>

今天就介绍到这里,欢迎各位看官给予建议和批评,明天我会写一篇关于《局域网内访问他人电脑上的自制网页》的文章,感兴趣的童鞋可以关注一波~感谢大家~

TML简介

什么是 HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

HTML 标签是由尖括号包围的关键词,比如 <html>

HTML 标签通常是成对出现的,比如 <b> 和 </b>

标签对中的第一个标签是开始标签,第二个标签是结束标签

开始和结束标签也被称为开放标签闭合标签

HTML 文档 = 网页

HTML编辑器

我们可以使用专业的 HTML 编辑器来编辑 HTML:

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

下面我们用记事本来制作一个简单的网页:

第一步,打开记事本

如何启动记事本:

开始

所有程序

附件

记事本

第二步,在记事本中编辑HTML语言,如图:

第三步,保存 HTML

在记事本的文件菜单选择“另存为”。

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。

第四步,在浏览器中运行这个 HTML 文件

启动您的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击您的 HTML 文件。

结果应该类似这样:

这样,一个简单的网页就成了。

HTML代码-标题

网页制作时用什么来表示标题呢?下面我们来看看:

HTML 标题

标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

注释:浏览器会自动地在标题的前后添加空行。

注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

HTML代码—水平线

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

提示:使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

HTML代码—注释

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释是这样写的:

注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

提示:合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML代码—段落

HTML 段落

段落是通过 <p> 标签定义的。

注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)

HTML代码-折行

折行有什么用呢?

当然折行的主要目的是调整网页布局,让它看起来更美观大方。

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

HTML样式-背景颜色

background-color 属性为元素定义了背景颜色:

<html><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body></html>

HTML样式-字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>

HTML样式-文本对齐

text-align 属性规定了元素中文本的水平对齐方式。

下面我们看看中,右,左的三种对齐方式演示:

HTML引用

1.HTML <q> 元素定义短的引用

浏览器通常会为 <q> 元素包围引号

2.用于长引用的 HTML <blockquote>

HTML <blockquote> 元素定义被引用的节。

浏览器通常会对 <blockquote> 元素进行缩进处理。

HTML超链接

什么是超链接?超链接就是从一个页面到另一个页面之间跳转的方式。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

<a href="http://www.Baidu.com.cn/">Visit Baidu</a>

上面这行代码显示为:Visit Baidu

点击这个超链接会把用户带到 Baidu 的首页。

提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

链接属性

使用 Target 属性,你可以定义被链接的文档在何处显示。

多朋友想学一下网页制作,上网一看,只要涉及到网页制作,都离不开HTML这个词语,HTML是HyperText Markup Language的简称,想学习HTML语言,先得了解一些基本知识,今天这边内容可以作为学习HTML的菜鸟教程第一课。

HTML是什么?

一般我们说HTML是指超文本标记语言,英文名称为HyperText Markup Language,简称HTML,它是目前互联网上应用最广泛的语言。

如何查看HTML?

拿最常见的网页为例,如果用大家熟悉的IE浏览器的话,直接在网页上点右键,选择“查看源”即可查看当前网页的HTML源码;如果是其他浏览器的话,多数情况下点击右键,选择“查看源码”或者类似“查看网页源代码”这样的选项即可查看。

当然也可以通过专业的网页制作软件以及各种文本编辑器来查看。

HTML有什么用?

HTML语言可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来,方便用户浏览。对于我们来说,HTML是学习网页制作的基本功,熟练掌握HTML这项基本功,可以为以后的学习和工作打下良好的基础。

HTML如何入门?

要学习任何编程语言,都不好好高骛远,HTML的入门很简单,但是也要遵循学习的基本步骤,选择一本入门书籍,循序渐进地去学习每一张的内容。一边学习,一边查看网页代码对照来学,提升入门速度。

HTML案例

下面就是最基本的HTML案例,在这个案例中,用的是HTML5,

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 描述了网页的标题
  • <body> 元素包含了可见的页面内容,因为下面是最简单的案例,所以只有几行,实际网页一般都有很多行。
  • <h1> 定义一个大标题
  • <p> 元素定义一个段落,也就是大家常说的分段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

如何编辑HTML?

这个就很多了 ,比如最出名的Dreamweaver,当然如果熟练之后,可以选择任意自己喜欢的编辑器,一些小的改动或者一小段代码的话,也可以用各种常见的文本编辑器来处理,比如我们在wodows系统上常见的记事本,总之只要自己觉得方便就好。

总结

以上是学习HTML菜鸟教程的第一课,首先保持一个良好的心态来学习,有好的心态,知识方面只要循序渐进,学会就是水到渠成的事情了 。