html标记列表（html表单标记）

本篇文章给大家谈谈html标记列表，以及html表单标记对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、html5常用标记总结
• 2、html标签大全及用法
• 3、Html中的列表
• 4、HTML列表有哪些类型呢？

html5常用标记总结

一、文本标签

1.1 标题标记：hn align=”对齐方式”标题文本/hn

注意：

1.标题准备了h1----h6的标题，按照字号依次递减(块级元素)

2.align表示对齐方式，其值为left,center,right

1.2 字体标记：font face=”字体名称” size=”字号” color=”字体颜色” 文字/font

注意：中文网页以黑体，宋体，3号字的效果显示

1.3 段落标记：p align=”对齐方式” 段落内容/p

注意：p可以作为单标记或双标记：

单标记：段落与上文产生一个空行的间距。

双标记：段落与上下文之间产生一个空行的间距

1.4 换行标记：

注意：br /表示换行，多次换行多次使用br /

1.5 预格式化标记：pre...../pre

注意：预格式化标记可将空格、制表符、回车符等忽略

1.6 转义字符：转义字符让特殊字符显示出来。

语法：实体名称;

二、列表标记

2.1 无序列表

ul type=”列表项的标签符”

li项目一/li

li项目二/li

li项目三/li

......

/ul

注意： type表示了项目符号：

disc(默认) 实心圆

circle：空心圆

square：实心方块

2.2 有序列表：

ol type=”列表项的标记符” start=”起始值”

li项目一/li

li项目二/li

li项目三/li

......

/ol

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,从第几个数开始计算

2.3 嵌套排列

ol type="1"

lih/li

lit/li

ul type="disc"

lim/li

lil/li

/ul

li5/li

/ol

2.4 分割线标记：hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”

color=”水平线颜色”

三、超链接标记

3.1 文本链接：a href=”目标URL” target=”目标窗口”指针文本/a

注意： 1.href表示文本链接的目标资源的URL

绝对地址和相对地址

绝对地址：在任何情况下都可以找到的地址（例如：网址）

相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg 表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。

3.2 图片标记：img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/

3.3 多媒体标记

3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果

marquee..../marquee

marquee的属性：

behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)

bgcolor:跑马灯的背景颜色

direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移动的延迟时间，单位毫秒

loop:跑马灯运行次数，-1表示无限循环

height、width

hspace:左右空白宽度

vspace:上下空白宽度

3.3.2 嵌入音乐文件

audio src=”文件地址” 提示文字/audio

3.3.3 嵌入视频文件

video src=”视频文件地址” controls=”controls”提示文字/video

四、表格

4.1 表格基本语法：

table

tr

......

td单元格内容/td

......

/tr

/table

注意：

table:声明一个表格对象

tr:声明一行

td:声明一个单元格

4.2 表格的基本属性

1.align 对齐方式：left、center、right

2.border:表格边框

3.bordercolor:边框颜色

4.bgcolor:表格背景颜色

5.background:背景图片

6.height、width

4.3 单元格合并

1.rowspan:所跨的行数

2.colspan:所跨的列数

五、表单

5.1 表单标签：form action=”URL” method=”get|post” target=”...”/form

注意：form：该标记中包含的数据将被提交到服务器或者电子邮件中

action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址

method:get/post:数据传输到服务器的传递方法

target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开

_self:在当前浏览器中显示

5.2 表单标记

5.2.1 input标签：input type=”类型” name=”服务器 获取用户输入信息的名字” value=”初始值”

注意：1.type类型（输入类型）:

1. text:单行文本框

2. password:密码输入框

3. radio:单选按钮 checked表示默认

4. checkbox:复选框 checked表示默认

5. submit:提交按钮

6. reset:重置按钮

7. button:普通按钮

2.maxlength：输入的最大长度

5.2.2 select标签

select name=”” size=”” multiple

option value=”选项1” 选项1

.......

option value=”选项n” 选项n

/select

注意：name:服务器 获取用户输入信息的名字

value ：初始值

option：下拉框的内容

multiple:多选，若没有multiple则是单选

selected:表示默认选项

size:表示长度

5.2.3 textarea 标签：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”

