预览效果
测试、预览网页效果时，不要双击打开*.html文件，要输入网址打开。

  1. 终端安装在线阅览效果的插件
    yarn global add http-server
    怎么用？
    http-server . -c-1 -c缓存-1不缓存
    可以缩写hs . -c-1
    在浏览器路径里写/[文件名].html
  2. 安装parcel
    yarn global add parcel
    怎么用？
    parcel [文件名.html]

a标签

- HTML（超文本标记语言） | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

  • 路径[/a/b/c和a/b/c是不同意思，/a表示在根目录下]
  • href=”javasript:;” 啥都不做
  • href=”mailto:XXX@126.com“发邮件给XXX
  • href=”tel:你的手机号”打电话给XXX
  • target
    • target=”_self” 当前页面打开，默认值
    • target=”_blank” 新标签打开
    • target=”_top” 当前页面顶级窗口打开
    • target=”_parent” 当前链接的所在的iframe上级窗口打开
    • target=”xxx” 套个百度，谷歌进 iframe

target指向iframe示例

  1. <body>
  2.   <a href="http://google.com" target="xxx">google</a>
  3.   <a href="http://baidu.com" target="xxx">baidu</a>
  4. <hr>
  5. <iframe style="border: none; width: 100%; height: 1000px;" name="xxx"></iframe>
  • download 不打开页面，而是下载页面，不是所有浏览器支持
  • rel=nodopener
  • id href=#xxx

可点击图片示例

  1. <a href="https://developer.mozilla.org/en-US/">
  2.   <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" 
  3.        alt="MDN logo" />
  4. </a>

img 标签 图片

用于一份图像嵌入文档 ：图像嵌入元素 - HTML（超文本标记语言） | MDN

  • src：指定图片链接地址（必须）
  • width/height：设置宽度/高度，设置一个就行，永远不要图片变形
  • title：设置图片标题，鼠标悬浮在图片上时显示
  • alt：设置提示，当图片加载失败时会显示
  • onload 事件
  • onerror 事件
  • max-width:100% 响应式

示例

  1. <img class="fit-picture"
  2.      src="/media/examples/grapefruit-slice-332-332.jpg"
  3.      alt="Grapefruit slice atop a pile of other slices">

table 标签 表格

素表示表格数据 — 即通过二维数据表表示的信息。

| , | 是表头数据标题，th=table head ,是表内容,td=table data 表尾（表格说明与备注部分） | | —- | —- |