字体列表标签、图片标签

静Yu
188 阅读3分钟
  1. 在正文第一句带上：小知识，大挑战！本文正在参与“        程序员必备小知识        ”创作活动
  2. 在正文第二句带上：本文同时参与 「掘力星计划」        ，赢取创作大礼包，挑战创作激励金

前情回顾（不断复习）：

HTML第一篇

HTML第二篇

HTML的字体标签

字体标签

<font></font>:字体标签
属性：（1）color  字体颜色
（2）size    字号大小
大小：1-7
（3）face 字体类型：隶书、楷书、宋体

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

粗体和斜体标签

<b>粗体</b>
<i>斜体</i>.

滚动标签

<marquee>滚动的字幕</marquee>

HTML列表标签

列表标签 功能：把数据封装成列表

<dl></dl>
<dl>
				<dt>上层的项目</dt>
				<dd>下层的项目</dd> 
				<dd>下层的项目</dd>
			</dl>
实例：<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

在这里插入图片描述

有序列表：<ol></ol>
封装了一个范围，里面要有数据条目。数据条目标签：<li></li>
属性：1） type		：标号类型：数字（1.2.3. ...）、字母（a.b.c. ...）
				2） start	：从第几个编号开始
实例：
<ol type="a" start="5">
					<li>条目1</li>
					<li>条目2</li>
					<li>条目3</li>
				</ol>

在这里插入图片描述

无序列表：<ul></ul>
属性：type:标号的类型，例如：圆、方块、三角
<ul type="square">
					<li>条目1</li>
					<li>条目2</li>
</ul>

在这里插入图片描述

网页效果：

<!DOCTYPE html>
<html>
  <head>
    <title>这是头部标签</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    这是主体标签 <br>
    感谢关注，共同学习。 <br>
<p>
<pre>

              静夜诗
           床前明月光， 
           疑是地上霜，
           举头望明月，
           低头思故乡。
</p>
<hr color="red" width="300" align="center">
<div><pre>
                                                      大家好，我是静静的雨，感谢大家点开这篇文章，希望我的文章可以帮助到你，加油，一起学习。

</div>
<hr color="red" width="300" align="center">
<span>
留个关注，避免迷路。
</span>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<ol type="a" start="5">
					<li>条目1</li>
					<li>条目2</li>
					<li>条目3</li>
				</ol>
<ul type="square">
					<li>条目1</li>
					<li>条目2</li>
</ul> 
 </body>
</html>

在这里插入图片描述

在这里插入图片描述

HTML图片标签

图片标签

功能：将图片与html文件相关联，在网页中显示出好看的图片
<img />内部闭合的标签，可以引入图片
属性：图片的链接地址
相对路径：图片和html在同一个目录下
绝对路径：带盘符的目录
width：图片的显示宽度
height：图片的显示高度
alt：图片的文字说明

将图片与html文件相关联，图片与.html在同一个文件下 在这里插入图片描述

在这里插入图片描述

滚动+图片
<marquee></marquee>图片也可以进行滚动
<marquee>
						<img alt="静静的雨" src="yu.gif"/>
					  </marquee>

HTML的超链接标签

超链接就是点击之后可以跳转到相应的页面，就像我文末添加的超链接，可以跳转到html的其它篇，还可以定位资源，篇幅特别长的文章可以添加超链接，比如从文末跳转到顶部。

<a>文本内容</a>
属性：href:链接属性
（1）链接资源：如果访问的是网络资源，需要添加网络协议：http
举例：<a href="#">当前页面</a>
<a href="http://www.baidu.com">百度</a>，
 添加网络协议之后访问的是百度
（2）如果访问的是本地资源，如果浏览器可以解析的内容，
默认直接打开，如果浏览器不能解析，默认弹出下载窗口。
举例：<a href="jingjingdeyu.gif">静静的雨</a>	
                              //访问本地的一个图片资源
<a href="HTML课件.rar">HTML课件.rar</a>
                         //访问本地的一个rar压缩包，可以直接下载
<a href="HTML1.html">HTML1.html</a>	
                         //访问本地的html文件，也可以直接打开

name:瞄点属性
定位资源需要使用name属性，
若网站屏幕过长，可以使用name属性定位
举例：<a name="top">顶部</a>
                        	//顶部位置定义一个锚点
		<a name="center">中间</a>	
		                   //顶部位置定义一个锚点
		其次：在页面低端，使用超链接，返回顶部或中间
						<a href="#top">返回顶部</a>
						<a href="#center">返回顶部</a>

target：表示打开窗口的位置
target=“_new”始终在同一个窗口刷新
target=“_blank”始终产生一个新的窗口

在这里插入图片描述 点击超链接“百度”，就会跳转到百度的官方网页。

avatar
文章
阅读
粉丝