/textarea

注意: name：多行文本框的名称

cols：一行可容纳的字符数

rows：表示可显示额的行数

wrap:virtual和phycal控制自动换行

html标签大全及用法

html常用标签如下：

1、在HTML中，表格的标签是＜table＞＜/table＞。

2、在HTML中，单元格的标签是＜td＞＜/td＞。

3、在HTML中，表格的行标签是＜tr＞＜/tr＞。

4、在HTML中，表示空格的特殊符号是＆nbsp；。

5、在HTML中，表单控件的标记符是＜form＞＜/form＞。

6、在HTML中，表单中多行文本域的标记符是＜textarea＞＜/textarea＞。

7、在HTML中，超文本文件的扩展名是.html。

8、在HTML中，插入图片的标记符是＜imgsrc＝”图片地址”＞。

9、在HTML文件中，表示文件主体部分的标签是＜body＞＜/body＞。

10、在HTML文件中，标题的标记符是＜title＞＜/title＞。

11、在HTML中，用来定义超文本文档的标记符是＜a＞。

12、在HTML中，用来介绍与文件内容有关的信息.的标记符是＜head＞＜/head＞。

13、在HTML中，换行标记符是＜br＞。

14、在HTML中，用来定义段落的标记符是＜p＞＜/p＞。

15、在HTML中，用来定义黑体的标记符是＜b＞＜/b＞。

16、在HTML中，用来定义斜体.的标记符是＜i＞＜/i＞。

17、在HTML中，用来显示文字加下划线.的标记符是＜u＞＜/u＞。

18、在HTML中，用来定义无序列表的标记符是＜ul＞＜/ul＞。

19、在HTML中，用来定义有序列表.的标记符是＜ol＞＜/ol＞。

20、在HTML中，超链接中用来指明超链接目标的属性的标记是＜ahref＝”地址”＞＜/a＞。

Html中的列表

Html中列表共有三种：有序列表、无序列表和自定义列表。下面分开解释下：

1.有序列表是一列使用数字进行标记的项目，它使用li包含于ol标签内。示例如下：

执行效果为：1.语文

                   2.数学

                   3.体育

                   4.英语

有序列表在当列表项目的每个列表项目前面需要一个递增值得时候使用（例如1,2，3等）。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。大部分情况下，有序列表要么前面是个递增数值，要么前面没有任何标记。

2.无序列表：是一组使用黑点庄进行标记的项目，它使用li包含在ul标签内；

实现的效果：

无序列表的一些特定的css属性有list-style-type,list-style-position和list-style-image.这些睡在那个设置了列表项目符号的类型，标记的位置，以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

3.定义列表：语义上表示项目及其注释的组合，它以dl标签开始，自定义列表以dt开始，自定义列表项的定义以dd开始。实例如下：

效果如下：

注意：可以在单个dd下面使用多个dt，也可以在单个dt下面使用多个dd。

从语义上来讲，三组标签分别对应不同具有含义的列表：无序列表适合元素之间无级别顺序关系的情形；有序列表适合各项目之间存在顺序关系的情形；定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，即dt与dd在其中数量不限，对应关系不限。

列表中的CSS：

列表最重要的CSS属性便是list-style属性，他的语法如下：

list-style:list-style-image||list-style-position||list-style-type

list-style-image可定义列表前所使用图片，list-style-position属性取值含outside、inside;outside为默认值，列表项目标记此时被放置在文本之外，它将环绕文本在文本之外，inside列表项目旋转在文本之内，环绕文本对齐。示例如下：

执行效果如下：

list-style-type我列表显示乐行，常见的9种属性值：a.disc：默认值，实心圆；b.circle:空心圆；c.square:实心方块；d.decimal:阿拉伯数字；e.lower-roman:小写罗马数字；f：upper-roman:大写罗马数字；g.lower-alpha:小写英文字母；h.upper-alpha:大写英文字母；i.none:不适用项目符号

列表之间的嵌套： 在Html里允许在一个列表里嵌套另一个列表，每个嵌套的列表都会再一次以缩进形式显示，但不建议对列表进行多次嵌套，这样在浏览器的显示会有点乱。在HTML中，无序列表中除了可以嵌套无序列表，也可以嵌套有序列表，反之亦然。示例如下：

