前言
这个是我之前整理好了的学习笔记,现在分享出来与大家共享,现在也算再复习一遍,希望自己得到提高,也方便自己以后复习。
基础标签的学习
第一行代码:
第一行代码
运行效果:
HTML5之中一般标签都包含开始和结束标签,例:
h系列标签(h1~h6)
作用:用于给文本添加标题语义
格式:
第一行代码
注意点:h标签是用来给文本添加标题语义的,而不是用来修改文本样式的。
h系列标签一共6个,h1~h6,其中h1标签是主标题标签(字号最大),在企业开发之中,要小心慎用h系列标签。在实际开发之中一般情况下一个界面只允许使用一个h1标签。
p标签(段落标签)
作用:告诉浏览器哪些文字是一个段落。
格式:
<p>Hello world!</p>
hr标签(是一条分割线)
作用:在浏览器上显示一条分割线
格式:<hr/>
注意点:hr标签没有开始标签,结束标签,与一般基本标签有所不同。
由于hr标签是用来修改样式的,所以不推荐使用。今后开发中添加水平项目一般都使用CSS盒子来做
HTML注释:
什么是注释?
注释就是注解,解释文中段落的意思。注释是写给人看的,计算机语言一般不识别注释。
注释可以用来解释某一段程序或者某一行代码是什么意思,方便直接或程序员之间的交流。
注释格式:
<!--hhhh-->
注意点:
被注释的内容不会在浏览器中显示,注释是写给我们自己看的
注释不能嵌套使用:<!--<!--hhhh-->-->(这种写法是错误的)
快捷键:Ctrl+/
img标签(image)
作用:在网页上插入一张图片
格式:![](图片路径)
../girl.png
标签的属性:写在标签中K=”V”这种格式的文本我们称之为标签属性
src(source):作用为告诉浏览器需要插入的图片路径,以便于浏览器到该路径下找到需要插入的图片
alt(alternate):作用为规定图像的替代文本,只有在src指定的路径下找不到图片,才会显示指定的文本
title:悬停文本。
height:设置显示图片的高度。
width:设置显示图片的宽度。
注意点:img标签添加的图片默认不是占一整行空间
如果想让图片等比拉伸,只写高度或宽度即可。
br标签(break)
作用:让内容换行。
格式:<br/>
注意点:br的意思是不另起一个段落进行换行。br标签没有开始标签,结束标签,与一般基本标签有所不同。
相对路径和绝对路径(重点为相对路径)
绝对路径:
从电脑的具体盘符开始寻找我们需要的资源。
例如:C:/Users/Xiong J/Desktop/girl.png
相对路径:
一个文件相对于另外一个文件的位置寻找我们需要的资源
![](girl.png)
假设html文件和girl.png都在Desktop文件夹下,以上代码表示在Desktop文件夹下查找girl.png图片
为什么没人使用绝对路径?
因为绝对路径的可移植性差。
为什么相对路径可移植性好?
同上,如果src指定的路径为images/girl.png,那么无论你拷贝到那个盘,哪个文件夹.系统都只会在当前文件夹中的images下去查找图片,不会受到盘符和存储位置的影响,只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
同级
直接编写,例如: girl.png
加上./编写,例如./girl.png
./代表当前目录, ./girl.png代表在当前目录下查找
下级
直接编写,例如abc/girl.png
加上./编写,例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可,例如abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
上级
../代表访问上级目录
假设a文件夹下面有b文件夹,图片存放在a文件夹中, html文件存放在b文件夹中,那么路径为../girl.png
因为html文件在b文件夹中,所以路径是相对于b文件夹的,所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹,所以../girl.png就代表在a文件夹查找girl.png
注意事项:
相对路径不会出现这种格式aaa/../bbb/girl.png
虽然可以显示,但是企业开发中千万不要这么写
a标签(anchor)
格式:<a href="http://www.baidu.com">baidu</a>
作用:用于从一个页面链接到另一个页面
注意事项:
在a标签之间一定要写上文字,如果没有,那么在页面上找不到这个标签
a标签也叫做超级链接或超链接
a标签的属性
href:作用是指定跳转的目标地址。
target:告诉浏览器是否保留原始界面, _blank保留, _self不保留
title:悬停文本(介绍这个链接,只有在鼠标移动到超链接上时才会显示)
base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦,这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式:
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
假链接(本质是跳转到当前页面)
格式<a href="#">baidu</a>
格式<a href="javascript">baidu</a>
跳转到当前页面指定位置(锚点链接)
格式<a href="#location">跳转到指定位置</a>
在页面的指定位置给任意标签添加一个id属性
例如
<p id="location">这个是目标</p>
跳转到指定页面的指定位置
格式: <a href="demo.html#location">跳转到指定位置</a>
只需要在demo.html页面添加一个id位置即可
总结
写了这么多,不仅仅是一种分享,希望更多的人看到,能对他们有所帮助,也是自己的一种总结,写在笔记本里的笔记只属于自己,而写在这里的笔记,属于大家。
共勉!