标签进阶&&标签属性

标签进阶与标签属性

项目文件夹

一般在做项目时,会把代码/素材放到专门文件夹里.方便管理

如何打开项目文件夹:
	1.选中文件夹 -- 右键 -- 通过code打开
	2.vscode界面 -- 选中文件夹 - 拖入到vscode

前端项目一般包含这三个文件夹
	img -- 图片文件夹
	css -- 样式文件夹
	js -- 脚本
网页的主页一般命名为index.html
网页的文件名要做到见名知意

绝对路径与相对路径

绝对路径: 文件的完整路径,从盘符开始,一直到指定的文件
	D:\SortWare\VisualStudio\Cache\_Instances\21270116\product.svg
相对路径: 有参考位置的路径,默认为当前文件所在位置
	当前文件所在位置

绝对路径: 广东省广州市天河区联合社区C区2楼
相对路径: 我前面50米

相对路径常见情况:
	1.和当前文件在同一位置
	2.当前位置的文件夹里面
	3.当前位置的上级文件夹

标签属性

标签属性: 对标签信息的补充/描述 -- 颜色,大小,位置

<标签名 属性名='属性值' 属性名='属性值'>

图片标签(img)

img -- 图片标签,单标签,用来显示图片
	<img src='路径' alt='描述' width='宽度' height='高度'>
		src = 图片路径,即图片位置,可以使用绝对/相对/网络路径
		alt = 图片的描述
		width,height = 宽高 (不设的话图片为默认宽高)
	有src图片就能显示了,其他可以不写

路径推荐使用相对路径:
	相对路径的3种情况:
		1.图片和代码同级 -- src = '图片名'
		2.图片在代码上级文件夹 -- src = '../图片名'
		3.图片在代码下级文件夹 -- src = '文件夹名/图片名'

超链接标签(a)

超链接a标签.类似于哆啦A梦的任意门. 可以通过a标签跳转/传送到指定的位置
	1.指定的网站
	2.当前网页特定位置 -- 先给位置做个id标记,通过id跳转
	3.指定的文件

<a href='跳转位置'>超链接内容</a>
	href -- 要跳转的位置

	a标签有个属性叫target (一般不用设置,听从浏览器默认)
		target的作用为设置页面打开方式
			_self : 在当前页面打开
			_blank: 在新开页面打开

列表:

前端的列表和python的列表类似.但不是一个东西
列表的主要作用是保存一些带关联性的数据 (分为有序列表 无序列表 自定义列表)

比如歌曲/游戏排行榜
	1.
	2.
	3.
	4.
	5.
这种就可以使用有序排序

ul,li -- 无序列表,ul是容器标签,li是内容标签.两者为包含关系
	无序列表的默认样式为小黑点,嵌套无序列表为小白点

ol,li -- 有序列表,ol是容器标签,li是内容标签.
	有序列表的默认样式为数字.可以通过type属性修改样式

dl,dt,dd -- 自定义列表,dl是容器标签 dt是标题标签 dd是内容标签
	自定义列表主要用于二级目录 / 合作伙伴

列表内容都要写在内容容器里. 把文字/图片写在li/dd里 不用把内容写在容器标签里

vscode快捷键

1.选中一行 ctrl + c 复制当前行  ctrl + x 剪切当前行
2.alt + 点击 -- 选中多行 alt+shift+拖选 -- 拖选多行
3.alt + shift + ↑/↓ -- 复制当前行
4.标签名*n -- n为数字,快速生成n个标签  p*5
5.标签名{} -- 生成标签,大括号里为标签内容 p{多喝热水}
6.标签名[] -- 生成标签,中括号里为标签属性 a[href='www.baidu.com']
7.$ -- 变量,从1到n   p{多喝热水,这是第$杯}*10
8.快速生成包裹标签  ul>li*3   ul包裹3个li标签

练习

1.升级上节课的开端介绍
	1.把白敬亭 赵今麦转为a标签.跳转到人物对应的百度百科网址
	2.在网页中插入一张开端剧照

2.完成练习文件夹里teleplay的效果.
	需有两个网页文件
		网页1: 电视剧的剧情说明.分集剧情用h2标签表示.并设立锚点.可以通过点击对应集数跳转到对应位置[点击第四集时.跳转到网页2.]
		网页2: 单独第四集的剧情说明

3.完成练习文件夹里图片(img/列表)的效果
	img--> 写一篇介绍即可. 图片和文案不需要和图片一样