search

博客列表 >Html基本语法

Html基本语法

手机用户1620888567
手机用户1620888567原创
2021年09月23日 09:04:36888浏览

HTML语法

一.常用布局标签

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

  1. <div id="header">header</div>
  2. <div id="main">main</div>
  3. <div id="footer">footer</div>

二.常用布局标签

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

  1. <div class="header">header</div>
  2. <div class="main">main</div>
  3. <div class="footer">footer</div>

三.常用布局标签

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

  1. <header>header 头部</header>
  2. <main>main 主体</main>
  3. <footer>footer 页尾</footer>

四.超级链接

本页内跳转、新增页

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

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

五.锚点

锚点

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

六.绑定跳转

绑定跳转

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

七.列表

1、 有序列表

  1. <h3>数学成绩单</h3>
  2. <ol>
  3. <li>小明142</li>
  4. <li>小红121</li>
  5. <li>小兰105</li>
  6. </ol>

2、 无序列表

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

3、 自定义列表

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

八、表格

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表格与布局</title>
  8.   </head>
  9.   <body>
  10.     <!-- table + caption + thead + tbody + tfoot  -->
  11.     <!-- tr + td  -->
  13.     <table width="300" border="1">
  14.       <!-- 标题 -->
  15.       <caption>
  16.         表格标题
  17.       </caption>
  19.       <!-- 表头 -->
  20.       <thead>
  21.         <tr bgcolor="lightgreen">
  22.           <td>x</td>
  23.           <td>x</td>
  24.           <td>x</td>
  25.           <td>x</td>
  26.           <td>x</td>
  27.           <td>x</td>
  28.         </tr>
  29.       </thead>
  31.       <!-- 表格中的所有数据必须放在单元格td的元素中,必须写到tr中 -->
  32.       <!-- 表格主体 -->
  33.       <tbody>
  34.         <tr>
  35.           <td>x</td>
  36.           <td>x</td>
  37.           <td>x</td>
  38.           <td>x</td>
  39.           <td>x</td>
  40.           <td>x</td>
  41.         </tr>
  42.         <tr>
  43.           <td>x</td>
  44.           <td>x</td>
  45.           <!-- 从表体2行3列开始水平方向合并3列 -->
  46.           <td bgcolor="red" colspan="3">x</td>
  47.           <!-- <td>x</td>1
  48.           <td>x</td>2 -->
  49.           <td>x</td>
  50.         </tr>
  51.         <tr>
  52.           <td>x</td>
  53.           <!-- 在第3行进行垂直方向/行方向合并2个单元格 -->
  54.           <td bgcolor="violet" rowspan="2">x</td>
  55.           <td>x</td>
  56.           <td>x</td>
  57.           <td>x</td>
  58.           <td>x</td>
  59.         </tr>
  61.         <!-- 注意2点: 合并操作一定是发生在单元格上td元素,  -->
  62.         <!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 -->
  63.         <tr>
  64.           <td>x</td>
  65.           <td>x</td>
  66.           <!-- 这一个单元格应该被注释或删除 -->
  67.           <!-- <td>x</td> -->
  68.           <td>x</td>
  69.           <td>x</td>
  70.           <td>x</td>
  71.         </tr>
  72.       </tbody>
  73.       <!-- 可以有多个tbody表格主体 -->
  75.       <!-- 表尾 -->
  76.       <tfoot>
  77.         <tr>
  78.           <td>x</td>
  79.           <td>x</td>
  80.           <td>x</td>
  81.           <td>x</td>
  82.           <td>x</td>
  83.           <td>x</td>
  84.         </tr>
  85.       </tfoot>
  86.     </table>
  87.     <hr />
  88.     <table border="1" width="450" cellspacing="0" cellpadding="5">
  89.       <caption>
  90.         合肥市南门小学五年级课程表
  91.       </caption>
  92.       <thead bgcolor="lightgreen">
  93.         <tr>
  94.           <td>时间</td>
  95.           <td>周一</td>
  96.           <td>周二</td>
  97.           <td>周三</td>
  98.           <td>周四</td>
  99.           <td>周五</td>
  100.         </tr>
  101.       </thead>
  102.       <!-- 上午 -->
  103.       <tbody>
  104.         <tr>
  105.           <td rowspan="4">上午</td>
  106.           <td>数学</td>
  107.           <td>数学</td>
  108.           <td>数学</td>
  109.           <td>数学</td>
  110.           <td>数学</td>
  111.         </tr>
  112.         <tr>
  113.           <td>数学</td>
  114.           <td>数学</td>
  115.           <td>数学</td>
  116.           <td>数学</td>
  117.           <td>数学</td>
  118.         </tr>
  119.         <tr>
  120.           <td>数学</td>
  121.           <td>数学</td>
  122.           <td>数学</td>
  123.           <td>数学</td>
  124.           <td>数学</td>
  125.         </tr>
  126.         <tr>
  127.           <td>数学</td>
  128.           <td>数学</td>
  129.           <td>数学</td>
  130.           <td>数学</td>
  131.           <td>数学</td>
  132.         </tr>
  133.       </tbody>
  134.       <!-- 中午 -->
  135.       <tbody>
  136.         <tr align="center">
  137.           <td colspan="6">中午休息</td>
  138.         </tr>
  139.       </tbody>
  140.       <!-- 下午 -->
  141.       <tbody>
  142.         <tr>
  143.           <td rowspan="3">下午</td>
  144.           <td>数学</td>
  145.           <td>数学</td>
  146.           <td>数学</td>
  147.           <td>数学</td>
  148.           <td>数学</td>
  149.         </tr>
  150.         <tr>
  151.           <td>数学</td>
  152.           <td>数学</td>
  153.           <td>数学</td>
  154.           <td>数学</td>
  155.           <td>数学</td>
  156.         </tr>
  157.         <tr>
  158.           <td>数学</td>
  159.           <td>数学</td>
  160.           <td>数学</td>
  161.           <td>数学</td>
  162.           <td>数学</td>
  163.         </tr>
  164.       </tbody>
  165.       <!-- 表尾 -->
  166.       <tfoot align="center">
  167.         <tr>
  168.           <td>备注:</td>
  169.           <td colspan="5">每天下午15:30-17:30在校写作业</td>
  170.         </tr>
  171.       </tfoot>
  172.     </table>
  173.   </body>
  174. </html>
上一条：学习基本元素布局视窗下一条：向百度提交网站地图Sitemap
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议