HTML常用元素介绍

HEAD

• 整理时间：2017-9-29 作者邮箱：info#haixia.net (将#替换成@,来信必复)

行内文本标签

• <p>段落标签</p>
• <h1>标题标签</h1> 从h1到h6 ，常用的是h1-h3，标题标签同一页面过多使用对搜索引擎不友好
• <pre>格式化数据标签</pre>
• <time>4点到6点</time> 时间标签
• <address>地址标签</address> 独占一行，以斜体形式表现
• <del>删除线</del> 有语义，建议 <s>删除线</s>无语义，不建议
• <ins>下划线</ins> 有语义，建议 <u>删除线</u> 无语义，不建议
• <strong>粗体</strong> 有语义，建议 <b>粗体</b> 无语义，不建议
• <em>斜体</em> 有语义，建议 <i>斜体</i>无语义，不建议
• <mark>突出显示</mark> 搜索结果突出显示
• <pre><code>代码</code></pre> code标签起的主要作用是让字体是等宽字体

数据展示利器-表格

• <tbale> 表格标签

<tables border="1"> <!--border 设置表格边框宽度-->
<tables border="1" cellspacing="0"> <!--cellspacing 单元格之间的间隙，或叫做表格线之间的折叠-->
<tables border="1" cellspacing="0" cellpadding="5"> <!--cellpadding 单元格之间的内容与表格线之间的距离-->

• <caption> 表格标题
• <thead> 表格头部
• <tbody> 表格主体
• <tr> 行
• <td> 单元格

<td colspan="3"> <!--跨越三列显示 横向合并-->
<td rowspan="3"> <!--跨越三行显示 竖向合并-->

• <tfoot> 表格底部

生态网页之源 图片元素

• 图片标签

<img src=""> <!--src里面放的是图片地址，可以是本地的，也可以是网络的-->
<img src="images/mei.jpg" width="30"> <!--width是设置图片宽度属性，高度会等比缩放，高度属性height-->
<img src="images/mei.jpg" width="30" alt="图片说明"> <!--alt属性是图片的说明-->

数据分类大法：有序列表、无序列表、描述列表

• 有序列表ol

<ol>
    <li>给客户打电话</li>
    <li>写开会材料</li>
    <li>去机场接客户</li>
    <li>安排酒店与晚上活动</li>
    <li>准备给新闻媒体的材料</li>
</ol>

• 有序列表ol 逆序排列加reversed属性

<ol reversed>
    <li>给客户打电话</li>
    <li>写开会材料</li>
    <li>去机场接客户</li>
    <li>安排酒店与晚上活动</li>
    <li>准备给新闻媒体的材料</li>
</ol>

• 有序列表ol 设置起始序列号start属性，以下从55开始排列。start与reversed属性不能同时使用

<ol start="55">
    <li>给客户打电话</li>
    <li>写开会材料</li>
    <li>去机场接客户</li>
    <li>安排酒店与晚上活动</li>
    <li>准备给新闻媒体的材料</li>
</ol>

• 有序列表ol <ol>标签中的<li>可以用value设置某个列表项的序号，从它下面的序号都跟随它改变。

<ol>
    <li>给客户打电话</li>
    <li>写开会材料</li>
    <li value="10">去机场接客户</li>
    <li>安排酒店与晚上活动</li>
    <li>准备给新闻媒体的材料</li>
</ol>

• 无序列表ul ，ul没有太多的属性，可用css进行精控制，无序列表常用于导航或新闻标题列表

  <ul>
      <li>大米20千克</li>
      <li>鸡蛋10千克</li>
      <li>苹果5千克</li>
      <li>啤酒一箱</li>
      <li>大豆千克</li>
  </ul>

• 描述列表三对标签： <dl><dt><dd> dl进行包装，要描述的对像放在dt标签里，具体的内容放在dd标签里

  <dl>
      <dt>服务对像：</dt>
      <dd>WEB开发新人、开发者以及爱好者。</dd>
      <dt>服务宗旨：</dt>
      <dd>打造国内领先的一站式永久免费的学习平台</dd>
  </dl>