html常用组件实操 - html

Home > List of blog posts > html常用组件实操

Blogger Information

Blog 10

fans 0

comment 0

visits 7517

Special Recommendation

More>

Related recommendations

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);
}

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

html常用基础标签

2020-12-13 17:21:12