【海码学院公开课】web前端基础入门HTML之图片、超链接和列表标签课堂学习笔记

一、img图片标签、属性和路径应用

1、img图片标签

(1)、定义：

img是image缩写，表示图像。

(2)、写法：

<img src="" alt="" />

(3)、结构上：

img标签属于单标签；

img标签属于行内块级标签。

 

2、标签属性

(1)、属性定义：

用来表示标签的性质和特性。

(2)、属性写法：

<标签 属性名="属性值" 属性名="属性值"></标签>

注意：写多个属性时，用空格隔开。

(3)、标签常用属性：

id属性：给标签起一个id名称，名称是唯一的，别的标签不能再叫这个名字了。

<标签 id="id值"></标签>

class属性：给标签起一个class名称，名称不唯一，多个标签可以叫同一个class名称。

<标签 class="class值"></标签>

style属性：用于给元素设定css样式

<标签 style="属性名：属性值；"></标签>

title属性：显示标签提示、补充的内容的，当鼠标移动到该标签上，会显示title里面的内容。

<标签 title="title值"></标签>

(4)、img属性：

src：被引用图像的地址

alt：规定了图像的替代文本，如果图片不显示，将显示该属性值内容。

注意：src属性是必须的，alt属性不写可以，但是建议要写。

 

3、路径

<img src="图片路径" alt="" />

(1).绝对路径

定义：使用图片时，以他的绝对位置来访问图片。

注意：在开发网页的过程中，一般不会使用绝对路径。

(2).相对路径

同级：直接写图片名称或者./图片名称

向上：../图片名称；   “..” 在路径中代表当前网页所在目录的上一级目录，再多次上一级目录时候，只要加../就可以了。

向下：上级目录/图片名称；多次下级目录时候，多写几个目录/就可以了。

注意：代码编辑器都会有src提醒的，所以也不会担心写不好。

 

二、超链接a标签的运用和锚点操作

1、定义：

a标签定义超链接，用于从一张页面链接到另一张页面。

<a></a>

2、属性：

(1)、href属性

它是a标签中最重要的属性，指示链接的目标。

注意：

a标签的文本内容有默认的下划线

链接的目标分为：绝对路径和相对路径（原理和图片路径原理一样）

<a href="文档路径"></a>

（2）target属性

target规定了a标签在何处打开链接文档。

_blank：新窗口打开目标文档

<a href="图片路径" target="_blank">新窗口打开目标文档</a>

_self：当前窗口打开目标文档（默认）

<a href="图片路径" target="_self">当前窗口打开目标文档</a>

（3）锚点属性

通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。

 语法：
 

<a href="#id值">文本内容</a>
<标签 id="id值">文本内容</标签>

 实例：

<a href="#first">跳转到1</a>
<a href="#second">跳转到2</a>
<a href="#third">跳转到3</a>





<p id="first">第一个内容</p>
<p id="second">第二个内容</p>
<p id="third">第三个内容</p>

 

三、认识有序列表和无序列表

1、有序列表

(1)、结构

<ol>
	<li>有序列表-1</li>
	<li>有序列表-2</li>
	<li>有序列表-3</li>
	<li>有序列表-4</li>
</ol>

注意：ol标签下一层只能放li标签，不能是其他标签，但是可以在li标签里写其他标签。

 

(2)、type属性：

①.定义：指定前面序号的类型

②.类型：

阿拉伯数字：type="1"（默认）

小写英文字母：type="a"；

大写英文字母：type="A"

小写罗马数字：type="i"

大写罗马数字：type="I"

 

2、无序列表

(1)、结构

<ul>
	<li>有序列表-1</li>
	<li>有序列表-2</li>
	<li>有序列表-3</li>
	<li>有序列表-4</li>
</ul>

注意：ul标签下一层只能放li标签，不能是其他标签，但是可以在li标签里写其他标签。

 

(2)、type属性：

①.定义：指定前面点的样式

②.类型：

空心圆：type="circle"

实心圆：type="disc"（默认）

实心方形：type="square"