html入门3

最新推荐文章于 2024-11-28 17:38:22 发布

原创最新推荐文章于 2024-11-28 17:38:22 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html&CSS 专栏收录该内容

11 篇文章

订阅专栏

1.HTML图片

（1）

<img src=”a.jpg” alt=”插入图片” align=”center”>

在html中，可以使用img来插入图片。src表示图片的路径，使用绝对或是相对路径均可。alt中的内容，与图片提交中alt的作用类似，当浏览器没有载入图片功能时，就转而显示alt中的值；更重要的是，目前的搜索引擎抓取工具还没有抓取图片中文字的功能，使用alt标注图片的内容，有助于搜索引擎抓取网页的内容。aign用于标注图片的对其方式，有top、middle、bottom（垂直对其方式）以及left、center、right（水平对齐方式）几种取值。(本机上测试时，align属性不起作用？)

（2）图片默认显示原有的大小，但是，也可以通过width和height属性来改变图片的大小。如：

<img src=”a.jpg” width=”50” height=”50”/>

（3）复习：

将图片作为页面背景：

<body background=”a.jpg”> 
</body>

将图片作为背景，如果图片比页面小，会自动重复，如果图片比页面大，只截取页面大小的部分

将图片作为一个超链接

< a href=”f2.html”><img src=”a.jpg></a>

点击图片a ，跳转到页面f2

2.HTML字体（fonts）

在html中，可以使用font元素以及它的属性来设置文字的大小、颜色和字体类型。

（1）size属性设置字体大小

<html>
<head><title>show Lists</title><head>
<body>
<p><font size="1">大小为1</font></p>
<p><font size="2">大小为2</font></p>
<p><font size="3">大小为3</font></p>
<p><font size="4">大小为4</font></p>
<p><font size="5">大小为5</font></p>
<p><font size="6">大小为6</font></p>
<p><font size="7">大小为7</font></p>
<p><font size="8">大小为8</font></p>
</body>
</html>

360浏览器打开文件，显示的效果如下：

size的值越大，字体越大。

（2）用face属性来设置字体风格

<html>
<head><title>show Lists</title><head>
<body>
<p><font face="arial">用face设置字体：arial</font></p>
<p><font face="courier">用face设置字体：courier</font></p>
<p><font face="verdana">用face设置字体：verdana</font></p>
</body>
</html>

360浏览器打开文件，显示的效果为：

（3）用color属性设置字体颜色

<html>
<head><title>show Lists</title><head>
<body>
<p><font color="#ff0000">用color设置字体颜色。#ff0000</font></p>
<p><font color="#00ff00">用color设置字体颜色。#00ff00</font></p>
<p><font color="#0000ff">用color设置字体颜色。#0000ff</font></p>
<p><font color="#ffffff">用color设置字体颜色。#ffffff</font></p>
<p><font color="#000000">用color设置字体颜色。#000000</font></p>
</body>
</html>

用360浏览器打开后，显示效果如下：

（#ffffff为白色）