HTML初次体验

1.1 HTML的感知

问题1:什么是HTML?

问题2:HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的?

1.2 小结

问题1:

  • 超文本标记语言(Hyper Text Markup Language)

问题2:

  • HTML标签

1.3 [练习 体验]

  1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:网页体验.html

  2. 双击这个文件,输入以下代码等内容 → 记得保存!

    <p>彦祖pink学前端,一起高薪赚大钱</p>
  3. 双击网页体验.html ,浏览器会自动打开文件并显示之前输入的内容

 

1.4 HTML骨架结构

问题1:HTML骨架结构由哪些标签组成?

1.5 小结

问题1:

  • html标签:网页的整体(页面最大的标签,根标签)

  • head标签:网页的头部

  • body标签:网页的身体

  • title标签:网页的标题

1.6 [练习]

  1. 新建HTML文件→ 命名为:Html骨架结构标签.html

  2. 输入以下代码

    <html>
        <head>
            <title>网页标题</title>
        </head>
        <body>
            键盘敲烂,月薪过万.
        </body>
    </html>

    3 双击文件使用浏览器看效果

 

1.7 开发工具基本操作(VScode)

前端开发神器:VS Code → 速度快、体积小

VS Code使用前要求:

  1. VScode 软件安装完毕

  2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕

  3. open in browser 直接打开浏览器插件安装完毕

VS Code基本的快捷键:

  1. 快速生成标签:英文 + tab

  2. 保存文件:ctrl + s • 注意1:写完文件之后务必需要保存文件,否则网页无变化 • 注意2:可以设置自动保存省去每次保存的麻烦

  3. 快速查看网页效果:右击 → Open in Default Browser • 快捷键:alt + b • 注意:必须安装了open in browser 插件

  4. 快速生成结构标签:! + tab • 注意1:!必须是英文的,中文!无效 • 注意2:必须保证当前文件后缀名是.html,否则无效 • VS Code自动生成的骨架多了其他标签,之后会介绍

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值