我给女朋友讲编程html系列(1) -- Html快速入门
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快速入门的更多相关文章
- 我给女朋友讲编程html系列(4) -- html常用简单标签
今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...
- 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset
我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...
- 我给女朋友讲编程html系列(2) --Html标题标签h1
Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级
首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...
- 我给女朋友讲编程CSS系列(4) CSS盒子模型
什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论] 的方式来写. 1, 看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解
前言 本文主要介绍的是ELK日志系统中的Filebeat快速入门教程. ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...
- Gradle学习系列之一——Gradle快速入门
这是一个关于Gradle的学习系列,其中包含以下文章: Gradle快速入门 创建Task的多种方法 读懂Gradle语法 增量式构建 自定义Property 使用java Plugin 依赖管理 构 ...
随机推荐
- 九、在动作类中访问ServletAPI
九.在动作类中访问ServletAPI .方式一:(简单,推荐使用)ServletActionContext public String execute() throws Exception { ...
- logcat保存当前应用程序的日志并上传服务器或指定邮箱
给大家分享一个项目中用到的日志统计并提交服务器的日志工具类.通过过得当前app的PID,采用命令行的方式实用logcat工具过滤日志.代码区: package org.and.util; import ...
- jquery中选择ID以什么字符开头的匹配主要用于多个上传控件的时候,id无法使用,而且class不起作用的时候
$("[id^=remark]")选择ID以remark开头的所有数据进行匹配
- POJ C程序设计进阶 编程题#4:括号匹配问题
编程题#4:扩号匹配问题 来源: POJ(Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 在某 ...
- mysql连接查询经典小例题
mysql连接查询: Mysql连接查询支持多表连接 对同一张表可以重复连接多次(别名在多次连接同一张表时很重要) 例题1: 下面有2张表 teams表 比赛结果表:result 问题: 得出一张表: ...
- Python脚本控制的WebDriver 常用操作 <三> 浏览器最大化
下面将模拟执行一个控制浏览器最大化的操作 测试用例场景 当我们在测试中使用一些基于图像和坐标的辅助测试工具时,我们就会需要使浏览器在每次测试时保存最大化,以便在同一分辨率下进行图像比对和坐标点选. 举 ...
- 关于消除超长的case列表的一个思路
最近项目里面涉及和低层通信的一个模块,因为需要定义通信协议,然后一大堆指令,定义一个枚举的话就能看到几十上百的数据项,匹配操作的时候,那么问题来了,尼玛,这么多的case看着就头晕,就有了一个想法:怎 ...
- 普通委托到泛型委托到Linq
private delegate bool delTest(int a); private void button1_Click(object sender, EventArgs e) { var a ...
- C 的 一些写法格式 交流
好久以前刚开始学习前辈们的代码的时候,发现好多代码感到好奇怪. 1)代码看不懂 2)代码格式看不懂 网上也没见同学们分享.当自己代码写多了,也渐渐的理解为什么要这样写了. 说主题之前 还是 说一些 题 ...
- Spring的IoC应用
IoC(Inversion of Control,控制反转) Spring的IoC应用是其框架的最大的特点,通过依赖注入可以大大降低代码之间的耦合度,从而实现代码和功能之间的分离.在代码中可以不直接和 ...