1 Web前端开发概述

第2关:Web前端开发相关的技术

Web前端开发相关技术

本关任务:创建第一个网页。

相关知识

为了完成本关任务,你需要掌握:1.Web前端开发相关技术,2.Web前端开发工具。

基本应用技术

HTML

HTML是Internet上用于设计网页的基础语言。它是一种标记语言,用于对网页中的文本、图片、声音等内容进行描述,告诉浏览器以什么方式或结构显示网页内容。

CSS

CSS称作层叠样式表,“层叠”是指当在HTML中引用了多个样式文件,且当样式发生冲突时,浏览器能依据层叠顺序处理。CSS弥补了HTML对网页格式化方面的不足,不仅为网页元素提供了更为丰富显示效果,还可以实现网页布局和排版定位的作用。

JavaScript

JavaScript是一种脚本语言,它和HTML结合,使得用户与网页元素之间不只是浏览与显示的关系,而是实现了一种实时、动态、交互的页面功能。

Web前端开发工具

HTML是一种标签语言,标签语言代码是以文本形式存在的。因此,所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm。将编写好的文件另存为.html或.htm文件,就可以在浏览器中预览效果了。

NotePad

Notepad指代码编辑器或Windows中的“记事本”程序。是一种开源、小巧、免费的纯文本编辑器,建议初学者使用,以增加代码编写体验,增强对代码的理解和记忆。

TextPad

Textpad是一个强大的替代Notepad的文本编辑器,编辑文件的大小只受虚拟内存大小的限制。支持Unicode编码,可以编译、运行简单的Java程序。

Dreamweaver

Dreamweaver是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

HTML文档结构

完整的HTML文件包括头部和主体两大部分。代码示例如下:

HTML文档结构

其中:

  • 文档类型说明:<!DOCTYPE html>
  • 文档的开始和结束标签:
     
      
    1. <html>
    2. ......
    3. </html>
  • 文档头部的开始和结束标签:
     
      
    1. <head>
    2. ......
    3. </head>
  • 文档主体的开始和结束标签:
     
      
    1. <body>
    2. ......
    3. </body>
  • 网页标题的开始和结束标签:
     
      
    1. <title>
    2. ......
    3. </title>
  • 一级子标题的开始和结束标签:
     
      
    1. <h1>
    2. ......
    3. </h1>
  • 对齐属性:align属性用于设定标题的对齐方式,其取值可以为left、center、right、justify。

编程要求

仿照上面的示例,在右侧编辑器中的Begin - End区域内补充代码,具体要求是: 1.在<head></head>之间添加网页标题的设置,标题文字为“我的第一个网页”; 2.在<body></body>之间添加一级子标题的设置,子标题文字为“初识HTML”<h1>标签的align属性取值设置为左对齐。

测试说明

补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。


越努力越幸运,祝你成功!

 

<!DOCTYPE html>
<html>
<!-- ********* Begin ********* -->
 <head>
  <meta charset="utf-8"/>
  <title>我的第一个网页<title>
 </head>
 <body>
  <h1 align = left>初识HTML<h1>
 </body> 
<!-- ********* End ********* -->
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

静待花开︳

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

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

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

打赏作者

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

抵扣说明:

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

余额充值