Loading...
html 元素
列表
有序列表 ol
- 有序列表，直接子元素只能是 li
- li（list item）
- 列表中的每一项
<style>
ol,
li {
/* 0 可以去掉默认的数字序号 */
margin: 0;
padding: 0;
/* 可以去掉数字后的 . */
list-style: none;
}
</style>
<ol>
<li>银魂</li>
<li>命运石之门</li>
<li>死亡笔记</li>
</ol>浏览器会自动加上序号 1. 2. 3.
无序列表 ul
<style>
ul {
/* decimal 可以将无序列表变为有序列表 */
/* none 去掉默认的 . */
list-style-type: decimal;
}
</style>
<ol>
<li>银魂</li>
<li>命运石之门</li>
<li>死亡笔记</li>
</ol>无序列表默认会自动加上 ·
定义列表 dl dt dd
- dl（definition list）
- 定义列表，直接子元素只能是 dt、dd
- dt（definition term）
- term 是项的意思, 列表中每一项的项目名
- dd（definition description）
- 列表中每一项的具体描述，是对 dt 的描述、解释、补充
- 一个 dt 后面一般紧跟着 1 个或者多个 dd
<dl>
<dt>React</dt>
<dd>jsx</dd>
<dd>react-router-dom</dd>
<dd>dva</dd>
<dd>redux</dd>
<dt>Vue</dt>
<dd>vue-router</dd>
<dd>vuex</dd>
<dd>pinia</dd>
</dl>table
表格最常见元素:
- table 表格
- tr(table row) 表格中的行
- td(table data) 行中的单元格
table 存在很多被弃用的属性：
align（表格如何对齐）、bgcolor（表格背景色）、border（表格边框样式）、cellpadding（单元格与边框之间的间距）、cellspacing（单元格之间的间距）、frame、rules、summary、width（表格宽度）
详情请参照 MDN 文档 table 弃用的属性
border-collapse: collapse; 来决定 border 的边框是合并的
table 语义化标签
- thead 表格的表头
- tbody 表格的主体
- tfoot 表格的页脚
- caption 表格的标题
- th 表格的表头单元格
<table>
<caption>
热门股票
</caption>
<thead>
<tr>
<td>排名</td>
...
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
...
</tr>
...
</tbody>
<tfoot>
<tr>
<td>其它1</td>
...
</tr>
</tfoot>
</table>单元格合并
- 跨列合并: 使用 colspan
- 在最左边的单元格写上 colspan 属性, 并且省略掉合并的 td;
- 跨行合并: 使用 rowspan
- 在最上面的单元格协商 rowspan 属性, 并且省略掉后面 tr 中的 td;
<table>
<tr>
<!-- 跨列合并几列就写几，合并列后边通常不再有td -->
<td colspan="2">1-1</td>
</tr>
<tr>
<td>2-1</td>
<!-- 跨行合并，应提前看 tr 对应的td -->
<td rowspan="2">2-2</td>
</tr>
<tr>
<td>3-1</td>
</tr>
</table>表单元素
常见表单元素：
- form 表单, 一般情况下，其他表单相关元素都是它的后代元素
- input 单行文本输入框、单选框、复选框、按钮等元素
- textarea 多行文本框
- select、option 下拉选择框
- button 按钮
- label 表单元素的标题
input 元素
input 元素有如下常见的属性:
-
type：input 的类型
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
- radio：单选框
- checkbox：复选框
- button：按钮
- reset：重置
- submit：提交表单数据给服务器
- file：文件上传
-
readonly：只读
-
disabled：禁用
-
checked：默认被选中
- 只有当 type 为 radio 或 checkbox 时可用
-
autofocus：当页面加载时，自动聚焦
-
name：名字
- 在提交数据给服务器时，可用于区分数据类型
-
value：取值
type 类型的其他取值和 input 的其他属性, 查看 MDN 文档
布尔属性
- 常见的布尔属性有 disabled、checked、readonly、multiple、autofocus、selected
- 布尔属性可以没有属性值，写上属性名就代表使用这个属性
- 如果要给布尔属性设值，值就是属性名本身
<input type="text" readonly />
<!-- 等价于 -->
<input type="text" readonly="readonly" />表单按钮
- 普通按钮（type=button）：使用 value 属性设置按钮文字
- 重置按钮（type=reset）：重置它所属 form 的所有表单元素（包括 input、textarea、select）
- 提交按钮（type=submit）：提交它所属 form 的表单数据给服务器（包括 input、textarea、select）
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<!-- 等价于 -->
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>label 和 input 的联系
label 的 for 和 input 的 id 相同，点击 label 即可聚焦 input
<label for="username"> 用户： <input id="username" type="text" /> </label>
<label for="password"> 密码： <input id="password" type="password" /> </label>radio 的使用
- type 设置为 radio 变成单选框:
- name 值相同的 radio 才具备单选功能
- value 是表单获取到传给后台的值
<label for="male"> <input id="male" type="radio" name="sex" value="male" />男 </label>
<label for="female"> <input id="female" type="radio" name="sex" value="female" />女 </label>checkbox 的使用
- 将 type 类型设置为 checkbox 变成多选框:
- 属于同一种类型的 checkbox，name 值要保持一致
- checked 默认选中
<label for="song"> <input id="song" type="checkbox" name="hobby" value="song" checked />唱 </label>
<label for="jump"> <input id="jump" type="checkbox" name="hobby" value="jump" />跳 </label>textarea 的使用
- textarea 的常用属性:
- cols：列数
- rows：行数
- 缩放的 CSS 设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;
select 和 option 的使用
- multiple 多选
- size 多选时展示的数量，默认全部展示
- selected 默认选中的数据
<select name="fruits" id="" multiple size="2">
<option value="apple" selected>苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橘子</option>
</select>