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 准备 我推荐 ...
随机推荐
- Javascript基础系列之（三）数据类型 （布尔型 Boolean）
javascript同样有布尔型,可选值,true or fasle. var marr = true ; document.write(typeof(marr) + "<br> ...
- javascript与服务器3
一, 带参数的XMLHTTP请求 1, 进行get请求 get请求最常见的是在浏览器地址栏中输入URL并打开页面时,这就是向服务器发送一个get请求. 它的限制是URL最大长度不能超过2048字符(2 ...
- 理解jar
对于大多数 Java 开发人员来说,JAR 文件及其 “近亲” WAR 和 EAR 都只不过是漫长的 Ant 或 Maven 流程的最终结果.标准步骤是将一个 JAR 复制到服务器(或者,少数情况下是 ...
- iOS边练边学--菜单悬停效果的实现思路
- Productivity Power Tools 动画演示--给力的插件工具
免费的精品: Productivity Power Tools 动画演示 Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率 ...
- maven初学（二）archeType插件使用
archeType是一个maven插件,它的主要功能是根据模板来创建工程结构 创建工程结构: 1,创建工程目录 2,输入命令:mvn archetype:generate 3,选择需要的archety ...
- Java异常分类
一.基本概念 看java的异常结构图 Throwable是所有异常的根,java.lang.ThrowableError是错误,java.lang.ErrorException是异常,java.lan ...
- MongoDB的安装及配置
MongoDB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐. Windows (1). 登录Mongodb官网点击下载 (2). 将zi ...
- Java线程之间通信
用多线程的目的:更好的利用CPU的资源.因为所有的多线程代码都可以用单线程来实现. 多线程:指的是这个程序(一个进程)运行时产生了不止一个线程. 并行:多个CPU实例或者多台机器同时执行一段处理逻辑, ...
- UVA 1149 Bin Packing
传送门 A set of n 1-dimensional items have to be packed in identical bins. All bins have exactly the sa ...