相关信息
vscode官网地址:https://code.visualstudio.com/download
上课日期:2020年12月8日知识点概述
vscode的插件安装简单描述【html开发插件】
html的简单标签叙述 h标签 p标签 a链接与锚点，a链接与iframe，img图片标签1.Vscode的插件安装
chinese 中文插件
html css support 集成更多
HTML/CSS/Javascript Snippets 代码片段
auto close tag 自动关闭标签
auto rename tag 自动重命名标签
2.html的标签简单叙述
- h标签
- p标签
- a链接与锚点
- a链接与iframe
- img图片标签
总结
标题标签:除了设置文档标题之外，是用来划分页面结构的常用的标题标签是h1-h3，h标签总共分6个等级 h1-h6页面中看得到的内容都是由元素组成的元素是由标签描述,标签根据元素的类型分为双标签和单标签每一个元素的特征，由属性来描述，描述的属性写到起始标签中元素是由标签和属性共同进行描述的html中的所有内容，如果想添加到html文档中，必须使用一个标签a标签是互联网的灵魂,实现了全球资源之间的共享使用锚点可以实现在当前页面中的任意位置进行跳转div:通用的容器标签，内部可以放任何类型的元素图片设置属性的时候，只需要设置一个，如宽度或高度，另一个属性会等比缩放通常使用css来设置大小，图片很少单独使用，用在链接中
h标题标签 与p标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签</title></head><body><!-- 标题标签:除了设置文档标题之外，是用来划分页面结构的 --><h1>我是h1标签</h1><h2>我是h2标签</h2><h3>我是h3标签</h3><!-- 常用得到是h1 to h3 --><h4>我是h4标签</h4><h5>我是h5标签</h5><h6>我是h6标签</h6><p>我是p标签段落</p><!-- 页面中看得到的内容都是由元素组成的元素是由标签描述,标签根据元素的类型分为双标签和单标签每一个元素的特征，由属性来描述，描述的属性写到起始标签中 --><br><br><!-- 元素是由标签和属性共同进行描述的。 --><!-- html中的所有内容，如果想添加到html文档中，必须使用一个标签 --><script>//js代码必须写到一个script标签中</script></body></html>
a链接与锚点，a链接与iframe
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>链接与锚点</title></head><body><!-- 链接标签 <a> --><!-- a标签是互联网的灵魂,实现了全球资源之间的共享 --><!-- 在自身窗口打开 --><a href="href是跳转的目标" target="_self">这里是a标签的载体</a><!-- 在新窗口打开 --><a href="href是跳转的目标" target="_blank">这里是a标签的载体</a><!-- 在iframe框架中打开 --><a href="https://www.php.cn" target="blog">点我切换iframe</a><br><br><iframe src="https://www.gzj2001.com" name="blog" framborder="0"></iframe><!-- 使用锚点可以实现在当前页面中的任意位置进行跳转 --><a href="#maodian">锚点跳转</a><!-- 创建锚点 --><!-- div:通用的容器标签，内部可以放任何类型的元素 --><div id="maodian" style="margin-top: 1000px;"><!-- 给任何元素添加id 就是添加锚点 --><a href="#">回到顶部，默认#即可</a></div></body></html>
img图片标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片元素</title></head><body><img src="https://img.gzj2001.com/logo.jpg" alt="logo 这里是文本说明"><!-- 图片设置属性的时候，只需要设置一个，如宽度或高度，另一个属性会等比缩放 --><!-- 通常使用css来设置大小，图片很少单独使用，用在链接中 --></body></html>
实战演示
演示环境说明
系统:centos8web服务器：nginxphp版本:74IDE:vscode
演示代码合集
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>day1</title></head><body><!-- h标题标签示例 --><h1>day1教学知识点</h1><!-- p标签示例 --><p>day1主要解学内容包括:标题标签，p段落标签，链接与锚点及iframe，img图片标签</p><!-- 链接示例 --><a href="https://www.gzj2001.com" target="_self">点击前往城南博客【默认当前页面打开】</a><a href="https://www.gzj2001.com" target="_blank">点击前往城南博客【新页面打开】</a><!-- 链接与iframe示例 --><br><a href="https://www.baidu.com" target="iframe">点我切换iframe的内容</a><br><iframe src="https://www.gzj2001.com" name="iframe" width="50%" height="50%"></iframe><!-- 链接与锚点示例 --><br><a href="#footer">点我前往底部查看img标签的示例</a><div id="footer" style="margin-top: 1000px;"><p>我是底部</p><a href="#">点我回到顶部</a></div><!-- img标签的示例 --><img src="https://img.gzj2001.com/logo.jpg" alt="城南博客的logo"></body></html>
演示地址
https://php.gzj2001.com/day1/index.html
My Blog: www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html