初始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初始值问题
随机推荐
- 从kratos分析BBR限流源码实现
什么是自适应限流 自适应限流从整体维度对应用入口流量进行控制,结合应用的 Load.CPU 使用率.总体平均 RT.入口 QPS 和并发线程数等几个维度的监控指标,通过自适应的流控策略,让系统的入口流 ...
- git02
Git Gui的使用 Ssh key 介绍及使用 Ssh key介绍 我理解的就是每台电脑上会产生出一个ssh key,然后自己有一个远程账户,但是自己有可能有很多台电脑, 包括家里的电脑还有公司的电 ...
- 装配Bean的三种方式
一.装配Bean就是在xml写一个Bean标签:装配完Bean,还需要读取xml配置文件创建Spring容器来创建对象: 1.new 实现类方式 正常的三种创建Bean容器的方法都可以根据装配的Bea ...
- ms sql 带自增列 带外键约束 数据导入导出
1,生成建表脚本 选中要导的表,点右键-编写表脚本为-create到 ,生成建表脚本 2,建表(在新库),但不建外键关系 不要选中生成外键的那部分代码,只选择建表的代码 3,导数据,用SQL STU ...
- UVA 506 System Dependencies（模拟 烂题）
https://vjudge.net/problem/UVA-506 题目是给出了五种指令,DEPEND.INSTALL.REMOVE.LIST.END,操作的格式及功能如下: DEPEND item ...
- CodeForce-792C Divide by Three(数学)
Divide by Three CodeForces - 792C 有一个正整数 n 写在黑板上.它有不超过 105 位. 你需要通过删除一些位使得他变成一个美丽的数,并且需要删除尽量少的位数.删除的 ...
- Elasticsearch2.4.6版本 在linux 命令行 对数据的增删改操作
一._cluster系列:查询设置集群状态 1.设置集群状态 curl -XGET 10.68.120.167:9204/_cluster/health?pretty=true pretty=true ...
- requests接口自动化-assert断言
断言,自动判断接口返回的结果与预期结果是否一致 from common.get_mysql import * def test_assert(): a=0 b=1 # assert a,'断言失败打印 ...
- php CURL 发送http请求 GET POST
* CURL http://www.php.net/manual/en/book.curl.php http://jp2.php.net/manual/en/function.curl-setopt. ...
- css布局宽度自适应
随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...