HTML常用标签

最新推荐文章于 2024-12-15 01:33:55 发布

转载最新推荐文章于 2024-12-15 01:33:55 发布 · 137 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CaseyWei/p/9337596.html

本文详细介绍了HTML文档的基本结构，包括文档类型声明、html、head、body等关键标签的作用和用法。深入探讨了常见HTML标签如h1-h6、p、em、b、del、sup、sub、img、a、ol、ul、dl和table的属性及应用场景。

HTML文档采用目录树这样一种结构，基本结构如：

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>

<body>
文档的内容......
</body>

</html>

第一行声明浏览器要以标准模式解析该文档，根标签是<html></html>，有两个子标签，<head></head>头部不在网页内容中显示，主要用途是描述网页的信息，
<body></body>中的内容将在网页中显示，这是一种固定的格式。

如下HTML文档将介绍基本HTML标签的使用：

<!doctype html> <!--声明浏览器要以标准模式解析该html页面 -->
<html lang="en">
 <head>
  <meta charset="UTF-8"> <!-- 编码方式-->

  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">

  <meta name="Keywords" content=""> <!--content属性后面接自己定义的一些关键字，便于浏览器搜索 -->

  <meta name="Description" content=""> <!-- 对网页的描述信息，-->

  <!-- http-equiv="Refrash" refrash属性后面呢接content="2;http://www.baidu.com/"表示两秒过后跳转到百度首页 -->
  <meta http-equiv="Refresh" content="2;http://www.baidu.com/">

  <link rel="icon" href="https://www.baidu.com/favicon.ico"><!-- 引用了百度的logo-->

  <!-- 表示网页的标题-->
  <title>html常用标签使用</title>

 </head>
 <body>

   <!-- h1~h6 从大到小显示标题,有占行，隔行效果 属于块级标签-->
   <h1>标题1</h1>
   <h2>标题2</h2>

   <!--段落标签，有占行、隔行的效果，也属于块级标签-->
   <p>仰天大笑出门去，我辈岂是蓬蒿人</p>

   <!-- 字体倾斜标签 ,内联标签-->
   <em>多线程编程</em><br/><!换行标签，属于单标签-->

   <!-- 字体加粗，内联标签 -->
   <b> Django框架</b>


   <!--删除标签-->
   <del>你大爷的</del>

   <!--上标，下标标签，内联标签-->
   a<sup>2</sup>
   H<sub>2</sub>O

   <!--关于显示图片的标签,  属于内联标签，src属性值是图片URL地址，宽高各位200px,500px(像素)，alt属性表示当图片不能加载后显示描述信息 title值表示当鼠标指向该图片后提示内容-->
   <img src="pictures\1.jpg" height="300px" width="200px" alt="加载失败" title="V先生">

   <!--a标签是内联标签，使用方法一，作为连接跳转，target="_blank"表示新建一个标签页-->
   <a href="http://www.baidu.com/" target="_blank">百度</a>

   <!--使用方法二，作为锚点，在本页面进行跳转，结合以下例子，在网页底部定义一个a锚点标签，点击后会跳转到p标签所在的地方-->
   <p id="top">网页顶部</p>   
   <div style="width:200px;height:700px;background:gray;"></div>
   <a href="#top">到网页顶部</a>

   <!--关于列表的使用，ol有序列表,ul无序列表,dl，自定义列表，属于块级标签 了解即可-->
   <ol>
     <li>列表</li>
     <li>列表</li>
     <li>列表</li>

   </ol>

   <ul>
   <li>列表</li>
   <li>列表</li>
   <li>列表</li>
   <li>列表</li>
   </ul>

   <dl>
   <dt>列表标题</dt>
   <dd>列表</dd>
   <dd>列表</dd>
   <dd>列表</dd>

   </dl>
   <!--表格的使用-->
   <!--table属性中，width，height给表格加限制宽高，border=“1px”给表格加边框，默认是没有的，align="center"让表格居中显示，cellspacing表示单元格与单元格之间的距离，cellpadding表示单元格边框与内容之间的距离-->
   <table width="200px" height="200px" border="1px" align="center" cellspacing="0px" cellpadding="4px">
   <!--caption属性表示表格的标题名字-->
      <caption>成绩</caption>
      <tr>
        <th>语文</th> <!--th标签与td标签相比可以让内容居中显示并且加粗-->
        <th>数学</th>
        <th>英语</th>
      </tr>
      <tr>
      <td

转载于:https://www.cnblogs.com/CaseyWei/p/9337596.html