Developed Countries
The list of developed countries :
US
Australia
New Zealand

在 HTML 中，列表共分为三种，分别是 有序列表，无序列表 和 定义列表 。
本篇博客介绍第二种：无序列表
文章目录
一：什么是无序列表
二：使用 type 属性更改列表项符号

一：什么是无序列表
简介
顾名思义，无序列表中的每个列表项就是没有顺序的，列表项默认用符号 ● 表示。
在 HTML 中，无序列表用 ul 标签定义，从 <ul> 开始，到 </ul> 结束。每个列表项从 <li> 开始，到 </li> 结束。
语法
	<ul>
		<li>列表项一</li>
		<li>列表项二</li>
		<li>列表项三</li>
	</ul>

浏览器效果如下



说明
标签 ul ，其实是 unordered  list(无序列表) 的英文缩写，标签 li 是 list(列表、清单) 的英文缩写。
一个 <li> 和 </li> 标签代表一个列表项，可以看出，一个无序列表可以有多个列表项。
注意事项

ul 标签需要配合 li 标签一起使用，不能单独使用。
ul 标签的子标签只能是 li 标签，不能是其它标签。
ul 标签的内部文本，只能在 li 标签内部添加，不能在 li 标签外部添加。

这里我测试了一下在 ul 标签里写入 div 标签，如下图所示



编辑器提示我元素 div 不能出现在这里，并对 div 进行了高亮显示。可见 ul 标签的子标签确实不能放入其它标签。
但浏览器可以正常运行吗 ？如下图所示



出乎意外，浏览器可以正常解析，不过编辑器是不允许出现这种写法的，我们记住即可。
二：使用 type 属性更改列表项符号
无序列表中列表项的默认符号用 ● 表示，有没有其它的表示符号呢？当然有，继续往下看，
在 HTML 中，用 type 属性来改变列表项的符号。
语法
<ul type="属性值">
	<li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>

type 的属性值
在无序列表中，type 属性有三个可取属性值，如下表格所示



这里以属性值 square 为例，我们看一下它的效果。
代码如下所示
    <ul type="square">
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ul>

浏览器运行效果如下



在实际开发中， 很少使用有序列表 ol 和定义列表 dl，我们一般都是使用无序列表 ul。
这里以淘宝网首页为例，如下图框选部分就用到了无序列表



让我们查看一下网页源码，确认一下是否用的是无序列表 ul ，如下图所示



由图可知，这个地方确实用的是无序列表 ul
今天是10月24日，程序员的节日，祝广大程序员节日快乐，不仅技术越来越牛，头发也要越来越多，哈哈
 

结束语
如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。

HTML标记语言
三、文档设置标记
1. 格式标记
1) 
 强制换行标记
让后面的文字、图片、表格等等，显示在下一行
2) 
 换段落标记
换段落，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落就要用
,
段落中也可以包含
段落！
属性align：说明文本对齐方式
3) 
 居中对齐标记
让段落或者是文字相对于父标记居中显示
4) 
 预格式化标记
保留预先编排好的格式
5) 
 列表项目标记
每一个列表使用一个
标记
6) 
 无序列表标记 Unordered List
声明这个列表没有序号
7) 
 有序列表标记 Ordered List
可以显示特定的一些顺序
格式
有序列表的type属性值
1     阿拉伯数字1.2.3等等，默认type属性值
A     大小字母A、B、C等等
a 小写字母a、b、c等等
Ⅰ 大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
ⅰ 小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等
value 指定一个新的序列数字起始值
列表可以进行嵌套
8) 
 定义列表
dl(definition list)：
创建定义列表
每一项以
(definition term)开始
每个项目以
(definition description)开始
使用场合：对列表条目进行简短的说明
格式
软件说明：
简单介绍软件的功能及基本应用
软件界面
用于选择软件的外观
软件说明
简单介绍软件的功能及基本应用
软件界面
用于选择软件的外观
9) 
 水平分割线标记
