从前端小白到前端大佬

HTML上

学习前端第三天，继续上一片笔记的内容。

1.标签的书写注意规范
2.html骨架标签
3.html常用标签
4.超链接标签
5.图片属性
6.相对路径的三种形式
7.html的注释标签和特殊字符
8.综合案例

3.html常用标签
④<div>和<span>盒子标签，用于布局
<div>和<span>是没有语义的，他们是一个盒子，用来装内容
写法：<div>***</div>；独占一行的大盒子
<san>***</span>；一行可以有很多个小盒子
⑤<img>图像标签，单标签，必写src必须属性，插入的图像需要与html文件在同一文件
写法：<img src="图像名URL“/>

4.超链接标签
<a>，作用是从一个页面链接到另一个页面
1.外部链接
写法：<a href="跳转目标网址” target=“目标窗口的弹出方式”> 文字或者图像</a>

<a href="http://www.qq.com"  target="_blank"> 腾讯</a>//新窗口打开页面
<a href="http://www.qq.com"  target="_self"> 腾讯</a>//默认，当前窗口打开页面

2.内部链接

<a href="目标地址路径，表示方式看6"  target="_blank">自己写的网页</a>//新窗口打开页面

3.空链接

<a href="#"  target="_blank">还没有地址的目标</a>//新窗口打开页面

4.下载链接

<a herf="图片的网络形式地址"><img src="img.jpg/></a>

5.网页元素（如图片）的链接

<a herf="下载文件的压缩包地址路径，表示方式看6”>文件下载</a>

6.锚点链接（快速定位到当前页面内的某个位置）

<a herf="#目标名字">10.个人简介</a>
<h3 id="目标名字">10.个人简介</h>

5.图片属性
1.alt（替换文本。图片名字错误时，图片无法加载，显示图片相关信息）

<img src="错误的图像名" alt="图片相关信息"/>

