简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html常用组件实操
Blogger Information
Blog 10
fans 0
comment 0
visits 7422
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html常用组件实操
 有料！
Original
1001 people have browsed it

3.列表元素标签

序号 标签 名称
1 ul>li 无序列表
2 ol>li 有序列表
3 dl>dt>dd 自定义列表

无序列表

  1. <h3>购物车</h3>
  2. <ul>
  3.   <li>黄瓜</li>
  4.   <li>茄子</li>
  5.   <li>西红柿</li>
  6. </ul>

有序列表

  1. <h3>购物车</h3>
  2. <ol>
  3.   <li>苹果</li>
  4.   <li>香蕉</li>
  5.   <li>葡萄</li>
  6. </ol>

自定义列表

  1. <!-- 自定义列表一般用于页脚 -->
  2. <dl>
  3.   <dt>名称:</dt>
  4.   <dd>php中文网</dd>
  5.   <dt>地址:</dt>
  6.   <dd>山东省济南市</dd>
  7.   <dt>联系:</dt>
  8.   <dd><a href="tel:183****3266">183****3266</a></dd>
  9.   <dd>
  10.     <a href="mailto:2****261@qqcomsubject=titlebody=content"
  11.       >72****261@qq.com</a
  12.     >
  13.   </dd>
  14. </dl>

1.导航菜单实战

  1. <!-- 导航菜单 -->
  2. <ul class="menu">
  3.   <li><a href="">首页</a></li>
  4.   <li><a href="">视频教程</a></li>
  5.   <li><a href="">入门教程</a></li>
  6.   <li><a href="">社区问答</a></li>
  7.   <li><a href="">登录</a></li>
  8. </ul>
  1. /* 导航菜单css样式 */
  2. .menu {
  3.   display: flex;
  4.   background-color: #333;
  5. }
  6. .menu li {
  7.   list-style: none;
  8.   padding: 0.5em 1em;
  9. }
  10. .menu li a {
  11.   color: #eee;
  12.   font-size: 14px;
  13.   text-decoration: none;
  14. }
  15. .menu li:hover {
  16.   background-color: coral;
  17. }

2.ul 图文列表实战

  1. <!-- 图文列表 -->
  2. <ul class="list">
  3.   <li>
  4.     <a href=""
  5.       ><img
  6.         src="https://img.php.cn/upload/course/000/000/003/5a38c838366fe405.jpg"
  7.         alt="tp3.2"
  8.     /></a>
  9.     <a href="">tp3.2开发教程</a>
  10.   </li>
  11.   <li>
  12.     <a href=""
  13.       ><img
  14.         src="https://img.php.cn/upload/course/000/000/003/5a38c838366fe405.jpg"
  15.         alt="tp3.2"
  16.     /></a>
  17.     <a href="">tp3.2开发教程</a>
  18.   </li>
  19.   <li>
  20.     <a href=""
  21.       ><img
  22.         src="https://img.php.cn/upload/course/000/000/003/5a38c838366fe405.jpg"
  23.         alt="tp3.2"
  24.     /></a>
  25.     <a href="">tp3.2开发教程</a>
  26.   </li>
  27.   <!-- 多复制几个li -->
  28. </ul>
  1. /* 图文列表实战，代码样式 */
  2. .list {
  3.   display: grid;
  4.   grid-template-columns: repeat(auto-fit, 10em);
  5.   gap: 1em;
  6. }
  7. .list li {
  8.   list-style: none;
  9.   border: 1px solid #ccc;
  10.   text-align: center;
  11.   height: 8em;
  12.   display: grid;
  13. }
  14. .list li:hover {
  15.   box-shadow: 0 0 5px #aaa;
  16.   cursor: pointer;
  17. }
  18. .list img {
  19.   width: 100%;
  20. }
  21. .list a {
  22.   color: #666;
  23.   font-size: 12px;
  24.   text-decoration: none;
  25. }

4.表格标签

