<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML基本标签</title>
</head>
<body>
<!--1.水平线-->
<hr />
<hr size="200"/>
<hr noshade="noshade" />
<!--2.字体-->
<font size="7">我很帅（size取值1-7，依次增大）</font>
<font color="blue">我很蓝</font>
<font color="#FF0000">我是红色的</font>
<font face="微软雅黑" color="green" size="7">微软雅黑</font>
<font face="华为彩云" color="green" size="7">华为彩云</font>
<!--3.格式化标签-->
<b>粗体</b>
<i>斜体</i>
<!--4.段落标签-->
<p>定义段落
插入单个<br />换行
</p>
<!--5.标题标签： hn
数字n: 取值范围1-6
数字越小: 字体越大 常用 h1和h3
-->
<h1>标题</h1>
<h6>小标题</h6>
<!--
6.图片标签: img 内部结束
属性:
src: 指定图片的路径 相对路径
宽度 像素 百分比: 占用浏览器窗口的比例
height: 高度
title: 图片标题,鼠标悬停提示
alt ：图片无法显示时的替代文本
align: left 把图像对齐到左边
right 把图像对齐到右边
middle 把图像与中央对齐
top 把图像与顶部对齐
bottom 把图像与底部对齐
-->
<img src="img/middle01.jpg" width="50%" height="30%"title="你点我" alt="加载失败">
<img src="img/small0.jpg" width="50%" height="30%"title="你点我" alt="加载失败">
<img src="img/middle01.jpg" width="50%" height="30%"title="你点我" alt="加载失败" align="right">
<!--
7.列表标签:
有序标签: ol
列表项标签: li
属性:
start: 起始值
type: 列表项前的序号的样式(1,A,a,I,i)
无序标签: ul
列表项标签: li
属性:
type: 列表项前的图形的样式(disc,square,circle)
-->
<ol start="3" type="i">
<li>百度</li>
<li>京东</li>
</ol>
<ul type="square">
<li>百度</li>
<li>京东</li>
</ul>
<!--
8.表格标签: table
属性:
border: 表框 像素值
宽度
height: 高度
align: 显示位置 居中 center 居左 left 居右 right
cellpadding: 单元格内容和边框线的位置
cellspacing: 单元格之间的举例
bgcolor: 背景色
bordercolor: 边框颜色
行标签: tr
属性:
align: 显示位置 居中 center 居左 left 居右 right
单元格标签: td
单元格标题标签: th 默认居中 加粗
3行3列的表格
-->
<table border="2" bordercolor="red"cellpadding="12"cellspacing="0"bgcolor="chartreuse"width="201"height="80">
<tr >
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<!--
8.合并单元格(都是针对单元格 td)
1.第一行的三个单元格合并
跨列操作:
属性:
colspan: 值是合并单元格的数量,跨越的列数
2.第二行第一个单元格和第3行第一个单元格合并
跨行操作:
属性:
rowspan: 值是合并单元格的数量,跨越的行数
3行3列的表格
快捷键：tr*n>td*n 然后按Tab，就可以生成n行n列的表格
-->
<table bordercolor="blue" border="1" cellpadding="3" cellspacing="1" width="800" height="600">
<tr>
<th colspan="2">亚瑟</th>
<!--<th>钟无艳</th>-->
<th>后羿</th>
</tr>
<tr>
<th rowspan="2">孙尚香</th>
<th>小乔</th>
<th>猴子</th>
</tr>
<tr>
<!--<th>妲己</th>-->
<th>甄姬</th>
<th>云中鹤</th>
</tr>
<!--
9.超链接标签: 从一个页面跳转到另一个页面
标签: a
属性:
href: 跳转到另一个页面的地址
target: 新页面的显示方式
_blank: 在新窗口中打开
_self: 在当前窗口中打开 默认
-->
<a href="http://www.baidu.com" target="_self">百度</a>
</table>
</body>
</html>