HTML基础（一）：常用标签1

最新推荐文章于 2022-05-18 19:54:02 发布

心情一天一变

最新推荐文章于 2022-05-18 19:54:02 发布

阅读量174

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/dingchao823/article/details/47976383

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

练习1、基本框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test1</title>
</head>

<body>
</body>

</html>

练习2、使用link标签载入css文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" />
<title>test1</title>
</head>

<body>
aaaaaa
</body>

</html>

效果：

练习3、meta标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="定义文档的关键字，方便搜索引擎检索" />
<meta name="description" content="描述标记，对文档的简要介绍。摘要，当检索时出现在出现在网页标题下方的描述" />
<meta http-equiv="refresh" content="1;URL=http://www.sina.com" /><!--1s之后跳转到新浪网 -->
<title>test1</title><!-- 网站标题，是必须的-->
</head>

<body>
aaaaaa
</body>

</html>

练习4、p标签，分行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test1</title><!--网站标题，这是必须的-->
</head>

<body>
<p style="color:#00CC33;">
aaaaaa
</p>
<p style="color:#FF0000">
aaaaaa
</p>
</body>

</html>

效果：

练习5、br标记：回车标记(独立标记，没有开始和结束)

<p style="color:#00CC33;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaa
</p>

练习6、pre标记：原样显示代码中的内容

<body>
<p style="color:#00CC33;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaa
</p>

<pre
aaaaaavvvvvv
     vvvvvvvvvvvvv
           vvvvvvvvvvvvvvvv
           </pre>
</body>

效果：

练习7、h标签：标题栏标记。

<body>
 <h1 style="font-size:12px;">h1</h1>
 <h2>h2</h2>
 <h3>h3</h3>
 <h4>h4</h4>
 <h5>h5</h5>
 <h6>h6</h6>
</body>

效果：

练习8、b标签：加粗。

<body>
<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</b>
</body>

练习9、i：倾斜标记 u：下划线 s：删除线文字

练习10、&nbsp：实体空格标记。

解释：如果我们在源码中写入

<body>
中        国
</body>

而他只会在页面中显示一个空格，如果想让他显示多个空格：

<body>
中&nbsp;&nbsp;&nbsp;国
</body>

练习11、实体标记有很多，例如版权符号，商标等。

练习12、a标签：超链接

<body>
<a href="www.sina.com">新浪网</a>
<a href="mailto:1142254897@qq.com">发邮件</a><!--自动调用本地邮件客户端发送邮件，windows mail等-->
</body>

练习13、div标签：块标签，可以对HTML页面进行规划

<body>
<div style="margin:0 auto; width:800px; color:#FF0000;">
    <div style="background-color:#009900;">top</div>
    <div style="width:400px; float:left; background-color:#330000;">left</div>
    <div style="background-color:#990000;">right</div>
</div> 
</body>

效果：

练习14、ul：无序列表 ol：有序列表 li：列表（子项）

<body>
<ul>
    <li>新浪网</li>
    <li>www.sina.com.cn</li>
</ul> 
</body>

效果

<body>
<ol>
    <li>新浪网</li>
    <li>www.sina.com.cn</li>
</ol> 
</body>

效果：

心情一天一变

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础（一）：常用标签1

练习1、基本框架 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv
复制链接

扫一扫