Community Learn Tools Library Leisure
search
English
Home > List of blog posts > vscode连字体安装、Html理论知识及扩展练习
Blogger Information
Blog 12
fans 0
comment 1
visits 12578
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vscode连字体安装、Html理论知识及扩展练习
月缺
Original
2010 people have browsed it

文章目录

字体安装

连接字体， >=为≥, ===为三横线

  1. 下载群文件字体<b><u>Fira_Code_v5.2.zip</u></b>压缩包,然后解压得到如下图，进入ttf文件夹，然后ctrl+a全选，鼠标右键点击安装。

  2. vscode编辑器中再设置字体格式，ctrl+,打开配置文件setting.json文件，添加如下两个配置， 重启vscode即可

    1. "editor.fontFamily": "Fira Code",
    2. "editor.fontLigatures": true,

Html基础及常用标签

html文档结构

html文件DDT声明，告诉web浏览器使用哪种html版本

根元素html标签，及其属性lang定义zh-CN用来告诉浏览器用什么语言来解析文件

html描述标签meta，一般html文件中有多个meta标签用来帮助浏览器搜索引擎如何解析当前页面:

  • 定义字符集<meta charset="UTF-8">

  • 兼容IE浏览器。

    1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 移动web下页面窗口宽度适配,设置视口可视窗口，保持不同型号手机下当前页面内容模块展示比例完好，不会错乱。
    1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

title标签定义网页标题。

html常用布局标签

div、header、main、footer

html链接与图像

a标签href属性值跳转

超链接访问标签

  • 跳转到站外

  • 指定窗口打开

  • 站内跳转| 使用锚点

    1. <a href="#name">定位</a>
    2. <h2 id="name"></h2>

    回到页面顶部，页面刷新

    1. <a href="#" />

img标签

src属性引用图标物理资源路径，即可在网页中浏览图片，alt属性用于图片加载失败时的错误提示

<img src="zs.png1" alt=“这是错误图片” />

iframe标签

网站内联标签，网页内部可包裹到其他网站

<iframe src="https://www.csdn.net/?spm=1000.2115.3001.4476" frameborder="0"></iframe>

table标签

数据表格，用以展示结构化数据

  1. <table>
  2.     <tr>
  3.         <td>星期一</td>
  4.         <td>星期二</td>
  5.         <td>星期三</td>
  6.         <td>星期四</td>
  7.         <td>星期五</td>
  8.         <td>星期六</td>
  9.         <td>星期七</td>
  10.     </tr>
  11. </table>

