html有序列表和无序列表

格式：doc
大小：147.50 KB
文档页数：4

下载文档原格式

/ 4

HTML（5）常用的格式标签

HTML（5）常⽤的格式标签⼀、基本⽂字格式1.标题<h></h> HTML定义<h1></h1>到<h6></h6>六个<h>标签，分别⽤来不同⼤⼩字体的标题（Heading）。

字体由⼤到⼩，<h1>最⼤，<h6>则最⼩。

Heading标签需要注意的是：a.浏览器会⾃动地在标题的前后添加空⾏。

因为Heading标签属于块级元素，⽽在默认情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏（<br/>）。

b.标题对整个页⾯来说很重要,应该将HTML heading 标签只⽤于标题，⽽不要仅仅是为了产⽣粗体或⼤号的⽂本⽽使⽤标题。

因为Heading标签对SEO是很友好的，搜索引擎使⽤标题为您的⽹页的结构和内容编制索引，⽽且⽤户则以通过标题来快速浏览您的⽹页，所以⽤标题来呈现⽂档结构是很重要的。

应该将 <h1> ⽤作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。

12<h1>3中国⼀</h1>4<h2>5中国⼆</h2>6<h3>7中国三</h3>8<h4>9中国四</h4>10<h5>11中国五</h5>12<h6>13中国六</h6> 效果如下图，字体⼤⼩由⼤到⼩：2.换⾏<br/>、不换⾏<nobr></nobr>和分段<p></p> 关于HTML中的换⾏标签<br/>和分段标签<p></p>的区别是，换⾏标签<br/>只是回车，<p></p>则是分段。

HTML的基本应用

HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。

超文本传输协议规定了浏览器在运行HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网)的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。

HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接HTML标记语言的特点：浏览器对HTML的语法要求不是特别严格，不区分大小写，属性值可以加双引号或不加，（这里的双引号是英文的而不是中文的双引号）。

可以用Dreamweaver、记事本或其他工具编写HTML源文档。

（简单方便）HTML文档构成网页的源代码。

浏览器读取*.htm或*.html文件中的标记，并根据这些标记来显示页面。

1.HTML文档结构HTML文档主要由3部分组成。

（1）HTML部分。

HTML标签告诉浏览器这两个标签中间的内容是HTML文档。

<html>...</html>（2）头部。

这部分包含显示在网页导航栏中的标题和其他在网页中不显示的信息。

标题包含在<title>和</title>标签之间。

<head><title>...</title></head>（3）主体部分。

列表、表格、和表单

列表、表格、和表单列表1.容器⾥⾯装载着结构，样式⼀致的⽂字或图表的⼀种形式叫列表。

2.列表最⼤的特点就是整齐、整洁、有序，跟表格类似。

但列表的⾃由度更⾼。

3.列表分为有序列表、⽆序列表和⾃定义列表。

4.在前端开发中我们最常⽤的就是⽆序列表。

⽆序列表<ul><li></li></ul>有序列表<ol><li></li></ol>⾃定义列表<dl><dt></dt><dd></dd></dl>表格1.创建表格的基本语法<table><tr><td>单元格内的⽂字</td>...</tr>...</table>2.表格的主要⽬的是⽤来显⽰特殊数据的。

3.⼀个完整的表格有表格标签(table)，⾏标签(tr),单元格标签（td）组成，没有列的标签。

4.表格中的属性。

这⾥列举两个⽐较重要的cellspacing、cellpadding。

cellpadding设置单元格内容与单元格边框之间的空⽩间距。

默认为1像素cellspacing设置单元格与单元格边框之间的空⽩间距。

默认为2像素5.合并单元格。

两种⽅式rowspan和colspan，分别是跨⾏合并和跨列合并。

合并单元格的顺序按照先上、后下、先左、后右的顺序。

6.对于⽐较复杂的表格，表格的结构也就相对复杂。

所以⼜将表格分割成三个部分：表格头、正⽂和脚注。

这三个部分分别⽤thead、tbody、tfoot来标注，这样能更好的愤青表格的结构。

7.以上的所有标签都放到table标签中。

表单1.表单的⽬的是为了收集⽤户信息。

2.⼀个完整的表单通常由表单控件、提⽰信息和表单域三个部分组成。

表单控件包含了具体的表单功能项。

单⾏⽂本输⼊框、复选框、提交按钮等提⽰信⼀些说明性的⽂字，提⽰⽤户进⾏填写和操作息表单域容器。

网页设计与制作试题与html代码大全

