博客列表 >1.web标准 2.表格标签 3.列表标签

1.web标准 2.表格标签 3.列表标签

choa fan
choa fan原创
2021年09月19日 02:35:57707浏览

一、Web标准(重点)

初始化文档

  1. <!-- 声明文档类型 -->
  2. <!DOCTYPE html>
  3. <!-- 指定语言 `zh-CN`定义语言为中文 -->
  4. <html lang="en">
  5. <head>
  6. <!-- 字符集 -->
  7. <meta charset="UTF-8">
  8. <!-- 使用最高版本ie渲染 -->
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <!--
  11. 设置视口:可视窗口
  12. width=device-width 窗口宽度等于设备宽度
  13. initial-scale=1.0 页面初始化按照1:1原样显示
  14. -->
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16. <!-- 网站标题 -->
  17. <title>Document</title>
  18. </head>
  19. <body></body>
  20. </html>

基础标签

  1. <head>
  2. <meta charset="utf-8">
  3. <title></title>
  4. <!--
  5. 指定默认地址或者所有链接的目标地址
  6. _blank 新窗口中打开 _self 自身窗口打开
  7. -->
  8. <base href="https://www.baidu.com" target="_blank" />
  9. </head>
  10. <body>
  11. <h1> 标题文本 </h1>
  12. <p> 段落文本内容 </p>
  13. <div> 大盒子 </div>
  14. <span> 小盒子 </span>
  15. <b> 加粗 </b> <strong></strong>
  16. <i> 斜体 </i> <em></em>
  17. <s> 删除线 </s> <delect><</delect>
  18. <u> 下划线 </u> <ins></ins>
  19. <img src="images/mess.jpg" width="300" height="300" border="3" title="这是提示文本" />
  20. <img src="cz.jpg" width="300" height="300" border="3" alt="这是图片不存在的替换文本" />
  21. <br /> 换行
  22. <hr /> 水平线
  23. <a href="#">回到顶部
  24. <a href="javascript:;">阻止跳转
  25. <!-- 锚点定位:
  26. 1. 使用相应的id名标注跳转目标的位置。 (找目标)
  27. 2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的)
  28. -->
  29. <h3 id="two">锚点跳转到此处</h3>
  30. <a href="#two">
  31. <pre>
  32. 预格式化文本标签:
  33. 按照我们预先写好的文字格式来显示页面,保留空格和换行等。
  34. 后台用的多。
  35. </pre>
  36. <!-- 空格号 --> &nbsp;
  37. <!-- 大于号 --> &lt;
  38. <!-- 小于号 --> &gt;
  39. </body>

内联框架

  1. <a href="https://www.runoob.com" target="taobao">淘宝</a>
  2. <iframe src="https://www.runoob.com" srcdoc="<i>规定页面中的 HTML 内容显示在 <iframe><i>" width="500" height="500" frameborder="1" name="taobao">
  3. <p>H5 不支持 frameborder。规定是否显示 iframe 周围的边框。1/0</p>
  4. </iframe>
  5. <button onclick="taobao.location='https://www.runoob.com'">打开淘宝</button>

二、表格

1. 表格属性

重点记住: cellspacing(单元格间距) 、 cellpadding(单元格边距)。

  1. <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <th>姓名</th>
  4. <th>性别</th>
  5. <th>电话</th>
  6. </tr>
  7. <tr>
  8. <td>小王</td>
  9. <td></td>
  10. <td>110</td>
  11. </tr>
  12. <tr>
  13. <td>小明</td>
  14. <td></td>
  15. <td>120</td>
  16. </tr>
  17. </table>

2. 表格标题caption

  1. <table>
  2. <caption>我是表格标题</caption>
  3. </table>

注意:

  1. caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
  2. caption 标签必须紧随 table 标签之后。
  3. 这个标签只存在 表格里面才有意义。你是风儿我是沙

3. 合并单元格(难点)

  • 跨行合并:rowspan=”合并单元格的个数”

  • 跨列合并:colspan=”合并单元格的个数”

  • 合并单元格三步曲

    合并的顺序我按照 先上 后下 先左 后右 的顺序

    1- 先确定是跨行还是跨列合并
    2- 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 : <td colspan="3"> </td>
    3- 删除多余的单元格 单元格

4. 总结表格

标签名 定义 说明
<table></table> 表格标签 就是一个四方的盒子
<tr></tr> 表格行标签 行标签要再table标签内部才有意义
<td></td> 单元格标签 单元格标签是个容器级元素,可以放任何东西
<th></th> 表头单元格标签 它还是一个单元格,但是里面的文字会居中且加粗
<caption></caption> 表格标题标签 表格的标题,跟着表格一起走,和表格居中对齐
clospan 和 rowspan 合并属性 用来合并单元格的

表格划分结构(了解)

  1. <thead></thead>:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
  2. <tbody></tbody>:用于定义表格的主体。放数据本体 。
  3. <tfoot></tfoot>:放表格的脚注之类。
  4. 以上标签都是放到table标签中。

三、列表标签(重点)

  1. <!--定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。-->
  2. <dl>
  3. <dt>名词1</dt>
  4. <dd>名词1解释1</dd>
  5. <dd>名词1解释2</dd>
  6. ...
  7. </dl>
标签名 定义 说明
<ul></ul> 无序列表 里面只能包含 li 没有顺序,我们以后布局中最常用的列表
<ol></ol> 有序列表 里面只能包含 li 有顺序, 使用情况较少
<dl></dl> 自定义列表 里面有2个兄弟, dtdd
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议