博主信息
博文 9
粉丝 0
评论 0
访问量 9452
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
1.web标准 2.表格标签 3.列表标签
choa fan
原创
938人浏览过

一、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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学