<IMG>的视频标记功能
利用<IMG>还可以变相的插入视频
功能：在网页中加入视频信息，格式一般为*.AVI。
格式：<IMG src=“image-URL” dynsrc=“avi-URL” loop=“n” start=“开始时间” controls loopdelay=“时间间隔”>。
2.3.2背景音乐标记
属性如下。
（1）cols：左右分割窗口（用“，”分割，value为定义各个框架的宽度值，单位可以是百分数、绝对像素值或星号(“*”)，其中星号表示剩余部分）。
<CAPTION align=“TOP/BOTTOM/LEFT/RIGHT”>表题（表格说明）</CAPTION>
<TR>
<TH>表头1</TH><TH>表头2</TH>……….<TH>表头n</TH>
</TR>
<TR>
<TD>表项1</TD><TD>表项2</TD>……….<TD>表项n</TD>
属性如下。
（1）behavior：设置文字滚动方式。共有三种滚动方式供选择：behavior =“alternate”时，文字将交替进行滚动；behavior =“scroll”时，文字将循环往复滚动；behavior =“slide”时，文字将只进行一次滚动。
（2）bgcolor：为滚动文字添加背景颜色。
1．表单标记<FORM>
2．输入标记<INPUT>
输入标记<INPUT >是表单中最常用的标记之一。该标记用来定义一个输入区，可在其中输入信息，此标记必须放在<FORM></FORM>标记对之间。

HTML基础知识

上一页下一页返回
2.4 HTM L标记
2.图像标记<IMG>
在HTML中，使用IMG标记在网页中加入图像。它具有两个基本属性src和alt，分别用于设置图像文件的位置和替换文本。
上一页下一页返回
2.4 HTM L标记
2.4.6超链接标记
1.相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联
上一页下一页返回
2.4 HTM L标记
2.4.3文本标记
1.<FONT> <FONT>标记用于控制网页上文字的字体，大小和颜色。
控制方式是利用属性设置得以实现的。 2.特殊符号
某些字符在HTML中具有特殊意义，如小于号(<)即定义HTML标记的开始。这个小于号是不显示在最终看到的网页单的。那如果希望在网页中显示一个小于号，该怎么办呢? 要在浏览器中显示这些特殊字符，就必须在HTML文档中使用字符实体。
在<TD>和<TH>标记内使用colspan的取值表示水平方向上合并的列数。
上一页下一页返回
2.4 HTM L标记
2.4.8表单标记
1.表单元素 <FORM>标记：用于在网页中创建表单区域，属于一
个容器标记，表示其他表单标记需要在它的包围中才有效。其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。 method：此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法(用POST方法还是用GET方法)。
上一页下一页返回
2.4 HTM L标记
2.4.10脚本标记
有时，网页中的一些特殊效果击要加入脚本语言才能够实现，脚本语言是一种简化的编程语言，它可以生成许多的网页特效，如滚动的文字、雪花效果、波浪效果等。‘常用的脚本语言有3种，分别是JavaScript， VBScript和 Jscript。其中JavaS cript是IE不II Navigator都完全支持的脚本语言，所以使用得最广泛。

HTML基本语法

什么是 HTML？HTML 是用来描述网页的一种语言。

    HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签HTML 文档 = 网页   HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页HTML 标题HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

注：1最大HTML 段落paragraphHTML 段落是通过 <p> 标签进行定义的。

HTML 链接HTML 链接是通过 <a> 标签进行定义的。

HTML 图像HTML 图像是通过 <img> 标签进行定义的。

HTML 文档是由 HTML 元素定义的。

HTML 元素HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签 <p> <a href="default.htm" > <br /> <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

HTML

