HTML常用标签带效果
<!--要注释的文字--> 注释
<html> </html> 定义HTML的文档也是 HTML 页面的根元素
<head> </head> 文档的信息(头部)
<meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> </title> 元素描述了文档的标题文档的标题
<body> </body> 包含了可见的页面内容
<br> 换行
<h1> </h1> 定义一个大标题(标题字大小(h1~h6))
(我是一个加粗的字体 效果)
<b>(我是一个加粗的字体 效果)</b> 加粗的字体
(我是定义了一个段落 效果)
<p>(我是定义了一个段落 效果)</p> 定义了一个段落
(我是一个粗体字(强调)的效果)
<strong>(我是一个粗体字(强调)的效果)</strong> 粗体字(强调)
我是一个斜体字的效果
<i>(我是一个斜体字的效果)</i> 斜体字
<center>我是一个 居中文本 的效果</center> 居中文本
我是一个 斜体字(强调) 的效果
<em>我是一个 斜体字(强调) 的效果</em> 斜体字(强调)
我是红色文字效果
我是绿色文字效果
<font color="red">我是红色文字效果 </font> red 红色 可修改更换颜色
<font color="#00FF00">我是绿色文字效果 </font> #00FF00 绿色代码 可修改更换颜色
(ul)无序列表效果
- 列表一
- 列表二
- 列表三
- 列表..
<ul> 无序列表
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表..</li>
</ul>
- 有序列表效果
- 列表一
- 列表二
- 列表三
- 列表..
- 列表的项目效果1
- 列表的项目效果2
<ol start="0"> (ol)有序列表(start="0"在0的位置开始,0也可以修改为其他数字)
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表..</li>
</ol>
<li>列表的项目效果1</li> 列表的项目
<li>列表的项目效果2</li>
<a href="https://kafeim.ltd/" target="_blank">这是一个超链接(点一下跳转)</a>
超链接
定义一个图片效果
水平线效果
<img src="/路径/图片名称.png" /> 定义一个图片
<hr> 水平线</hr> 一个水平线效果
带黑框表格效果
姓名(标题1) | 余额(标题2) | 标题....... |
---|---|---|
小明(标题内容1) | $1000(标题内容2) | 内容.. |
小刚(标题内容1) | $800(标题内容2) | 内容.. |
带黑框表格
<table border="1">
(数字1代表黑框粗细可以按需要修改)
<tr>
<th>姓名(标题1)</th>
<th>余额(标题2)</th>
<th>标题.......</th>
</tr>
<tr>
<td>小明(标题内容1)</td>
<td>$1000(标题内容2)</td>
<td>内容..</td>
</tr>
<tr>
<td>小刚(标题内容1)</td>
<td>$800(标题内容2)</td>
<td>内容..</td>
</tr>
</table>
不带黑框表格效果
姓名(标题1) | 余额(标题2) | 标题....... |
---|---|---|
小明(标题内容1) | $1000(标题内容2) | 内容.. |
小刚(标题内容1) | $800(标题内容2) | 内容.. |
<table border="0"> 不带带黑框表格
<tr>
<th>姓名(标题1)</th>
<th>余额(标题2)</th>
<th>标题.......</th>
</tr>
<tr>
<td>小明(标题内容1)</td>
<td>$1000(标题内容2)</td>
<td>内容..</td>
</tr>
<tr>
<td>小刚(标题内容1)</td>
<td>$800(标题内容2)</td>
<td>内容..</td>
</tr>
</table>
表格注释:
<table border="0"> 数字代表黑框粗细可以按需要修改
<th>…</th> 定义表格中的表头单元格
<tr>…</tr> 定义表格中的行
<td>…</td> 定义表格中的单元