web前端开发第一节课

VS Code常用快捷键

1、快速生成HTML代码
  首先,建立一个空文档,选择编程语言为HTML;

       其次,按下!(英文状态下),再按下tab键,就可以了。也可以html:5

2、注释

单行注释:CTRL+/ 若注释后想要取消注释,可再CTRL+/ 即可取消,如下图

CTRL+/不能在编写过那一行后面注释,若想注释即 alt+shift+A,如下图

3、移动行

        向上移动一行:alt+up;向下移动一行:alt+down

4、显示或隐藏左侧目录栏 :  CTRL+b

5、复制当前行

        向上复制一行:shift+alt+up;向下复制一行:shift+alt+down

6、删除当前行: shift + ctrl + k

7、控制台显示隐藏:ctrl + ~

8、查找文件:ctrl + p

9、代码格式化:shift + alt +f

10、新建窗口: ctrl + shift + n

11、竖直的列光标,同时可以选中多列
  (1)按住alt,用鼠标左键点击,可以出现多个光标,输入的代码可以在光标处同时增加。

 

(2)按shift+alt,再使用鼠标拖动,也可以出现竖直的列光标,同时可以选中多列。

(3)也可以:按住Ctrl + Alt,再按键盘上向上或者向下的键,可以使一列上出现多个光标。

用Visual Studio Code写HelloWord:

 输入Hello World之后右键点Open In Default Browser

运行及结果

 

 在上图网页的名称为Document,若想修改为其他名称

 修改过程以及修改后运行的效果:(也可以修改保存(ctrl+s)之后在网页刷新)

 

写《登黄鹤楼》:

 列表标签

<ul>
        <li>服装</li>
        <li>鲜花</li>
        <li>美食</li>
    </ul>

 

 链接某个地址

<a href="https://www.csdn.cn/" target="_blank">CSDN欢迎您</a><br><br>

图片标签

<img src="./01.jpg" >

注释:01为照片的路径(可以是相对路径也可以是绝对路径,也可以是网上图片网址)

创建表格

border=‘1’创建一个表格,style设置表格的宽高,text-align:center表中的内容居中

<table border='1' style='width: 400px; height: 400px; text-align: center;'>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>15</td>
            <td>89</td>
        </tr>
        <tr>
            <td>小帽</td>
            <td>男</td>
            <td>16</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>17</td>
            <td>96</td>
        </tr>
        
    </table>

运行结果图

合并表格某行某列

colspan="2" 合并两列,在哪一列开始合并,写在哪一列<td>里

rowspan="2"合并两行,在哪一行开始合并,写在哪一行<td>里

colspan="2"  rowspan="2"同时合并两行两列,写在合并后格中所需内容那一行<td>里

<table border='1' style='width: 400px; height: 400px; text-align: center;'>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td colspan="2">小红帽</td>
            <td>15</td>
            <td>89</td>
        </tr>
        <tr>
            <td rowspan="2">小帽</td>
            <td>男</td>
            <td colspan="2" rowspan="2">16</td>
           
        </tr>
        <tr>
        
            <td>女</td>
            
        </tr>

 运行后结果图

开学第一节课所学内容总结在此,希望可以帮助到有需要的你!

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值