文章目录
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</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</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</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</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</td>
</tr>
</table>
</body>
</html>
3.结果演示
更多推荐
HTML 制作一个通讯录
发布评论