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初始值问题

随机推荐

【SpringMVC】视图
SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户 SpringMVC视图的种类很多,默认有转发视图和重定向视图当工程引入jstl的依赖,转发视图会自动 ...
云效x钉钉：让研发工作更简单
云效x钉钉:让研发工作更简单,奔走相告,云效&钉钉集成实现组织架构.成员同步以及消息通知啦! 我们知道云效致力于智能化.安全可追溯.高效.简单.灵活,「云效新一代企业级DevOps平台」阿里云 ...
MySQL——MySQL用户管理
1.MySQL用户定义:用户名+主机域/ip/.. 2.用户作用: 1.登录 2.管理数据库及数据 3.权限: 读和写操作 4.角色: 数据库定义好的一组权限的定义 5.权限范围: 全库:*.* 单库 ...
python 并行计算
一.进程和线程原文链接:https://zhuanlan.zhihu.com/p/356220352 进程是分配资源的最小单位,线程是系统调度的最小单位.当应用程序运行时最少会开启一个进程,此时计算 ...
ClientValidationFunction
CustomValidator.ClientValidationFunction 属性获取或设置用于验证的自定义客户端脚本函数的名称. 命名空间: System.Web.UI.WebContro ...
Vite详解
vite 目录一.推荐两个插件插件 Volar Vue 3 Snippets 二.vite简介优势分析浏览器支持三.vite搭建vue3.x项目 1.创建项目 2.集成Vue-Router 3 ...
ysoserial CommonsColletions4分析
ysoserial CommonsColletions4分析其实CC4就是 CC3前半部分和CC2后半部分拼接组成的,没有什么新的知识点. 不过要注意的是,CC4和CC2一样需要在commons- ...
SpringCloudAlibaba - 整合 Nacos 实现服务注册与发现
目录前言环境 Nacos是什么? 服务发现原理搭建 Nacos Server Nacos Server 下载地址 Nacos Server 的版本选择运行 Nacos Server Nacos ...
PHP脚本设置及获取进程名
今天来学习的是两个非常简单的函数,一个可以用来设置我们执行脚本时运行的进程名.而另一个就是简单的获取当前运行的进程名.这两个函数对于大量的脚本运行代码有很大的作用,比如我们需要 kill 掉某个进程时 ...
ecshop调用商品的购买次数方法
这时候我们修改一下写成一个函数放到lib_goods.php 这样就可以随便调用了 --------------------------------------------------------- ...

初始HTML04