HTML笔记第一篇-CSDN博客

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src="baidu.gif"
下一级路径	/	图像文件位于HTML文件下一级如<img src="images/baidu.gif">
上一级路径	../	图像文件位于HTML文件上一级如<img src="../baidu.gif">

<body>
    <h4>我插入的图片：</h4>
    <img src="woman.PNG"/>
    <img src="images/img.jpg" />
</body>

<body>
    <img src="../images/img.jpg" />
</body>

2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如："D:\web\img\logo.gif"或完整的网络地址"http://www/itcast.cn/images/logo.gif"

<body>
    <h4>我插入的图片:</h4>
    <img src="https://i0.hdslb.com/bfs/feed-admin/43e9cae448ab9e885d0f139f7f95cc9f4142eada.png" />

    <br />
    <h4>我插入的图片:</h4>
    <img src="C:\Users\xll290\Desktop\Web\images\img.jpg" />
   
</body>

1.2HTML常用标签

1.2.1超链接标签

1.外部链接：

超链接语法格式

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

（a anchor的缩写，意为：锚）

<body>
    <h4>1.外部链接</h4>
    <!-- 当前页面打开窗口 -->
    <a href="https://www.bilibili.com/" target="_self">bilibili</a>
    <!-- 新窗口打开页面 -->
    <a href="https://www.baidu.com/" target="_blank">百度</a>
</body>

2.内部链接：

网站内部页面之间的相互链接，直接链接内部页面名称即可。

例如：

<body>    
    <h4>2.内部链接</h4>
    <a href="create.html">创建新页面</a>
</body>

3.空链接：

如果当时没有确定链接目标时

<body>
    <h4>空链接#</h4>
    <a href="#">空链接</a>
</body>

4.下载链接：

如果href里面地址是一个文件或者压缩包，会下载这个文件。

<body>
    <h4>4.下载文件</h4>
    <a href="woman.zip">下载文件</a>
</body>

5.网页元素链接：

在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

<body>
    <h4>网页元素链接</h4>
    <a href="https://www.baidu.com/"><img src="images/img.jpg" /></a>
</body>

6.锚点链接：

在链接文本的href属性中，设置属性为#名字的形式，如<a href="#two">第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

<body>
    1.主要经历<br />
    2.<a href="#zuopin" id="back">早年作品</a>
    <h1>主要经历：</h1>
    <p>xxxxxxxxxxxxxxxxxxxxx</p> 
    <h1 id="zuopin">早年作品：</h1>
    <p>xxxxxxxxxxxxxxxxxxxxx</p>
    <a href="#back">返回顶部</a>
</body>

1.3HTML注释标签和特殊字符

1.3.1注释标签：

快捷键 Ctrl+ /

1.3.2特殊字符：

列1	列2	列3
特殊字符	描述	字符的代码
	空格
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
℃	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
	平方2（上标2）	²
	平方3（上标3）	³

<body>
    &lt;p&gt;是一个段落标签。<br />
    一个&nbsp;空格<br />
    两个&nbsp;&nbsp;空格<br />
    三个&nbsp;&nbsp;&nbsp;空格<br />
</body>

显示结果：

（自动换行：view->word wrap）