序号 标签 值
1 table 表示 HTML 页面中的一个表格，作为表格的容器。
2 caption 元素用来定义 HTML 页面中表格上方的标题。
3 thead 用来定义 HTML 页面中表格的标题单元格的行。
4 tbody 用来定义 HTML 页面中表格的主体（表格中真正的数据内容）。
3 tr 表示 HTML 页面中一个表格的行。一个表格可以拥有一行或多行。
3 th th 的加强版，标签自带居中加粗
4 td 表示 HTML 页面中一个表格的列。一个表格可以拥有一列或多列
5 colspan 属性：用来规定表格单元格可横跨的列数。
6 rowspan 属性：用来规定表格单元格可横跨的行数。

1.商品表格学习

  1. <!-- 简单案例学习表格 -->
  2. <table class="product">
  3.   <caption>
  4.     商品信息表
  5.   </caption>
  6.   <thead>
  7.     <tr>
  8.       <th>ID</th>
  9.       <th>品牌</th>
  10.       <th>单价</th>
  11.       <th>单位</th>
  12.       <th>数量</th>
  13.       <th>金额</th>
  14.     </tr>
  15.   </thead>
  16.   <tbody>
  17.     <tr>
  18.       <td>a100</td>
  19.       <td>香蕉</td>
  20.       <td>2.99</td>
  21.       <td>斤</td>
  22.       <td>10</td>
  23.       <td>29.9</td>
  24.     </tr>
  25.     <tr>
  26.       <td>a100</td>
  27.       <td>香蕉</td>
  28.       <td>2.99</td>
  29.       <td>斤</td>
  30.       <td>10</td>
  31.       <td>29.9</td>
  32.     </tr>
  33.     <tr>
  34.       <td>a100</td>
  35.       <td>香蕉</td>
  36.       <td>2.99</td>
  37.       <td>斤</td>
  38.       <td>10</td>
  39.       <td>29.9</td>
  40.     </tr>
  41.   </tbody>
  42. </table>
  43. <!-- 翻页 -->
  44. <p class="page">
  45.   <a href="">首页</a>
  46.   <a href="">...</a>
  47.   <a href="">5</a>
  48.   <a href="">6</a>
  49.   <a href="">7</a>
  50.   <a href="">8</a>
  51.   <a href="">...</a>
  52.   <a href="">尾页</a>
  53. </p>
  1. /* 商品信息表css */
  2. .product {
  3.   border-collapse: collapse;
  4.   width: 30em;
  5.   margin: auto;
  6.   text-align: center;
  7. }
  8. .product caption {
  9.   font-size: 1.2rem;
  10.   margin-bottom: 0.5em;
  11. }
  12. .product thead tr,
  13. .product tr:hover {
  14.   background-color: lightcyan;
  15.   cursor: pointer;
  16. }
  18. .product td,
  19. .product th {
  20.   border: 1px solid #000;
  21.   padding: 5px;
  22. }
  24. .page {
  25.   text-align: center;
  26. }
  27. .page a {
  28.   text-decoration: none;
  29.   color: #666;
  30.   padding: 2px 5px;
  31.   border: 1px solid #000;
  32. }
  33. .page a.active,
  34. .page a:hover {
  35.   background-color: lightcyan;
  36. }

