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="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、 :实体空格标记。
解释:如果我们在源码中写入
<body> 中 国 </body>
而他只会在页面中显示一个空格,如果想让他显示多个空格:
<body> 中 国 </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>
效果: