Html是一门编写网页的语言。

在我学习Html的时候，网上的很多朋友说，直接使用【记事本】编写就行了，最后保存为后缀名为 .html 的文件。

不过，我建议你用【Nodepad++】来编写网页，用这个软件有几个好处：

1，像<html>这样的标签，在Nodepad++中是变颜色的，方便识别；而且成对的标签可以折叠。

2，按住Ctrl键，滑动滑轮，可以放大或缩小字体，我就比较喜欢大字体，不费眼睛。

你可以到网上搜一下Nodepad++，然后安装一下。

下面就开始编写你的第一个网页。

1，打开Nodepad++，选择【文件】->【新建】

2，在新建的文件中输入下面的内容：

<html>

<head>

<title>

html快速入门

</title>

</head>

<body>

这是我写的第一个网页。

原来写网页是这么的简单！

</body>

</html>

3，选择【文件】->【保存】->在文件名右边的框中写上 home.html

->单击保存

4，找到 home.html保存的位置，双击打开，就可以看到你写的第一个网页了。

下面开始讲解这个网页的内容。

1，像 <html>，<head>，<body>，这些都是标签，而且一般都是成对出现的，比如<html></html>，后面的那个标签多一个斜线 / ，这就构成了一对闭合的标签。

2，网页是由上面介绍的这些标签构成的。

(1)最外层是<html></html>，它表明了这是一个网页；

(2)内部的<head></head>，它代表网页的“头”，这里面一般会写脚本和样式，后面我会讲到，暂时不用管。

(3)head标签内部的title标签，title体现了网页的主题内容，一定要加上。而且要突出关键词，方便用户搜索到。例如：

方式A： <title>小游戏 | 休闲小游戏 </title>

方式B： <title>小游戏 - 打造全国最好休闲小游戏网站</title>

这两种表达方式除了能有效提高主关键字【小游戏】的词频外，还增加了意义相近的辅关键字【休闲小游戏】。其中，A中采取的是多个关键字简单排列的形式；而B则采取的是对主关键字进行描述的形式，这样不但更能得到搜索引擎的青睐，同时也更能吸引用户的点击。

(4)<body></body>，它代表网页的“身体”，里面的文本可以直接在网页中看到。一般其他的标签也都是放在body当中的，后面我会讲到。

学到这里，你就可以编写出一个简单的网页了，下面说几点内容，帮你排除一些困惑。

1，怎么判断一个文件是不是网页？

一般，网页的后缀名都是 .html，.htm，所以我让你把刚才新建的文件保存为 home.html，这就把它保存为了网页，你就可以双击打开它，在浏览器中看到这个网页。

2，我看到一些网页的头部有下面的内容，请问它是什么啊？我用记住怎么写吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这个是用来告诉浏览器：这个网页是什么类型。网页有不同的类型，不同类型就有不同的要求，像这里的Transitional，就说明了这是一个过渡类型的网页，也就是一个有要求、但要求不太严格的网页。

完全没有必要记住这一串内容怎么写。我当时学习网页的时候就是被这一串内容吓得几天不敢学html了，你只要知道这是一段网页类型的声明就行了，如果你使用【Dreamweaver】来建网页，它会自动给你写好的。即便Nodepad++没有添加，那也是直接复制一下就行了，而且学习html的时候，根本不用管这段内容。

3，每建一个网页，我都需要把这些内容一个字母一个字母的敲出来吗？

刚开始学习的时候，最好手动敲一下这些标签，比如html，head，body等等。多写多练习，很容易就学会了。

当你熟练了以后，可以直接使用【Dreamweaver】来建网页，新建的网页直接就包括了html的基本结构，你只需要添加需要的内容就行了。

而且，当你工作之后，写的很多网页可能都是类似的，基本上都是粘贴复制，然后修改一下。不过，粘贴复制容易出错，因为可能某个地方你没有修改过来，因此，你要仔细检查一下。

我给女朋友讲编程html系列(1) -- Html快速入门的更多相关文章

  1. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

  2. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  3. 我给女朋友讲编程html系列(2) --Html标题标签h1

    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...

  4. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  5. 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

    首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...

  6. 我给女朋友讲编程CSS系列(4) CSS盒子模型

    什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...

  7. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  8. ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解

    前言 本文主要介绍的是ELK日志系统中的Filebeat快速入门教程. ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...

  9. Gradle学习系列之一——Gradle快速入门

    这是一个关于Gradle的学习系列,其中包含以下文章: Gradle快速入门 创建Task的多种方法 读懂Gradle语法 增量式构建 自定义Property 使用java Plugin 依赖管理 构 ...

随机推荐

  1. 基本的Web控件四

    基本的Web控件用法二 ListBox控件 页面布局: <div> <h1>ListBox控件</h1> 学生列表: <br/> <asp:Lis ...

  2. 逻辑运算符||和| 、&&和&的区别

    ||和| .&&和&的区别 这里以&&和&为例.或与之一直 1.&和&&都可以用作逻辑与的运算符,表示逻辑与(and),当运算符 ...

  3. Windows Server 2003 增加远程用户个数

    1.进入“开始”-“控制面板”-“添加或删除程序”如下图: 2.点击“添加/删除windows组件(A)”,进入如下图 如果该服务器没有安装“终端服务器”和“终端服务器授权”组件的话,则需要使用系统光 ...

  4. DataTable.Select

    转载请注明出处:http://www.cnblogs.com/havedream/p/4453297.html 方法:DataTable.Select 作用:获取 DataRow 对象的数组. 重载: ...

  5. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  6. 多屏判断css改写

    function replaceBodyClass(){ for(var i in map){ if(map[i](width)){ document.body.className = documen ...

  7. centos下安装php环境

    centos下安装php环境 安装apache yum install httpd-devel 启动apache /etc/init.d/httpd start 安装mysql yum install ...

  8. 室内净化ThinkPHP复习

    "$_GET[id]"这个是和$_GET['id']一样的 foreach的是 name 和 item if(!empty($_GET['id'])){ $where.= &quo ...

  9. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  10. SBM is Not Sale And Run Company

    data = """ Well,We will bet you dollars to donuts,there are so many crusher provider ...