学习目标:
掌握HTML入门知识
可以自己制作简单网页
学习内容:
一:HTML 常用标签
1.图像标签
在HTML标签中,<img>标签用于定义HTML中的图像。
单词image的缩写,意为图像。
src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是属于这个图像标签的特性。
图像标签的其他属性:
注意:
- 图像标签可以拥有多个属性,必须写在标签名的后面。
- 属性之间不分先后顺序,标签名与属性、属性之间以空格分开。
- 属性采取键值对的格式,即key=”value”的格式,属性=“属性值”。
2.路径
(1)目录文件夹和根目录
目录文件夹就是个普通的文件夹,跟网站相关的材料放在此文件夹中。
根目录就是打开文件夹的最外面一层。
(2)在vscode 中打开文件夹,更方便的管理文件。
(3)相对路径和绝对路径
相对路径:以图片相对于HTML的位置为参考,去建立路径。
绝对路径:指图片在电脑中的那个位置。
注意符号:\
3.超链接标签
(1)外部链接:
<a href=”跳转目标”target=“目标窗口的弹出方式”>文本成图像</a>
单词anchor,意为:锚。
target 打开窗口方式 默认的值是_self 当前窗口打开页面面 _blank新窗口打开页面
(2)内部链接:
网站内部页面之间的相互链接,直接链接内部页面即可,例如<a href=”index.html”>首页</a>
(3)空链接:如果当时没有确定链接目标时,<a href=”#”>首页</a>。
(4)下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
(5)网络元素链接:在网页中的各种网页元素,如文本、图像,表格、音频、视频等都可以添加超链接。
(6)锚点链接:点我们点击链接,可以快速定位到页面中的某个位置。
在链接文本href属性中,设置属性值为#名字的形式,如<a href=”#two”>第二集</a>
找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id=two”>第二集介绍</h3>
二 注释标签和特殊字符
1.注释字符:
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以"<!--"开头,以“-->”结束。
<!--注释语句-->快捷键CTRL+/
一句话总结:注释标签里面的内容是给程序员看的,在网页中不显示。
2.特殊字符
要重点掌握空格符,大于号和小于号。
学习成果:
HTML部分代码
HTML部分代码
网页查看
网页查看
网页查看