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

时间：2022-11-02 08:34:20

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 &lt; 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. 列表1
  2. 列表2
  3. 列表3



    有序项目列表
  1. 列表1
  2. 列表2
  3. 列表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>

该段代码生成的是路径指定的图片
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/>

标签：

相关文章