您的位置：首页 > Web前端 > HTML

HTML语言常用标签之字体、列表、图像、表格

2016-12-12 16:34 225 查看

1、字体标签

<html>
<head>
<title>font1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- 演示font标签 -->
<h2><font color="#22AA00">用于演示font的文字</font></h2>
This is my HTML page. <br>
<!-- 标签名不能数字开头
如果符号与标签冲突，比如大于号小于号，要用到转译符， a &1t; c -->
a < c
</body>
</html>

font1.html

用于演示font的文字

This is my HTML page.

a < c

其中，color=”#22AA00”，颜色是用16进制位来表示的，可以通过查阅W3School教程来查看各种颜色对应的16进制。

<h1></h1>

标签之间的任何文本都将显示大标题，此外，

<h2>

和

<h3>

用于创建逐渐变小的标题，以此类推，直到

<h6>

。

2、列表标签

列表标签在网页开发中比较常见

<html>
<head>
<title>list_html.html</title>
</head>
<body>
<!-- 1、确定列表的范围<dl>
2、在范围内，分上层项目<dt>和下层项目 <dd>,其中<dd>标签具有默认的缩进效果-->
<dl>
<dt>部门名称</dt><!--上层项目-->
<dd> 技术部</dd><!--下层项目-->
<dd> 财务部</dd>
<dd> 测试部</dd>
</dl>
<!-- 带有序标识的项目列表 <ol>，每一个列表项都由<li></li>封装
,其中<ol>也具有缩进效果-->
<!--示例1-->
<ol>
有序项目列表
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--示例2-->
<ol type="A">
有序项目列表
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--无序项目列表-->
<ul>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
</body>
</html>

list_html.html

部门名称

技术部

财务部

测试部

有序项目列表

列表1

列表2

列表3

有序项目列表

列表1

列表2

列表3

无序项目列表

无序项目列表

无序项目列表

3、图像标签

<html>
<head>
<title>image_html.html</title>
</head>
<body>
<!-- 图像标签<image>，是一个内部闭合的标签-->
<img art="图片1" src="D:/HTML/1.jpg" height="200px" width="200px"/>
<!--alt是一个图片说明标签，src指图片的路径height和width用来设置图片的高度和宽度，上句代码中的路径指的是绝对路径-->
</body>
</html>

该段代码生成的是路径指定的图片

4、表格标签

表格标签的应用有很多

组成：标题标签：，给表格提供标题

表头标签：，一般对表格的第一行或者第一列进行格式化，就是粗体显示，并不常用

行标签：

单元格标签：，加载行标签的里面，可以简单理解为，先有行，在行中再加入单元格

<html>
<head>
<title>table_html.html</title>
</head>
<body>
<!-- 表格标签<table>
表格中是由行组成的。<tr>
行是由单元格组成的<td>，<th>居中并加粗-->
<table border="1" width="500px" cellpadding="5" cellspacing="0">
<!--boder是用于设置表格外框。width设置表格宽度，cellpadding用来设置表格内边距，cellspacing用来设置单元格与单元格之间的距离-->
<tr><td>姓名</td>  <td>年龄</td></tr>
<tr><th>张三</th>  <th>30</th></tr>
<tr><td>李四</td>  <td>40</td></tr>
</table>
<hr>
<table border="1" widtr="500px" cellpadding="5" cellspacing="0">
<tr>
<th colspan="2">个人信息</th><!-- colspan指的是该行占n列 -->
</tr>
<tr>
<td>张三</td><td>30</td>
</tr>
<!--先设置两行的表格，再将第二行设置为两列，基本原则就是先设置行，再设置列-->
</table>
<hr>
<table border="1" widtr="500px" cellpadding="5" cellspacing="0">
<tr>
<th rowspan="2">个人信息</th>
<td>姓名</td>
</tr>
<tr>
<td>年龄</td>
</tr>
</table>
<tbody><!-- 表格的下一级标签 -->
<thead>
</thead>
</tbody>
</body>
</html>

table_html.html

张三	30
姓名	年龄
李四	40

个人信息
张三	30

个人信息	姓名
年龄

五、其他常用标签

换行符

<br/>

（这是一个内部结束的标签）

分段符

<p></p>

水平标线，用于分隔主要的文本区域

<hr/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航