HTML入门知识

最新推荐文章于 2024-09-13 23:45:57 发布

C2G_Rg

最新推荐文章于 2024-09-13 23:45:57 发布

阅读量529

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

· html技术简介

Html 就是用来做网页的 . --- hypertext markup language 的缩写 --- 超文本标记语言. （W3C---- html, css, javascript 都是 w3c 的）

Html 文件是有自己的特定扩展名的: .html, .htm

所有的浏览器都是 html的解析器.

学 html 就是学语法, 学一堆堆的标签, 然后怎么去用好这些标签.

·html标签&html书写规则

1、Html 的标签 分为如下这两种 :

单标签: 单标签一般用于特殊的含义, 例如 : <br/> 表示换行, <hr/> 水平线

双标签: 双标签一般用来封装数据 , 展示特定的样式 , 例如 : <font>学习Html</font>

2、标签的书写规则

在html 中不管是单标签还是双标签, 都必须要正确关闭,

对于任何一个 html页面来说 , 都会有固定的内容 :

Html 必须是以 html 做为根标签, 然后下面有 head 和 body 标签, 一般 head中去写标签 title 标签以及 meta 标签, 其中title 设置

Html页面的标题内容. Meta 用于指定 html页面的特定的属性信息.

3、html中的注释

任何一种语言都有注释:

Java中的注释:

单行注释: //

多行注释: /* */

文档注释 /** */

Html中的注释 :

4、html标签介绍

Html中的标签主要是根据功能做了不同的分类 :

例如: 你要排版, 就去搜排版的标签, 你要将一些条目按照有序号的方式显示出来, 就去找清单标签.

标签中的属性名称对应的值必须要使用单引号或者双引号引起来 .

注意:写标点符号的时候，不要写成中文格式．

·html中的常用标签

1、字体标签

Font 标签 : 双标签

<font ></font>

font 标签中常用到的属性 :

face: 设置字形
size: 大写 , 默认大小是 3, 设置 5 表示比3 大两个字号 , 还可以设置 +2, 与直接设置 5 是同一个效果
color: 颜色值 , red , 还可以写 #十六进制的值通过设置RGB的值：00(R)/00(G)/00(B)

举例：<font color="#FFFF00">xxxx</font> <font color="#808000">yyyy</font>

2、html特殊字符

® 己注册 ®
© 版权 ©
™ 商标 ™

3、列表标签（清单标签）：

（1）有序清单: <OL> <LI>

<OL>称为顺序清单标记。<LI>则用以标示清单项目。

所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。

例如：显示结果为：

如果有额外的需求，可以进行参数设定进行实现：

<OL> 的参数设定（常用）：

例如： <ol type="i" start="4"></ol>

其中：

type="i" ：设定数目款式，其值有五种，请参考下表，内定为 type="1"。

start="4" ：设定开始数目，不论设定了哪一数目款式，其值只能是 1,2,3.. 等整数，内定为 start="1"。

例如：运行结果为：

（2）无序清单:

<UL>称为无序清单标记。

所谓无序清单就是在每一项前面加上“·” 等符号，故又称符号清单。

使用 ul 声明是无序清单, li 表示清单中每一项

例如：运行结果为：

<UL> 的参数设定（常用）：
例如： <UL type="square">
用于设置清单项的显示样式, 有三种值如下，内定为 type="disc"：
符号是当 type="disc" 时的列项符号。（disc: 实心圆）
符号是当 type="circle" 时的列项符号。（circle: 空心圆）
符号是当 type="square" 时的列项符号。（square: 方块）
注意：由于 <UL> 及 <LI> 都有 type 这个参数，两者尽可能选用其一。

例如：<ul type="square">

<li>java</li>

<li>shell</li>

</ul>

（3）自定义的清单:

<DL>称为定义清单标记（dl --- defined list）。 <DT> 用以标示定义条目（dt --- defined title；用于写标题），<DD> 则用以标示定义内容（dd --- defined document；用于写文档内容）。

所谓定义清单就是一种分二层的项目清单，其不故符号及数目。

三个标记都没有常用的参数。而 <DT> <DD> 可以独立使用，只是一些旧的浏览器并不支援，如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。

例如：

运行结果：

4、图像标签

通常你需要在html 页面中去显示一张图片, 那么就会使用图像标签.
<IMG> 称图形标记，主要用以插入图片于网页中。

<IMG> 的一般参数设定：

例如 <imgsrc="logo.gif"width=100height=100hspace=5vspace=5border=2align="top"alt="Logo of PenPals Garden"lowsrc="pre_logo.gif">