`
size：线的粗细/厚度 align：对齐方式 width：线的宽度 noshade：加入一条没有阴影的水平线
10) 
 分区显示标记，也称之为层标记
常用来编排一大段的HTML段落，也可以用于格式化表，和
很相似
层可以多层嵌套使用
2. 文本标记
1) hn 标题标记
共有6个级别，n的范围1~6，不同级别对应显示大小不同的标题，h1最大，h6最小
不要为了把文本字体加大或加粗而使用标题标记，因为搜索引擎会使用标题为网页结构与内容编制索引，所以用标题来呈现文档结构很重要
2) font 字体设置标记
设置字体的格式
三个常用属性
size(字体大小) 
color(颜色) 
face(字体) 
3) b
粗字体标记
4) i
斜字体标记
5) sub
文字下标字体标记
6) sup
文字上标字体标记
7) tt
打印机字体标记
8) cite
引用方式的字体，通常是斜体
9) em
表示强调，通常显示为斜体字
10) strong
表示强调，通常显示为粗体字
11) small
小型字体标记，可嵌套
12) big
大型字体标记，可嵌套
13) u
下划线字体标记

1.表格
1.表格语法
1.标记
1.表格
2.行
--table row
3.单元格/列
--table data
练习：
1.创建一个4行4列的表格
2.在table标记中嵌套tr
3.在tr中嵌套td
2.属性
1.table属性
border:表格边框
width:宽度
height:高度
align:设置表格的水平对齐方式
left/center/right
bgcolor:设置表格的背景颜色
cellpadding:设置单元格的内边距(内容与td之间的间距)
cellspacing:设置单元格外边距(td边框外的间距)
练习：
在练习一的基础上将表格的样式设置如下:
1.设置表格尺寸为400*400px
2.设置背景颜色为orange
3.设置表格水平居中对齐
4.设置内边距为5px
5.设置外边距为10px
2.tr属性
1.align 设置当前行内容的水平对齐方式
left/center/right
2.valign 设置当前行内容的垂直对齐方式
top/middle/bottom
3.bgcolor 设置当前行的背景颜色
练习：在练习二的基础上
1.设置第二行的数据靠右对齐
2.第二行背景颜色为紫色purple
3.设置第三行垂直方向靠上对齐
3.td属性
width:宽度
height:高度
align:水平对齐方式
valign:垂直对齐方式
bgcolor:背景颜色
colspan:跨列
rowspan:跨行
4.表格的复杂应用
1.行分组
可以将连续的几个行，划分到一个组中，并进行统一管理
1.表头行
表格中最上面一行进行分组的话，可以放在表头行中。
2.表主体行
表格中将若干行放在tbody中，进行统一管理
3.表尾行
将表格中最后一行进行分组管理的话，可以放在表尾行中。
2.不规则表格使用
1.跨列
colspan 从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除。
2.跨行
rowspan 从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除。
注意：
如果表格进行了分组管理，不能将不同组设置跨行操作。
5.可选标记
1.表格标题
如果设置表格标题，则必须将
放于
2.行/列标题
所有的td都可以用th取代
6.表格嵌套
表格的嵌套，在td中取嵌套另一个表格
2.列表
1.列表的作用
按照从上到下(从左到右)的方式来显示所有的数据，并且可以在数据前增加显示的标识。
2.列表组成
1.列表都是由"列表类型"和"列表项"来组成。
1.列表类型
有序列表：
--order list
无序列表：
2.列表项
用于展示数据(嵌套在列表类型中)
--list item
练习：
创建有序列表，4个列表项，每个列表项中分别写上四大名著的名称
2.列表属性
1.有序列表
1.type 指定列表标识的类型。
取值：
1 数字，默认值
a 小写字母
A 大写字母
I 大写罗马数字
i 小写罗马数字
2.start 指定起始编号从第 几 位置开始排序。
2.无序列表
1.type 指定列表的标识类型
取值：
1.disc 实心圆点
2.circle 空心圆
3.square 实心方块
4.none 不显示标识
3.列表嵌套
在一个列表项(li)中去嵌套另一个列表.
语法：
内容
内容
3.定义列表
1.什么是定义列表
定义列表常用于给出一类事物或对名词的解释说明。
2.语法
1.
 表示定义列表
2.
 表示定义列表中要解释说明的名词
3.
 表示定义列表中对名词解释的内容
名词
解释名词的具体内容
使用场合：图文混排时使用
3.结构标记
1.结构标记的作用
用于描述整个网页的结构(取代div做布局)
提升标记的语义性和可读性。
2.常用的结构标记
1.
作用：定义网页或某部分内容的头部。
2.
作用：定义网页的导航链接部分。
3.
作用：定义网页主体内容。
4.
作用：定义页面中侧边栏的信息，靠近边缘。
5.
作用：定义网页中偏底部的内容，比如：备案号，解释说明，联系方式等。
6.
作用：定义与文字相关的内容，如：论坛帖子，微博条目，用户评论等。
4.表单
1.作用
1.提供可以与用户交互的可视化控件(用户名和密码输入框，登录按钮等)
2.收集用户信息并提交给服务器
2.表单的组成部分
1.前端部分
表单控件，与用户交互的可视化控件
2.服务器端部分
对收集的数据进行提交(提交数据的处理)
3.表单
标记：
属性：
1.action
作用：定义表单被提交时发生的动作，通常定义的是服务器上处理程序的地址(url),默认提交给本页
2.method
作用：指定表单数据的提交方式
取值：
1.get(默认值)
1.明文提交，待提交的数据会显示在浏览器的地址栏中。
2.安全性不高
3.提交数据有大小限制，限制2KB
4.向服务器要数据时使用get方式
2.post
1.隐式提交，提交的数据不会显示在地址栏中。
2.安全性较高
3.提交数据无大小限制
4.要传递数据给服务器时使用。
3.delete 一般禁用
4.put 一般禁用
3.enctype
作用：指定表单数据的编码方式，允许将什么样的数据提交给服务器。
取值：
1.application/x-www-form-urlencoded
默认值，允许将任意的字符提交给服务器(文件无法提交)
2.multipart/form-data
允许将文件提交给服务器
3.text/plain
只能将普通文本提交给服务器
4.表单控件
能够与用户进行交互的可视化控件。
1.分类
1.input 元素
2.textarea-多行文本域元素
3.select和option-选项框元素
4.其它元素
2.input元素
1.作用
在页面中提供各种各样的输入控件。如：文本框，密码框，单选按钮，复选框...
2.语法
1.标记或
2.属性：
1.type 指定创建输入控件的类型
ex:
type="text"
type="password"
2.name 为控件定义名称，服务器端使用(必须值)
3.value 控件的值，服务器端使用
4.disabled 禁用控件，不能操作并且数据也不能提交给服务器。
无值属性，只要出现在标记中，就是禁用。
3.详解
1.文本框和密码框
文本框：
密码框：
属性：
1.maxlength
指定限制输入的字符数
2.readonly
只读，只能看，不能改，但允许被提交。
无值属性，直接将属性放在标记中。
3.placeholder
占位符，即默认显示在控件上的文本。
2.按钮
1.提交按钮
功能：将表单中的数据，提交给服务器程序使用
2.重置按钮
功能：将表单中的数据恢复到初试化状态。
3.普通按钮
没有功能
注意：
属性：value 定义按钮上显示的文字。
3.单选按钮和复习框
单选按钮：
复选框：
属性：
name 除了定义控件的名称之外，还能起到分组的作用。
checked 设置默认被选中，无值属性。
认识HTML中表格、列表标签以及表单控件
前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由
...
组合而成,效果成纵向列表.格式:&l ...
5.22  HTML  列表标签和表单标签
1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是
. ..
HTML之表格标签和form表单
表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...
Netsharp快速入门(之8) 基础档案(工作区2 设置商品主列表、规格细列表、商品表单、查询)
作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 3.5.1.1 列表设置 1.选择第一行主列表,点工具-列表方案 2.打开列表方案界面后,在列表项目填入需要用到实体Demo.Arc ...
Kure讲HTML_列表标签及表单标签
首先我上个图来告诉大家什么是列表 左侧的这一部分就可以称为是列表或者叫树,其实我们可以通过div+css实现列表,可是考虑语义化的问题,我们还是看看html提供好的列表标签,html提供了两种列表,一 ...
fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
K3/Cloud点按钮打开单据，列表，动态表单，简单账表和直接Sql报表示例
BOS IDE中配置了个界面,拖了动态表单界面,加了5个测试按钮. 点击“打开单据”维护界面, 会跳转到一个新的主界面页签,[物料]新增 点击“打开列表”,会弹出[物料]列表界面 点击“打开动态表单” ...
【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...
随机推荐
php获取数组第一个值 current()
获取数组第一个元素的值,如果是数字索引那还好,直接$array[0],如果键名是字符串,你又未知这个字符串呢?用current()函数就可以做到. current() 函数返回数组中的当前元素(单元) ...
搜狗2015校园招聘javaproject师面经
面试时看到了我的笔试题.真是慘不忍睹啊. . 1. 问回去有没有研究一下笔试题 木有,果断后面悲剧了 2. 解释一下笔试的一道选择题: 下列哪种操作可能带来死锁? A: lock(m1) lock(m ...
Windows环境下C++中关于文件结束符的问题
参考资料:http://www.cnblogs.com/day-dayup/p/3572374.html 一.前言 在不同的OS环境下,程序中对应的文件结束符有所不一样,根据
boost学习  内嵌类型检测 与 any 的代码练习
本文是学习 boost源码的一些练习 参考文章来自 刘未鹏 C++的罗浮宫(http://blog.csdn.net/pongba) 目录 http://blog.csdn.net/pongba/ar ...
loj #117. 有源汇有上下界最小流
题目链接 有源汇有上下界最小流,->上下界网络流 注意细节,边数组也要算上后加到SS,TT边. #include #include  ...
TL431的几种常用用法
TL431的主要作用是使得电路获得更稳定的电压,TL431是一种较为精密的可控稳压源,有着较为特殊的动态阻抗.其动态响应速度快,输出噪声低,价格低廉. 注意上述一句话概括,就是便宜,精密可控稳压源TL ...
SQL Operations Studio的安装和使用
之前管理和访问SQL SERVER使用的自然是SSMS,功能确实很强大的一个数据库图形化管理软件,但是SSMS有个问题就是体积超级大,启动速度也就比较慢.今天我正好要学习一些T-SQL的内容,在微软的 ...
pip安装报错解决
使用pip安装docker-compose时报 unsupported operand type(s) for -=: 'Retry' and 'int' 错误,经过一番google后,发现使用升级s ...
fiddler抓包-简单易操作(一)
1.下载fiddler 可以到fiddler官网去下,网址:https://www.telerik.com/download/fiddler 下载完成后,安装即可. 2.运行fiddler,进入fid ...