HTML常用标签

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 rowspan="2">jkj</td>  <!--rowspan属性让该标签独占两行,rowspan可以让该标签独占两列-->
      <td colspan="2" align="center">jkj</td>
      </tr>
      <tr>

      <td>kjk</td>
      <td>kjk</td>
      </tr>
    </table>
  <!--form表单的使用,action属性表示提交到表单信息到那个URL，method表示提交方式-->
  <form action="" method="post">

  <!--input标签属于内联标签，我们可以用p标签包含该input标签表现出块级标签的效果,不同
  的type属性值会展现出不同的效果，由于是以键值对的方式提交的服务器，name值表示键，value属性值会根据type类型表示该值-->
  <p>用户名<input type="text" name="username"></p>
  <p>密码<input type="password" name="psword"></p>
  <br>
  <!--复选框-->
  爱好:
  篮球<input type="checkbox" name="hobby" value="basketball">
  足球<input type="checkbox" name="hobby" value="football">
  其他游戏<input type="checkbox" name="hobby" value="playgame">

  <br><br>
  <!--单选框-->
  男<input type="radio" name="sex" value="male">
  女<input type="radio" name="sex" value="female">

  <!--下拉框-->
  <br>所在城市
  <select name="city">
    <option value="山西">山西</option>
    <option value="河北">河北</option>
    <option value="河北">河北</option>
    <option value="河北">河北</option>
  </select><hr><!--hr标签表示分割线-->

  <!-- label标签与input标签结合起来使用-->
  <label for="text">姓名</label>
  <input id="text" type="text" name="name"><br>

  <!--表单内容重置,value值表示重置按钮的值，也就是我们看到的值-->
  <input type="reset" value="reset"><br>

  <!--提交按钮-->
  <input type="submit">
  </form>
 </body>
</html>

常用特殊符号在HTML文档中的表示方法;

&nbsp; 表示一个空格

            &lt;   &gt;  表示<>

            &copy;   表示商标商标符号
posted @ 2018-07-19 18:32  caseywei  阅读(222)  评论(0)  编辑  收藏  举报