HTML语法

一.常用布局标签

id 版 (id 权重太大不利于样式复用，不常用)

<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>

二.常用布局标签

常用的 class 版（class 比 id 权重小更有利于样式复用，用的更多）

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

三.常用布局标签

语义化不惧标签（直接根据单词语义直接当做标签）

<header>header 头部</header>
<main>main 主体</main>
<footer>footer 页尾</footer>

四.超级链接

本页内跳转、新增页

_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。


<a href="http://" target="_blank" rel="noopener noreferrer"></a>
<a href="http://" target="_self" ></a>  此为默认

五.锚点

锚点

<a href="#hello">去底部</a>
<h2 id="hello" style="margin-top: 1000px">底部</h2>
<a href="#">回到顶部</a>

六.绑定跳转

绑定跳转

<a href="https://taobao.com" target="taobao">淘宝</a>
<iframe src="https://taobao.com" frameborder="0" name="taobao"</iframe>

七.列表

1、有序列表

<h3>数学成绩单</h3>
<ol>
<li>小明142</li>
<li>小红121</li>
<li>小兰105</li>
</ol>

2、无序列表

<h3>文具购买</h3>
<ul>
<li>教材1+1一本</li>
<li>作业本2本</li>
<li>水性笔2支</li>
</ul>

3、自定义列表

<dl>
<dt>地址：</dt>
<dd>四川省合江县桂花树村</dd>
<dt>邮箱：</dt>
<dd>2958852435@.qq.coms</dd>
</dl>

八、表格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格与布局</title>
  </head>
  <body>
    <!-- table + caption + thead + tbody + tfoot  -->
    <!-- tr + td  -->
    <table width="300" border="1">
      <!-- 标题 -->
      <caption>
        表格标题
      </caption>
      <!-- 表头 -->
      <thead>
        <tr bgcolor="lightgreen">
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </thead>
      <!-- 表格中的所有数据必须放在单元格td的元素中,必须写到tr中 -->
      <!-- 表格主体 -->
      <tbody>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <td>x</td>
          <!-- 从表体2行3列开始水平方向合并3列 -->
          <td bgcolor="red" colspan="3">x</td>
          <!-- <td>x</td>1
          <td>x</td>2 -->
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <!-- 在第3行进行垂直方向/行方向合并2个单元格 -->
          <td bgcolor="violet" rowspan="2">x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <!-- 注意2点: 合并操作一定是发生在单元格上td元素,  -->
        <!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 -->
        <tr>
          <td>x</td>
          <td>x</td>
          <!-- 这一个单元格应该被注释或删除 -->
          <!-- <td>x</td> -->
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </tbody>
      <!-- 可以有多个tbody表格主体 -->
      <!-- 表尾 -->
      <tfoot>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </tfoot>
    </table>
    <hr />
    <table border="1" width="450" cellspacing="0" cellpadding="5">
      <caption>
        合肥市南门小学五年级课程表
      </caption>
      <thead bgcolor="lightgreen">
        <tr>
          <td>时间</td>
          <td>周一</td>
          <td>周二</td>
          <td>周三</td>
          <td>周四</td>
          <td>周五</td>
        </tr>
      </thead>
      <!-- 上午 -->
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
      </tbody>
      <!-- 中午 -->
      <tbody>
        <tr align="center">
          <td colspan="6">中午休息</td>
        </tr>
      </tbody>
      <!-- 下午 -->
      <tbody>
        <tr>
          <td rowspan="3">下午</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
      </tbody>
      <!-- 表尾 -->
      <tfoot align="center">
        <tr>
          <td>备注:</td>
          <td colspan="5">每天下午15:30-17:30在校写作业</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>