执行效果：

参考：

1. 关于html中的列表 - walkingp - 博客园

2. html之列表 - 郑志伟 - 博客园

3. CSS有序列表无序列表嵌套冲突问题测试实例页面

HTML列表有哪些类型呢？

HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。

HTML 为我们提供了三种不同形式的列表：

有序列表，使用 ol + li 标签

无序列表，使用 ul + li 标签

定义列表，使用 dl + dt + dd 标签

1. 有序列表

在 HTML 中， ol 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。

我们来看一个简单的实例：

!DOCTYPE html

html

head

  meta charset="UTF-8"

  titleHTML有序列表/title

/head

body

  p煮米饭的步骤：/p

  ol

      li将水煮沸/li

      li加入一勺米/li

      li搅拌均匀/li

      li继续煮10分钟/li

  /ol

/body

/html

有序列表需要使用 ol 和 li 标签：

ol 是 order list 的简称，表示有序列表，它可以为列表的每一项进行编号，默认从数字 1 开始。

li 是 list item 的简称，表示列表的每一项，ol 中有多少个 li 就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。

注意，ol 一般和 li 配合使用，不会单独出现，而且不建议在 ol 中直接使用除 li 之外的其他标签。

2. 无序列表

HTML 使用 ul 标签来表示无序列表。无序列表和有序列表类似，都是使用 li 标签来表示列表的每一项，但是无序列表之间的内容没有顺序。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

我们来看一个简单的例子：

!DOCTYPE html

html

head

  meta charset="UTF-8"

  titleHTML无序列表/title

/head

body

  p早餐的种类：/p

  ul

      li鸡蛋/li

      li牛奶/li

      li面包/li

      li生菜/li

  /ul

/body

/html

浏览器运行结果如图所示：

无序列表需要使用 ul 和 li 标签：

ul 是 unordered list 的简称，表示无序列表。

ul 和 ol 中的 li 一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。

注意，ul 一般和 li 配合使用，不会单独出现，而且不建议在 ul 中直接使用除 li 之外的其他标签。

3. 定义列表

在 HTML 中，dl 标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

定义列表具体语法格式如下：

dl

  dt标题1dt

  dd描述文本2dd

  dt标题2dt

  dd描述文本2dd

  dt标题3dt

  dd描述文本3dd

/dl

定义列表需要使用 dl、dt 和 dd 标签：

dl 是 definition list 的简称，表示定义列表。

dt 是 definition term 的简称，表示定义术语，也就是我们说的标题。

dd 是 definition description 的简称，表示定义描述 。

可以认为 dt 定义了一个概念（术语），dd 用来对概念（术语）进行解释。

注意，dt 和 dd 是同级标签，它们都是 dl 的子标签。一般情况下，每个 dt 搭配一个 dd，一个 dl 可以包含多对 dt 和 dd。

我们来看一个简单的例子：

!DOCTYPE html

html

head

  meta charset="UTF-8"

  titleHTML定义列表/title

/head

body

  dl

      dtHTML/dt

      ddHTML 是一种专门用来开发网页的标记语言，您可以转到《a href="#"HTML教程/a》了解更多。/dd

      dtCSS/dt

      ddCSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《a href="#"CSS教程/a》了解更多。/dd

      dtJavaScript/dt

      ddJavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《a href="#"JS教程/a》了解更多。/dd

  /dl

/body

/html

dt 和 dd 虽然是同级标签，但是它们的默认样式不同，dd 带有一段缩进，而 dt 顶格显示，这样层次更加分明。

4. 总结

列表分类 说明

有序列表 ol 表示有序列表，li 表示列表中的每一项，默认使用阿拉伯数字编号。

无序列表 ul 表示无序列表，li 表示列表中的每一项，默认使用●符号作为作为每一项的标记。

定义列表 dl 表示定义列表，dt 表示定义术语、dd 表示定义描述。一般情况下，每个 dt 搭配一个 dd，一个 dl 可以包含多对 dt 和 dd。

关于html标记列表和html表单标记的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。