（中职）Web前端设计基础 项目二-2电子课件

1、YCF正版可修改PPT（中职）Web前端设计基础 项目二-2电子课件网页中的文本和排版项目二授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备添加文本；文本排版；文字列表；添加图片。文字列表1.建立有序列表有序列表的各个列表项是有顺序的。有序列表从开始，到结束，中间的列表项是标签内容。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序，其结构如下： 有序列表项 有序列表项 有序列表项文字列表1.建立有序列表在默认情况下，有序列表使用数字作为列表项符号，除此之外还可以通过有序列表type

2、属性来改变列表项符号，如表所示。type属性值列表项的序号类型1数字1、2、3a小写英文字母a、b、cA大写英文字母A、B、Ci小写罗马数字i、ii、iiiI大写罗马数字I、II、IIItype属性实现的效果可以用CSS的list-style-type实现，在后面的项目中会学习到。文本列表1.建立有序列表【例2-3】建立有序列表实例，代码如下所示（示例文件2-3.html）有序列表olfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表1.建立有序列表【例

3、2-3】建立有序列表实例，代码如下所示（示例文件2-3.html）HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery在chrome浏览器中预览文字列表2.建立无序列表无序列表相对于有序列表而言，没有前面的顺序符号，只以符号作为分项标识。无序列表使用一对标签，其中每一个列表项使用标签，结构如下所示： 无序列表项 无序列表项 无序列表项在无序列表结构中，使用标签作为一个无序列表的开始和结束，则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且标签的结束标签可以省略。文字列表2.建立无序列表默认情况下，无序列表的项目符号是，还可以通过无序列表ty

4、pe属性来改变无序列表的列表项符号，如表所示。type属性值列表项的序号类型disc默认值，实心圆“”circle空心圆“”square实心正方形“”文本列表2.建立无序列表【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）无序列表ulfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表2.建立无序列表【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）HTMLCSSJavaScriptjQuery在chrome浏览器

5、中预览文字列表3.建立自定义列表在HTML中还可以自定义列表，自定义列表的标签是。自定义列表由两部分组成：定义条件和定义描述，其结构如下： 定义名词 定义描述 在该结构中，标签和标签分别定义了定义列表的开始和结束，后面添加要解释的名词，而在后面则添加该名词的具体解释。文本列表3.建立自定义列表【例2-5】建立自定义列表实例，代码如下所示（示例文件2-5.html）自定义列表/title文本排版换行标签br段落标签p标题标签h1h6文字列表有序列表ol无序列表ul自定义列表dl 在chrome浏览器中预览添加图片图片是网页中不可缺少的元素，巧妙地在网页中使用图片，可以为网页增色不少。网页支持多种

6、图片格式，包括GIF、JPEG、BMP、PNG、TIFF等格式的图片文件，其中使用最多的是GIF和JPEG两种格式，另外在网页中还可以对插入的图片设置宽度和高度，设置图片的提示文字等。src和alt这两个属性是标签必不可少的属性，title属性的值往往都是跟alt属性的值相同。在HTML文档中，插入图像使用单标签，图像标签的常用属性如表所示。属性说明src图像的文件地址alt图片显示不出来时的提示文字title鼠标移到图片上的提示文字width设置图像的宽度height设置图像的高度添加图片1. img标签src属性src，即“source（源文件）”。img标签的src属性用于指定图像源文件

7、所在的路径，它是图像必不可少的属性。其结构如下：相对路径使用的特殊符号有三种：./：代表目前所在的目录（可以省略不写）。./：代表上一层目录。以/开头：代表根目录。img标签是一个自闭合标签，没有结束标签。src属性用于设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径，但在真正的网站开发中，对于图片或者引用文件的路径，都是使用相对路径的。添加图片2. img标签alt属性alt属性用于设置图片的描述信息，这些信息是给搜索引擎看的。在搜索引擎优化SEO中，alt属性也是一个非常重要的属性。其结构如下：添加图片3. img标签title属性title属性用于设置鼠标移到图片上的提示文字，这些提示文字是给用户看的。其结构如下：添加图片3. img标签title属性【例2-6】使用相对路径插入图像实例，文件结构及代码如图所示（示例文件2-6.html）在chrome浏览器中预览作业一、选择题1.制作网页时，如果想在段落内每个项目前面加上1、2、3等有顺序的数字，可以使用_标签。A B C D 2.制作网页时