前端学习笔记1-HTML入门一

前言:虽然做了几个前端项目,但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱,在网上找了一些网站,用于空闲时间学习。在此做下学习笔记,以做复习使用。

网站的课程讲的很好,很适合像我这样零基础的人学习,非常感谢网站的维护者,推荐下:绿叶学习网

1.整个网页由<html>开始,</html>结束

2.HTML注释语法:<!--注释内容-->

3.HTML空格:&nbsp

4.HTML元素分为:块元素和行内元素

---块元素:独占一行,内部可包含块元素或行内元素,如:h1/h2/div/p

---行内元素:与其他元素共享一行,内部可包含行内元素,如:span/em

5.列表分为:有序列表、无序列表、自定义列表

---有序列表(ol):

  <ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
  </ol>

---无序列表(ul):

  <ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
  </ul>

---自定义列表(dl):

  <dl>
    <dt>自定义列表-名词1</dt>
    <dd>自定义列表-描述1</dd>
    <dt>自定义列表-名词2</dt>
    <dd>自定义列表-描述2</dd>
    <dt>自定义列表-名词3</dt>
    <dd>自定义列表-描述3</dd>
  </dl>

6. 表格,最基本的结构包含<table>/<tr>/<td>:

    <table>
      <tr>
        <td>单元格11</td>
        <td>单元格12</td>
      </tr>
      <tr>
        <td>单元格21</td>
        <td>单元格22</td>
      </tr>
    </table>

完整的表结构还可以包含标题、表头、表身、表脚:

    <table>
      <!--标题caption-->
      <caption>标题</caption>
      <!--表头thead-->
      <thead>
        <tr>
          <td>表头1</td>
          <td>表头2</td>
        </tr>
      </thead>
      <!--表身tbody-->
      <tbody>
        <tr>
          <td>表身11</td>
          <td>表身12</td>
        </tr><tr>
          <td>表身21</td>
          <td>表身22</td>
        </tr>
      </tbody>
      <!--表脚tfoot-->
      <tfoot>
        <tr>
          <td>表脚1</td>
          <td>表脚2</td>
        </tr>
      </tfoot>
    </table>

thead/tbody/tfoot,这些元素加上的好处是写的东西可读性好,语义明确。

合并行(rowspan):

    <table>
      <!--第1行-->
      <tr>
        <td>姓名:</td>
        <td>小黑</td>
      </tr>
      <!--第2行-->
      <tr>
        <td rowspan="2">道具:</td>
        <td>蝴蝶</td>
      </tr>
      <!--第3行-->
      <tr>
        <td>金箍棒</td>
      </tr>
    </table>

合并列(colspan):

    <table>
      <!--第1行-->
      <tr>
        <td colspan="2">本次惨案的英雄</td>
      </tr>
      <!--第2行-->
      <tr>
        <td>小黑</td>
        <td>美杜莎</td>
      </tr>
      <!--第3行-->
      <tr>
        <td>小炮</td>
        <td>拉比克</td>
      </tr>
    </table>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值