初始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初始值问题
随机推荐
- WPF WPF中解决内存泄露的几点提示与解决方法
http://www.cnblogs.com/LastPropose/archive/2011/08/01/2124359.html 一直以来用WPF做一个项目,但是开发中途发现内存开销太大,用ANT ...
- 使用zipKin构建NetCore分布式链路跟踪
本文主要讲解使用ZipKin构建NetCore分布式链路跟踪 场景 因为最近公司业务量增加,而项目也需要增大部署数量,K8S中Pod基本都扩容了一倍,新增了若干物理机,部分物理机网络通信存在问题,导致 ...
- vue-router路由钩子
路由跳转前后,需要做某些操作,这时就可以使用路由钩子来监听路由的变化. 接收三个参数: to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...
- Dockerfile自动制作Docker镜像（二）—— 其它常用命令
Dockerfile自动制作Docker镜像(二)-- 其它常用命令 前言 a. 本文主要为 Docker的视频教程 笔记. b. 环境为 CentOS 7.0 云服务器 c. 上一篇:Dockerf ...
- C语言使用getch()读取方向键
初衷: 在解决N皇后问题时需要使用方向键实现布局切换,于是就在网上查找资料,感觉自己收获不小,就把自己总结的一些知识点给记录下来. 总结: 1.getch()读取字符需要一次. 2.getch()读取 ...
- 回忆之placeholder
直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charse ...
- 【PHP数据结构】链表的相关逻辑操作
链表的操作相对顺序表(数组)来说就复杂了许多.因为 PHP 确实已经为我们解决了很多数组操作上的问题,所以我们可以很方便的操作数组,也就不用为数组定义很多的逻辑操作.比如在 C 中,数组是有长度限制的 ...
- git合并内容的1个方式
诉求 把自己的改动的文件合并到目标分支: 不想改那些不属于自己开发时出现的冲突: 操作 开发分支dev,要合并至master分支 1 所有改动都已提交,保持分支的干净状态(working tree c ...
- 织梦arclist文章标题字数太短
解决dedecms UTF-8首页文章标题显示字数太短的办法原因分析:因为UTF-8编码1个中文汉字占用的是3个字节,GBK占用的是2个字节,所以,原先$titlelen = AttDef($titl ...
- 华为云计算IE面试笔记-FusionCompute虚拟机热迁移定义，应用场景，迁移要求，迁移过程
*热迁移传送了什么数据?保存在哪? 虚拟机的内存.虚拟机描述信息(配置和设备信息).虚拟机的状态 虚拟机的配置和设备信息:操作系统(类别.版本号).引导方式(VM通过硬盘.光盘.U盘.网络启动)和引导 ...