初始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初始值问题
随机推荐
- JDK1.8源码阅读笔记(2) AtomicInteger AtomicLong AtomicBoolean原子类
JDK1.8源码阅读笔记(2) AtomicInteger AtomicLong AtomicBoolean原子类 Unsafe Java中无法直接操作一块内存区域,不能像C++中那样可以自己申请内存 ...
- java版gRPC实战之一：用proto生成代码
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- MongoDB（3）- Database 数据库相关
Database MongoDB 将数据记录存储为文档(特别是 BSON 文档) 这些文档在集合中聚集在一起 数据库存储一个或多个文档集合. 在 MongoDB 里面存在数据库的概念,但没有模式 Sh ...
- openswan协商流程之（二）：main_inI1_outR1()
主模式第二包:main_inI1_outR1() 文章目录 主模式第二包:main_inI1_outR1() 1. 序言 2. `main_inI1_outR1()`处理流程图 3. `main_in ...
- 原子操作cas
一.概念, 基于处理器指令,把比较和交换合成一个指令完成,保证了原子性: 因为是针对一个内存地址值的,一个内存地址指向一个变量,所以只对一个共享变量能保证原子性: 二.原子操作类 锁只有synchro ...
- 解析Prometheus PromQL
解析PromQL 目前对Prometheus 的promQL 的解析文章比较少,且Prometheus官方也没有提供一个公共的库来对齐进行解析.下面实现对promQL的解析,并实现注入label功能. ...
- ysoserial CommonsColletions4分析
ysoserial CommonsColletions4分析 其实CC4就是 CC3前半部分和CC2后半部分 拼接组成的,没有什么新的知识点. 不过要注意的是,CC4和CC2一样需要在commons- ...
- HDU - 2544最短路 （dijkstra算法）
HDU - 2544最短路 Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以 ...
- 使用metaweblog API实现通用博客发布 之 本地图片自动上传以及替换路径
使用metaweblog API实现通用博客发布 之 本地图片自动上传以及替换路径 通过metaweblog API 发布博文的时候,由于markdown中的图片路径是本地路径,将导致发布的文章图片不 ...
- http请求在https中使用
问题原因:HTTPS页面里动态的引入HTTP资源,比如引入一个js文件,会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉的. 解决方案: <m ...