<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html常用标签</title>
<style type="text/css">
body
{
color:#5F2222;
background-color: #9DBCB7;
}
.divcss
{
text-align: center;
border:2px solid#E21919;
width:800px;
margin:0 auto;
}
.css
{
color:#1C28E3;
}
#cyf
{
text-align: right;
color:#122AD7;
}
table
{
border:2px solid #0F0101;
}
table td,th
{
border:2px solid #0F0101;
}
</style>
</head>
<body>
<a name="top">
<div id="加强语气" class="divcss">
<p>
<em> 表示强调，在浏览器中默认为斜体<br/>
例如：我欲乘风破浪，踏遍<em>黄沙</em>海洋。
</p>
<p>
<strong> 表示强调，在浏览器中默认为加粗<br/>
例如：我欲乘风破浪，踏遍<strong>黄沙</strong>海洋。
</p>
</div>
<div id="span标签" class="divcss">
<p>
<span> 没有语意，没有固定的格式实现。当对他进行样式时，才会产生视觉上的变化<br/>
例如：我欲乘风破浪，踏遍<span class="css">黄沙</span>海洋。
</p>
</div>
<div id="文本的引用" class="divcss">
<p>
<q> <br/>短文本引用，用于简短的行内引用，在浏览器中常用双引号表示
例如：我欲乘风破浪，踏遍<q>黄沙</q>
</p>
<p>
<blockquote> 标签定义块引用。<br/>
例如：该标签之间的
<blockquote>所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体，块引用有他们独立的空间
</blockquote>
</p>
</div>
<div id="地址信息" class="divcss">
<p>
<address> 加入地址信息<br/>
例如：<br/>
<address id="cyf">
本文作者：cyf
</address>
</p>
</div>
<div id="加入代码" class="divcss">
<p>
<code> 在文档中插入一行代码。
例如：我欲乘风<code>cout<<"hello word";</code>破浪，踏遍黄沙海洋。<br/>
区别：我欲乘风cout<<"hello word";破浪，踏遍黄沙海洋。
</p>
<p>
<pre> 在文档中插入一段代码
例如：我欲乘风
<pre id="pre">
#include"iostream"
using namespace std;
{
cout<<"hello wod!"
}
</pre>破浪，踏遍黄沙海洋<br/>
</p>
</div>
<div id="列表" class="divcss">
<p>
<ol> 有序列表<br/>
例如：<br/>
<ol>
<li>苹果</li>
<li>桃子</li>
<li>葡萄</li>
</ol>
</p>
<p>
<ul> 无序标签<br/>
例如：<br/>
<ul>
<li>苹果</li>
<li>桃子</li>
<li>葡萄</li>
</ul>
</p>
<p>
标签嵌套：<br/>
<ul>
<li>
水果
<ol>
<li>苹果</li>
<li>桃子</li>
<li>葡萄</li>
</ol>
</li>
<li>
饮品
<ol>
<li>可乐</li>
<li>雪碧</li>
<li>芬达</li>
</ol>
</li>
</ul>
</p>
</div>
<div id="表格" class="divcss">
<p>
例如：<br/>
<table summary="表格简介文本">
<caption>表格标题</caption>
<tr>
<th>水果</th>
<td>苹果</td>
<td>葡萄</td>
<td>桃子</td>
</tr>
<tr>
<th>饮品</th>
<td>可乐</td>
<td>雪碧</td>
<td>芬达</td>
</tr>
<tr>
<th>合并</th>
<td colspan="3">一顶三</td>
</tr>
</table>
</p>
</div>
<div id="超链接" class="divcss">
<p>
<a> 实现超链接
例如：<br/>
<a target="_blank" href="https://www.baidu.com">点击去百度</a>
</p>
<p>
<a> 回到顶部
例如：<br/>
<a href="#top">点击回到顶部</a>
</p>
</div>
<div id="图像" class="divcss">
<p>
<img> 为页面插入图像
例如：<br/>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../jpg/1.jpg" width="400" alt="这是一张插入的图片" title="冬天">
</p>
</div>
</body>
</html>点击查看更多内容
9人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