鉴於助教似乎没有讲解很多有关HTML跟PHP的关系,小弟我就献丑一下罗。
HTML并不难学,最基本的HTML一行就说完了:
「把想要套用属性的东西放进标签里。」
<标签>
接下来稍微解说一下标签的意义。
所谓的标签就是类似<font></font>为一组的东西,後方的标签带有斜线,表示标签结束
的意思。所谓的把东西放进标签,大约就是像这样的意思:
<font>hello</font>
这样就代表我要把文字hello套用一些font标签的属性,至於什麽属性则视标签而异。
<属性>
那什麽是属性呢?可以看成是标签的一些性质。究竟字型标签要套用什麽大小?什麽颜色
?什麽字型?图片的宽度和高度是多少?图片的边框要设成多少?
举例来说,想要让hello变成红色,只要把标签加入以下的属性:
<font color="#FF0000">hello</font>
这样就可以把标签内的文字变成红色(FF0000是红色的RGB色码)。
一个标签可以有数个属性,被标签包住的东西将会套用到所有标签的属性。例如:
<font color="#FF0000" size=12>hello</font>
就会输出红色12点大小的hello。
<网页的基本>
一个基本的网页非常简单,最基本什麽都没有的网页是如此:
<html>
<head></head>
<body></body>
</html>
在上面的HTML中一共可以看到三个标签:<html>、<head>跟<body>
<html>:告诉浏览器"这是html原始码",然後浏览器就会把标签内的东西当做html处里。
<head>:这个标签里通常摆放网页的一些资讯,包括语系、标题、css宣告、引入档案
等。
<body>:这个标签里面摆放网页的真正内容,凡是想要给使用者看见的东西都是写在这。
接下来试试把网页增加一点东西,我们在网页显示hello,并让标题列出现hello world!
的文字。我们只需要把修改如下:
<html>
<head>
<title>hello world!</title>
</head>
<body>
hello.
</body>
</html>
其中,<title>标签内摆放的是标题列文字。
要注意的是,在HTML的<body>标签中,不管内容的文字是否经过编排,出来的内容都
是一样的。也就是说:
<html>
<head></head>
<body>
hello! I'm Joe.
</body>
</html>
跟
<html>
<head></head>
<body>
hello!
I'm Joe.
</body>
</html>
都会输出一样的网页(不会换行),虽然是有标签可以做到这件事...但并不推荐。
接下来稍微讲解一些很容易用到的标签,可能有不全我想到再继续补吧XD。
<一般文字处理>
<font></font>字型
就是套用所有字型的最基本标签,在不使用CSS的状况下只能这样更动字型。
<font>属性:
color:颜色(可使用RGB16进位码或是字型颜色的名称)
dir:文字方向,有两种值:
rtl:左向右
ltr:右向左
face:字体名称
size:字型大小
style:允许使用CSS的样式规则定义字形
weight:字体粗细,值在100~900间的100倍数正整数
<b></b>粗体
将内容文字变成粗体。
<i></i>斜体
将内容文字变成斜体。
<u></u>底线
将内容文字加入底线。
<del></del> <strike></strike>删除线
将内容文字加上删除线。
<h1></h1>(<h1~6>)大标文字
内容文字会变成比正常文字略大的粗体,<h1>是最大的字体,<h6>则是最小。
<sub></sub>下标 <sup><sup>上标
将内容文字以上标或下标显示,同时字体会较小。
<big></big>大一级 <small></small>小一级
将内容文字字体放大一级或缩小一级。
<strong></strong>重点字体
将内容文字粗体,通常是强调重点用。
<address></address>作者字体
将内容文字斜体略粗,通常是显示网站作者资讯用的。
<cite></cite>引用字体
将内容斜体,通常是标示引用文字用。
<basefont>自订预设字体
没有结束标签,通常是写在<head>标签的里面,可以指定网页的预设字型,使用方法
同<font>。
<格式控制>
<center></center>置中
将内容置中。
<blockquote></blockquote>缩排
将内容向右缩排40个像素。
<p></p>段落
将内容标记为一段落,会在开头的位置多加一行空白。这个标签也可以单独使用(<p>),
这样等於是空两行的意思。
<p>属性:
align:对齐方式,有7种值:
absbottom:内容底端与相邻文字底端对齐
absmiddle:内容中央与相邻文字中央对齐
baseline:内容底端与相邻文字底线对齐
bottom:同baseline
left:向左对齐(预设值)
right:向右对齐
middle:置中对齐
dir:文字方向
style:CSS定义样式表
<br>断行
单独使用,这个标签可以将内容断行。
<spacer>空白控制
单独使用,用来精确的控制空白量,可以用来取代断行或是空白字元 。
<spacer>属性:
align:对齐方式
height width:高、宽,值可以是数字或百分比,数字则单位是像素,百分比则是萤幕
宽为单位。
type:决定spacer标签的显示模式,可用值有三种:
block:依照标签的宽高设定显示空白
horizontal:依据size属性来插入水平空间
vertical:依据size属性来插入垂直空间
size:指定水平或垂直空白量
<ul></ul>无序列表 <ol></ol>有序列表
建立一份列表,就是所谓的项目符号或是编号,其中的语法如下:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>或<ol>标签利用子标签<li></li>描述每一项用项目符号开始的内容。
<ul>属性:
type:指定项目符号的样式,可用值有三种:
disc:实心圆
circle:空心圆
square:空心方块
<ol>属性:
type:指定编号样式,可用值有五种:
1:数字列表(预设值)
a:小写字母列表
A:大写字母列表
i:小写罗马数字列表
I:大写罗马数字列表
<li>属性:
value:可以指定该项目的开始编号,後面的项目会接续这个编号。
<nobr></nobr>不断行
内容将不会断行,即使是被视窗切到,多余的文字会造成网页必须左右卷动。
<div></div>区域
内容将会被装入一个模拟的区域,共享区域所有属性。通常是使用id属性来呼叫CSS样
式表用的。此外,透过给予其xy座标位置,可以让区域有浮动的效果。
<div>属性:
align:对齐方式
id:标签代码,可以用CSS的id选取器来呼叫之,值是任意文字
style:CSS样式表,所有有关区域的定位、样式、宽高等都可以在此设定
<pre></pre>格式化显示
类似<div>,不过这个区域内的文字会以html码中的编排作输出,所以
<pre>
aaa
aaa
aaa
</pre>
会输出
aaa
aaa
aaa
而不是aaaaaaaaa。
剩下的标签我另外开个文慢慢打...
※ 编辑: joehuang92 来自: 59.121.11.252 (12/25 22:31)
※ 编辑: joehuang92 来自: 59.121.11.252 (12/25 22:32)
1F:推 sam9595:大推 12/25 22:52
2F:推 silentlich:推~~ 12/25 22:54
3F:推 cyril928:推~~~~~~~ 12/25 23:00
4F:→ TARK:乔乔我爱你 >///< 12/25 23:07
5F:推 scan33scan33:乔乔大好>W< 12/25 23:16
6F:推 tobyhuang:推推推推 12/25 23:22
7F:推 edwardhw:好强大...推一个~ 12/25 23:42
8F:推 princeyan:强者!! 12/25 23:46
9F:推 hideys:大乔你根本是天才 >< 12/26 00:04
※ 编辑: joehuang92 来自: 59.121.11.252 (12/26 00:09)
10F:推 waterwinds:太帅了= =+ 12/26 00:32
11F:推 allcyril:乔乔我爱你 >///< 12/26 00:40
12F:推 kuokuo321:乔乔是神!!!! 12/26 10:45
13F:推 et220870:乔乔...今晚我去你房间...>///<... 12/26 13:07
14F:推 fakewen: 乔乔好色~~ 12/30 12:15
15F:推 yease:太厉害了^^ 01/01 20:18