HTML 制作一个通讯录

文章目录

1.HTML

1.1 HTML的结构

1.2 常用标签

2.代码展示

3.结果演示

1.HTML

1.1 HTML的结构

<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
<!DOCTYPE HTML>

1.2 常用标签

标题标签:指定特定样式字体的一组标签 <h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>属性:align:指定文本的排列left 靠左center 居中right 靠右
列表标签
无序列表<ul> 定义一个无序列表<li> 定义列表中的项
属性:type:定义项目符号的类型disc square circle
有序列表
<ol>
<li></li>
</ol>
img标签 -- 图像标签
<img src="图片的路径" alt="代替图像显示的文本"/>
必选属性:
src:图片的路径
alt:代替图像显示的文本
可选属性:
width:宽度 px %
height:高度 px %
border:边框的宽度 px表格标签 -- <table>
<table> 定义一个HTML表格
<tr>        定义表格中的行
<td>        定义表格中的单元格
<th>        定义表格中的表头
table的重要属性:
border 边框宽度
cellspacing 单元格之间的空白距离
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
tr重要属性:
align 对齐方式
bgcolor 背景颜色
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数
rowspan 可竖跨的行数
<caption> 定义表格的标题

2.代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>这是一个通讯录</title></head><body><!-- tr表示行，td表示列，border表示边框，width宽度，height高度,cellspacing单元格之间的举例 --><!-- bgcolor表示背景颜色，background表示背景图片 --><!-- 表格的数据写在td之间 align=center表示居中，如果放在table标签让整个表格居中，如果放在tr让当前行内容居中 --><table align="center" border="1" width="1000" height="300" cellspacing="0"><!-- h1标题标签 --><h1 align="center">通讯录</h1><!-- tr表示行 --><tr bgcolor="blanchedalmond" height="2.5" align="center"><!-- td表示列 --><td width="100">编号</td><td width="100">姓名</td><td width="100">姓别</td><td width="100">年龄</td><td width="100">电话</td><td width="100">邮箱</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">01</td><td width="100">宝贝</td><td width="100">女</td><td width="100">18</td><td width="100">17829918499</td><td width="100">2762077649@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">02</td><td width="100">张飞</td><td width="100">男</td><td width="100">19</td><td width="100">18729918499</td><td width="100">2762066649@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">03</td><td width="100">李四</td><td width="100">男</td><td width="100">20</td><td width="100">17829918477</td><td width="100">2762033649@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">04</td><td width="100">小高</td><td width="100">女</td><td width="100">17</td><td width="100">17799189499</td><td width="100">2762077656@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">05</td><td width="100">可爱</td><td width="100">女</td><td width="100">18</td><td width="100">17825218499</td><td width="100">2752077649@qq.com</td></tr></table></body>
</html>

3.结果演示

HTML 制作一个通讯录相关推荐

【C语言】制作一个通讯录管理系统
大家好呀!
C语言 - 制作一个可以容纳一千人的本地通讯录
本章目录前言一.菜单制作二.创建通讯录 1.创建人员信息结构体 2.创建完整通讯录结构体 3.初始化通讯录 4.存放数据 5.判断空间容量三.各功能的实现 1.增加人员信息的功能 2.按名字查 ...
Android制作的一个通讯录
最近一两天在工作之余利用Android的SQLiteDatabase写了一个通讯录.先来分析下几个关键的地方: 一.Activity之间的数据传递,在这次写通讯录中还是使用Bundle来传递数据,只是 ...
python写一个通讯录step by step V3.0
python写一个通讯录step by step V3.0 更新功能: 数据库进行数据存入和读取操作字典配合函数调用实现switch功能其他:函数.字典.模块调用注意问题: 1.更优美的格式化输 ...
如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4
在第一篇<如何使用CCRenderTexture创建动态纹理>基础上,增加创建动态山丘,原文<How To Create A Game Like Tiny Wings with Co ...
制作一个简单的linux
我这里是借助宿主机做的一个简单的Linux,我们只要知道一个Linux启动过程需要什么,这里制作就简单的多了.不过没有基础的也没关系,我写的很详细,没有基础的看了我写的步骤只要细心也是会做出来的,我这 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
html靶心制作,用PS单色填充制作一个靶心
使用单色填充的方法制作一个靶心,属于Photoshop的入门课程,好了,喜欢的朋友可以参考本文! 步骤 1.新建图像文档.选择"文件-新建"命令,在弹出的对话框中设置"预 ...
python制作解压工具_使用python制作一个解压缩软件
python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip install zipfile os是 ...
android socket 简易聊天室 java服务器_利用Socket制作一个简易的Android聊天室
首先制作一个客户端,界面如下: 使用方法:启动后,首先在登录编辑框输入一个昵称,然后点击登录,上面灰色区域是聊天窗,其中会显示你的登录提示,显示其他人发的消息.在的登录成功后,可以在下面的发送编辑框内 ...

HTML 制作一个通讯录

1.HTML

2.代码展示

3.结果演示

HTML 制作一个通讯录相关推荐

最新文章

热门文章