本文详细介绍了HTML中的各种标签及其用途，包括元信息管理、文本格式化、列表组织等内容，适合初学者学习及参考。
meta类标签：
1.指定文档的编码格式
2.添加网页描述
3.添加网页关键字
4.添加作者信息
link类标签：
1.引用外部CSS文件
2.指定浏览器网页标签栏图标
title标签：
1.指定浏览器网页标签栏内容db
<blockquotecite="www.baidu.com">横眉冷对千夫指，俯首甘为孺子牛。</blockquote>实现首行缩进
<pre>
var i=10;
var fun=function(){
console.log("杰瑞教育！");
</pre>
pre标签：保留预格式。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<h1>唐诗三百首</h1>
<hr/>
<h2>目录</h2>
<p>第一首：静夜思</p>
<p>第二首：忆江南</p>
<p>第三首：长恨歌</p>
<hr/>
<h3>静夜思</h3>
<p>
作者：李白<br><br>
床前明月光，疑是地上霜。举头望明月，低头思故乡。
</p>
<hr/>
<h4>【李白简介】</h4>
<p>李白，字太白。号青莲居士，自称与李堂皇室同宗，祖籍陇西成纪（今甘肃天水尉近)，剩余暗喜碎叶（遗址在今库尔基斯坦国境内的阿克别西姆），五岁随附迁居绵州彰明县.......</p>
</body>
</html>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>有序列表</title>
</head>
<body>
<h3>注册步骤：</h3>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<h3>新人上路指南</h3>
<ul>
<li>如何激活会员名？</li>
<li>如何注册贵美会员？</li>
<li>注册时密码设置有什么要求？</li>
<li>贵美认证</li>
</ul>
</body>
/
</html>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>有序列表</title>
</head>
<body>
<h3>注册步骤：</h3>
<!--有序列表-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<dt>
<<imgsrc="../img/lenovo.jpg"alt=""/>
<dd>
联想Y470div
</dd>
</dt>
<figure>
<<imgsrc="../img/lenovo.jpg"alt=""/>
<figcaption>
联想Y470div
</figcaption>
</figure>
<inputtype="text"/>
</body>
</html>
<h3>新人上路指南</h3>
<hr/>
<!--无序列表-->
<ul>
<li>如何激活会员名？</li>
<li>如何注册贵美会员？</li>
<li>注册时密码设置有什么要求？</li>
<li>贵美认证</li>
</ul>
<dl>
<dt><imgsrc="../img/lenovo.jpg"咖啡</dt>
<dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
<dd>可以提神，刺激神经。</dd>
</dl>
</body>
</html>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<div></div>
<divstyle="height:80px;">
<imgsrc="../img/logo.png"alt=""/>
<imgsrc="../img/logo_kouhao.png"alt=""/>
<imgsrc="../img/logo_Tel2.png"alt=""/>
</div>
<divstyle="height:40px;background-color:yellow">菜单区域</div>
<divstyle="height:500px;background-color:blue">详情区域</div>
<div></div>
</body>
</html>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>行级标签</title>
</head>
<body>
<aname="top"></a>
<!--span：1.用于修改文本中的某一个或某几个字段，以方便添加样式。
2.它本很是没有任何样式的。-->
<p>商品价格：仅售<spanstyle="font-size:30px;color:red;">10</span>元</p>
<!--img:
1.src：用来指定你要显示的图片的路径
2.alt：当你指定的图片不存在时，相关的错误信息
3.title：当鼠标悬浮在图片上时，相关的提示信息
4.align：指定图片的显示位置
5.width：指定图片的宽度
6：height：指定图片的高度-->
<imgsrc=""alt=""title=""align=""/>
<!--em:
1：显示效果为倾斜，并且有强调的意思，可以更方便的被浏览器搜索到-->
<!--i:
1：显示效果为倾斜，没有强调意思-->
<!--strong：
1：显示效果为粗体，有强调意思-->
<!--b：
1：显示效果为粗体，无强调意思-->
<!--q:
主动为你的内容加上引号-->
<!--a:
实现三种功能：
1：页面跳转
2：锚点链接
3：功能链接-->
<!--small:缩小字体-->
<em>a</em>
<i>a</i>
<ahref="http://www.baidu.com/">页面跳转1</a>
<ahref="news.html">页面跳转2</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<ahref="#top">返回顶部</a>
<ahref="tencent://message/?uin="></a>
<ahref="mailto://chency@jerei.com"></a>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
