Working with lists in HTML 使用 HTML 中的列表 There are lots of occasions when we need to use lists. HTML provides us with three different types: Ordered lists, unordered lists, definition lists.
在很多情况下，我们需要使用列表。 HTML 为我们提供了三种不同的类型：有序列表，无序列表， 定义列表。

DISPLAY
<p>Demystifying the Mystery: <abbr title=”Queensborough Community College”>QCC </abbr>Physics professor addresses “Ripples in Space-Time”.</p>
basic.html

Ordered listed 订购上市 Ordered lists are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.
有序列表是对列表中的每个项目进行编号的列表。 例如，该列表可能是必须按顺序执行的配方的 一组步骤，或者是需要用分区号标识每个点的法律合同。
The ordered list is created with the <ol> element.
使用<ol>元素创建有序列表。
Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.)
列表中的每个项目都放在开始<li>标签和结束</ li>标签之间。 （li 代表列表项。）

Ordered List – “type” attribute 有序列表–“类型”属性(“type”) Attributes provide additional information about HTML elements.
属性提供有关 HTML 元素的其他信息。

DISPLAY
<p><b>How to pass ET570 with a good grade:</b> <ol> <li>Never miss classes</li> <li>Always participate in class activities and finish them on time</li> <li>Dedicate at least 2 hours of my free time to practice the codes I learned in my class</li> <li>Seek help from my professor, classmates, or tutors in case I do not understand the class material</li> <li> Never give up!</li> </ol> </p> HTML

The type attribute of the <ol> tag, defines the type of the list item marker. Attributes provide additional information about HTML elements.
<ol>标记的 type 属性定义列表项标记的类型。 属性提供有关 HTML 元素的其他信息。

Type Description
type=”1″
The list items will be numbered with numbers (default) 列表项将用数字编号（默认）
type=”A”
The list items will be numbered with uppercase letters. 列表项将以大写字母编号
type=”a”
The list items will be numbered with lowercase letters. 列表项将以小写字母编号
type=”I”
The list items will be numbered with uppercase roman numbers. 列表项将使用大写罗马数字编号
type=”i”
The list items will be numbered with lowercase roman numbers. 列表项将使用小写罗马数字编号

Bullet or unordered listed 项目符号或无序列出  Unordered lists are lists that begin with a bullet point (rather than characters that indicate order). 无序列表是以项目符号点开头的列表（而不是表示顺序的字符）。  The unordered list is created with the <ul> element. 使用<ul>元素创建无序列表。

DISPLAY
<h2>Ordered List with Letters</h2> <ol type=”A”> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
HTML
 Each item in the list is placed between an opening <li> tag and a closing </li> tag. 列表中的每个项目都放在开始<li>标记和结束</ li>标记之间。

Definition listed 列出的定义 Definition lists are made up of a set of terms along with the definitions for each of those terms.
定义列表由一组术语以及每个术语的定义组成。
The definition list is created with the <dl> element.
定义列表是使用<dl>元素创建的。
Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.
<dt> is used to contain the term being defined (the definition term).
在<dl>元素内，通常会看到<dt>和<dd>元素对。<dt>内包含定义名称的术语(定义术语)。
<dd> is used to contain the definition.
<dd>内包含具体定义内容。
<ul><b>Lists of fruits</b> <li>Apples</li> <li>Oranges</li> <li>Grapes</li> </ul>
DISPLAY
<dl> <dt><b>ET-570 Creating Smartphone Applications</b></dt> <dd>This course introduces the use and features of smartphones in modern life and how to create working applications. </dd> <br/> <dt><b>ET-710 Web Technology: Building and Maintaining Web Sites</b></dt> <dd>ET 710 focuses on the skills needed to build, maintain, and administrate a website. </dd </dl> HTML

DISPLAY
2.4. Managing images in HTML 用 HTML 管理图像 There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart.
您可能想在网页上添加图像的原因有很多：您可能想要包括徽标，照片，插图，图表或图表。

Stock photos 库存照片
If you do not have photographs to use on your website, there are companies who sell stock images or icons:
如果您的网站上没有照片可使用，则有一些公司出售库存图像或图标：
o www.pexels.com o www.iconfinders.com

