By

前端学习

列表，表格，表单，语义化，字符实体。

列表

列表分类：无序列表、有序列表、定义列表。

无序列表

标签：ul嵌套li，ul是无序列表，li是列表条目。

<ul>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	......
</ul>

注意事项：

  • ul 标签里只能包裹li 标签
  • li 标签里面可以包裹任何内容

有序列表

标签：ol嵌套li，ol是有序列表，li是列表条目。

<ol>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	......
</ol>

注意事项：

  • ol 标签里只能包裹li 标签
  • li 标签里面可以包裹任何内容

定义列表

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的详情。

<dl>
	<dt>列表标题</dt>
	<dd>列表详情</dd>
	<dd>列表详情</dd>
	......
</dl>

注意事项：

  • dl里面只能包含dt和dd
  • dt和dd里面可以包含任何内容

表格

标签：table嵌套tr，tr嵌套td/th。

table：表格

tr： 行

th： 表头单元格

td： 内容单元格

border属性可以为表格添加边框线

<table border="1">
    <tr>
        <th>姓名</th>
    </tr>
    <tr>
        <td>张三</td>
    </tr>
    <tr>
        <td>李四</td>
    </tr>
</table>

合并单元格

会保留最上最左的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

  • 跨行合并，保留最上单元格，添加属性rowspan
  • 跨列合并，保留最左单元格，添加属性colspan
  • 不能跨表格结构标签合并单元格
<table border="1">
    <tr>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">张三</td>
        <td>100</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>98</td>
    </tr>
</table>

表单

input标签基本使用

<input type="...">
type属性值 说明
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

占位文本：

<input type="..." placeholder="提示信息">

单选框常用属性：

属性名 作用 特殊说明
name 控件名称 控件分组，同组只能选一个
checked 默认选中 简写为一个单词 
<input type="radio" name="1" checked>男
<input type="radio" name="1">女

上传文件常用属性：

默认情况只能上传一个文件，添加multiple属性可以实现文件多选功能。

<input type="file" multiple>

下拉菜单

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。

selected属性实现默认选中功能。

<select>
        <option>北京</option>
        <option>深圳</option>
        <option>广州</option>
        <option selected>武汉</option>
</select>

文本域

标签：textarea，双标签。

多行输入文本。

<textarea>默认提示文字</textarea>

label标签

增大表单控件的点击范围。

  • 写法一

    <input type="radio" id="man">
<label for="man">男</label>

  • 写法二

    <label><input type="radio">男</label>

按钮

标签：button，双标签。

<button type="">按钮</button>
type属性值 说明
submit 提交按钮，点击提交数据到后台
reset 重置按钮，将表单恢复默认值
button 普通按钮，配合JavaScript使用
  • 注意：按钮需配合form标签才能实现对应功能。

语义化

标签名 语义
div 独占一行
span 不换行
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

字符实体

显示结果 描述 实体名称
  空格 \ 
< 小于号 \<
> 大于号 \>