初始HTML04
HTML
列表标签
无序列表 默认用实心圆点标识列表项
1 <ul>
2 <li>list item 列表项</li>
3 <li>list item 列表项</li>
4 <li>list item 列表项</li>
5 </ul>
有序列表默认使用数字标识每条数据,start设置值,默认为1
1 <ol>
2 <li>list item 列表项</li>
3 <li>list item 列表项</li>
4 <li>list item 列表项</li>
5 </ol>
案例:
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <!-- ul>li*3-->
13 <ul>
14 <li>item1</li>
15 <li>item2</li>
16 <li>item3</li>
17 </ul>
18 <!-- ctrl + shift + i 格式化-->>
19 <ol start='5'>
20 <li>item1</li>
21 <li>item2</li>
22 <li>item3</li>
23 </ol>
24 </body>
25
26 </html>
列表嵌套
在已有列表中嵌套添加另一個列表,常见下拉菜單
1 <ul>
2 <li>
3 西游记
4 <ol>
5 <li>大師兄</li>
6 <li>沙師弟</li>
7 <li>白龍馬</li>
8 </ol>
9 </li>
10 </ul>
表格标签
表格由行和单元格组成,常用于直接的数据展示或辅助排版
基本结构如下:
1 <table>
2 <!-- 创建行标签 -->
3 <tr>
4 <!-- 行中创建单元格以显示数据-->>
5 <td>姓名</td>
6 <td>年龄</td>
7 <td>班级</td>
8 </tr>
9 <tr>
10 <td>张三</td>
11 <td>20</td>
12 <td>一(1)班</td>
13 </tr>
14 </table>
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>表格页面</title>
9 </head>
10
11 <body>
12 <!-- table>tr*行数>td*列数-->
13 <table border='1' cellspacing=“0”>
14 <tr>
15 <td>11</td>
16 <td>12</td>
17 <td>13</td>
18 </tr>
19 <tr>
20 <td>21</td>
21 <td>22</td>
22 <td>23</td>
23 </tr>
24 <tr>
25 <td>31</td>
26 <td>32</td>
27 <td>33</td>
28 </tr>
29 <tr>
30 <td>41</td>
31 <td>42</td>
32 <td>43</td>
33 </tr>
34 </table>
35 </body>
36
37 </html>
table 表格
tr 行
td 列
border 边框
cellspacing 单元格距离
单元格合并
用于调整表结构,分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整
| 单元格属性 | 作用 | 取值 |
| colspan | 跨列合并单元格 | 无单位数值 |
| rowspan | 跨行合并单元格 | 无单位数值 |
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>表格页面</title>
9 </head>
10
11 <body>
12 <!-- table>tr*行数>td*列数-->
13 <table border='1' cellspacing=“0”>
14 <tr>
15 <td colspan=‘3’>11</td>
16 <td>12</td>
17 <td>13</td>
18 </tr>
19 <tr>
20 <td rowspan=‘3’>21</td>
21 <td>22</td>
22 <td>23</td>
23 </tr>
24 <tr>
25 <td>31</td>
26 <td>32</td>
27 <td>33</td>
28 </tr>
29 <tr>
30 <td>41</td>
31 <td>42</td>
32 <td>43</td>
33 </tr>
34 </table>
35 </body>
36
37 </html>
表单标签
表单用于采集用户的信息并提交给服务器,由表单标签和表单控件组成。表单标签form负责提交数据给服务器，表单控件负责收集数据，表单使用<form></form>元素
表单控件
|
名称 |
|
| 文本域 | <input type="text" /> |
| 密码域 | <input type="password" /> |
| 复选框 | <input type="checkbox" /> |
| 单选按钮 | <input type="radio" /> |
| 下拉列表 | <select><option value="">文本</option></select> |
| 多行文本域 | <textarea cols="2" rows="3"></textarea> |
| 提交按钮 | <input type="submit" value="提交" /> |
| 重置按钮 | <input type="reset" value="重置" /> |
| 普通按钮 | <input type="button" value='按钮' /> |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title></title>
8 </head>
9 <body>
10 <form action="" method="GET">
11 <!--表单控件-->>
12 用户名:<input type='text'>
13 密码:<input type='password'>
14 </form>
15
16 </body>
17 </html>
初始HTML04的更多相关文章
- 2DToolkit官方文档中文版打地鼠教程（一）：初始设置
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总
CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总 开始 总的来说,OpenGL应用开发者会遇到为如下三种数据创建Vertex Buffer Object的情形: ...
- ArrayList、Vector、HashMap、HashSet的默认初始容量、加载因子、扩容增量
当底层实现涉及到扩容时,容器或重新分配一段更大的连续内存(如果是离散分配则不需要重新分配,离散分配都是插入新元素时动态分配内存),要将容器原来的数据全部复制到新的内存上,这无疑使效率大大降低. 加载因 ...
- linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】
如果在ubuntu 下面 使用xampp这个集成开发环境,却忘记mysql密码. 注:刚安装好的xampp的Mysql初始密码是空... 找回密码的步骤如下: 1.停止mysql服务器 sudo /o ...
- python基础之初始python
初始python之基础一 一.Python 介绍 1.python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发 ...
- openfire 初始密码
openfire 初始密码 mssql2014 进入数据库,找到 ofUser 表 ,将密码字段对应的密文替换为下面的内容,则密码就是 admin ecbd03623cd819c48718db1b27 ...
- Bash 什么时候会给 HOME 赋初始值
今天无意发现下面这个表现: $ env -i bash -c cd bash: line 0: cd: HOME not set $ env -i bash -c 'echo $HOME' 这表明了 ...
- Holt-Winters原理和初始值的确定
关于模型 (来自以下PPT,从第4页开始) 关于初始值: 以下文档给出了三个模型的初始值计算的思路. 大致思路如下,建立一个p阶移动平均模型,估计出参数即为初始值,具体的根据三种不同的模型,有 ...
- 关于int,integer初始值问题
随机推荐
- 云原生 AI 前沿：Kubeflow Training Operator 统一云上 AI 训练
分布式训练与 Kubeflow 当开发者想要讲深度学习的分布式训练搬上 Kubernetes 集群时,首先想到的往往就是 Kubeflow 社区中形形色色的 operators,如 tf-operat ...
- HTML一小时入门，半天掌握
还没有写完,后续持续更新 首先来熟悉一下html的基本结构 <!DOCTYPE HTML> <html> <head> <meta charset=" ...
- sql常用查询命令
目录 SQL Server常用查询命令: 查看当前时间 查询所有数据库名 查询当前使用的数据库名 查询前几条数据 去重查询 字段换名 查询不等于 查询在两个值之间数据 查询条件或 模糊匹配查询 查询为 ...
- Spring AOP 事务配置（实现转账事务）
1. 事务特性 事务特性:ACID 原子性:整体 [原子性是指事务包含的所有操作要么全部成功,要么全部失败] 一致性:数据 [一个事务执行之前和执行之后都必须处于一致性状态] 隔离性:并发 [对于任意 ...
- GIT：创建、查看分支命令（git branch -vv）
在开发过程中一般会用到Git进行版本管理,创建查看分支并与远程仓库交互是非常常见的操作. branch分支 是指在开发主线中分离出来的,做进一步开发而不影响到原来的主线. Git存储的不是一系列的更改 ...
- 反射应用和获取Class对象的三种方式
一.写一个"框架",可以创建任何对象运行任何方法 1.配置文件 2.使用类加载器ClassLoader,Properties集合是可以和IO流结合使用完成读取和写入数据的集合,方法 ...
- mac下secureCRT的使用技巧
1.设置secureCRT不掉线的方法 Options->Global Options->General->Default Session->Edit Default Sett ...
- K8s Master当作Node使用的方法
1.使用下面的命令操作使得master 可以作为node使用 承载pod kubectl taint nodes --all node-role.kubernetes.io/master- 可能会出现 ...
- 全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客文章
全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客 1.背景 我挺喜欢写博客,但每一次将博客转移到公众号或者知乎,总是需要调整格式,不 ...
- Jmeter系列（10）- Linux环境安装之Jmeter下载配置
step-1下载 我是之前windows有,就直接copy到Linux系统了 step-2Jmter放到local目录 mv apache-jmeter-5.2.1 /usr/local/ step- ...