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>
<Title>How to make Web</title>
</Head>
<Body Bgcolor="#FFFFFF">
<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"> 壮士一去兮   ;   不复还 ! <FONT><P>
</BODY>
3 <DIV> 标记
这个标记可将文件分为几节，当文件显示时格式不受影响。尤其是在使用风格表格时， <DIv> 标记是一个强有力的工具。然而，现在 <DIV> 标记主要用来排放文字的位置，结合 Align 属性，可将文字放置到窗口的左边、右边和中间。
浏览器显示时遇到 <DIV> ，标记就将文字断行，后面的内容从新的一行开始显示。
下面的 HTMl 文件是 <DIV> 标记的应用示例，将三部分文字在屏幕的不同位置。效果如图。
<DIV Align= Left > 测试靠左 </DIV>
<DIV Align=Center> 测试居中 </DIV>
<DIV Align=Right > 测试靠右 </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 >
< /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> 等。也可直接用居中标记
<Center> … < ／ Center>
如：
<HTML>
<HEAD>
<TITLE> Test </TITLE>
</HEAD>
<BODY>
<h3 align=center>
Wonderful!!!
</h3>
<center>
<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 准备 我推荐 ...
随机推荐
- JAVA并发的性能调整
1.互斥技术 synchronized Lock Atomic 性能比较Atomic > Lock > synchronized,当然这不是绝对的.当线程数比较少时,synchroni ...
- 编写兼容性JS代码
前文介绍了: 1 DOM四个常用的方法 2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编 ...
- JS实现Ajax，Josn数据的序列化和反序列化---例： 省市区联动（包含get，post）
服务器端相应JOSN数据 用到序列化和反序列化----命名空间using System.Web.Script.Serialization; public void ProcessRequest(H ...
- Struts2(二)---将页面表单中的数据提交给Action
问题:在struts2框架下,如何将表单数据传递给业务控制器Action. struts2中,表单想Action传递参数的方式有两种,并且这两种传参方式都是struts2默认实现的,他们分别是基本属性 ...
- HDU 4901 The Romantic Hero
The Romantic Hero Time Limit: 3000MS Memory Limit: 131072KB 64bit IO Format: %I64d & %I64u D ...
- 获取本机IP_考虑多网卡的情况
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- Web 测试经验总结
Web功能测试常用方法 1.页面链接检查每一个链接是否都有对应的页面,并且页面之间切换正确: 2.相关性检查删除/增加一项会不会对其他项产生影响,如果产生影响,这些影响是否都正确. 3.检查按钮的功能 ...
- Thinkphp中验证码的使用以及验证的实现
<input class="TxtValidateCodeCssClass" id="captcha" name="captcha" ...
- vs配置
每次遇到vs配置都要让我头疼一段时间,对于某些不太清楚,有时自己试着配置,能运行起来就行,下次又忘了咋陪的了,其中配置的东西真心多. 1.输出目录这样配置../../Bin/Server/ 这个路径是 ...
- 如何在ECSHOP前台后台中讲版权内容清除
如何在ECSHOP前台后台中讲版权内容清除 作者:河南电脑学校网 点击次数:1065 发布时间:2012-02-02 20:13:58 一.ECSHOP前台显示的页面的版权在下面几个地方修改:(本人不 ...