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 准备 我推荐 ...
随机推荐
- Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例
目录 前言 新建项目.建立数据库以及其它准备工作 新建express + ejs 项目:sampleEjs 创建数据库 修改package.json文件,安装session和mysql模块 样式和JQ ...
- T4模板在项目中的使用
建立T4模板方法:右键添加新项->文本模板 使用T4模板生成Dal层代码如下: <#@ template language="C#" debug="false ...
- 每天一个linux命令（17）：locate 命令
locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...
- POJ 2449Remmarguts' Date K短路模板 SPFA+A*
K短路模板,A*+SPFA求K短路.A*中h的求法为在反图中做SPFA,求出到T点的最短路,极为估价函数h(这里不再是估价,而是准确值),然后跑A*,从S点开始(此时为最短路),然后把与S点能达到的点 ...
- Js-字符转换数字
s 字符串转化成数字 的 三种方法主要有 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数, ...
- Oracle数据库语句大全
转自:http://blog.sina.com.cn/s/blog_b5d14e2a0101c56z.html ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指 ...
- 【poj1236】 Network of Schools
http://poj.org/problem?id=1236 (题目链接) 题意 给定一个有向图,求:1．至少要选几个顶点,才能做到从这些顶点出发,可以到达全部顶点:2．至少要加多少条边,才能使得从任 ...
- SQL多条件查询
SELECT a.tel,a.business_code,b.name AS business_name,a.register_time FROM T_RED_USER a LEFT JOIN T_P ...
- linux下IPTABLES配置详解（转）
如果你的IPTABLES基础知识还不了解,建议先去看看.开始配置我们来配置一个filter表的防火墙.(1)查看本机关于IPTABLES的设置情况[ ~]# iptables -L -nChain I ...
- 简短的几句js实现css压缩和反压缩功能
写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...