2.表格合并课程表案例

  1. <table class="lesson">
  2.   <caption>
  3.     合肥课程表
  4.   </caption>
  5.   <thead>
  6.     <tr>
  7.       <th colspan="2"></th>
  8.       <th>星期一</th>
  9.       <th>星期二</th>
  10.       <th>星期三</th>
  11.       <th>星期四</th>
  12.       <th>星期五</th>
  13.     </tr>
  14.   </thead>
  15.   <tbody>
  16.     <tr>
  17.       <td rowspan="4">上午</td>
  18.       <td>1</td>
  19.       <td>数学</td>
  20.       <td>语文</td>
  21.       <td>英语</td>
  22.       <td>美术</td>
  23.       <td>数学</td>
  24.     </tr>
  25.     <tr>
  26.       <td>2</td>
  27.       <td>数学</td>
  28.       <td>语文</td>
  29.       <td>英语</td>
  30.       <td>美术</td>
  31.       <td>数学</td>
  32.     </tr>
  33.     <tr>
  34.       <td>3</td>
  35.       <td>数学</td>
  36.       <td>语文</td>
  37.       <td>英语</td>
  38.       <td>美术</td>
  39.       <td>数学</td>
  40.     </tr>
  41.     <tr>
  42.       <td>4</td>
  43.       <td>数学</td>
  44.       <td>语文</td>
  45.       <td>英语</td>
  46.       <td>美术</td>
  47.       <td>数学</td>
  48.     </tr>
  49.     <tr class="rest">
  50.       <td colspan="7">中午休息</td>
  51.     </tr>
  52.   </tbody>
  53.   <tr>
  54.     <td rowspan="4">下午</td>
  55.     <td>1</td>
  56.     <td>数学</td>
  57.     <td>语文</td>
  58.     <td>英语</td>
  59.     <td>美术</td>
  60.     <td>数学</td>
  61.   </tr>
  62.   <tr>
  63.     <td>2</td>
  64.     <td>数学</td>
  65.     <td>语文</td>
  66.     <td>英语</td>
  67.     <td>美术</td>
  68.     <td>数学</td>
  69.   </tr>
  70.   <tr>
  71.     <td>3</td>
  72.     <td>数学</td>
  73.     <td>语文</td>
  74.     <td>英语</td>
  75.     <td>美术</td>
  76.     <td>数学</td>
  77.   </tr>
  78.   <tr>
  79.     <td>4</td>
  80.     <td>数学</td>
  81.     <td colspan="4">户外休息</td>
  82.   </tr>
  83. </table>
  1. /* 课程表: 行与列的合并css */
  2. .lesson {
  3.   border-collapse: collapse;
  4.   width: 40em;
  5.   text-align: center;
  6.   margin: auto;
  7. }
  9. .lesson caption {
  10.   font-size: 1.2rem;
  11.   margin: 1em;
  12. }
  13. .lesson thead {
  14.   background-color: lightcyan;
  15. }
  16. .lesson th,
  17. .lesson td {
  18.   border: 1px solid;
  19.   padding: 0.5em;
  20. }
  21. .lesson .rest {
  22.   background-color: #efefef;
  23. }
  24. .lesson td[rowspan="4"],
  25. .lesson td[rowspan="3"] {
  26.   background-color: rgb(186, 245, 213);
  27. }

5.表单元素

序号 属性 值
1 text 文本框
2 password 密码框
3 email 邮件框
4 radio 单选框:单选按钮必须用同一个 name 的属性值，否则无法实现选择时值得唯一性
5 checkbox 多选框:name 值应该是数组格式，列入 hoby[],否则无法向服务器传输一组值 ‘
6 textarea 文本域
7 select>option 列表框
8 lable 关联的标签来聚焦或者激活这个输入元素 for 来关联

表单元素常用属性值

序号 属性 值
1 action 处理表单程序
2 GET 数据直接在 url 地址显示
3 POST 表单数据在请头体中，在 url 看不到
4 type 控件类型
5 name 数据的变量名
6 value 数据的内容
7 register 控件属性，提交数据为空时进行提示
8 placeholder 控件属性：表单内容提示
9 checked 默认勾选，一般用于 redio 和 checkbox 的 type 标签
10 form 控件属性，用来关联 form 标签的 id。这样操作方便于 js 调用，但会导致页面样式混乱 。

