html常用组件实操

3.列表元素标签

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

无序列表

<h3>购物车</h3>
<ul>
  <li>黄瓜</li>
  <li>茄子</li>
  <li>西红柿</li>
</ul>

有序列表

<h3>购物车</h3>
<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>葡萄</li>
</ol>

自定义列表

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

1.导航菜单实战

<!-- 导航菜单 -->
<ul class="menu">
  <li><a href="">首页</a></li>
  <li><a href="">视频教程</a></li>
  <li><a href="">入门教程</a></li>
  <li><a href="">社区问答</a></li>
  <li><a href="">登录</a></li>
</ul>

/* 导航菜单css样式 */
.menu {
  display: flex;
  background-color: #333;
}
.menu li {
  list-style: none;
  padding: 0.5em 1em;
}
.menu li a {
  color: #eee;
  font-size: 14px;
  text-decoration: none;
}
.menu li:hover {
  background-color: coral;
}

2.ul 图文列表实战

<!-- 图文列表 -->
<ul class="list">
  <li>
    <a href=""
      ><img
        src="https://img.php.cn/upload/course/000/000/003/5a38c838366fe405.jpg"
        alt="tp3.2"
    /></a>
    <a href="">tp3.2开发教程</a>
  </li>
  <li>
    <a href=""
      ><img
        src="https://img.php.cn/upload/course/000/000/003/5a38c838366fe405.jpg"
        alt="tp3.2"
    /></a>
    <a href="">tp3.2开发教程</a>
  </li>
  <li>
    <a href=""
      ><img
        src="https://img.php.cn/upload/course/000/000/003/5a38c838366fe405.jpg"
        alt="tp3.2"
    /></a>
    <a href="">tp3.2开发教程</a>
  </li>
  <!-- 多复制几个li -->
</ul>

/* 图文列表实战，代码样式 */
.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10em);
  gap: 1em;
}
.list li {
  list-style: none;
  border: 1px solid #ccc;
  text-align: center;
  height: 8em;
  display: grid;
}
.list li:hover {
  box-shadow: 0 0 5px #aaa;
  cursor: pointer;
}
.list img {
  width: 100%;
}
.list a {
  color: #666;
  font-size: 12px;
  text-decoration: none;
}

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.商品表格学习

<!-- 简单案例学习表格 -->
<table class="product">
  <caption>
    商品信息表
  </caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>品牌</th>
      <th>单价</th>
      <th>单位</th>
      <th>数量</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a100</td>
      <td>香蕉</td>
      <td>2.99</td>
      <td>斤</td>
      <td>10</td>
      <td>29.9</td>
    </tr>
    <tr>
      <td>a100</td>
      <td>香蕉</td>
      <td>2.99</td>
      <td>斤</td>
      <td>10</td>
      <td>29.9</td>
    </tr>
    <tr>
      <td>a100</td>
      <td>香蕉</td>
      <td>2.99</td>
      <td>斤</td>
      <td>10</td>
      <td>29.9</td>
    </tr>
  </tbody>
</table>
<!-- 翻页 -->
<p class="page">
  <a href="">首页</a>
  <a href="">...</a>
  <a href="">5</a>
  <a href="">6</a>
  <a href="">7</a>
  <a href="">8</a>
  <a href="">...</a>
  <a href="">尾页</a>
</p>

/* 商品信息表css */
.product {
  border-collapse: collapse;
  width: 30em;
  margin: auto;
  text-align: center;
}
.product caption {
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}
.product thead tr,
.product tr:hover {
  background-color: lightcyan;
  cursor: pointer;
}
.product td,
.product th {
  border: 1px solid #000;
  padding: 5px;
}
.page {
  text-align: center;
}
.page a {
  text-decoration: none;
  color: #666;
  padding: 2px 5px;
  border: 1px solid #000;
}
.page a.active,
.page a:hover {
  background-color: lightcyan;
}

2.表格合并课程表案例

<table class="lesson">
  <caption>
    合肥课程表
  </caption>
  <thead>
    <tr>
      <th colspan="2"></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4">上午</td>
      <td>1</td>
      <td>数学</td>
      <td>语文</td>
      <td>英语</td>
      <td>美术</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>2</td>
      <td>数学</td>
      <td>语文</td>
      <td>英语</td>
      <td>美术</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>3</td>
      <td>数学</td>
      <td>语文</td>
      <td>英语</td>
      <td>美术</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>4</td>
      <td>数学</td>
      <td>语文</td>
      <td>英语</td>
      <td>美术</td>
      <td>数学</td>
    </tr>
    <tr class="rest">
      <td colspan="7">中午休息</td>
    </tr>
  </tbody>
  <tr>
    <td rowspan="4">下午</td>
    <td>1</td>
    <td>数学</td>
    <td>语文</td>
    <td>英语</td>
    <td>美术</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>2</td>
    <td>数学</td>
    <td>语文</td>
    <td>英语</td>
    <td>美术</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>3</td>
    <td>数学</td>
    <td>语文</td>
    <td>英语</td>
    <td>美术</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>4</td>
    <td>数学</td>
    <td colspan="4">户外休息</td>
  </tr>
