H5C3必备知识

学习前端知识 ,对前端开发形成基本认识,写出第一个HTML文件


开发工具准备:

安装Visual Studio Code,版本信息如图所示:

VScode版本信息

安装插件VSCode的插件,如图所示:
在这里插入图片描述
在这里插入图片描述

正文内容:

一、前端是什么?

按照用户作为分界点,直接面向用户的部分;用户可以看见,并且可以直接进行操作的页面,称之为前端,如:基于Web的页面开发,基于Android的页面开发;前端部分主要是页面数据的渲染工作,通俗的讲就是前端从后端接口拿到需要的数据,前端将数据渲染到页面上。

二、从H5C3开始

web开发的基础是以下三种技术:

  1. HTML5
  2. CSS3
  3. JavaScript

使用VSCode建立第一个HTML文件;开发工具使用技巧:输入!之后直接回车,生成HTML骨架;如图所示:
在这里插入图片描述
两个开发工具使用技巧:

  1. 使用组合键ctrl+k以及ctrl+f(格式化代码段),如果先使用ctrl+a全选后,使用组合键则可以格式化整个文件;
  2. alt+shift+f(格式化整个文件)

现在使用我们的默认浏览器打开我们的第一个Html文件,VSCode操作如图所示:
在这里插入图片描述

运行效果如图所示:
在这里插入图片描述

1.从第一个HTML开始:

开发工具使用技巧:ctrl+/注释代码段

<!DOCTYPE html><!--标记文件是HTML文档-->
<html lang="en"><!--html标签是根标签-->

<head><!--头部标签开始-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--浏览器页面中的将要显示的标题-->
</head><!--头部标签闭合-->

<body><!--HTML的主体-->
    <h1>这是一级标题!</h1><!--一级标题标签-->
</body><!--body标签闭合-->

</html><!--html标签闭合-->

HTML中的标签是分为单标签和双标签,比如说<body></body>就是双标签;<hr />就是单标签,表示在浏览器中渲染一条水平线。

2.一个简单的HTML范例

<!DOCTYPE html><!--标记文件是HTML文档-->
<html lang="en"><!--html标签是根标签-->

<head><!--头部标签开始-->
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title><!--浏览器页面中的将要显示的标题-->
</head><!--头部标签闭合-->

<body><!--HTML的主体-->

   <h1>了不起的文明现场</h1>
   <h2>内容简介</h2>
   <p>
       “上下五千年”早已刻入每一位中国人的基因,而考古学让我们看到另一个与古籍文献所载的中国相似又不同的华夏,也许难说二者谁更“真实”,但可以肯定的是,我们所能见到的中华文明景观,得益于考古学的襄助,已经殊为精彩,蔚为大观。<br />20世纪的考古发现在极大程度上丰富了我们对于中国历史的认知,改变了世界对中国文明的基本看法。
   </p>
   <p>
       全书从中国的重大考古发现中遴选出十个独具代表性的考古遗址——新石器时代的良渚古城、堪称最早的“中国”的二里头遗址、商代晚期的安阳殷墟、拨开古蜀迷雾的广汉三星堆、见证中西文明交流的小河墓地、秦始皇陵、汉代海昏侯墓、汉唐长安城、宋代沉船南海I号、敦煌莫高窟,分别由十位负责一线勘探的考古人——刘斌、许宏、唐际根、高大伦、伊弟利斯•阿不都热苏勒、段清波、杨军、刘瑞、崔勇、樊锦诗,以亲历者的角度为公众揭开考古探掘的面纱,带领读者来到中华上下五千年的文明现...
   </p>
   <hr />
   <img src="https://img1.doubanio.com/view/subject/s/public/s33657000.jpg" >
</body><!--body标签闭合-->

</html><!--html标签闭合-->

运行效果如图所示:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

The CrazyMan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值