HTML 快速入门

最近帮朋友研究作一个网站，虽然对很多人来说这是很简单的事情，但是对我来说却比较复杂！废话不多讲了，看看我找的HTML快速入门，说不定也会对你有帮助！

一、 HTML 的基本概念

HTML （ Hypertext Markup Language ）即超文本标记语言，它是一种用于编写超文本文档的标记语言—— 一种设计网页的计算机语言。 HTML 可以控制任何文本的颜色、大小、形状，图像的大小和位置，网页间不同元素的链接或者网址的链接。

自从 1990 年首次应用于网页编辑后， HTML 迅速崛起成为网页编辑的主流语言。几乎所有的网页都是由 HTML 或以其他程序语言嵌套在 HTML 中编写的。 HTML 并不是一种程序语言，而是一种结构语言，它具有平台无关性。无论用户使用何种操作系统（ Windows 、 Dos 、 Unix 等等），只要有相应的浏览器程序，就可以运行 HTML 文档。

HTML 标记的写法 :

" 任何标记皆由 "<" 、 ">" 所包围，如 <P>

" 标记字母大小写皆可。

" 标记名与 "<" 、 ">" 之间不能留有空格。

" 某些标记需要加上参数，某些则不必。如 <font size="6" color="#FFFFFF"> 人文风 </font>

" 参数只可加到起始标记中。

" 在起始标记之标记名前加上符号 "/" 便是其终结标记，如 </font>

二、 HTML 常用标记

" HTML 文件结构标记

以下这些标记是构成页面的基本要素：

<Html>

<Head>

<Title> ... </Title>

</Head>

<Body> ...</Body>

</Html>

<Html> 是标志超文本的 HTML 页面的开始，对应的 </html> 为结束标志 ;

<head> 文件头，中间的文本为整个文件的序言，不包含太长文字内容，，而这些内容除 <Title> 标记之间的内容外，均不显示在屏幕上

<Title> 给网页命名，浏览器通常会将文件标题显示在浏览器窗口的左上角标题栏上

<body> 是 HTML 语言的主体，一般用来指明 HTML 文档里主要文字，如：标题、段落、列表等。也可定义主页背景颜色。

下面是一个最基本的 html 页面：

<HTML>

<HEAD>

<Title>a simple example page </title>

</HEAD>

<BODY>

页面正文写在这里 ... ...

</BODY>

</HTML>

用编辑软件编辑上代码，保存为以 .html 或 .htm 为后缀的文件，就可在浏览器中观看页面。

2. <Hn> 子标题标记

用于表示页面中的各种子标题 , 标题标记有 6 种，分别为 H1, H2, … H6 ，标题号越小，字体越大。

<hn> 可以有对齐属性， align ＝ # ， # 可为如下值

Left 标题居左

Center 标题居中

Right 标题居右

例：

<HTML>

<Head>

</Head>

<h1> 标题元素显示效果 </h1>

<h2 Align=Left> 标题元素显示效果 </h2>

<h3 Align=Right> 标题元素显示效果 </h3>

<h4 Align=Center> 标题元素显示效果 </h4>

<h5> 标题元素显示效果 </h5>

<h6> 标题元素显示效果 </h6>

</Body>

</HTML>

如图 :

2. <P> 分段标记

P 是段落 Pragraph 的缩写，这是一个单标记，不需要结束标记，用来定义浏览器中文档中的一个段落。

单独一个 <P> 会添加一个空行 , 该标记常作为 行断点 ( 或回车 ) 显示。 P 标记能带附加属性。

Web 浏览器不仅会忽略段落中的换行，而且会将文字之间的多个空白字符，如空格、制表符等都当作一个空格来显示，浏览器中文字的分段完全依赖于分段元素 <P>

比如下面两段代码有不相同的输出。

<BODY>

<h2> This is one example </h2>

paragraphy 1

paragraph 2

<h2>This is Two example</h2>

paragraph one <p>

paragraph Two <p>

</BODY>

如图：

