博客列表 >本地配置vscode和chrom演练html标签

本地配置vscode和chrom演练html标签

后网络时代
后网络时代原创
2021年01月18日 15:09:48541浏览

1. 下载vscode和chrome并配置到能用状态;

答:分别去vscode和chrome的官网下载对应软件,然后安装,首先来配置vscode:
在vscode的扩展中分别安装:

  • 简体中文,安装完了之后重启,
  • 先安装配置开发前端的环境:
  • HTML CSS Souport 对html和css的书写提示
  • HTML/css/javascript snippets 代码片段生成
    如 div 会自动生成<div></div>,
    clo 会自动生成console.log(‘object :>> object);
  • Auto Rename Tag 标签自动改名
  • 主题安装:编辑器主题和文件主题:
    one dark推荐使用
  • 安装markdown语法检查器
  • 安装markdown Preview Enchanced:markdown文件的预览 器
  • Liver Server直接在浏览器预览写好的文件,需要在首选项
    配置,我们用的是谷歌浏览器
    扩展安装完成之后,在微软注册账号,同步配置,以便再次安装后能快速回复配置
  • 谷歌浏览器安装完成后,现在开始配置:
    为了使用谷歌的搜索引擎,需要安装一个叫做igg的软件扩 展,安装方法:1先下载igg,解压缩到一个文件夹,然后打 开谷歌的扩展,进入开发者模式,然后拖入到开发者界面 即可完成安装。
    还可以进去谷歌的应用商店进行下载扩展,可以根据自己的要求安装。常用的插件有,简约,划词语软件等

2. 将课堂上提及的所有标签全部按自己理解写一遍并提交到作业中;

答:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>HTML标签演练</title>
  6. </head>
  7. <body>
  8. <a href="#footer">跳转到底部</a> 锚点
  9. 标题
  10. <h1>这是标题 1</h1>
  11. <h2>这是标题 2</h2>
  12. <h3>这是标题 3</h3>
  13. <h4>这是标题 4</h4>
  14. <h5>这是标题 5</h5>
  15. <h6>这是标题 6</h6>
  16. 段落
  17. <p>天下大事始于细</p>
  18. 链接:
  19. <a href="https://www.baidu.cn/" target="_self">百度一下</a>
  20. <hr>
  21. <a href="https://www.baidu.com/" target="baidu">打开小度</a>
  22. <hr>
  23. <iframe srcdoc="<em>点击上面的:小度</em>" name="baidu" width="400"></iframe>
  24. <hr>
  25. 锚点的使用:
  26. <div id="footer" name="footer" style="margin-top: 1000px">底部</div>
  27. <a href="#">回到顶部</a>
  28. </body>
  29. </html>

效果:

3. 复习列表,表格和表单

答:

  1. <input> 文本框
  2. <textarea> 文本域
  3. <button> 按钮
  4. <select> 选择框
  5. <option> 选择项
  6. <optgroup>通过 <optgroup> 标签把相关的选项组合在一起:
  7. <fieldset>
  8. <fieldset> 组合相关3信息
  9. <legend>健康信息</legend>
  10. 身高:<input type="text" />
  11. 体重:<input type="text" />
  12. </fieldset>
  13. <label> 标签为 input 元素定义标注(标记)

效果:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议