文章目录
1. 标题标签
标题是通过<h1> - <h6> 标签来定义的
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>第一个标题</h1>
<h2>第二个标题</h2>
<h3>第三个标题</h3>
<h4>第四个标题</h4>
<h5>第五个标题</h5>
<h6>第六个标题</h6>
</body>
</html>
效果:
2. 段落标签
段落是通过标签<p> 来定义的
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>第一段段落</p>
<p>第二段段落</p>
<p>第三段段落</p>
</body>
</html>
效果:
3. 空格标签
在HTML中,多个空格或者换行会被解析成一个空格,所以我们可以使用 来表示
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
hello word
</body>
</html>
效果:
hello word
4. 换行标签
换行是通过标签<br> 来定义的
实例:
<body>
hello<br><br>word
</body>
效果:
hello
word
5. 分割线标签
分割线是通过标签<hr> 来定义的
实例:
<body>
hello
<hr>
word
</body>
效果:
6. 加粗标签
加粗可以通过标签<b>或者<strong>来定义的
实例:
<body>
<b>hello</b>
<strong>word</strong>
</body>
效果:
hello word
7. 斜体标签
斜体可以通过标签<i>或者<em>来定义的
实例:
<body>
<i>hello</i>
<em>word</em>
</body>
效果:
hello word
8. 链接标签
链接可以通过标签<a>来定义的
实例:
<body>
<a href="#">空链接</a>
<a href="https://www.baidu.com" target="_blank" style="text-decoration: none;">百度一下</a>
</body>
说明:
- target="_blank":在新窗口打开
- text-decoration: none 取出链接下划线
9. 图片标签
可以通过标签<img>来定义
实例:
<body>
<img src="Tulips.jpg" width="200" height="100" alt="图片出错信息" title="这是一张颜色名称图片">
</body>
效果:
说明:
- 图片可以设置宽高
- alt:当图片显示出错时,alt的内容就是显示内容
- title:当鼠标放在图片上,会显示title内容
10. 文本输入框
实例:
<body>
<input >
<input type="text">
</body>
效果:
11. 按钮
实例:
<body>
<input type="button" value="按钮1">
<button>按钮2</button>
</body>
效果:
12. 列表
列表分为三种:无序列表(ul),有序列表(ol),自定义列表(dl)
12-1. 无序列表
实例:
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
效果:
12-2. 有序列表
实例:
<body>
<ol type="I" start="5">
<li>学习</li>
<li>学习</li>
<li>写代码</li>
</ol>
</body>
效果:
type:规定列表中的列表项目的项目符号的类型
1 数字顺序的有序列表(默认值)(1,2,3,4)
a 字母顺序的有序列表,小写(a,b, c,d)
A 字母顺序的有序列表,大写(A,B,C,D)
i 罗马数字,小写(i,ii,iii,iv)
I 罗马数字,大写(I,II,III,IV)
start 属性规定有序列表的开始点
12-3. 自定义列表
实例:
<body>
<dl>
<dt>权利的游戏</dt>
<dd>第1集</dd>
<dd>第2集</dd>
<dd>第3集</dd>
<dt>葫芦娃救爷爷</dt>
<dd>第1集</dd>
<dd>第2集</dd>
<dd>第3集</dd>
</dl>
</body>
效果:
权利的游戏
第1集
第2集
第3集
葫芦娃救爷爷
第1集
第2集
第3集
注意:自定义列表,一般需要结合css使用
13. 表格
表格由 <table> 标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。格式如下:
<table>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
</table>
注:
- th:标题行,加粗,水平垂直居中
- 一个tr表示一行,一个td表示一列(一个单元格)
常用参数:
参数 | 含义 |
---|---|
width | 表格的宽度 |
height | 表格的高度 |
border | 表格边框粗细 |
bordercolor | 表格边框颜色 |
bgcolor | 表格的背景色 |
cellspacing | 单元格与单元格之间的间距 |
cellpadding | 单元格与内容之间的空隙 |
align | 对齐方式(left / right / center) |
colspan | 合并列 |
rowspan | 合并行 |
实例:
<table width="400px" height="100px" border="1" bordercolor="red" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2">Header</th>
<th colspan="2">Header</th>
</tr>
<tr height="50px">
<td width="200px">Data</td>
<td>Data</td>
</tr>
<tr bgcolor="blue">
<td>Data</td>
<td align="center">Data</td>
<td align="right">Data</td>
</tr>
</table>
效果如下:
当然还可以如下写:
<body>
<table border="1" width="300" height="150" cellspacing="0">
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 表 内容 -->
<tbody>
<tr align="center">
<td><b>慕容雪痕</b></td>
<td>18</td>
<td>女</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</tfoot>
</table>
</body>
效果如下: