本文做为《IT软件人员学习系列文章》的第一篇,将从最基本的开始进行描述,了解的人完全可以跳过本文(后面会介绍一些工具)。

今天讲讲Web开发中最基础的内容:HTML(超文本标记语言)。HTML的内容是文本,就象我们在文本文档中记录内容一样。

一、最基本例子。

下面是一个最基本的HTML页面文本内容(代码一):

<html>

<head>

<title>这个HTML页面</title>

</head>

<body>

这是HTML页面内容

</body>

</html>

我们能够使用任何的文本编辑工具对HTML页面进行编辑开发。本文以UltraEdit这个工具进行演示。(下载地址http://download.csdn.net/detail/lzhdim/8308465),下图为安装界面。

从上面的基本的HTML页面内容可以看出,一个标准的HTML文件由HTML元素,元素的属性和相关属性值3个基本部分组成。

HTML元素的出现形式有3类

首尾标记必须成对出现的元素,例如:<h1>,<button>等元素

起始标记必须出现,而结尾标记是可选的,例如<p>,<option>等元素

只有起始标记,而禁止结尾标记的元素,例如<input>,<img>等元素

在开始对HTML进行编程之前,建议大家使用纯文本(UltraEdit编辑工具)和编辑工具(Dreamwave、Visual Studio等)两种方式都尝试一下。但是建议在刚开始的时候还是使用纯文本的方式进行编程,这样也能够记住一些最基本的语法和标签元素等内容。

二、属性。

HTML文本标记是不区分大小写的,这个与Javascript语言不同。也就是说HTML语言对大小写不敏感。

下面说说关于HTML语言的引号的使用:

<input type="button" value="点击查看效果" onclick='javascript:alert("Hello World!");'>

上面描述了一个页面按钮标记的写法。我们可以看到type=”button”这里是双引号,而在后面的onclick事件也能够使用单引号来进行处理。为什么这里要强调一下呢,因为在后面当我们使用jQuery进行编程的时候,有时候会通过从后台获取HTML文本到前台来进行输出,而在后台代码里,比如C#,对于字符串是需要用双引号进行括起来的,所以在里面的HTML文本需要对引号进行处理。

下面对input的type类型做个简要的介绍:

语法:

<input type="value">

属性值

描述

button

定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。

checkbox

定义复选框。

file

定义输入字段和 "浏览"按钮,供文件上传。

hidden

定义隐藏的输入字段。

image

定义图像形式的提交按钮。

password

定义密码字段。该字段中的字符被掩码。

radio

定义单选按钮。

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

text

定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

三、示例。

下面看看由HTML编辑工具生成的HTML代码结构,我们在此基础上添加了一些代码。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>这个是网页标题</title>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="scripts/jquery.date.js"></script>

<style type="text/css">

.div {

color:red;

}

</style>

<script type="text/javascript">

function test() {

}

</script>

</head>

<body>

<p>

<h1>欢迎访问百度网站</h1>

<a href="http://www.baidu.com" target="_blank">这是一个超链接</a>

<input type="button" value="点击查看效果" onclick='javascript:alert("Hello World!");'>

</p>

</body>

</html>

首行<!DOCTYPE html>表示当前的文档为HTML文档。

<html xmlns="http://www.w3.org/1999/xhtml">表示文档参考该标准。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>定义了HTML页的编码方式。建议使用UTF-8带签名方式。

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />表示引用外部的一个CSS样式文件(后面的文中将介绍CSS相关内容)。

<script type="text/javascript" src="scripts/jquery.date.js"></script>表示引用外部的一个Javascript脚本文件。

我们从“代码一”中已经知道最基本最简单的HTML文本代码。而上面给出的是一个比较简单的HTML代码。

任何的网页,我们可以通过查看源代码查看HTML代码。见下图:

我们再看看淘宝电商网站的源码:

<link rel="dns-prefetch" href="//g.tbcdn.cn">是一个DNS预取功能,因为淘宝网站有时候访问量很大,所以这里设置了DNS预取(CDN技术)。

从源码可以看出淘宝试用的是DIV+CSS的页面布局形式,试用了很多的DIV标签。

四、下面说说常用到的HTML标签:

1、  超链接A。<a href="//www.taobao.com" target="_self">淘宝网</a>。这个超链接是指向淘宝网的,而且是在当前页面打开。

2、  段落标签P。<p>这个是一个段落</p>。一般段落用得相对少一些,只是在一些长篇的文本时使用到。

3、  分层标签DIV。表示一个层标签,可以用来配合CSS对页面进行布局。

4、  表格标签table。表格标签在早期被用来进行页面布局,后来被DIV取代。表格标签一般用来显示数据表。

5、  无序列表UL标签。用来表示无序列表,配合li使用。在页面上显示为原点。

6、  有序列表OL标签。在页面上显示为1、2、3等列表标签。

7、按钮标签。<input type="button" value="点击查看效果" onclick='javascript:alert("Hello World!");'>按钮一般用得不是很多,一般是超链接标签用得比较多。

可以说,HTML标签元素就是网页的骨架;而表格Table或者DIV层是基本的毛呸房;而CSS就是对毛呸房的装修,就是瓷砖、壁纸、涂料;Javascript就是房内的设施,比如音响,厨具等。后续会介绍相关的CSS,JS等内容。

这里有本HTML的书:http://download.csdn.net/detail/lzhdim/8313521

下面提供一些HTML工具:

1、The HTML packer专门用于压缩预备上传到网站上的HTML文件的小工具。功能比较单一(只是单纯的压缩),支持单个文件压缩和批量压缩。

http://download.csdn.net/detail/lzhdim/8308625

2、无需懂得DHTML或JavaScript 即可为网页制作出动态的弹出式和下拉式菜单。

http://download.csdn.net/detail/lzhdim/8308667

3、DHTMLMenu 能生成与现今几乎所有的浏览器兼容的菜单代码。

http://download.csdn.net/detail/lzhdim/8308701

4、HTML-Optimizer 是一套专门替 HTML 减肥的工具,借着去除各种浏览器会直接跳过的注解、空白、换行符号等字符,让你的网页功能不变,大小减半。

http://download.csdn.net/detail/lzhdim/8308733

1、HTML学习 - IT软件人员学习系列文章的更多相关文章

  1. 后记:IT软件人员学习的书籍 - IT软件人员书籍系列文章

    1年了,软件人员学习书籍系列总算是写完了.虽然文字篇幅不多,主要对各个角色的一些基本内容做了介绍,但是更重要的是能够提供相关的人员学习书籍进行下载,让更多的人能够从中学习到更多的知识. 这个系列,从项 ...

  2. 开篇:IT软件人员学习的书籍 - IT软件人员书籍系列文章

    读书是一件快乐的事情. 读书能够增长知识,了解社会,了解人类的思想,继而转换成智慧.无论是什么人,都需要读书,多读书,读好书,同时也要把书中的精髓记录下来,一个是当做读后感,一个是为以后如果忘记了回头 ...

  3. 1、软件工程师要阅读的书籍 - IT软件人员书籍系列文章

    软件工程师要阅读的书籍估计是项目组内最多的.软件工程师处于项目组中最基础的人员储备阶层,与项目的关系最密切.当然,现在是大数据时代,我们无法全部看完所有相关的书籍,只能够先学习工作需要的知识,然后在项 ...

  4. 5、软件架构师要阅读的书籍 - IT软件人员书籍系列文章

    软件架构师在项目中的地位是不言而喻的,其对于项目的需求要相对比较了解,然后对项目代码的结构需要做到覆盖全面.本文就说说作为一个软件架构师需要阅读的一些书籍. 当然,这些书籍都来源于网络,是笔者收集整理 ...

  5. 2、CSS学习 - IT软件人员学习系列文章

    上文我们讲了HTML,本文讲讲CSS. 上次我们讲了CSS是HTML页面的装修部分,就是各种瓷砖.粉墙.说明了CSS在HTML页面中的重要地位.没有CSS,那么HTML页面将很粗糙,就象我们的毛坯房一 ...

  6. 3、Javascript学习 - IT软件人员学习系列文章

    接下来,我们开始进入Javascript语言的学习. Javascript语言是一种解释性的语言,不同于ASP.NET.C#语言的这种编译性的语言.它随着HTML网页的发布而发布,就是说嵌入到HTML ...

  7. 11、项目经理要阅读的书籍 - IT软件人员书籍系列文章

    项目经理是负责软件项目的总体把控的角色.项目经理在项目中是一个管理者的角色,他需要对项目的9大领域进行学习,同时针对项目的范围.进度.沟通和风险进行处理,让项目能够按时保质保量的完成. 项目经理需要学 ...

  8. 9、数据库工程师要阅读的书籍 - IT软件人员书籍系列文章

    数据库设计是软件项目底层的工作,它关系到软件项目的基础内容设计问题.数据库工程师的工作,就是设计数据库,维护数据库,优化数据库,这个跟DBA数据库助手的工作类似.现在的数据库有好几种了,比如MS SQ ...

  9. 12、产品经理要阅读的书籍 - IT软件人员书籍系列文章

    产品经理是软件产品的主要领导者.不同于项目经理,产品经理是对产品负责,更多的是负责产品的设计定型:而项目经理则对项目负责,更多的是负责项目软件的实现.产品经理的一些工作,和项目经理是一致的,比如需求分 ...

随机推荐

  1. 做贴吧系统,偶然发现使用iframe的弊端

    个人拙见 常听人说起现在不建议使用iframe框架,而我却一再使用,也许是能力有限,一直没在意有什么弊端. 我这此使用的事左右iframe框架,并且只在主页中定义了大背景,每个页面并没有分别定义背景, ...

  2. .net批量上傳Csv檔資料應用程序開發總結

    應用環境:visual studio 2010開發工具,Database為Sql2008以上版本 最近在生產環境中需要開發一款應用程式,上傳電子檔(.csv)資料至Database 最初方案: 以tx ...

  3. Debian7安装GCC4.8

    参考一  参考二   参考三   参考四 Ubuntu13.04下编译GCC-4.8.2源码并安装成功 CentOS 6编译安装GCC4.8      CentOS 6.4系统编译安装gcc-4.8. ...

  4. Android退出时关闭所有Activity的方法

    Android退出时,有的Activity可能没有被关闭.为了在Android退出时关闭所有的Activity,设计了以下的类: //关闭Activity的类 public class CloseAc ...

  5. 修复 XE8 Win 平台 Firemonkey Memo 卷动后会重叠的问题

    问题:XE8 Firemonkey 在 Windows 平台 Memo 卷动时,在第 1 , 2 行会产生重叠现象. 更新:XE8 update 1 已经修复这个问题,无需再使用下面方法. 修改前: ...

  6. CARP

    CARP :Common Access Redundancy Protocol共用地址冗余协议Common Access Redundancy Protocol,或简称 CARP 能够使多台主机共享同 ...

  7. CnBlogs自定义博客样式

    弄了半个晚上的时间,总算马马虎虎搞好了博客的样式. 整个博客是蓝色的基调,比较激情,我喜欢. 比较郁闷的是,rightmenu 和 main都是position:absolute 布局的.要添加一个f ...

  8. 初探百度F.I.S — 由工具到解决方案

    1. 前言 阅兵放假三天,我哪儿也没去,宅着看了一些东东:git命令行.svn命令以及下面的主角——百度FIS.对看过的git.svn的命令也做了一些总结,请参见:<git命令学习笔记>和 ...

  9. IP查询接口地址

    腾讯的: http://fw.qq.com/ipaddress直接返回本机的IP地址对应的地区 新浪的:http://counter.sina.com.cn/ip?ip=IP地址返回Js数据,感觉不是 ...

  10. (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)

     JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)         函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...