1.注册页面实操

  1. <h3 class="title">用户注册</h3>
  2. <form action="" method="GET" class="register" enctype="multipart/form-data">
  3.   <label for="username">账号</label>
  4.   <input
  5.     type="text"
  6.     id="username"
  7.     name="username"
  8.     register
  9.     value=""
  10.     placeholder="7299***61"
  11.   />
  12.   <label for="password">密码</label>
  13.   <input
  14.     type="text"
  15.     name="password"
  16.     id="password"
  17.     register
  18.     placeholder="154411asd"
  19.     value=""
  20.   />
  21.   <label for="email">邮箱</label>
  22.   <input
  23.     type="email"
  24.     register
  25.     id="email"
  26.     name="email"
  27.     placeholder="7299@qq.com"
  28.     value=""
  29.   />
  30.   <label for="secret">性别</label>
  31.   <div>
  32.     <input type="radio" name="gender" value="male" id="male" /><label for=""
  33.       >男</label
  34.     >
  35.     <input type="radio" name="gender" value="female" id="female" /><label for=""
  36.       >女</label
  37.     >
  38.     <input
  39.       type="radio"
  40.       name="gender"
  41.       value="secret"
  42.       id="secret"
  43.       checked
  44.     /><label for="secret">保密</label>
  45.   </div>
  46.   <label for="#">兴趣</label>
  47.   <div>
  48.     <input type="checkbox" checked name="hoby[]" value="game" id="game" />
  49.     <label for="">游戏</label>
  50.     <input type="checkbox" name="hoby[]" value="shoot" id="shoot" />
  51.     <label for="">摄影</label>
  52.     <input type="checkbox" name="hoby[]" value="travel" id="travel" />
  53.     <label for="">旅游</label>
  54.     <input type="checkbox" name="hoby[]" value="program" id="program" />
  55.     <label for="">编程</label>
  56.   </div>
  57.   <label for="">学历</label>
  58.   <select name="edu" id="edu">
  59.     <option value="1">初中</option>
  60.     <option value="2">高中</option>
  61.     <option value="3" selected>大学</option>
  62.     <option value="4">研究生</option>
  63.   </select>
  64.   <label for="">头像</label>
  65.   <!-- value设置上传大小为多少兆8192为8mb，1mb等于1024kb -->
  66.   <input type="hidden" name="MAX_FILE_SIZE" value="8192" />
  67.   <input type="file" name="user_pic" id="user-pic" />
  68.   <!-- 头像占位符 -->
  69.   <div class="user-pic" style="grid-column: span 2"></div>
  70.   <label for="user-resume">简历</label>
  71.   <input type="hidden" name="MAX_FILE_SIZE" value="10000" />
  72.   <input type="file" name="user_resume" id="user-resume" />
  73.   <div class="user-resume" style="grid-column: span 2"></div>
  74.   <!-- 文本域 -->
  75.   <label for="">备注:</label>
  76.   <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
  77.   <button>提交</button>
  78. </form>

注册页面 css

  1. /* 表单标题 */
  2. .title {
  3.   text-align: center;
  4. }
  6. /* 注册表单 */
  7. .register {
  8.   width: 20em;
  9.   margin: auto;
  10.   padding: 1em;
  11.   border: 1px solid;
  13.   display: grid;
  14.   grid-template-columns: 3em 1fr;
  15.   gap: 1em;
  16. }
  18. /* 按钮 */
  19. .register > button {
  20.   grid-column: span 2;
  21.   height: 2em;
  22. }
  23. .register ul {
  24.   list-style: none;
  25.   padding: 0;
  26.   font-size: 14px;
  27. }
  29. .register textarea {
  30.   /* 禁止缩放文本域 */
  31.   resize: none;
  32.   position: relative;
  33. }
  34. .register .tips {
  35.   position: absolute;
  36.   top: 220px;
  37.   right: 150px;
  38.   font-size: 0.8rem;
  39.   color: #aaa;
  40. }

注册页面文件上传显示 js

  1. // 1.读取图片并预览;
  2. const fileImg = document.querySelector("#user-pic");
  4. fileImg.addEventListener("change", showImg, false);
  5. function showImg() {
  6.   console.log(fileImg.files);
  7.   const reader = new FileReader();
  8.   // fileImg.files[0]为第一个图片
  9.   reader.readAsDataURL(fileImg.files[0]);
  10.   reader.onload = () => {
  11.     const img = new Image();
  12.     // reader.result为获取结果
  13.     console.log(reader.result);
  14.     img.src = reader.result;
  15.     img.width = "100";
  16.     // 先清空之前的选择的图片
  17.     document.querySelector(".user-pic").innerHTML = null;
  18.     // 将用户选择的图片显示到指定元素中
  19.     document.querySelector(".user-pic").appendChild(img);
  20.   };
  21. }
  23. // 2. 读取文本并预览
  24. const fileText = document.querySelector("#user-resume");
  25. fileText.addEventListener("change", showText, false);
  26. //读取文本的回调方法
  27. function showText() {
  28.   const reader = new FileReader();
  29.   // 做为文本读取, files[0]表示第一个文件,utf8是默认编码
  30.   reader.readAsText(fileText.files[0], "utf8");
  31.   reader.onload = () =>
  32.     (document.querySelector(".user-resume").innerHTML = reader.result);
  33. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！