Html扩展练习

  1. <!DOCTYPE html>
  2. <html lang="zh-Cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>html网页练习</title>
  8.     <style>
  9.       .cotent {
  10.         width: 80%;
  11.         height: 100px;
  12.       }
  13.       .table {
  14.         width: 80%;
  15.         height: 500px;
  16.       }
  17.       h1,h2,h3,h4,ul,ol{
  18.         margin: 0;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <header>
  24.       <nav>
  25.         <a href="#shouye">首页</a>
  26.         <a
  27.           href="https://www.tmall.com/?ali_trackid=2:mm_26632258_3504122_55934697:1632022957_131_1049554640&union_lens=recoveryid:1632022957_131_1049554640&clk1=8016c436751e13f69c846cc4dd91f3a3&bxsign=tbkEkfNDRl8NzRNgdtJo+jGExLDLkZipxerOCglFRee66iVeSumQx5f0KMKMD0vZvkhOnRCfxp65HnUOK9Q2qVo73s90ZBmx+unNygf+lAiUR4="
  28.           target="tianmao"
  29.         >
  30.           天猫
  31.         </a>
  32.         <a href="#taobao">淘宝</a>
  33.         <a href="#img">图片</a>
  34.         <a href="#table">table</a>
  35.       </nav>
  36.     </header>
  37.     <main>
  38.       <h2 id="shouye">首页</h2>
  39.       <a href="#">回到顶部</a>
  40.       <div class="cotent" style="display: flex">
  41.         <div>
  42.           <h4>有序列表</h4>
  43.           <ol>
  44.             <li>item1</li>
  45.             <li>item2</li>
  46.             <li>item3</li>
  47.           </ol>
  48.         </div>
  49.         <div>
  50.           <h4>无序列表</h4>
  51.           <ul>
  52.             <li>item1</li>
  53.             <li>item2</li>
  54.             <li>item3</li>
  55.           </ul>
  56.         </div>
  57.       </div>
  58.     </main>
  59.     <main>
  60.       <h2>天猫</h2>
  61.       <a href="#">回到顶部</a>
  62.       <div class="cotent">
  63.         <iframe
  64.           class="cotent"
  65.           srcdoc="点击导航才可看到哦"
  66.           name="tianmao"
  67.           frameborder="0"
  68.         ></iframe>
  69.       </div>
  70.     </main>
  71.     <main>
  72.       <h2 id="taobao">淘宝</h2>
  73.       <a href="#">回到顶部</a>
  74.       <iframe
  75.         class="cotent"
  76.         src="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%A5%B3%E8%A3%85&clk1=0219d98a185a5e13a1b79cce771f3509&upsId=0219d98a185a5e13a1b79cce771f3509"
  77.         frameborder="0"
  78.       >
  79.       </iframe>
  80.     </main>
  81.     <main>
  82.       <h2 id="img">图片</h2>
  83.       <a href="#">回到顶部</a>
  84.       <div class="cotent" style="display: flex;justify-content: space-around;">
  85.         <img src="https://img2.baidu.com/it/u=2331136183,3185089499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="狗1">
  86.         <img src="https://img1.baidu.com/it/u=1063587134,1244902703&fm=26&fmt=auto" alt="狗2">
  87.         <img src="https://img1.baidu.com/it/u=2700820116,536360534&fm=26&fmt=auto" alt="狗3">
  88.         <img src="https://img2.baidu.com/it/u=4125697860,2409611617&fm=26&fmt=auto" alt="狗带">
  89.       </div>
  90.     </main>
  91.     <main>
  92.       <h2 id="table">table</h2>
  93.       <a href="#">回到顶部</a>
  94.       <div class="table">
  95.         <table border="1" width='600'>
  96.           <caption>小学课表</caption>
  97.           <thead>
  98.             <tr>
  99.               <th>时间</th>
  100.               <th>周一</th>
  101.               <th>周二</th>
  102.               <th>周三</th>
  103.               <th>周四</th>
  104.               <th>周五</th>
  105.             </tr>
  106.           </thead>
  107.           <tbody>
  108.             <tr>
  109.               <td rowspan="4">上午</td>
  110.               <td>数学</td>
  111.               <td>数学</td>
  112.               <td>数学</td>
  113.               <td>数学</td>
  114.               <td>数学</td>
  115.             </tr>
  116.             <tr>
  117.               <td>数学</td>
  118.               <td>数学</td>
  119.               <td>数学</td>
  120.               <td>数学</td>
  121.               <td>数学</td>
  122.             </tr>
  123.             <tr>
  124.               <td>数学</td>
  125.               <td>数学</td>
  126.               <td>数学</td>
  127.               <td>数学</td>
  128.               <td>数学</td>
  129.             </tr>
  130.             <tr>
  131.               <td>数学</td>
  132.               <td>数学</td>
  133.               <td>数学</td>
  134.               <td>数学</td>
  135.               <td>数学</td>
  136.             </tr>
  137.           </tbody>
  138.           <tbody>
  139.             <tr bgcolor="yellowgreen">
  140.               <td colspan="6">中午休息</td>
  141.             </tr>
  142.           </tbody>
  143.           <tbody>
  144.             <tr>
  145.               <td rowspan="4">下午</td>
  146.               <td>数学</td>
  147.               <td>数学</td>
  148.               <td>数学</td>
  149.               <td>数学</td>
  150.               <td>数学</td>
  151.             </tr>
  152.             <tr>
  153.               <td>数学</td>
  154.               <td>数学</td>
  155.               <td>数学</td>
  156.               <td>数学</td>
  157.               <td>数学</td>
  158.             </tr>
  159.             <tr>
  160.               <td>数学</td>
  161.               <td>数学</td>
  162.               <td>数学</td>
  163.               <td>数学</td>
  164.               <td>数学</td>
  165.             </tr>
  166.           </tbody>
  167.           <tbody>
  168.             <tr>
  169.               <td>备注</td>
  170.               <td colspan="5" bgcolor="orangered">每天下午15:30-17:30在校写作业</td>
  171.             </tr>
  172.           </tbody>
  173.         </table>
  174.       </div>
  175.     </main>
  176.   </body>
  177. </html>

运行结果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post