HTML网页制作常用标签及说明-前端开发入门

篇文章我们介绍了怎么创建一个最基本的网页，这篇我们介绍一下经常被使用的标签及用途。

显示在浏览器中的内容都要添加在基本模板中的body标签的中间，这点一定要记住！！

下面的body标签中各个标签，我做了解释说明，大概了解各个标签长什么样子，能记住就更好了。

下面的HTML代码可以直接复制到你的网页中（创建HTML文件的方法上篇文章有介绍）

<!DOCTYPE html>

<head>

<title>这里是网页的标题，你看到在哪里显示的了吗？——橙先生</title>

</head>

<body>

<div>div标签可以理解为是个空盒子，什么都能装下</div>

这是一张图片，注意这里的img标签形式，这是个单标签

<a href="需要跳转到的网址或是文件，如" target="_blank">这个是文字的链接，也可以在其他内容上添加（比如图片）</a>

<p>在这里填入文字</p>

<span>在这里添加你想要的内容</span><span>!!!!!!这里是另外一段内容</span>

<br>

<ul>

<li>这里是无序列表1</li>

<li>这里是无序列表2</li>

<li>这里是无序列表3</li>

</ul>

<ol>

<li>这里是有序列表1</li>

<li>这里是有序列表2</li>

</ol>

<table>

<tr>

<td>表格中第一行的第1列</td>

<td>表格中第一行的第2列</td>

</tr>

<tr>

<td>表格中第二行的第1列</td>

<td>表格中第二行的第2列</td>

<td>表格中第二行的第3列</td>

</tr>

</table>

</body>

</html>

上面的内容已经大致了解了吧？下一篇我们将介绍各种常用到的样式，让各个标签更加的美观。记得关注一下哦！

格语法:

注意：颜色使用格式有三种：rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的宽度大小(使用数字pixel或%)

<table border=""></table>设定表格边框大小(使用数字pixel)

<table align=""></table>表格位置,置左,为默认值

align属性:left(左对齐表格，默认值)、right(右对齐表格)、center(居中对齐表格)

<table bgcolor=""></table>设定表格的背景颜色

<table cellpadding=""></table>指定内容与网格线之间的间距(使用数字pixel或%)

<table cellspacing=""></table>指定网格线与网格线之间的距离(使用数字pixel或%)

通常表格, 这两个参数都设置为 0 。

<table rules="rows"></table>规定内侧边框的哪个部分是可见的。(兼容性差)

rules属性:none 没有线条。

groups 位于行组和列组之间的线条。

rows 位于行之间的线条。

cols 位于列之间的线条。

all 位于行和列之间的线条。

定义了表格内容的摘要：

表格结构：

在使用表格进行布局时, 可以将表格划分为头部、主体和页脚, 具体如下所示：

<thead></thead>：用于定义表格的头部, 必须位于<table></table>标记中, 一般包含网页的logo和导航等头部信息。

<tfoot></tfoot>：用于定义表格的页脚, 位于<table></table>标记中<thead></thead>标记之后, 一般包含网页底部的企业信息等。

<tbody></tbody>：用于定义表格的主体, 位于<table></table>标记中<tfoot></tfoot>标记之后, 一般包含网页中除头部和底部之外的其他内容。

注意：在没有<tbody></tbody>比较的情况下, 浏览器会自动添加<tbody></tbody>标记。

<table bordercolor=""></table>设定表格边框的颜色

<table cols=""></table>指定表格的栏数

<table height=""></table>指定表格的高度大小(使用数字)

<table background=""></table>背景图片的URL=就是路径网址(默认是repeat：水平和垂直方向重复)

<table bordercolordark=""></table>设定表格暗边框的颜色

<table bordercolorlight=""></table>设定表格亮边框的颜色

<tr align=""></tr> 定义表格行的内容对齐方式。

align属性值:right、left、center、justify、char

<tr bgcolor=""></tr> 规定表格行的背景颜色。

