菜鸟教程学习笔记——html（三）

HTML输出时浏览器会移除源代码中多余的空格和空行将其替换成一个空格。标题搜索引擎使用标题为您的网页的结构和内容编制索引。注:浏览器会自动地在标题的前后添加空行。h1这是一个标题。/h1h2这是一个标题。/h2h3这是一个标题。/h3!-- 注释浏览器会自动地在标题的前后添加空行。--段落注:浏览器会自动地在段落的前后添加空行。是块级元素p这是一个段落。/phr/!-- 创建水平线用于分割内容 --p这是br/两个段落。/p!-- br换行不产生一个新段落 --hr/p这是一个段落。/p注意浏览器会自动地在段落的前后添加空行。是块级元素链接ahrefhttps://www.baidu.com这是一个链接/a!-- 链接地址的指向可以是另一个网页、文件、邮件、电话号码或 JavaScript。--target定义链接的打开方式。_blank: 在新窗口或新标签页中打开链接。_self: 在当前窗口或标签页中打开链接默认。_parent: 在父框架中打开链接。_top: 在整个窗口中打开链接取消任何框架。rel定义链接与目标页面的关系。nofollow: 表示搜索引擎不应跟踪该链接常用于外部链接。noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题尤其是使用 target“_blank” 时。noopener: 防止新的浏览上下文页面访问window.opener属性和open方法。noreferrer: 不发送referer header即不告诉目标网站你从哪里来的。noopener noreferrer: 同时使用noopener和noreferrer。ahrefhttps://www.example.comtarget_blankrelnoopener新窗口打开 Example/aahrefhttps://www.example.comrelnoopener noreferrer安全链接/a!-- 防止访问window.opener属性和方法不告知访问来源。--链接类型!-- 链接类型 --ahrefhttps://www.example.com访问示例网站/a!-- 文本链接 --ahrefhttps://www.example.comimgsrcexample.jpgalt示例图片/a!-- 图像链接 --ahref#section2跳转到第二部分/a!-- 在页面中的某个位置 --anamesection2/aahref#tips访问有用的提示部分/aaidtips有用的提示部分/a!-- 锚点链接可跳转 --ahrefdocument.pdfdownload下载文档/a!-- 下载链接 --空链接以下是常见的几种设置空链接的方法以及它们之间的区别方法作用是否会跳转场景适用性href#导航到页面顶部是占位符捕获点击事件hrefjavascript:void(0)阻止默认行为不刷新页面否阻止跳转配合 JS 使用href刷新当前页面是需要页面刷新时hrefabout:blank打开空白页面是新窗口打开空白页面rolebutton链接表现为按钮无默认行为否配合 JS 实现按钮功能无跳转图像imgsrc/images/logo.pngwidth258height39/!-- 图像src是地址 --文本格式化b加粗文本/bbrbri斜体文本/ibrbrcode电脑自动输出/codebrbr这是sub下标/sub和sup上标/suppMy favorite color isdel删除字/delins插入字的效果/ins!/pHTML 文本格式化 | 菜鸟教程基本的注意事项 - 有用的提示注释请始终将正斜杠添加到子文件夹。假如这样书写链接href“https://www.runoob.com/html”就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址然后创建一个新的请求就像这样href“https://www.runoob.com/html/”。