HTML进阶

# 1 列表元素

列表元素按使用频率可以细分为

无序列表(ul: unordered list)
有序列表(ol: ordered list)
描述列表(dl: description list)

# 1) 无序列表 ul

表示列表项之间是没有先后顺序的

示例

emmet: ul>li*3>lorem1

<ul>
  <li>Lorem.</li>
  <li>Quisquam.</li>
  <li>Sapiente.</li>
</ul>

1
2
3
4
5

# 2) 有序列表 ol

表示列表项之间是存在先后顺序的

示例

emmet: ol>li{第$项}*3

<ol>
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
</ol>

1
2
3
4
5

# 3) 描述列表 dl

表示一个自定义的列表

emmet: dl>(dt{标题$}+dd{内容$})*3

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容2</dd>
  <dt>标题3</dt>
  <dd>内容3</dd>
</dl>

1
2
3
4
5
6
7
8

# 2 表单

# 1) 基本介绍

生活中的表单

在生活中, 比如我们去银行申请信用卡, 我们需要填写一张申请表

在我们申请email的时候, 我们需要填写用户名, 密码这些信息

像这些申请单在程序里就是以表单的形式的存在的

表单的作用

目的是为了收集用户的信息, 传递给服务器, 在服务器中存储

# 2) 语法

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

1
2
3

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

# 3) input元素

语法

<input type="属性值" value="你好">

input 输入的意思
input是单标签元素
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

# 4) label元素

语法

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

1
2

# 5) textarea元素

语法

<textarea >
  文本内容
</textarea>

1
2
3

# 6) select元素

语法

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

1
2
3
4
5
6

作业

# 3 表格

# 1) 基本介绍

为了更方便人们的阅读, 对于一些数据以表格的形式展现效果会更好, 比如

还有: 成绩表, 工资表, 人员名单表, 商品清单表等等...

在程序中, 我们使用table来表示

# 2) 语法

语法

<table>
  <tr>
    <th>表头</th>
  </tr>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

1
2
3
4
5
6
7
8
9
10

table用于定义一个表格标签。
tr(table row) 用于定义表格中的行，必须嵌套在 table中
th(table head)用于定义表格中的表头, 必须嵌套在tr中
td(table data) 用于定义表格中的单元格，必须嵌套在tr中

# 3) table的常用属性

示例

<table width="600px" border="1" cellspacing="0">
  <caption>
    xx中学高一课程表
  </caption>
  <tr>
    <th>周一</th>
    <th>周二</th>
    <th>周三</th>
    <th>周四</th>
    <th>周五</th>
  </tr>

  <tr>
    <td>语文</td>
    <td>地理</td>
    <td>语文</td>
    <td>地理</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>美术</td>
    <td>语文</td>
    <td>政治</td>
    <td>微机</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>生物</td>
    <td>语文</td>
    <td>生物</td>
    <td>微机</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>体育</td>
    <td>班会</td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 4) 标题

语法

<table>
   <caption>我是表格标题</caption>
</table>

1
2
3

# 5) 高级用法

表格的合并

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/03, 15:32:17

← HTML入门 CSS简介→