前端的开发环境及HTML的标签元素

前端的开发环境

代码工具—VSCode，浏览器—Chrome
安装VSCode插件，Chrome安装插件用igg

HTML的标签元素

1.概括网页跟标签的关系

网页是由HTML的标签元素组成；

标签又分为双标签跟单标签；

只要在HTML中添加内容就会用到标签；

标签具有属性，属性的值会改变标签的一些样式或功能。

---

下面是一段HTML中插入的JavaScript代码，需要放在script标签里

<script> const str = '这是一段js代码'； </script>

下面是一段HTML中插入的php代码，需要放在php标签里

<?php echo "Hello World！"; ?>

2.初识一些基础标签

h1:标题标签，除了设置文档标题之外，还可以用来划分页面结构（h1,h2,h3,h4,h5,h6依次由大到小）

h1

h2

h3

h4

h5

h6

p:段落内容标签

<p>程序猿界有一句话：每一个程序猿都应该拥有一台MacBook Pro</p>

a:链接标签

属性target的值

_blank 跳转到新的页面，在新窗口打开

---

_self (默认) 在相同的框架中打开被链接文档

---

_parent 在父框架集中打开被链接文档

---

_top 在整个窗口中打开被链接文档。

---

iframename 在指定窗口打开

---

<!-- _self 当前窗口打开 -->
<a href="跳转目标" target="_self">Hello World</a>

<!-- _blank 跳转到新的页面，在新窗口打开 -->
<a href="跳转目标" target="_blank">Hello World</a>

<!-- 在指定窗口打开 target="iframe内联框架的name值" -->
<a href="https://www.baidu.com/" target="baidu">打开百度</a>
<iframe srcdoc="点击上面的按钮打开百度" name="baidu" frameborder="0" width="600" height="500"></iframe>

a链接还可以跳到当前页面指定位置

<!-- 创建锚点 -->

<div id="footer" style="margin-top: 1000px;">This is footer</div>
<!-- 跳转到锚点 -->
<a href="#footer">点击我跳到id为footer的位置</a>

img:图片标签

属性
src——图片的URL地址
alt——图片的描述信息
可以设置宽高属性，默认单位px，只需要设置宽，高中的一项，会等比变化，同时修改可能会使图片变形