2.title(提示文本。显示图像后，鼠标放上去时自动出现文字提示文本）

<img src="图像名"  alt="图片相关信息" title=”提示信息"/>

3.width和height（指定图像显示的高度和宽度，注意的是，只单独指定图像显示的高度或者宽度时，图片是等比例缩放的,单位是像素）

<img src="图像名"     alt="图片相关信息"     title=”提示信息"  width="500"      height="500"/>

4.border(给图片设计边框，一般使用css指定）

<img src="图像名"     alt="图片相关信息"     title=”提示信息"  border=“10”/>

6.相对路径的三种形式和绝对路径
相对路径
1.同一级路径（图片在同一个目录下）：

<img src="图片名.jpg“/>

2.下一级路径（图片在html所在目录下的文件夹）：

<img src="所在文件夹名/图片名.jpg"/>

3.上一级路径（图片在html的根目录里）

<img src="../图片名.jpg/>

绝对路径(不建议使用)
<img src="\文件路径\图片名.jpg/>

7.html的注释标签和重要特殊字符
1. 快捷键：ctrl+/
2.空格 &nbsp；
大于号 &lt
大于号 &gt

8.综合案例实现
1.实现页内跳转
2.实现内部链接跳转（新窗口）
3.实现外部链接跳转（新窗口）
4.会使用图片标签，段落标签，换行，空格

首页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>圣诞节</h2><h5>（西方传统节日）</h5><b>1.节日历史<br><a href="#second">2.习俗庆祝</a><br>3.社会影响<br>4.艺术作品</b><p>&nbsp;&nbsp;圣诞节（Christmas）又称耶诞节，译名为“基督弥撒”，它源自古罗马人迎接新年 的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷随波逐流地将这种 民俗节日纳入基督教体系，同时以庆祝耶稣的降生。但在圣诞节这天不是耶稣的生 辰，因为《圣经》未有记载耶稣具体生于哪天，同样没提到过有此种节日，是基督 教吸收了古罗马神话的结果。</p><img src="imgs/01.jpg" width="500" title="圣诞" /><p>&nbsp;&nbsp;大部分的天主教教堂都会先在12月24日的平安夜，亦即12月25日凌晨举行子夜弥撒 ，而一些基督教会则会举行报佳音，然后在12月25日庆祝圣诞节；基督教的另一大分 支——东正教的圣诞节庆则在每年的1月7日。</p><p>圣诞节也是西方世界以及其他很多地区的公共假日，例如：在亚洲的中国香港和澳门 地区、马来西亚、新加坡。</p><img src="imgs/02.jpg" width="500" title="圣诞" /><h5>节日历史</h5><p>&nbsp;&nbsp;据说耶稣是因着圣灵成孕，由圣母玛利亚所生的。神便派遣使者加伯列在梦中晓谕约 瑟，叫他不要因为玛利亚未婚怀孕而不要她，反而要与她成亲，把那孩子起名为“耶稣” ，意思是要他把百姓从罪恶中救出来。</p><img src="imgs/03.jpg" width="500" title="圣诞" /><p>当玛利亚快要临盆的时候，罗马政府下了命令，全部人民到伯利恒务必申报户籍。约瑟和玛 利亚只好遵命。他们到达伯利恒时，天色已昏，无奈两人未能找到旅馆渡宿，只有一个马棚 可以暂住。就在这时，耶稣要出生了。于是玛利亚唯有在马槽上，生下耶稣。后人为纪念耶 稣的诞生，便定十二月二十五为圣诞节，年年望弥撒，纪念耶稣的出世。</p><img src="imgs/04.jpg" width="500" title="圣诞" /><h5 id="second">习俗庆祝</h5><p>&nbsp;&nbsp;圣诞卡（圣诞卡片）在美国和欧洲很流行，许多家庭随贺卡带上年度家庭合照或家庭 新闻v，新闻一般包括家庭成员在过去一年的优点特长等内容。圣诞节这天，指出天下一 家世界大同的理想，只有以和平与仁爱的言行达成。寄赠圣诞卡，除表示庆贺圣诞的喜 乐外，就是向亲友祝福，以表怀念之情。尤其对在孤寂中的亲友，更是亲切的关怀和安 慰。</p><img src="imgs/05.jpg" width="500" title="圣诞" /><h5><a href="附页.html" target="_blank">圣诞树</a></h5><img src="imgs/06.jpg" width="500" title="圣诞" /><p>查看更多内容<a href="https://www.baidu.com" target="_blank">百度一下</a></p>
</body></html>

附页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>圣诞树 </h2><h5>（圣诞节装饰） </h5><p>圣诞树，是指用灯烛和装饰品把枞树或洋松装点起来的常青树。作为是圣诞节重要的组成元 素之一，近代圣诞树起源于德国，后来逐步在世界范围内流行起来，成为圣诞节庆祝中最有 名的传统之一。</p><p>据说圣诞树最早出现在古罗马12月中旬的所谓农神节。现在通常人们在圣诞前后把一棵常绿 植物如松树弄进屋里或者在户外，并用圣诞灯和彩色的装饰物装饰。并把一个天使或星星放 在树的顶上。</p><p>2019年11月，大阪USJ推出冬季圣诞树，连续九年刷新吉尼斯世界纪录</p><img src="imgs/07.jpg" />
</body></html>

从前端小白到前端大佬相关推荐

四年，如何从前端小白蜕变为前端技术专家？
简介:作者简介:珑晴--淘系技术部前端技术专家,16 年校招实习转正进入的阿里,当时是在聚划算前端团队,随着业务变化一路从聚划算到天猫至今加入淘系技术部,负责日常活动营销的同时,也多次参与大促会场&a ...
前端小白分享|canvas用户上传图片选择相框并长按保存到本地
结合了几篇文章写(拼凑)出的用户上传图片然后选择相框并长按保存到本地的功能兼容苹果手机!!! 分享给像我一样的前端小白~ 先上图: 上代码: upload.html <!DOCTYPE ht ...
Web前端小白入门指迷
大前端之旅大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR 前端等.当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到 ...
前端小白也能快速学会的博客园博客美化全攻略
前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介一般而言,需要选一个默认的 ...
android checkbox监听另一个checkbox选中和不选中_一个真正0基础小白学习前端开发的心路历程...
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
一个真正0基础小白学习前端开发的心路历程
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
一个新进前端小白实习僧的初次探索
我不怕万人阻挡,只怕自己投降一个新进前端小白实习僧的初次探索在学校的时候写过几个静态页面.用过一些简单的JavaScript,写过一些基础的CSS,去应付课程项目,却也仅仅于此. 谁也没想到会阴差 ...
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...

从前端小白到前端大佬

HTML上

从前端小白到前端大佬相关推荐

最新文章

热门文章