src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，后者由 96 年开始发展，未来取代前两者。若图片文件与该 html 文件同处一目录则只需写上文件名称，否则必须加上正确的途径，相对及绝对皆可。

width=100 height=100

设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实大小以免失真，若　要改变图片大小最好事先使用图像编辑工具。

hspace=5 vspace=5

设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。

border=2

图片边框厚度。

align="top"

调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom等。

alt="Logo of PenPal Garden"

这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示。

lowsrc="pre_logo.gif"

设定先显示低解像图片，若所加入的是一张很大的图片，下载时间很长，这张低解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。

5、表格标签(重要)

一共有三种标签：

（1） <table> <tr> <td>

<table>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记

<tr>用以标示表格列 tr: 代表行
<td>用以标示储存格 td: 代表列

tr 中每写一个td 就表示一个列

<TABLE> 的参数设定（常用）：

例如： <table width="400"border="1" cellspacing="2" cellpadding="2"align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

width="400"

表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"

表格边框厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"

表格格线厚度，请看例子三，那是加厚到 5 的格线。

cellpadding="2"

文字与格线的距离，请看例子四，那是加至 10 的 padding。

align="CENTER"

表格的摆放位置（水平），可选值为： left, right, center，那表格是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多层保证而己，当然只用<CENTER>亦可。

valign="TOP".

表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

background="myweb.gif"

表格背景，与 bgcolor 不要同用。

bgcolor="#0000FF"

表格底色，与 background 不要同用。

bordercolor="#FF00FF"

表格边框颜色，NC 与 IE 有不同的效果。

bordercolorlight="#00FF00"

表格边框向光部分的颜色，请看例子二。『只适用于 IE』

bordercolordark="#00FFFF"

表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

cols="2"

表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。

<TR> 的参数设定（常用）：

例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

align="RIGHT"

该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。

valign="MIDDLE"

该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

bgcolor="#0000FF"

该一列底色，请看例子五。

bordercolor="#FF00FF"

该一列边框颜色，请看例子三。『只适用于 IE』

bordercolorlight="#808080"

该一列边框向光部分的颜色，请看例子三。『只适用于 IE』

bordercolordark="#FF0000"

该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

<TD> 的参数设定（常用）：

例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

width="48%"

该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

height="400"

该一储存格高度。

colspan="5"

该一储存格向右打通的栏数。指定占用的列

rowspan="4"

该一储存格向下打通的列数。指定占用的行

align="RIGHT"

该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。

valign="BOTTOM"

该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

bgcolor="#FF00FF"

该一储存格底色，请看例子四。

bordercolor="#808080"

该一储存格边框颜色，请看例子三。『只适用于 IE』

bordercolorlight="#FF0000"

该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』

bordercolordark="#00FF00"

该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

background="myweb.gif"

该一储存背景，与 bgcolor 任用其一。

（2）<th> / <caption>

caption:表格的标题

th：列的头，与td的使用位置是一样的，不同之处是th中的文字有一些显示效果。

“唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数设定请参考<TD>。当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。 ”

<CAPTION> 的参数设定（常用）：

例如：<caption align="TOP" valign="TOP"></caption>

align="TOP"

该表格标题列相对于表格的摆放贴位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你的原始码中把 <caption> 放在 <table> 中的头部或尾部。

valign="TOP"

该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列置于下方及向右或向左贴　，那末两个参数便可一　用了。当只　一个参数时，请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。

例如：

运行结果：

6、超链接(重要):

超链接标签就是 <a> 标签,<A> 称链接标记，由 <A> 与 </A> 所围的文字、图片等等可以成为一个链接。

<A> 的一般参数设定：

例如 <a href="index.html"name="hello"target="_top">

href="index.html"

这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的链接。

当作为一外部链接时： href 所设定的是该连结所要连到的文件名称，若该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。

当作为一内部链接时：？？？

此外，在标签的href 执行目标资源的后面通过 ? 的形式拼接一些参数，通过 ? 拼接一些参数（多个参数之间使用 & 符号分开）。

例如：<a href="2.html?name=hh&age=17&sex=female">点你妹...</a>

运行结果：

name="hello"

这参数是为文件埋下参考点，作为被链接，不会被显示。所以说造成一个内部链接，要使用两次 <a> 连结标记。一个使用参数 name 事先在文件中埋下一参考点，另一个使用参数 href 连到这个参考点。

target="_top"

