web前端实习Day1--html标签

目录

1.图片标签：img

2.超链接标签：a

3.base标签

4.html中的基本标签

5.html特殊符号

6.列表

---

1.图片标签：img

img标签的常用属性：
    src = "" 设置图片地址
    width ="" 设置图片宽度
    hight = "" 设置图片高度
    实际开发过程各种宽度和高度只需要设置一个即可，另一边系统自动按照比例进行缩放
    alt = "" 图片的占位文字 替换文本
    title = "" 鼠标提示文本
src图片路径的问题：
    相对路径：
        和当前网页所在的文件夹地址为参考 从当前html文件的路径出发去找图片
            1 若图片和html在同一个文件夹 则直接写图片名称
            2 若图片在当前文件夹的下一层 文件夹名字/图片名称
            3 若图片在当前文件夹的上一层 ../开头
    绝对路径：
        网络路径
            带协议的网络路径

网络路径如图所示

<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FRhTegJWeY7z2M317zJkkAHaE6?w=297&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7" width="400" height="400" alter="白云" title="天空">

2.超链接标签：a

<a href='连接地址'>连接文本</a>

通过点击跳转到另一个网页，目标网页没有被访问过的时候文字是蓝色，访问过的文字是紫色的target属性：_blank 在新标签页打开

<a href="https://www.baidu.com/" target="_blank">点我可以跳转到百度</a>

功能	语法	备注
跳转功能	<a href='目标地址'></a>
回到页面顶部	<a href="#"></a>
锚点功能	<a href="目标网页.html#id的英文名"></a>	默认跳转到目标网页的顶部位置 目标页面在想要被跳转到的位置的标签上面定义 id属性 id='英文名'
文件下载	<a href="压缩包"></a>	不推荐使用 因为无法防盗链

3.base标签

对所有的a标签统一设置跳转的目标位置，href 表示基础路径的统一设置

a标签的最终跳转地址=base标签的href地址+a标签本身的href

<base target="_blank" href="https://www.douban.com/group/explore/">

<a href="fashion" target="_self">豆瓣小组时尚页面</a>
<a href="life">豆瓣小组生活页面</a>

4.html中的基本标签

标签名	标签符合	效果
横线标签	hr
标题标签	h1~h6	独占一行，上下各隔开一行，字体加粗
段落标签	p	独占一行，上下各隔开一行
字体修饰符标签	i/em	倾斜
	b/strong	加粗
	s/del	删除
	u/ins	下划线

5.html特殊符号

特殊符号	效果
>	>
&lt;	<
&nbsp;	空格
&yen;	￥

6.列表

无序列表	ul	type 序号的样式
		circle 空心小圆圈
		disc 默认值 实心小圆圈
		square 实心小方块
	li	列表中的每一条信息
有序列表	ol	type：修改序号的类型 1 a A i I
		start='数字'  表示序号从多少开始 默认是1
	li	列表中的每一条信息
自定义列表   常用于图文混排	dl	表示自定义列表标签
	dt	一堆列表的小标题
	dd	每个列表的内容