CH02_列表

本章目标

web开发工具
什么是列表
无序列表
有序列表
定义列表

一、常用前端开发工具

1.1 Sublime（推荐使用）

Sublime全称为Sublime Text，是一个代码编辑器，最早由程序员Jon Skinner于2008年1月开发出来。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图、功能插件等。Sublime text还是一个跨平台的编辑器，支Windows、linux、Mac等操作系统。

1.2 Visual Studio Code（推荐使用）

Visual Studio Code(简称“VS Code”)是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言(例如C++，C#，Java，Python，PHP，Go)和运行时(例如.NET和Unity)扩展的生态系统。

1.3 WebStorm（推荐使用）

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能

1.4 Dreamweaver（推荐UI设计师使用）

Dreamweaver简称DW(中文译为“梦想编织者”)，是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的“所见即所得”网页编辑器，2005年被Adobe公司收购。DW是第一套针对非专业网站建设人员的视觉化网页开发工具，利用它可以轻而易举地制作网页。

1.5 Hbuilder（推荐使用）

HBUilder是DCloud推出的一款支持HTML5的Web开发软件。“快”是BUilder的最大优势，通过完整的语法提示、代码输入法以及代码块等，HBuilder可以大幅提升HTML、JavaScript的开发效率。

二、Hbuilder创建Web项目

2.1 教会他们如何建立项目

2.2 点击左上角建立项目图标,选择项目,选择项目路径和类型点创建

注意:

<!DOCTYPE html>
<html>
	<head>
        <!--告知浏览器采用哪一种字符编码方式打开当前文件-->
        <!--由于当前HBuilder工具采用的字符编码格式时utf-8-->
        <!--所以打开的方式也要采用utf-8的方式-->
        <!--总之,这里的字符编码方式一定要和文件的自生的编码方式相同即可-->
        <!--如果编码方式不同会导致乱码-->
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

三、什么是列表

列表在我们编写页面中经常会使用到，我们也经常看到只是你之前没有认识它，现在我就带大家来认识认识一下它，打开淘宝或京东，腾讯体育等网站进行举例说明让同学都知道列表都用在网页哪里！那么列表又分为几大类：无须列表、有序列表、定义列表

特点：就是整齐、整洁、有序.

3.1 列表分类

3.2 无序列表

无序列表就，就和它的名字一样没有顺序的列表，通过往回网站浏览先让同学们看看无序列表，无序列表是一个项目的列表，此列表项目使用粗体圆点（经典的小圆点）进行标记如图所示!比如下面这些，新闻是没有顺序的，不用排队.

无序列表在各个列表之间没有顺序级别之分，是并列的。基本语法如下

<!-声明无序列表->
<ul>
    <!-声明列表项->
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ......
</ul>

属性：

type:取值

disc:项目符号显示为实体圆心，默认值

square:项目符号显示为实体方心

circle:项目符号显示为空心园

提示:可以在单个li使用该属性

注意：

1.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或文字的做法是不允许的

2.<li>与</li>之间相当于一个容器，可以容纳所有元素

3.无序列表会带有自己样式属性，放下那个样式，一定会我们让CSS来

4.ul和li这两个标签必须它是出现，不能单独书写

3.3 有序列表

有序、有序那么就是有顺序的列表!有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义. 有序列表始于 <ol> 标签。每个列表项始于<li> 标签。如图所示.

它的基本语法如下:

<!-定义有序列表->
<ol>
    <!-声明列表项->
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ......
</ol>

属性:

type:取值

1:使用数字作为项目符号

A/a:使用大写/小写字母作为项目符号

l/i:使用大写/小写罗马数字作为项目符号

提示:可以在单个li使用该属性

注意：

1.所有特征基本与ul一致

2.在实际工作中,较少使用ol,使用ul比较多

3.4 定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号,自定义列表不仅仅是一列项目，而是项目及其注释的组合.自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。如图所示

基本语法如下:

<!-定义自定义列表->
<dl>
    <!-定义标题->
   <dt>名词1</dt>
    <!-定义定义描述->
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
   ...
   <dt>名词2</dt>
   <dd>名词2解释1</dd>
   <dd>名词2解释2</dd>
   ...
 </dl>

注意:

1.dl 里面嵌套了 dt 和 dd. dt 和 dd是同一级标签, dd 是 dt的解释,说明,定义.

2.dl 里面只能放置dt,dd. dt 和 dd都是容器级标签,里面的内容是不限制的,

3.dl 里面可以放置多组dt 和 dd. dt后面的dd 可以有多个. 这些dd都是在解释上面的dt

4.dt 里面可以没dd,表示没有解释说明.

5.实际工作中,经常将每一组dt和dd单独放在dl标签内部