如果需要在文字间插入多个空格，可以使用“＆ nbsp ”'，“＆ nbsp ”表示一个空格。

例如以下代码的效果

<BODY>

风萧萧兮易水寒 <P>

<FONT SIZE=6 COLOR="#FF0000"> 壮士一去兮 &nbsp ; &nbsp 不复还 ! <FONT><P>

</BODY>

3 <DIV> 标记

这个标记可将文件分为几节，当文件显示时格式不受影响。尤其是在使用风格表格时， <DIv> 标记是一个强有力的工具。然而，现在 <DIV> 标记主要用来排放文字的位置，结合 Align 属性，可将文字放置到窗口的左边、右边和中间。

浏览器显示时遇到 <DIV> ，标记就将文字断行，后面的内容从新的一行开始显示。

下面的 HTMl 文件是 <DIV> 标记的应用示例，将三部分文字在屏幕的不同位置。效果如图。

4. <BR> 分行标记

<BR> 标记可以强制句子在一行结束。 <BR> 标记告诉浏览器在此处将文本截断，从下一行的开始处接着显示其余文本。如：

人文风网站有如下一些栏目： <br>

影视天堂 <br>

音乐之城 <br>

在线直播 <br>

文学天地 <br>

成电女生 <br>

邮件系统 <br>

注意： <P> 也可以使文本分行，但会多一个空行

如：

人文风网站有如下一些栏目： <br>

影视天堂 <br>

音乐之城 <br>

在线直播 <br>

文学天地 <br>

成电女生 <p>

邮件系统 <br>

4. 列表 List

用于列举，常用列表有 3 种格式：

" 即无序列表 (unorderedList)

" 有序列表 (ordered list)

" 定义列表 (definition list) 。

A. 无序列表 (Ul)

无序列表就是列出内容而不需要特别的序号

无序列表用 (Ul) 开始，每一个列表条目用 <Li> 引导，列表条目不需要结尾标记 </Li> ，整个列表以 </Ul> 结束。输出时每一列表条目缩进，并以特殊符号标示。

例：

<Ul>

<Li>Today

<Li>Tomorrow

</Ul>

输出如图：

B. 有序列表 <Ol>

有序列表与无序列表相比，只是在输出时列表条目用数字标示 ;

例 :

<Ol>

<Li>Today

<Li>Tomorrow

</Ol>

输出如图：

C. 定义列表 <Dl>

定义列表用于对列表条目进行简短说明的场合，用 <Dl> 开始，列表条目用 <Dt> 引导，它的说明用 <Dd> 引导。

例：

<HTML>

<HEAD>

<TITLE> China GongFu </TITLE>

</HEAD>

<BODY>

<dl>

<dt> 南拳

<dd> 不拘形式，暗中出手，突然袭击，以短打为主。

<dt> 北腿

<dd> 金戈铁马，气势磅礴，静如处子 , 动如脱兔

<dt> 峨嵋派

<dd> 贴身近战，出手毒辣，招招至残

</dl>

</BODY>

</HTML>

D. 改变条目标记

a. 改变无序列表条目标记

无序列表输出时，默认的条目标记为黑色圆点，用 type 属性修改条目标

记。 type 可以是

" Disc 实心圆点 ( 默认属性 )

" Circle 圆圈

" Square 小方块

例：

<ul>

<li type=disc> ONE

<li type=circle> TWO

<li type=square> THREE

</ul>

输出如图：

b. 改变有序列表条目标记

有序列表条目标记的缺省值是阿拉伯数字，可用 type 属性修改。方法为 <Li type=#>, # 的属性见下表

属性	含义
A	大写英文字母
a	小写英文字母
I	大写罗马数字
i	小写罗马数字
1( 数字 1)	阿拉伯数字 ( 缺省值 )

例：

<ol>

<li type=A>ONE-ONE

<li> ONE-TWO

</ol>

<ol>

<li type=a>ONE-ONE

<li> ONE － TWO

</ol>

<ol>

<li type=I>ONE-ONE

<li> ONE=TWO

</ol>

<ol>

<li type=i>ONE-ONE