20
引文标签 (缩排标签）<blockquote>
<blockquote>标签可以用来建立一个引文，特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别。实例：3-5.html

21
水平分隔线标签<hr>

<hr>标签是单独使用的标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置<hr>标签的属性值，可以控制水平分隔线的样式。
字号范围为 1---- 7
30
3.颜色属性COLOR
基本语法:
<FONT COLOR=“颜色值”>文字</FONT>
实例：3-10-2.html
31
特定文字样式标签
粗体标签<b>:放在<b>与</b>标签之间的文字将以粗体方式显示。斜体标签<i>:放在<i>与</i>标签之间的文字将以斜体方式显示。下划线标签<u> :放在<u>与</u>标签之间的文字将以下划线方式显示。

<HEAD></HEAD>是HTML文档的头部标签
<title>和</title>
文档标题，它被显示在浏览器窗口的标题栏。

<BODY> </BODY>标签之间的文本是正文，是在浏览器要显示的页面内容。例 1－2.html
7
2.HTML主体标签及属性、颜色的设定
8
HTML的主体标签<body>

html里面li的用法

HTML中的`<li>`标签是用来创建列表项目（列表项）的。

通常，`<li>`标签用于`<ul>` 或`<ol>` 列表中，它们分别代表无序列表和有序列表。

这些列表可以通过`<li>`标签的嵌套和属性进行格式化。

下面是对`<li>` 标签的基本用法的一些详细解释：1. **创建列表项**：`<li>`标签是HTML列表的基本组成部分，用于创建列表中的每一个项目。

例如：```html<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>```在上述代码中，每个`<li>` 标签都代表一个列表项。

浏览器将它们渲染为一系列的列表项。

2. **嵌套**：你可以使用`<li>` 标签来创建嵌套的列表项。

例如：```html<ul><li>项目1<ul><li>子项目1</li><li>子项目2</li></ul></li><li>项目2</li></ul>```在这个例子中，外部的`<li>` 标签包含一个内部的`<ul>` 标签，后者又包含两个`<li>` 标签作为其子项目。

3. **有序列表**：如果你想创建一个有序列表，你可以使用`<ol>` 标签，并使用`<li>` 标签作为其子元素。

例如：```html<ol><li>项目1</li><li>项目2</li></ol>```这将创建一个带有编号的项目列表。

第2章 HTML语言—4

2.4.4 列表标记

有序列表的属性标记：< type >、<start>
1. 基本语法：
<OL type=value1 start=value2> <LI> 项目1 <LI> 项目2 …… </OL> value1表示有序列表项目符号的类型 value2表示项目开始的数值
注：
有序列表的类型： 1 ：数字 1 ，2 ，3…… a : 字母 a , b , c…… A : 字母 A , B , C…… i : 小写罗马数字 I , ii , iii…… I : 大写罗马数字Ⅰ，Ⅱ，Ⅲ
2.4.4 列表标记

无序列表标记 <UL> 基本语法： <UL> <li> 项目1</li> <li> 项目2</li> …… </UL>
2.4.4 列表标记

无序列表的类型属性 < Type > 基本语法： <UL type = value> <LI> 项目1 <LI> 项目2 …… </UL>
2.4.5 分节标记

3.导航标记<nav> <nav>标记用于定义网页中的导航栏。例如：
<nav> <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> </ul> </nav>

li元素间距

li元素间距在HTML中，li元素是用来表示无序列表（unordered list）和有序列表（ordered list）的标签。

li元素间距指的是在li元素之间的距离，也就是列表项之间的间隔。

在HTML中，默认情况下，li元素之间是紧密相连的，没有任何间距。

不过，我们可以通过CSS样式来设置li元素之间的间距，以满足我们的需求。

一般情况下，我们可以使用margin属性来设置li元素间的间距。

例如，我们可以通过设置margin-bottom属性为10px来给li元素添加一个底部的间距。

这样，每个li元素之间就会有一个10px的间距。

我们还可以使用padding属性来设置li元素的内边距，从而间接地控制li元素之间的间距。

例如，我们可以设置li元素的padding-bottom属性为10px，这样每个li元素的底部就会有一个10px的间距。

除了使用margin和padding属性来设置li元素间距之外，我们还可以使用其他一些方法来实现类似的效果。

例如，我们可以使用border属性来设置li元素的边框，并通过设置border-bottom属性来给每个li元素添加一个底部的边框，从而实现li元素间距的效果。

需要注意的是，在设置li元素间距时，我们应该考虑到整个页面的布局和样式。

如果li元素间距太大，可能会导致页面显得松散；而如果li元素间距太小，可能会导致页面显得拥挤。

因此，在设置li元素间距时，我们需要根据具体的情况来进行调整，以达到最佳的效果。

li元素间距是通过CSS样式来控制的，我们可以使用margin、padding、border等属性来实现不同的效果。

在设置li元素间距时，我们应该考虑到整个页面的布局和样式，以达到最佳的效果。

通过合理地设置li元素间距，我们可以使页面结构清晰，易于阅读。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

编写有序列表，代码如下：[html]view plaincopyprint?
1.<html>
2.<h2>数字显示</h2>
3.<ol>
4.<li>第一天</li>
5.<li>第二天</li>
6.<li>第三天</li>
7.<li>第四天</li>
8.</ol>
9.
10.<h2>字母显示</h2>
11.<ol type="a">
12.<li>第一天</li>
13.<li>第二天</li>
14.<li>第三天</li>
15.<li>第四天</li>
16.</ol>
17.
18.<h2>小写罗马数字显示</h2>
19.<ol type="i">
20.<li>第一天</li>
21.<li>第二天</li>
22.<li>第三天</li>
23.<li>第四天</li>
24.</ol>
25.
26.<h2>大写罗马数字显示</h2>
27.<ol type="I">
28.<li>第一天</li>
29.<li>第二天</li>
30.<li>第三天</li>
31.<li>第四天</li>
32.</ol>
33.
34.<h2>数字显示,自己确定开始数字</h2>
35.<ol start="5">
36.<li>第一天</li>
37.<li>第二天</li>
38.<li>第三天</li>
39.<li>第四天</li>
40.</ol>
41.<html>
显示效果为：
无序列表的代码如下：
[html]view plaincopyprint?
1.<html>
2.********默认为实心圆*********
3.<ul>
4.<li>第一天</li>
5.<li>第二天</li>
6.<li>第三天</li>
7.<li>第四天</li>
8.</ul>
9.
10.********空心圆显示*********
11.<ul type="circle">
12.<li>第一天</li>
13.<li>第二天</li>
14.<li>第三天</li>
15.<li>第四天</li>
16.</ul>
17.
18.********实心矩形显示*********
19.<ul type="square">
20.<li>第一天</li>
21.<li>第二天</li>
22.<li>第三天</li>
23.<li>第四天</li>
24.</ul>
25.</html>
显示效果为：。