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文件包括头部和主体两大部分。代码示例如下:
其中:
- 文档类型说明:
<!DOCTYPE html>
- 文档的开始和结束标签:
<html>
......
</html>
- 文档头部的开始和结束标签:
<head>
......
</head>
- 文档主体的开始和结束标签:
<body>
......
</body>
- 网页标题的开始和结束标签:
<title>
......
</title>
- 一级子标题的开始和结束标签:
<h1>
......
</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>