H系列标签(Header1-6)
- 添加标题这一语义,标题标签
- 共6个,H1最大,H6最小
- 独占一行
-企业开发慎用H系列标签,一般情况一个网页只有一个H1标签用作标题(与SEO搜索优化有关)
P标签
- 段落标签
- 独占一行
Hr标签
- 单标签
- 作用:分割线,用于表示段落级元素之间的主题转换
- 独占一行
img标签
- 作用:显示图片
- 格式
- <img src="" alt="" title="">
- src 图片名称/来源路径
- alt 当图片找不到时显示的内容
- title 鼠标悬停显示描述的内容
- <img src="" alt="" title="">
- 不会独占一行
- 不设置宽高,则默认宽高显示
设置宽高,则按指定宽高显示,但会可能导致图片变形
设置宽或高其中一个值,则会等比缩放
br标签
- 作用:换行
- 在企业开发中很少使用br标签
路径问题
- src属性赋值有两种方式
- 相对路径
每次都从.html文件所在的文件夹开始查找
- 同级
格式:src="picture.jpg" - 下级
格式:src="images/picture.jpg" - 上级
格式:scr="../picture.jpg"
- 绝对路径
每次都从指定盘符查找,企业开发基本不用
格式:src="C:\Users\?\?\picture.jpg"
- 相对路径
- 注意点:
- 企业开发中如果编写路径,统一使用反斜杠“/”,因为程序部署到其他操作系统的服务器上,而其他操作系统路径都是/,如果你写的不是/,可能导致问题
- 企业开发中一般不适用绝对路径,因为可移植性不好
a标签
- 作用:控制页面与页面跳转
- 格式:<a href="指定需要跳转的链接">展现给用户查看的内容</a>
如:<a href="https://www.baidu.com">百度</a> - 注意点
- a标签不仅能让文字点击,也可以让图片点击
- 一个a标签必须有一个href属性,否则无法跳转
- href属性指定的URL地址,必须加http://或https://
- href属性除了网络地址跳转外还能跳转本机地址
- target属性
- _self:在当前选项卡跳转页面
- _blank:在新的选项卡中跳转页面
- title属性
控制鼠标悬停时提示的文本
base标签
- 统一指定当前网页中所有的超链接(a标签)的打开方式
- 写在head里
- 如:<base target="_blank"
假链接
- 点击之后不会跳转
- 开发时未开发跳转的页面用假链接代替,后期其他界面都完成了用真链接代替
- 格式:
1.href="#"
2.href="javascript:"- 区别:#点击之后会自动回到网页顶部,javascript:则不会
- 返回顶部按钮就是用#假链接做的
锚点
- 要想通过a标签跳转到指定位置,需要告诉a标签一个独一无二的id才能跳转
- 给跳转目标位置的标签添加id属性,指定独一无二的值
- 如<a href="#bottom">跳转到底部</a>
<div id="bottom">我是底部</div> - 注意点
- 没有过度动画,直接跳转
- a标签除了跳转到当前界面的指定位置外,还能直接跳转到其他界面的指定位置
- 如:<a href="锚点测试.html#bottom">跳转到底部</a>
- href属性其他页面位置直接+id