02 - 常用的html标签

02 - 常用的html标签

div标签(盒子标签)

• div:division被划分出来的一块区域
• 独占一行,霸道总裁,双标签

img标签

• 图片标签(一张图片在页面里的表现,单标签)

• 不要加/用于标签的闭合结束,自闭和结束,因为h5已经把这个/给去掉了

• img标签具有自己的属性:src/alt/width/height,其余属性title,因为每一个标签的都有title属性,所以叫做其余(通用)属性,鼠标悬浮显示文字

  1. img四大特有的属性:

• src(sourse)代表的路径,指向外部资源,引用资源会代替原有的内容,其实就是需要加载的资源的位置

• alt:切换,图片看不到的话,就会显示alt的属性值,图片替代文本,图片描述
• width:图片的宽度,填写默认的宽度,方便浏览器抓取,百度爬虫爬取
• height:图片的高度,填写默认的高度,方便浏览器抓取
• img标签的四个属性很重要,缺一不可

PS.上面这两条属性(width,height)可以改变图片的展示宽高,但是不能用来改变图片的宽高,他们不是样式,是属性,应该写上图片的实际尺寸,不用加单位,他们的作用不是用来展示图片的,他们是传输信息的,应该图片的原始宽高写上去

img标签的进行一些改变,不仅是给用户看,而且是百度搜索引擎,大数据分析,图片尺寸压缩

1. img标签的写法:

<img src='1.jpg' alt='小姐姐' width='169' height='298'>

html描述页面中的元素,css描述元素的展示效果

1. 属性src(重点,在很多地方都可以用的到)

src:路径写法,不能出现中文

图片路径src的用法:

相对路径(建议在开发中使用 ):

从当前位置的本地文件出发寻找目标文件(图片,css文件,js文件)(本地开启搜索机制)

相对路径的目录结构索引

./ (当前目录) ../(上级目录) ../../(上上级目录)类推

./	当前目录(代表文件所在的目录)
../	上级目录(代表文件所在的父级目录)
../../	上上级目录(代表文件所在父级目录的父级目录)
/	代表文件所在的根目录

绝对路径(避免使用绝对路径,除了那些网页地址之类的):

• 从本地(目录在硬盘上真正的路径 ):D:/project/demo/pic.jpg
• 从网络(完整网址):https://www.baidu.com/

好文推荐(个人觉得是挺好的,结合例子):前端之绝对路径与相对路径

路径形象生动的描述:
你家在哪里?

1. 在XX超市旁边—相对路径
2. 在XXX(照着身份证上的念一遍)—绝对路径

a标签

定义:超链接,从一张页面的链接到另一张页面

a标签作用(使用方式):

1. 链接:href=’url’ (url是指网页的地址,绝对/相对路径)

示例(点击链接跳转百度首页):

<a href='https://www.baidu.com'>百度一下</a>
//链接还可以跳转到本地书写的html

1. 锚点:href=’#id’ 将浏览器位置切换到id所在的位置,实现在本个页面的中不同的位置相互跳转

示例:

<p id='miaomiao'>我是p标签,我与众不同</p>
<a href='#miaomiao'>点我一下,你觉得跳转吗?</a>

使用锚点的前提是:页面的高度足够高,才能跳转(展现跳转的效果),就是由有一定的距离,有滚动条的出现

1. 下载:download = ‘下载链接的地址’

示例(href属性值对应的是你下载的内容,download属性值是你想要给它什么样的名字):

<a href='index.html' download='index1'>点我下载</a>

1. 打开方式:

   • 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标签,使用其他标签的时候,不好维护

• 单标签不使用/

• 三层无序列表嵌套得出结果:第一层展现的是实心圆,第二层展示的是空心圆,第三层展示的实心正方形