首页 > 博客列表 > Day1前端html的几个简单标签与vscode的安装

博主信息

博文 16

粉丝 0

访问量 19372

专题推荐

更多>

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

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【Mysql】使用宝塔面板搭建并管理数据库服务器

2020-08-18 19:16:25

相关信息

知识点概述

1.Vscode的插件安装

2.html的标签简单叙述

总结

h标题标签与p标签

a链接与锚点，a链接与iframe

img图片标签

实战演示

演示环境说明

演示代码合集

演示地址

相关信息

知识点概述

1.Vscode的插件安装

2.html的标签简单叙述

总结

h标题标签 与p标签

a链接与锚点，a链接与iframe

img图片标签

实战演示

演示环境说明

演示代码合集

演示地址

h标题标签与p标签