前端知识学习笔记(二)

前言

这个是我之前整理好了的学习笔记,现在分享出来与大家共享,现在也算再复习一遍,希望自己得到提高,也方便自己以后复习。

基础标签的学习

第一行代码:

第一行代码

运行效果:


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位置即可

总结

写了这么多,不仅仅是一种分享,希望更多的人看到,能对他们有所帮助,也是自己的一种总结,写在笔记本里的笔记只属于自己,而写在这里的笔记,属于大家。

共勉!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容