相关信息

vscode官网地址:https://code.visualstudio.com/download
上课日期:2020年12月8日

知识点概述

vscode的插件安装简单描述【html开发插件】
html的简单标签叙述 h标签 p标签 a链接与锚点,a链接与iframe,img图片标签

1.Vscode的插件安装

chinese 中文插件
image.png
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>

实战演示

演示环境说明

系统:centos8
web服务器:nginx
php版本:74
IDE: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