前端开发环境与html基础

前端开发环境与html基础

vscode常用插件

• Chinese (Simplified) Language Pack for Visual Studio Code（ 简体中文）
• HTML CSS Support（HTML与css代码提示）
• HTML/CSS/Javascript Snippets（ HTML与css代码片段）
• Live Server（代码在浏览器同步刷新）
• Auto close tag（标签自动闭合）
• Auto Remame Tag（标签自动更名）

文本链接锚点与图片

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <p>段落标签</p>
    <p>段落标签</p>
    <img src="11.png" alt="这是一张图片" height="200" />

效果

---

链接标签

    <a href="http://www.baidu.com" target="_blank">11</a>

• target默认属性值为：_self(当前窗口打开)，_blank（新窗口打开）

---

    <a href="http://www.baidu.com" target="baidu">打开百度</a>
    <br />
    <iframe
      srcdoc="<em>点击上面的打开百度</em>"name="baidu"width="600"></iframe>

• 如果a标签的target值绑定了iframe内联框架的name值，则在当前页以画中画形式打开指定网址

锚点（任何元素添加ID即可以当做锚点使用）

1 在链接文本的href属性中，创建一个ID名,加#
2 在目标位置标签创建同样ID名，不加#

    <a href="#footer"> 跳到底部</a>
    <div id="footer" style="margin-top: 1000px">底部</div>