Blogger Information
Blog 39
fans 0
comment 0
visits 30529
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端开发:HTML基础知识2----链接、列表、表格、表单
Original
821 people have browsed it

举例:

链接元素

<code>
<!-- 链接 -->
<a href="http://www.sina.com.cn">新浪网</a>
<a href="http://www.163.com" target="_blank" rel="noopener noreferrer">网易</a>
<a href="mailto:275374165@qq.com">联系邮箱</a>
<a href="tel:13555666262">联系电话</a>
<a href="404/044001900311-47329718.pdf" download="18.pdf">文档</a>
<a href="../‫image1.jpg" download="pic.jpg">图片</a>

  1. ####<!-- 以上这句向上查询无效,图片文件已放在上一级目录,不知为何? -->

</code>

列表元素

<code>
<!-- 有序列表 -->
<ol>学习科目
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
<li>php</li>
</ol>
<ol reversed>学习科目 <!-- (倒序) -->
<li>php</li>
<li>jquery</li>
<li>javascrpit</li>
<li>css</li>
<li>html</li>
</ol>

  1. <!-- 自定义列表 -->
  2. <dl>
  3. <dt>html</dt> <!-- 术语 -->
  4. <dd class="">HTML5</dd><!-- 定义 -->
  5. <dd>超文本标记语言</dd><!-- 定义 -->
  6. <dt>css</dt>
  7. <dd class="">CSS3</dd>
  8. <dd class="">层叠样式表</dd>
  9. <dt>javascript</dt>
  10. <dd>ECMAScript 6 </dd>
  11. <dd>动态脚本语言</dd>
  12. <dt>jquery</dt>
  13. <dd>jQuery 1.7</dd>
  14. <dd>JavaScript框架/代码库</dd>
  15. <dt>php</dt>
  16. <dd>php 7.4</dd>
  17. <dd>在服务器端执行的脚本语言</dd>
  18. </dl>
  19. <!-- 无序列表 -->
  20. <ul>
  21. <li>html</li>
  22. <li>css</li>
  23. <li>javascript</li>
  24. <li>jquery</li>
  25. <li>php</li>
  26. </ul>
  27. <ul type=circle>
  28. <li>html</li>
  29. <li>css</li>
  30. <li>javascript</li>
  31. <li>jquery</li>
  32. <li>php</li>
  33. </ul>
  34. <ul type=square>
  35. <li>html</li>
  36. <li>css</li>
  37. <li>javascript</li>
  38. <li>jquery</li>
  39. <li>php</li>
  40. </ul>
  41. <!-- 嵌套列表 -->
  42. <ul>
  43. <li>香蕉</li>
  44. <li>苹果
  45. <ul>
  46. <li>富士</li>
  47. <li>水晶</li>
  48. </ul>
  49. </li>
  50. <li>雪梨</li>
  51. </ul>

</code>

表格元素

<code>

</code>

表单元素

<code>

<table border="1" cellspacing=0 align="center">
<colgroup bgcolor=lightblue>
<col>
<col>
<col bgcolor=lightpink>
<col>
<col>
</colgroup>
<caption>公司员工明细表</caption>
<thead>
<th>序号</th>
<th>部门</th>
<th>姓名</th>
<th>性别</th>
<th>岗位</th>
</thead>

  1. <tbody>
  2. <tr>
  3. <td>1</td>
  4. <td rowspan="3" align="center">开发部</td>
  5. <td>许巍</td>
  6. <td></td>
  7. <td>研发主管</td>
  8. </tr>
  9. <tr>
  10. <td>2</td>
  11. <td>何必</td>
  12. <td></td>
  13. <td>数据分析员</td>
  14. </tr>
  15. <tr>
  16. <td>3</td>
  17. <td>翁虹</td>
  18. <td></td>
  19. <td>研发秘书</td>
  20. </tr>
  21. </tbody>
  22. <tbody>
  23. <tr>
  24. <td>4</td>
  25. <td rowspan="2" align="center">营销部</td>
  26. <td>何鸿鑫</td>
  27. <td></td>
  28. <td>营销主管</td>
  29. </tr>
  30. <tr>
  31. <td>5</td>
  32. <td>张敏</td>
  33. <td></td>
  34. <td>营销</td>
  35. </tbody>
  36. <tbody>
  37. <tr>
  38. <td>6</td>
  39. <td align="center">财会部</td>
  40. <td>邓超</td>
  41. <td></td>
  42. <td>财务主管</td>
  43. </tr>
  44. </tbody>
  45. <tfoot>
  46. <td>说明</td>
  47. <td colspan="4">伙食每人每月250元交财务主管,否则断炊</td>
  48. </tfoot>
  49. </table>

</code>

表单

<code>
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
padding: 20px;
width: 350px;
box-shadow: 0 0 8px #888;
border-radius: 10px;
box-sizing: border-box;
margin: auto;
background-color: lightskyblue;
display: grid;
gap: 15px;
}
</style>
</head>

<body>
<!-- 表单 -->
<form action="" method="post">
<h3>用户注册</h3>

  1. <section>
  2. <label for="username">用户名</label>
  3. <input
  4. name="username"
  5. id="username"
  6. type="text"
  7. >
  8. </section>
  9. <section>
  10. <label for="password">口令</label>
  11. <input
  12. id=password
  13. type="password">
  14. </section>
  15. <section>
  16. <label for="">性别</label>
  17. <div>
  18. <input type="radio" name="gender" >
  19. <label for="male"></label>
  20. <input type="radio" name="gender" >
  21. <label for="male"></label>
  22. </div>
  23. </section>
  24. <section>
  25. <label for="intest">兴趣</label>
  26. <div>
  27. <input type="checkbox" name="hobby[]" id="">
  28. <label for="">开发</label>
  29. <input type="checkbox" name="hobby[]" id="">
  30. <label for="">游戏</label>
  31. <input type="checkbox" name="hobby[]" id="">
  32. <label for="">电影</label>
  33. <input type="checkbox" name="hobby[]" id="">
  34. <label for="">摄影</label>
  35. </div>
  36. </section>
  37. </form>

</body>
</html>
</code>

总结:
1、今天学习了语义化结构元素,以前学过,较为简单些,当时以为是一种老旧的元素,没想到有这么多没见过的。还有语义化的文本,我想以后会不会有更多的语义化的元素呢?
2、重温表格后又加深了印象,以前对表格的行、列合并老是记不住,特别是rowsan、colspan、cellspacing。重复重复再重复,就记住了!
3、没想到这么快就讲到表单,那是我以前最后接触的html元素,也是最令我神往的,因为它与后台搭起桥梁——交互。感觉挺神奇的!提前预习表单,看看今晚上课效果如何。

Correcting teacher:天蓬老师天蓬老师

Correction status:unqualified

Teacher's comments:发完作业看一眼, 版式不对
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post