Vscode软件配置及Html元素部分标签含义

Vscode软件配置及Html元素标签含义

1.环境配置

• 编辑器：Vscode
• 浏览器：chrome

---

2.Vscode常用插件

• Chinese 中文插件
• HTML CSS Support 第三方弥补官方代码提示不足
• HTML/CSS/Javascript Snippets 代码片段
• Auto Rename Tag 标签自动更名
• Auto Close Tag 标签自动关闭
• One Dark Pro 护眼深色主题 天蓬老师推荐solarized（日晒主题）
• markdownlint Markdown 语法检查器
• Markdown Preview Enhanced Markdown预览
• Live Server 让代码直接运行不需要刷新

通过微软账号，即使更换电脑也可以自动同步插件

3.chrome浏览器插件

• iGG谷歌访问助手 用来访问谷歌chrome商店
• Charset 修改网站编码
• Dark Reader 暗黑护眼模式
• chrome-color-picker 取色器
• Page Ruler Redux 尺子前端量尺寸
• 划词翻译/简悦/

4.元素和标签及属性

页面是由元素构成，用标签描述元素，元素特征用属性描述，而属性要写到标签中

---

标题和段落

<!-- 一段内容到底是标题还是段落，需要用标签来描述 -->
<h1>今天天气很好</h1>
<p>这是一段文字</p>

页面中看到的内容就是元素，html中的所有内容，要添加到页面中，必需要使用一个标签

标题除了设置文档标题外，还可用来划分页面结构

<h1>大标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一个页面一般只用一个大标题

内容<p></p> P标签

<p>有朋自远方来，不亦乐乎！</p>

---

链接与锚点

链接标签 a标签

<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!-- 在新窗口打开百度 -->

在<iframe></iframe>中打开a链接，需要使用<iframe>标签的name属性绑定a链接的target属性，name值要与target值相同

<a href="http://www.php.cn" target="kj">php中文网</a>
<iframe name="kj" srcdoc="点击链接在此打开中文网" width="360"></iframe>

锚点使用id添加锚点，用a标签进行跳转，在当前页面加#号跳转

<a href=#footer>跳转底部</a>
<!-- 创建锚点 -->
<div id="footer" style="margin-top:1000px">我是底部</div>
<a href="#">回到顶部</a>

---

图片元素

图片标签使用<img>标签

<img src="图片地址" alt="替代图片的文字" title="鼠标放在图片上时的提示文字">

<img src="周杰伦.jpg" alt="周杰伦" title="无与龙比 为杰沉沦！" width="600px">

Markdown 无法设置图片大小

---