search

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

Day1前端html的几个简单标签与vscode的安装

Allen在php中文网的学习笔记
Allen在php中文网的学习笔记原创
2020年12月08日 22:13:19621浏览

相关信息

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图片标签

总结

  1. 标题标签:除了设置文档标题之外，是用来划分页面结构的
  3. 常用的标题标签是h1-h3，h标签总共分6个等级 h1-h6
  5. 页面中看得到的内容都是由元素组成的
  7. 元素是由标签描述,标签根据元素的类型分为双标签和单标签
  9. 每一个元素的特征，由属性来描述，描述的属性写到起始标签中
  11. 元素是由标签和属性共同进行描述的
  13. html中的所有内容，如果想添加到html文档中，必须使用一个标签
  15. a标签是互联网的灵魂,实现了全球资源之间的共享
  17. 使用锚点可以实现在当前页面中的任意位置进行跳转 
  19. div:通用的容器标签，内部可以放任何类型的元素
  21. 图片设置属性的时候，只需要设置一个，如宽度或高度，另一个属性会等比缩放
  23. 通常使用css来设置大小，图片很少单独使用，用在链接中

h标题标签 与p标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>标签</title>
  7. </head>
  8. <body>
  9.     <!-- 标题标签:除了设置文档标题之外，是用来划分页面结构的 -->
  10.     <h1>我是h1标签</h1>
  11.     <h2>我是h2标签</h2>
  12.     <h3>我是h3标签</h3>
  13.     <!-- 常用得到是h1 to h3 -->
  14.     <h4>我是h4标签</h4>
  15.     <h5>我是h5标签</h5>
  16.     <h6>我是h6标签</h6>
  17.     <p>我是p标签段落</p>
  18.     <!-- 页面中看得到的内容都是由元素组成的
  19.     元素是由标签描述,标签根据元素的类型分为双标签和单标签
  20.     每一个元素的特征，由属性来描述，描述的属性写到起始标签中 -->
  21.     <br>
  22.     <br>
  23.     <!-- 元素是由标签和属性共同进行描述的。 -->
  24.     <!-- html中的所有内容，如果想添加到html文档中，必须使用一个标签 -->
  25.     <script>
  26.         //js代码必须写到一个script标签中
  27.     </script>
  28. </body>
  29. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>链接与锚点</title>
  7. </head>
  8. <body>
  9.     <!-- 链接标签 <a> -->
  10.         <!-- a标签是互联网的灵魂,实现了全球资源之间的共享 -->
  11.         <!-- 在自身窗口打开 -->
  12.         <a href="href是跳转的目标" target="_self">这里是a标签的载体</a>
  13.         <!-- 在新窗口打开 -->
  14.         <a href="href是跳转的目标" target="_blank">这里是a标签的载体</a>
  15.         <!-- 在iframe框架中打开 -->
  16.         <a href="https://www.php.cn" target="blog">点我切换iframe</a>
  17.         <br>
  18.         <br>
  19.         <iframe src="https://www.gzj2001.com"  name="blog" framborder="0"></iframe>
  22.         <!-- 使用锚点可以实现在当前页面中的任意位置进行跳转 -->
  23.         <a href="#maodian">锚点跳转</a>
  25.         <!-- 创建锚点 -->
  27.         <!-- div:通用的容器标签，内部可以放任何类型的元素 -->
  28.         <div id="maodian" style="margin-top: 1000px;">
  29.             <!-- 给任何元素添加id 就是添加锚点 -->
  30.             <a href="#">回到顶部，默认#即可</a>
  31.         </div>
  32. </body>
  33. </html>

img图片标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>图片元素</title>
  7. </head>
  8. <body>
  9.     <img src="https://img.gzj2001.com/logo.jpg" alt="logo 这里是文本说明">
  11.     <!-- 图片设置属性的时候，只需要设置一个，如宽度或高度，另一个属性会等比缩放 -->
  12.     <!-- 通常使用css来设置大小，图片很少单独使用，用在链接中 -->
  13. </body>
  14. </html>

实战演示

演示环境说明

  1. 系统:centos8
  2. web服务器：nginx
  3. php版本:74
  4. IDE:vscode

演示代码合集

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>day1</title>
  7. </head>
  8. <body>
  9.     <!-- h标题标签示例 -->
  10.     <h1>day1教学知识点</h1>
  11.     <!-- p标签示例 -->
  12.     <p>day1主要解学内容包括:标题标签，p段落标签，链接与锚点及iframe，img图片标签</p>
  13.     <!-- 链接示例 -->
  14.     <a href="https://www.gzj2001.com" target="_self">点击前往城南博客【默认当前页面打开】</a>
  15.     <a href="https://www.gzj2001.com" target="_blank">点击前往城南博客【新页面打开】</a>
  16.     <!-- 链接与iframe示例 -->
  17.     <br>
  18.     <a href="https://www.baidu.com" target="iframe">点我切换iframe的内容</a>
  19.     <br>
  20.     <iframe src="https://www.gzj2001.com" name="iframe" width="50%" height="50%"></iframe>
  22.     <!-- 链接与锚点示例 -->
  23.     <br>
  24.     <a href="#footer">点我前往底部查看img标签的示例</a>
  25.     <div id="footer" style="margin-top: 1000px;">
  26.         <p>我是底部</p>
  27.         <a href="#">点我回到顶部</a>
  28.     </div>
  30.     <!-- img标签的示例 -->
  31.     <img src="https://img.gzj2001.com/logo.jpg" alt="城南博客的logo">
  32. </body>
  33. </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

上一条：1208-安装vscode与初识html下一条：mysql出现很多sleep状态出力方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多