HTML列表详解:无序列表、有序列表、自定义列表

HTML 支持无序列表ul(unordered list)、有序列表ol(ordered list)和自定义列表dl(definition list):

HTML列表

(一)HTML无序列表ul

无序列表ul的各个列表项之间没有顺序级别之分,是并列的,其基本语法格式如下:

<ul type=…>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ul>

无序列表中type属性的常用值有三个,它们呈现的效果不同:
小黑点:disc(默认值);
方块:square;
空心圆:circle。

举例:

HTML无序列表举例

<ul type=”square”>
<li>吉林联通百兆独享:$899 /月</li>
<li>江苏电信特价百兆:$1099 /月</li>
<li>山东联通百兆独享:$899 /月</li>
<li>黑龙江联通百兆独享:$899 /月</li>
</ul>

(二)HTML有序列表ol

有序列表ol即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,其基本语法格式如下:

<ol >

<li >项一</li>

<li >项二</li>

</ol>

有序列表其属性  type   start

-语法格式:

<ol  type=value1    start=value2>

<li></li>

</ol>

(1)、type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。value1表示有序列表项目符号的类型。

   type类型         描述
Type=1 表示列表项目用数字表示(1,2,3…..)
Type=a 表示列表项目用小写字母表示(a,b,c..)
Type=A 表示列表项目用大写字母表示(A,B,C..)
Type=i 表示列表项目用小写罗马数字表示(i,ii,iii….)
Type=I 表示列表项目用大写罗马数字表示(I,II,III…)

(2)、start是编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略。value2表示项目开始的数值。

或是在<li>标签中设定value=”n”改变列表行项目的特定编号,例如<li value=”7″>。使用这些属性,把它们放在<ol>或<li>的的初始标签中。

举例:

HTML有序列表举例

<ol type=”a” start=”3″>
<li>吉林联通百兆独享:$899 /月</li>
<li>江苏电信特价百兆:$1099 /月</li>
<li>山东联通百兆独享:$899 /月</li>
<li>黑龙江联通百兆独享:$899 /月</li>
</ol>

(三)HTML自定义列表dl

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>

<dt>名词1</dt>

<dd>名词1解释1</dd>

<dd>名词1解释2</dd>

<dt>名词2</dt>

<dd>名词2解释1</dd>

<dd>名词2解释2</dd>

</dl>

举例:

HTML自定义列表举例

<dl>
<dt>YUNVM.COM吉林联通百兆独享特价!$899 /月</dt>
<dd>数据中心:吉林延边联通 </dd>
<dd>4 核CPU 4 GB内存 </dd>
<dd>100 Mbps带宽 120 GB存储 </dd>
</dl>
<dl>
<dt>YUNVM.COM江苏电信特价百兆降价了!$1099 /月</dt>
<dd>数据中心:江苏镇江电信 </dd>
<dd>4 核CPU 4 GB内存 </dd>
<dd>100 Mbps带宽 120 GB存储 </dd>
</dl>


原创文章,欢迎分享,转载请注明出处www.yunvm.com

HTML常用标签的语义

理解HTML的标签的含义更有利于记忆,记忆 HTML标签的语义 是学习HTML的基础。

YUNVM和您分享常用的HTML标签及其语义:

HTML常用标签语义对照表
标签名 英文全称 中文解释
div division 分割(块元素)
span span 区域(行内元素)
p paragraph 段落
ol ordered list 有序列表
ul unordered list 无序列表
li list item 列表项
dl definition list 定义列表
dt definition term 定义术语,即列表中的一个项目
dd definition description 定义描述
h1~h6 header1 ~header6 标题1~标题6
hr horizontal rule 水平线
a anchor 锚点,超链接
strong strong 强调(粗体)
em emphasized 强调(斜体)
sup superscripted 上标
sub subscripted 下标
br break 换行
fieldset fieldset 域集
legend legend 图例,为 <fieldset>元素定义标题
caption caption (表格、图像等)标题
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
td table data 表身单元格,即表单数据

原创文章,欢迎分享,转载请注明出处www.yunvm.com

Html的结构和标签

Html (Hyper Text Markup Language ) “超文本标记语言”,之所以称为超文本标记语言,不仅是因为他通过标记描述网页内容,同时也由于文本中包含了“超级链接”,通过超链接可以实现网页的跳转,从而构成了丰富多彩的Web页面。

(一)HTML结构详解

学习任何一门语言,都要首先掌握它的基本格式。HTML标记语言也不例外,同样需要遵从一定的规范。

Html结构

<html>

<head>
这里是文档的头部 … …

</head>

<body>
这里是文档的主体 … …

</body>

</html>

符号  HTML基本文档格式—<html> 标记

<html>称为根标记,限定了文档的开始点和结束点,用于告知浏览器其自身是一个 HTML 文档, <html>标记标志着HTML文档的开始,</html>标记标志着HTML文档的结束,在他们之间的是文档的头部和主体内容。
<html  lang=”en”>   向搜索引擎表示该页面是html语言,默认就是设置的en,其”lang”的意思就是“language”,语言的意思,而“en”即表示english。中文lang属性设置zh-CN。

符号  HTML基本文档格式—<head> 标记

<head>标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在<html>标记之后,主要用来封装其他位于文档头部的标记。标签用于定义文档的头部,它是所有头部元素的容器。

一个HTML文档只能含有一对<head>标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, <title>
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。

符号  HTML文档头部相关标记—<title>标记

<title>标记用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记,<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下:

<title>网页名称</title>

示例如下图:

title标签示例

符号  HTML基本文档格式—<body> 标记

<body>标记用于定义HTML文档所要显示的内容,也称为主体标记。body 标记包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。),<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记,且<body>标记必须在<html>标记内,位于<head>头部标记之后。

(二)标签关系

1.嵌套关系

嵌套关系:类似父亲和儿子之间的关系
<html>

<head></head>

<body></body>

</html>
2.并列关系

并列关系:类似与兄弟之间的关系

<head></head>

<body></body>

(三)HTML标签分类

符号  HTML标记—双标记

双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下:

    <标记名></标记名>

该语法中“<标记名>”表示该标记的作用开始,一般称为“开始标记(start tag)”,“</标记名>” 表示该标记的作用结束,一般称为“结束标记(end tag)”。和开始标记相比,结束标记只是在前面加了一个关闭符“/”。

符号  HTML标记—单标记

单标记也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下:

   <标记名/>

举例:

1、<hr />是单标记,在网页中输入一个<hr />,就添加了一条默认样式的水平线。

2、<br />是换行标记,某段文本强制换行显示。

3、图像标记<img />

符号  HTML标记—注释标记

在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标记。其基本语法格式如下:

<!–这是一段注释。注释不会在浏览器中显示。–>

注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。这样做的好处很多,比如:方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.它可以用来提醒网页设计人员回忆相关的程序信息。

符号  HTML标记—特殊符号标记

HTML 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; 引号
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp; 不断行的空白

原创文章,欢迎分享,转载请注明出处www.yunvm.com