初学html

u010142437

已于 2022-04-18 22:37:46 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html 标签表格

于 2013-10-17 15:15:25 首次发布

本文链接：https://blog.youkuaiyun.com/u010142437/article/details/12837361

HTML 专栏收录该内容

12 篇文章

订阅专栏

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

一、HTML的意思：Hypertext Marked Language(超文本标记语言)

二、HTML基本结构：

<HTML>
<HEAD>
头部信息
</HEAD>
<BODY>
文档主体
</BODY>
</HTML>

一个简单示例：

<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3> 欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
学习HTML的基本使用
</FONT>
</CENTER>
</BODY>
</HTML>

三、各种标签介绍：

1.标题标签：<Hn>，其中n为标题的等级，一共有六个等级，n越小，标题字号就越大：
<H1>...</H1>第一级标题
<H2>...</H2>第二级标题
<H3>...</H3>第三级标题
<H4>...</H4>第四级标题
<H5>...</H5>第五级标题
<H6>...</H6>第六级标题
2.换行标签：<BR>
在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上<BR>标签。
3.段落标签：<p>
文件段落的开始由<P>来标记，结束由</P>来标记，</P>也可以省略，因为下一个<P>的开始就意味着上一个段落(<P>)的结束。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
<P>标签还有个属性ALING，用来指明字符显示时的对齐方式，一般有CENTER、LEFT、RIGHT三种。
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
4.水平线段标签：<HR>
作用：这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。
<HR>有四个属性：
①size 水平线的宽度
②width 水平线的长，用占屏幕宽度的百分比或像素值来表示。
③align 水平线的对齐方式，有LEFT、RIGHT、CENTER三种。
④noshade 线段无阴影属性，为实心线段。
5.<FONT>标签
用来规定文本的字体（face）、字体尺寸（size）、字体颜色（color）。
①size属性用来设置字号的大小，有效值范围为1-7，缺省值为3。如，<FONT size="5">...</FONT>
②在HTML4.0提供了face属性来设置字体，其属性值可以是本机上的任一字体类型，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。如，<FONT face="verdana">...<FONT>
③用color属性来设置字体的颜色，如<FONT color="red">...</FONT>，颜色值可以是一个十六进制数（用#作为前缀），也可以是16种颜色名称，比如Black="#000000"、Green="#008000"、Red="#FF0000"、Blue="#0000FF"等。以上并不符合w3c标准，在html5中不再支持。
6.无序号列表：<UL>
无序号列表使用一对<UL></UL>标签，每个列表项前使用<LI>。结构如下：
<UL>
<LI> 第一项
<LI> 第二项
<LI> 第三项
</UL>
7.序号列表：<OL>
序号列表使用一对<OL></OL>标签，每个列表项前使用<LI>,每个项目都有前后顺序之分，多数用数字表示。结构如下：
<OL>
<LI> 第一项
<LI> 第二项
<LI> 第三项
</OL>
8.定义性列表：<DL>/<DT><DD>
定义性列表又叫描述性列表，默认为两个层次:第一层为列表项标签<DT>,第二层为注释项标签<DD>。通常成对使用，也可以一个列表项对应于几个解释项，这种方式很少用。<DD>默认注释显示在另一行，但当使用<DL compact="compact">后，注释项和列表项将显示在同一行。但是任何主流浏览器都不支持compact属性，在 HTML 4.01 中，不赞成使用 ul 元素的 compact 属性；在 XHTML 1.0 Strict DTD 中，不支持 ul 元素的 compact 属性。示例如下：
<DL >
<DT>第一项 <DD>这是对第一项的注释
<DT>第二项 <DD>这是对第二项的注释
<DT>第三项 <DD>这是对第三项的注释
</DL>
9.其他标签：
<B></B> 粗体
<I></I> 斜体
<U></U> 加下划线
<TT></TT> 打字机字体（html5不支持）
<BIG></BIG> 大型字体
<SMALL></SMALL>小型字体
<BLINK></BLINK> 闪烁效果
<EM></EM> 表示强调，一般为斜体
<STRONG></STRONG> 表示特别强调，一般为粗体
<CITE></CITE> 用于引证、举例，一般为斜体

10.表格：TABLE
①基本结构
<table >...</table> 定义表格
<caption>...</caption> 定义标题
<tr> 定义表行
<th> 定义表头
<td> 定义表元（表格的具体数据）
②标题位置
由align属性来设置，有位于表格上方和表格下方两种：
<caption align=top>...</caption>、<caption align=bottom>...</caption>
③表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列的方式：
<TABLE width=n1,height=n2> n1,n2可以用像素值表示也可以用百分比来表示。
④表格边框尺寸设置
边框是用table的border属性来设置，可以表示表格的边框厚度和框线。
⑤格间线宽度
格与格之间的线叫格间线，它的宽度用table的cellspacing属性来设置。
⑥内容与格线之间的宽度
内容与格线之间的宽度用table的cellpadding属性来设置。
⑦表格内文字的对齐、布局
表格中数据的排列方式有两种，左右排列和上下排列。

左右排列用align属性来设置，有三种值：居左(left)、居中(center)、居右(right)。

上下排列用valign属性来设置，常见有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。
⑧跨多行和跨多列
跨多行在<TH>或<TD>中加入rowspan属性；跨多列在<TH>或<TD>中加入colspan属性。
⑨表格的背景颜色
可以为整个表格、一行、一个表元设置背景，都是使用bgcolor属性。