<tr valign=""></tr> 规定表格行中内容的垂直对齐方式。

valign属性值right、left、center、justify、char

<td colspan=""></td>指定储存格合并栏的栏数(使用数字)

<td rowspan=""></td>指定储存格合并列的列数(使用数字)

<td align=""></td> 调整表格字段之左右对齐

<td bgcolor=""></td> 设定表格字段之背景颜色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 调整表格字段之上下对齐

<td width=""></td> 调整表格字段宽度

<td nowrap="nowrap"></td> 规定表格单元格中的内容不换行(注意只有一个值:nowrap)

<caption></caption>为表格加上标题

<caption align="">设定表格标题位置

align属性:left, center(默认值), right

<th></th> 定义表头(粗体居中)

细表格边框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格创建后浏览器会自动添加<tbody>标签

么现在咱们

就进入JavaE部分了~

HTML、CSS和JS又被称为“前端三剑客”~虽然Java主要是做后台服务端开发的，但是毕竟是要和前端合作,的多少要了解一下~~总之技多不压身~多学一点东西总归是好的~嗯~咱们开始今天的内容吧~

HTML

什么是HTML？

HTML 全称是 Hyper Text Markup Language:超文本标记语言。超文本意味着功能比普通文本更加强大。标记语言则是：使用一组标签对内容进行描述的一门语言(注意：它不是编程语言)

HTML的语法和规范

1）HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。

2）HTML文件分为头部分(<head></head>)和体部分(<body></body>)

3）HTML标签一般是由开始标签和结束标签组成。

（大部分是成对存在的，有个别标签是单着的~）

4）HTML标签不区分大小写，建议使用小写。

HTML相关标签学习

接下来就是重头戏了，来一起看看HTML标签都有什么~

标题标签<hn > </hn>

n的取值从1到6逐渐变小，独占一行加粗加黑显示，与其他行有一定的行间距

水平线标签 <hr />

里面有一些属性象颜色（color）、大小（size）等等就不详细介绍了，伙伴们自己去摸索一下哈~

段落标签<p></p>

字体标签<font></font>

换行标签<br/>

其中有些属性：

size:指定内容的大小

color：指定内容的颜色

face：指定内容的字体

加粗：<b></b>

斜体：<i></i>

下划线：<u></u>

图片标签

<img />

src:指的是图片显示的路径(位置)

width:指定图片的宽度，取值可以是像素值，也可以是百分比

height：指定图片的高度，取值可以是像素值，也可以是百分比

alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

路径分为两种：

绝对路径：

从盘符开始的到图片位置的完整描述：

类似~C:\Program Files\Img.jpg

相对路径：

①同一级：直接写文件名称或者./文件名称

②上一级：../文件名称

③下一级：写上目录名称/文件名称

列表标签

有序列表：

type：可以选择数字、字母及阿拉伯数字作为前面的序号，

start： 从哪里开始计数

reversed： 表示颠倒顺序

无序列表：

type：可以选择前面的样式实心圆、空心圆和方块

超链接标签

href:指定跳转的位置

target：指定跳转页面显示的位置(取值：_self 、_blank)

表格标签

border：边框的宽度

width：表格的宽

height：表格的高

align：元素的位置居中、上、下、左、右

bgcolor：背景色

cellpadding：边框与边框间的距离

cellspacing：表格内容到边框的距离

跨行跨列操作

跨行：rowspan

跨列：colspan

今天先说这么多了

剩下的小伙伴们自己摸索吧~

拜拜~

我是萌新娜娜

立志做一个不翻车的老司机

学习Java的路上请多多指教

大家如果想要更深入了解java相关知识，私信我回复：【Java】即可知道你们想要知道的java相关问题

在线咨询

上一篇：前端开发：JavaScript 模板引擎（二）
下一篇：大胆尝试这些新的CSS属性，释放CSS的力量吧（一）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML网页制作常用标签及说明-前端开发入门

您的项目需求