HTML常用标签

## 1. 布局

- 结构: `<header><main><footer><aside>`
- 内容: `<article><section>`
- 导航: `<nav>`
- 图文: `<figure><figcaption>`
- 通用: `<div><span>`

## 2. 链接,图像,列表

- 链接: `<a>`
- 图像: `<img>`
- 列表: `<ul><ol><li>`

## 3. 表格

- 结构: `<table><caption><tbody>`
- 分组: `<thead><tfooter>`
- 内容: `<tr><td><th>`
- 合并: `colspan, rowspan`

## 4. 表单(重点)

> 表单中用户与服务器数据交互的入口,也是服务器安全的最大隐患

- 类型: `<form><input><select><textarea><button><datalist>`
- 属性: `type,name,value,placeholder,require,selected,checked,disabled`

## 5. 肉联框架

- 标签: `<iframe>`
- 属性: `src,srcdoc,frameborder,width,height`

## 6. 音频/视频/其它

- 标签: `<video><audio>`
- 属性: `src,controls,poster,autoplay,loop,muted`

form表单


例子:

<form action="register.php" method="POST" enctype="application/x-www-form-urlencoded" target="_blank" id="register">
<input type="text" name="username" />
<input type="password" name="password" />
<button>提交</button>
</form>

* 1. action: 服务器上的表单处理脚本,如login.php
* 2. method: 提交方式
* 2.1 GET: 默认,数据在URL中,适用于"少量且公开"的数据,如分页,查询参数
* http://127.0.0.1:5500/1017/register.php?username=admin
* http://127.0.0.1:5500/1017/register.php?username=peter+zhu
* 2.2 POST: 数据在请求体中,适合于"大量的或隐私"的数据
* 3. enctype:
* 3.1 application/x-www-form-urlencoded: 默认对值对的编码方案
* 3.2 multipart/form-data: 分块,原始数据,适用文件上传
* 4. target: 与<a>相同,_self是默认,_blank新页面
* 5. id: name现在已废弃不推荐,全用id来引用该表单
* 6. onsubmit: 提交时执行的js,拦截提交操作,执行用户自定义提交行为

input属性

没写

Grid布局

## grid属性-: 显式网格与项目属性
创建网格:
<!-- 容器: 父元素 -->
<div class="container">
<!-- 项目: 子元素 -->
<div class="item">item1</div>
</div>

<style>
width: 300px;(宽)
height: 150px;(高)
display: grid;(grid布局)

创建3行3列
/* 1. 显式网格 */
grid-template-columns: 100px 100px 100px;(行)
grid-template-rows: 50px 50px 50px;(列)

缩写:
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 50px);

/* 容器300px,而每个项目100px,有3个项目正好充满容器, 1:1:1 */
/* fr: 比例(使用1fr之前需要先声明宽高比例,不然会按照文字的比例) */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

项目移动网格:
/* 创建项目的背景颜色 */
.container > .item {
        background-color: wheat;
      }

/* 可以将项目放在任何一个单元格中 */
 .container > .item:first-of-type {
/* 默认: 1行1列到2行2列 */
/* grid-row: 起始行 / 结束行;
/* grid-column: 起始列 / 结束列; */
grid-row: 1 / 2;
grid-column: 1 / 2;

/* 移动到正中间 */
grid-row: 2 / 3;
grid-column: 2 / 3;
}

/* 因为一个项目至少要占据一个单元格,默认跨越一个单元格编号 */
grid-row: 2;
grid-column: 2;

/* 很多场景下,用户不关心也不知道结束编号,只知道要跨越几行几列 */
grid-row: 2 / span 1;
grid-column: 2 / span 1;
/* 从当前位置开始, 跨越2行2列 */
grid-row: 2 / span 2;
grid-column: 2 / span 2;

/* grid-row, grid-column 创建出一个网格区域; */
/* grid-area: 行开始/列开始/行结束/列结束; */
grid-area: 1 / 1 / 3 / 3;
/* span (使用span跨越2行2列)  */
grid-area: 1 / 1 / span 2 / span 2;

/* 页脚 */
grid-area: 3 / 1 / span 1 / span 3;
/* grid-area: 3 / 1 / span 3; */

/* span 1 : 可省略,但这里不能省,为什么?因为它不在未尾 */

/* 将项目放置最右一列 */
grid-area: 1 / 3 / span 3 / span 1;
/* span 1 是最后一个值,可以不写 */
grid-area: 1 / 3 / span 3;

/* 1. 排列规则 */
grid-auto-flow: row;(行默认)
grid-auto-flow: column;(列排序)

## grid属性-: 项目对齐

<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>

/**
* * 1. 对齐前提: 必须存在"剩余空间"
* * 2. 对齐方案: "剩余空间"在"项目"之间的分配方式
* * 3. 剩余空间: Flex(主轴, 交叉轴), Grid(容器, 单元格)
* * Grid: 剩余空间存在于"容器" 或 "单元格"
* * 容器中: place-content, place-items
* * 项目中: place-self
*/

.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}
.container > .item {
/* border: 1px solid #000; */
background-color: wheat;

width: 50px;
height: 50px;
}

/* 创建容器的剩余空间 */
.container {
/* 当前 300 * 300  */
width: 450px;
height: 450px;
border: 1px solid #000;
background-color: lightcyan;

/* 1. 项目在"容器"中的对齐 */
/* place-content: 垂直方向 水平方向; */
/* 默认值: 垂直居上, 水平居左 */
place-content: start start;
/* 垂直居中,水平居右 */
place-content: center end;
/* 全部居中 */
place-content: center center;
/* 二值相等 */
place-content: center;

place-content: space-between space-around;
place-content: space-between space-between;
place-content: space-between;
place-content: space-around;

/* ------------------------------------- */

/* 2. 项目在"单元格"中的对齐 */
/* 单元格中必须要有剩余空间, 即: 项目 < 单元格  */
/* place-items: 垂直方向 水平方向; */
place-items: start start;
place-items: center end;
place-items: center center;
place-items: center;
}

/* 3. 设置某个项目在单元格对齐方式(与众不同) */
.container .item:nth-child(5) {
background-color: yellow;
place-self: end end;
place-self: end;
}

## grid属性-: 行列间隙

<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>

.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);

/* 行列间隙 gap  */
/* gap: 垂直方向 水平方向  */
gap: 5px 10px;
gap: 10px;
}
.container > .item {
background-color: wheat;
}

</style>
Last modification:November 6, 2022
如果觉得我的文章对你有用,请随意赞赏