指定将以何种方式去打开页面。可选值为： _blank, _parent, _self, _top, 框窗名称。

target="框窗名称"

这只运用於框架中，若被设定则链接结果将显示於该“框窗名称”的框窗中，框窗名称是事先由框架标记所命名。

target="_blank" 或 target="new"

将链接的画面内容，开在新的浏览视窗中。

target="_parent"

将链接的画面内容，当成文件的上一个画面。

target="_self"

将链接的画面内容，显示在目前的视窗中。(默认值)

target="_top"

将框架中链接的画面内容，显示在没有框架的视窗中。（即除去了框架)

使用a标签去创建锚点：

实现锚点有两种方式:

方式一：使用a标签，通过name="锚点名",设置一个锚点,然后使用a标签, href="#锚点名" , 就可以回到锚点所在位置

<a name="top"></a>

kjlkdsjfklds<br/>

kjlkdsjfklds<br/>

......

kjlkdsjfklds<br/>

kjlkdsjfklds<br/>

<a href="#top">点击回到顶部</a>

运行结果：

方式二: 使用ａ标签, 通过 id="锚点名", 设置一个锚点,然后使用 a 标签, href="#锚点名" , 就可以回到锚点所在位置

<a href="#mybottom">回到底部</a>

kjlkdsjfklds<br/>

kjlkdsjfklds<br/>

......

kjlkdsjfklds<br/>

kjlkdsjfklds<br/>

<a id="mybottom"></a>

 (方式一实现回到底部)

运行结果：

7、标题标签（了解）

<h1>至<h6>，这些是标题标签，由 <h1> 至 <h6> 变粗变大加宽的程度逐渐减小。每个标题标签所标示的字句将独占一行且上下留一空白行。

其余类似字体标签（实体标签/逻辑标签）可以另外进行查阅。
<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>

8、表单标签(重要):

格式：

......
</form>

例如：

运行结果：

表单标签的一般参数：

form:

form 标签中的数据都可以在点击提交后 , 都带给所要访问的目标资源

action 属性的值就是要访问的目标资源

method 属性表示请求的提交方式 , 在这里只有 get 和post

input: 表示输入项, 一个form 表单中可以有多个 input 输入项

type: 用于设置输入项的类型（其中每个type也可以设置相关参数，如size等）

类型有：

普通的文本输入项 (text)

密码类型的输入项 (password)

多选框的输入项 ( checkbox)

单选狂的输入项 (radio)

隐藏域字段(hidden)

文件上传输入项(file)

提交数据到目标资源( submit)

表示引用一张图片 (image) -- 不常用

重置表单 (reset) --- 将表单的数据清空 --- 不常用(基本上不会用 )

PS：如果没有为 input 输入项添加一个叫做 name 的属性, 那么表单最终点击了提交的时候, 数据不会提交过去。此外，还需要提交value属性。

select : 是下拉框 , select 中下每个下拉框就是一个option. 但是一个select只需要设置一个name属性。

textarea: 文本输入区域, 用于输入多行多列的内容。其中rows属性表示行，cols属性表示列。

使用表格封装表单，方便排版。

<h3>XX 征婚交友网站注册页面</h3>
	<form action="">
		<table>
			<tr>
				<td>姓名:</td>
				<td>
					<input type="text" name="name">
				</td>
			</tr>
			<tr>
				<td>密码:</td>
				<td>
					<input type="password" name="password">
				</td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="gender" value="男">男
					<input type="radio" name="gender" value="女">女
				</td>
			</tr>
			<tr>
				<td>爱好:</td>
				<td>
					<input type="checkbox" name="hobbies" value="弹棉花">弹棉花
					<input type="checkbox" name="hobbies" value="玩毛线">玩毛线
					<input type="checkbox" name="hobbies" value="麻辣烫">麻辣烫
					<input type="checkbox" name="hobbies" value="敲代码">敲代码
					<input type="checkbox" name="hobbies" value="夜生活">夜生活
				</td>
			</tr>
			<tr>
				<td>城市:</td>
				<td>
					<select name="city">
						<option value="深圳">深圳</option>
						<option value="香港">香港</option>
						<option value="襄阳">襄阳</option>
						<option value="贵阳">贵阳</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>个人靓照: </td>
				<td>
					<input type="file" name="pic">
				</td>
			</tr>
			<tr>
				<td>个人自白:</td>
				<td>
					<textarea rows="5" cols="80" name="self_introduction"></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="注册">
				</td>
			</tr>
		</table>
	</form>

运行结果：