初始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初始值问题
随机推荐
- vue ele 表单规则校验俩次输入密码是否相同，校验手机号 （ 前端小课堂：小细节，大进步 ）
这个是密码的拦截 : [{ required: true, validator: validatePass4, trigger: "blur" }], 同级关系下写下方法,类 ...
- 痞子衡嵌入式：MCUXpresso IDE下将关键函数重定向到RAM中执行的几种方法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是MCUXpresso IDE下将关键函数重定向到RAM中执行的几种方法. 前段时间痞子衡写了一篇 <在IAR开发环境下将关键函数重 ...
- 发那科FANUC机器人视频学习教程
82课时的全套发那科机器人视频教程,学完可以掌握发那科机械手的使用和编程,需要的加我微信私私聊.X241602 FANUC 是日本一家专门研究数控系统的公司,成立于1956年.是世界上最大的专业数控系 ...
- QT之ARM平台的移植
在开发板中运行QT程序的基本条件是具备QT环境,那么QT的移植尤为重要,接下载我将和小伙伴们一起学习QT的移植. 一.准备材料 tslib源码 qt-everywhere-src-5.12.9.t ...
- MongoDB（2）- 安装 MongoDB
MacOS 安装 MongoDB 博主目前都用 mac 电脑练习,所以这里重点讲 MacOS 安装方式 系统要求 MongoDB 4.4 社区版支持 macOS 10.13 或更高版本 安装 Home ...
- CSS003. 盒子水平垂直居中简写属性（place-items）
place-items CSS 中的 place-items 是一个简写属性 ,它允许你在相关的布局(如 Grid 或 Flexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-it ...
- Maven专题2——聚合与继承
聚合 聚合模块的<packaging>元素为pom 聚合模块通过<modules>元素标识自己的子模块,每个子模块对应了一个module元素 module元素中指定的是子模块所 ...
- mac下使用vscode技巧
1.查找 command + F 2.查找并替换 选中要替换的文字 再 command + options + F 3.竖状区域部分替换 鼠标点中替换字段的开头或者结尾,按options + s ...
- vmware workstation16许可证密钥
ZF3R0-FHED2-M80TY-8QYGC-NPKYFYF390-0HF8P-M81RQ-2DXQE-M2UT6ZF71R-DMX85-08DQY-8YMNC-PPHV8FA1M0-89YE3-0 ...
- python 打字小游戏
最近随便用python的pygame编了这个打字小游戏 只要有字母调到窗口底部就结束 上代码: import pygame.freetype import sys import random pyga ...