What is the best screen size to design for? 设计的最佳屏幕尺寸是多少？
It is important to understand the size of the computer screen in order to coordinate the size of the image. Based on the worldwide screen resolution stats (nov 2016 – nov 2017) chart above and the charts below, these are the resolutions you need to be aware of in 2018.
重要的是要了解计算机屏幕的尺寸，以便协调图像的尺寸。 根据上面的全球屏幕分辨率统计数据 （2016 年 11 月– 2017 年 11 月）和下面的图表，这些是您在 2018 年需要注意的分辨率。
• 360×640 – 21.54% • 1366×768 – 12.85% • 1920×1080 – 7.76% • 375×667 – 4.94% • 1440×900 – 3.32% • 1280×800 – 2.67% Image formats

PNG Portable Network Graphics. PNG 便携式网络图形合适 JPG or JPEG Joint Photographic Experts Group. JPG 或 JPEG 联合图像专家组格式 BMP BitMaP 位图 GIF Graphics Interchange format. GIF 图形交换格式

The images on your computer screen are made up of lots of tiny squares known as pixels. The resolution of the screen is the number of pixels represented on it, and on most computers you can increase and decrease this number.
计算机屏幕上的图像由许多称为像素的小方块组成。 屏幕的分辨率是屏幕上表示的像素数，在大 多数计算机上，您可以增加和减少此数字。
JPEG offers good quality when the image has many different colors.
当图像具有许多不同的颜色时，JPEG 可提供良好的质量。
GIF or PNG images are low quality images which are good for images with few colors or large areas of the same color (flat color). Example of them are logos, illustrations, and diagrams.
GIF 或 PNG 图像是低质量的图像，适用于颜色很少或相同颜色（单色）大区域的图像。 例如徽标 ，插图和图表。
Exercise) which format would you save the following images? 您将使用什么图像格式来保存以下图像 ？
Store Images
储存图片

As a website grows, keeping images in a separate folder helps you understand how the site is organized. Usually they are stored in sub-folder called “images”.
随着网站的开发，将图像保存在单独的文件夹中有助于您了解网站的组织方式。 通常，它们存储 在称为“图像”的子文件夹中。

Adding images to a webpage 向网页添加图像 To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the attribute src.
要将图像添加到页面中，您需要使用<img>元素。 这是一个空元素（这意味着没有结束标记）。 它必须带有属性 src。

<img> attributes <img>属性  src tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. src 告诉浏览器可以在哪里找到图像文件。 这通常是指向您自己网站上图像的相对 URL。  alt provides a text description of the image which describes the image if you cannot see it. alt 提供图像的文本描述，如果看不到图像，则描述该图像。  “title” provides additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image. “title”提供有关图像的其他信息。 当用户将鼠标悬停在图像上时，大多数浏览器都会在工 具提示中显示此属性的内容。  “height” specifies the height of the image in pixels. “height”以像素为单位指定图像的高度  “width” specifies the width of the image in pixels. “width”指定图像的宽度(以像素为单位）

Alignment of an image in a webpage 网页中图像的对齐 The align attribute was commonly used to indicate how the other parts of a page should flow around an image. It has been removed from HTML5 and new websites should use CSS to control the alignment of images.
align 属性通常用于指示页面的其他部分应如何围绕图像流动。 它已从 HTML5 中删除，新网站应 使用 CSS 来控制图像的对齐方式。

The align attribute can take these values:
align 属性可以采用以下值：
“left” aligns the image to the left (allowing text to flow around its right-hand side).
“left”将图像向左对齐（允许文本在其右侧流动）。
“right” aligns the image to the right (allowing text to flow around its left-hand side).
“right”使图像向右对齐（允许文本围绕其左侧流动）。
“top” aligns the first line of the surrounding text with the top of the image.
“top”将周围文本的第一行与图像的顶部对齐。
“middle” aligns the first line of the surrounding text with the middle of the image.
“middle”将周围文本的第一行与图像的中间对齐。
“bottom” aligns the first line of the surrounding text with the bottom of the image.
“bottom”将周围文本的第一行与图像底部对齐。

HTML5: figure and figure caption  HTML5 ： 图 像 和 图像 标题
HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated.
HTML5 引入了一个新的<figure>元素来包含图像及其标题，以便将两者关联。
<h3 align=”center”>Images and attributes</h3> <img src=”QCC_Tiger.jpg” alt=”Logo of QCC tiger” title=”This is tile of logo” height=”200px” width=”200px” border=”2px” align=”right”/>
HTML

DISPLAY

You can have more than one image inside the <figure> element as long as they all share the same caption.
您可以在<figure>元素中包含多个图像，只要它们都共享相同的图像标题元素<figure>即可。
The <figcaption> element has been added to HTML5 in order to allow web page authors to add a caption to an image.
<figcaption>元素已添加到 HTML5 中，以允许网页作者向图像添加标题。