1208-安装vscode与初识html

1.谷歌插件

igg谷歌访问助手
划词翻译
简阅-阅读简单文章
2.Vscode插件
Chinese 简体中文语言包
Html CSS support
Html/CSS/Javascript snippets
Auto raname tag
one dark pro 主题
3.Vscode快捷键
!+tab补全代码
Ctrl+k Ctrl+l 切换折叠
Ctrl+/ 注释
Shift+alt+a 块注释
Html知识点
页面中看到的内容都是由元素组成的
元素都是标签描述，标签根据元素的类型分类双标签和单标签
html内容样式，取决于标签，内容是很多元素组成的
html中的所有内容，如果想添加到html文档中，就必须要使用一个标签
任何一个元素只要给他一个id，就是一个标识点

标题与段落

<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<p>这是p标签段落</p>
<gral sex="nv" sw="80,90,100" height="170" weight="200">女朋友</gral>
<!-- html中的所有内容，如果想要添加到html文档中，就必须要使用一个标签 -->
<!-- js代码必须写到一个script标签中 -->
<script>
const SITE = "Hello world!";
</script>
<!-- 标题标签：除了设置文档标题之外，还可以用来划分页面结构的 -->
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<!-- 内容标签<p></p> -->
<p>程序员界有一句话：每一个程序员都应该拥有一台MacBook pro</p>

a标签使用

<!-- a标签当前页面跳转 -->
<a href="https://www.php.cn/">php中文网</a>
<!-- a标签新窗口新页面跳转 -->
<a href="https://www.php.cn/" target="_blank">php中文网</a>

iframe内联

<!-- 点击a标签在iframe访问页面 -->
<a href="https://www.baidu.com" target="baidu">打开百度</a>
<iframe srcdoc="<em>点击上面打开百度</em>" name="baidu" width="400"></iframe>

使用iframe时，需要注意a标签的target值需要跟iframe内的name属性值相等

锚点使用

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

img使用

<!-- 通过src打开一张网络图片地址 -->
<img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" />
<!-- 图片设置大小的时候只需要设置一个如宽度，或高度，另一个会等比缩放 -->
<img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" width="200" />