02 - 常用的html标签
div标签(盒子标签)
- div:division被划分出来的一块区域
- 独占一行,霸道总裁,双标签
img标签
图片标签(一张图片在页面里的表现,单标签)
不要加/用于标签的闭合结束,自闭和结束,因为h5已经把这个/给去掉了
img标签具有自己的属性:src/alt/width/height,其余属性title,因为每一个标签的都有title属性,所以叫做其余(通用)属性,鼠标悬浮显示文字
- img四大特有的属性:
src(sourse)代表的路径,指向外部资源,引用资源会代替原有的内容,其实就是需要加载的资源的位置
- alt:切换,图片看不到的话,就会显示alt的属性值,图片替代文本,图片描述
- width:图片的宽度,填写默认的宽度,方便浏览器抓取,百度爬虫爬取
- height:图片的高度,填写默认的高度,方便浏览器抓取
- img标签的四个属性很重要,缺一不可
PS.上面这两条属性(width,height)可以改变图片的展示宽高,但是不能用来改变图片的宽高,他们不是样式,是属性,应该写上图片的实际尺寸,不用加单位,他们的作用不是用来展示图片的,他们是传输信息的,应该图片的原始宽高写上去
img标签的进行一些改变,不仅是给用户看,而且是百度搜索引擎,大数据分析,图片尺寸压缩
- img标签的写法:
<img src='1.jpg' alt='小姐姐' width='169' height='298'>html描述页面中的元素,css描述元素的展示效果
- 属性src(重点,在很多地方都可以用的到)
src:路径写法,不能出现中文
图片路径src的用法:
相对路径(建议在开发中使用 ):
从当前位置的本地文件出发寻找目标文件(图片,css文件,js文件)(本地开启搜索机制)
相对路径的目录结构索引
./ (当前目录) ../(上级目录) ../../(上上级目录)类推
| ./ | 当前目录(代表文件所在的目录) |
|---|---|
| ../ | 上级目录(代表文件所在的父级目录) |
| ../../ | 上上级目录(代表文件所在父级目录的父级目录) |
| / | 代表文件所在的根目录 |
绝对路径(避免使用绝对路径,除了那些网页地址之类的):
- 从本地(目录在硬盘上真正的路径 ):
D:/project/demo/pic.jpg - 从网络(完整网址):https://www.baidu.com/
好文推荐(个人觉得是挺好的,结合例子):前端之绝对路径与相对路径
路径形象生动的描述:
你家在哪里?
- 在XX超市旁边—相对路径
- 在XXX(照着身份证上的念一遍)—绝对路径
a标签
定义:超链接,从一张页面的链接到另一张页面
a标签作用(使用方式):
- 链接:href=’url’ (url是指网页的地址,绝对/相对路径)
示例(点击链接跳转百度首页):
<a href='https://www.baidu.com'>百度一下</a>
//链接还可以跳转到本地书写的html- 锚点:href=’#id’ 将浏览器位置切换到id所在的位置,实现在本个页面的中不同的位置相互跳转
示例:
<p id='miaomiao'>我是p标签,我与众不同</p>
<a href='#miaomiao'>点我一下,你觉得跳转吗?</a>使用锚点的前提是:页面的高度足够高,才能跳转(展现跳转的效果),就是由有一定的距离,有滚动条的出现
- 下载:download = ‘下载链接的地址’
示例(href属性值对应的是你下载的内容,download属性值是你想要给它什么样的名字):
<a href='index.html' download='index1'>点我下载</a>打开方式:
target='_blank'新页面打开target='_self'当前页打开(默认方式)
<a href='https://www.baidu.com' target='_blank'>百度一下</a>
<a href='https://www.baidu.com' target='_self'>百度一下</a>几个特殊的符号:
空格: 代替空格
小于号:<
大于号:>
解析空格问题:
浏览器中的展示页面,浏览器解析代码,文本中的多个空格/类空格(换行),浏览器只会解析成一个空格
不要试图通过代码中的排版方式,调整文本的展示方式,文本解析的局限性
作业讲解：
存在的问题大全:
代码中的插入图片不看到,为什么呢?原因是:图片的路径
.bak文件的存在的解决,把保存时创建备份文件的勾去掉即可
img标签的里面的border不用写
图片的名称最好使用英文的,不要使用中文
图片的路径的规范(专业)写法,不要使用pre标签(原样输出)来写,使用css来写
废弃(淘汰)标签:bgcolor/center/font /align/pre
结构样式分离,展示效果是css去做的
代码规范:严格遵循缩进结构,不允许乱用空格
不要使用笔记本写代码,不要吝啬你的空白
ul下面的标签只能是li标签,使用其他标签的时候,不好维护
单标签不使用/
- 三层无序列表嵌套得出结果:第一层展现的是实心圆,第二层展示的是空心圆,第三层展示的实心正方形