</table>

/* 课程表: 行与列的合并css */
.lesson {
  border-collapse: collapse;
  width: 40em;
  text-align: center;
  margin: auto;
}
.lesson caption {
  font-size: 1.2rem;
  margin: 1em;
}
.lesson thead {
  background-color: lightcyan;
}
.lesson th,
.lesson td {
  border: 1px solid;
  padding: 0.5em;
}
.lesson .rest {
  background-color: #efefef;
}
.lesson td[rowspan="4"],
.lesson td[rowspan="3"] {
  background-color: rgb(186, 245, 213);
}

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.注册页面实操

<h3 class="title">用户注册</h3>
<form action="" method="GET" class="register" enctype="multipart/form-data">
  <label for="username">账号</label>
  <input
    type="text"
    id="username"
    name="username"
    register
    value=""
    placeholder="7299***61"
  />
  <label for="password">密码</label>
  <input
    type="text"
    name="password"
    id="password"
    register
    placeholder="154411asd"
    value=""
  />
  <label for="email">邮箱</label>
  <input
    type="email"
    register
    id="email"
    name="email"
    placeholder="7299@qq.com"
    value=""
  />
  <label for="secret">性别</label>
  <div>
    <input type="radio" name="gender" value="male" id="male" /><label for=""
      >男</label
    >
    <input type="radio" name="gender" value="female" id="female" /><label for=""
      >女</label
    >
    <input
      type="radio"
      name="gender"
      value="secret"
      id="secret"
      checked
    /><label for="secret">保密</label>
  </div>
  <label for="#">兴趣</label>
  <div>
    <input type="checkbox" checked name="hoby[]" value="game" id="game" />
    <label for="">游戏</label>
    <input type="checkbox" name="hoby[]" value="shoot" id="shoot" />
    <label for="">摄影</label>
    <input type="checkbox" name="hoby[]" value="travel" id="travel" />
    <label for="">旅游</label>
    <input type="checkbox" name="hoby[]" value="program" id="program" />
    <label for="">编程</label>
  </div>
  <label for="">学历</label>
  <select name="edu" id="edu">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>大学</option>
    <option value="4">研究生</option>
  </select>
  <label for="">头像</label>
  <!-- value设置上传大小为多少兆8192为8mb，1mb等于1024kb -->
  <input type="hidden" name="MAX_FILE_SIZE" value="8192" />
  <input type="file" name="user_pic" id="user-pic" />
  <!-- 头像占位符 -->
  <div class="user-pic" style="grid-column: span 2"></div>
  <label for="user-resume">简历</label>
  <input type="hidden" name="MAX_FILE_SIZE" value="10000" />
  <input type="file" name="user_resume" id="user-resume" />
  <div class="user-resume" style="grid-column: span 2"></div>
  <!-- 文本域 -->
  <label for="">备注:</label>
  <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
  <button>提交</button>
</form>

注册页面 css

/* 表单标题 */
.title {
  text-align: center;
}
/* 注册表单 */
.register {
  width: 20em;
  margin: auto;
  padding: 1em;
  border: 1px solid;
  display: grid;
  grid-template-columns: 3em 1fr;
  gap: 1em;
}
/* 按钮 */
.register > button {
  grid-column: span 2;
  height: 2em;
}
.register ul {
  list-style: none;
  padding: 0;
  font-size: 14px;
}
.register textarea {
  /* 禁止缩放文本域 */
  resize: none;
  position: relative;
}
.register .tips {
  position: absolute;
  top: 220px;
  right: 150px;
  font-size: 0.8rem;
  color: #aaa;
}

注册页面文件上传显示 js

// 1.读取图片并预览;
const fileImg = document.querySelector("#user-pic");
fileImg.addEventListener("change", showImg, false);
function showImg() {
  console.log(fileImg.files);
  const reader = new FileReader();
  // fileImg.files[0]为第一个图片
  reader.readAsDataURL(fileImg.files[0]);
  reader.onload = () => {
    const img = new Image();
    // reader.result为获取结果
    console.log(reader.result);
    img.src = reader.result;
    img.width = "100";
    // 先清空之前的选择的图片
    document.querySelector(".user-pic").innerHTML = null;
    // 将用户选择的图片显示到指定元素中
    document.querySelector(".user-pic").appendChild(img);
  };
}
// 2. 读取文本并预览
const fileText = document.querySelector("#user-resume");
fileText.addEventListener("change", showText, false);
//读取文本的回调方法
function showText() {
  const reader = new FileReader();
  // 做为文本读取, files[0]表示第一个文件,utf8是默认编码
  reader.readAsText(fileText.files[0], "utf8");
  reader.onload = () =>
    (document.querySelector(".user-resume").innerHTML = reader.result);
}

3.列表元素标签

1.导航菜单实战

2.ul 图文列表实战

4.表格标签

1.商品表格学习

2.表格合并课程表案例

5.表单元素

1.注册页面实操

相关文章