<li> ONE-TWO

</ol>

<ol>

<li type=1>ONE-ONE

<li> ONE-TWO

</ol>

c. 改变有序列表条目的起始值

有序列表的条目值缺省从 1 开始，用 start 属性可修改。

方法为：

<ol start=#> # 是条目起始值

< ol start=5>

<li type=A>ONE-ONE

<li> ONE-TWO

< ol start=10>

<li> TWO-ONE

<li type=i>TWO-ONE

< /ol >

如右图：

d. 列表的嵌套

各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。每嵌套一层，列表条目的输出就会有更大的缩进。请参照上面的例子。

5. 预排版文本 <pre>

PRE 是 Preformatted text ， ( 预排格式文本 ) 的缩写．

我们提到，通常情况下，浏览器将 HTML 文档中文字之间的空白字符，如空格、制表符、换行等、不论有多少个，都视为一个空格来显示。然而有时候我们需要浏览器原封不动地显示预先编排好格式的一段文本，如计算机的源程序、 ASCII 字符图形等，这时就可以使用 PRE 标记。用来包含—段预先排好格式的文本， Web 测览器将把起始标记 <PRE> 与结束标记 </PRE> 之间的文本按照原书写的格式原封不动地再现出来。

例：

<pre>

please use your card.

VISA Master

<b>Here is an order form.</b>

<ul>

<li>Fax

<li>Air Mail

</ul>

</pre>

不加 <pre> 情况请自己实验.

6. 居中

很多元素都有对齐方式属性，如 < hn> 、 <p> 等。也可直接用居中标记

如：

<HTML>

<HEAD>

</HEAD>

<BODY>

Wonderful!!!

</h3>

<h3> Wonderful!!! </h3>

</center>

</BODY>

</HTML>

如图：

HTML 快速入门的更多相关文章

Web Api 入门实战（快速入门+工具使用+不依赖IIS）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令（2）
今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...
【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
Mybatis框架的快速入门
MyBatis 简介什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...
grunt快速入门
快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...
【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备我推荐 ...

随机推荐

编写高质量代码改善C#程序的157个建议[勿选List<T>做基类、迭代器是只读的、慎用集合可写属性]
前言本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html .本文主要学习记录以下内容: 建议23.避免将List<T>作为自定义集合类的基 ...
javascript继承(五)—prototype最优两种继承（空函数和循环拷贝）
一.利用空函数实现继承参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...
DOM学习笔记（思维导图）
导图
每天一个linux命令（32）：wc命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...
NLP的两种工具的java版使用：复旦FudanNLP，中科院计算所ICTCLAS2013
编程语言:java 三种工具的简要介绍: FudanNLP google project上的介绍是: FudanNLP主要是为中文自然语言处理而开发的工具包,也包含为实现这些任务的机器学习算法和数据集 ...
【HDU 4602】Partition
题意给你一个数n,把它写成几个正整数相加的形式,即把n拆开成若干段,把所有可能的式子里正整数 k 出现的次数取模是多少. 分析特判 k>=n 的情况. k<n时:问题相当于n个点排一行 ...
Android中用URL模拟一个简单的图片加载器
首先,需要添加权限. <uses-permission android:name="android.permission.INTERNET"/> 整体代码如下: pac ...
Oracle分页查询语句
SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM (此处添加你要分页的表)) A WHERE ROWNUM <= 14000)WH ...
Linux中断技术、门描述符、IDT(中断描述符表)、异常控制技术总结归类
相关学习资料 <深入理解计算机系统(原书第2版)>.pdf http://zh.wikipedia.org/zh/%E4%B8%AD%E6%96%B7 独辟蹊径品内核:Linux内核源代码 ...
OKR详解及其实施
这阵子大家一直在讨论Google的绩效考核方法OKR,我们发现很多文章和说法存在错误和误导,现将其来龙去脉,操作步骤,操作技巧阐述如下,供大家参考. OKR全称是Objectives and Key ...

HTML 快速入门

HTML 快速入门的更多相关文章

随机推荐

热门专题