HTML5基础(一):HTML 基础+格式化文本与段落

本文是一篇关于HTML5基础的实训教程,涵盖了HTML文档结构、标题字、meta标记、body属性、文本与段落标记的使用。通过一系列实训项目,包括学生简易主页设计、meta属性应用、文本格式化,帮助读者掌握Web前端开发的基础技能,如标题、段落、字体控制、上标、下标等,并强调了浏览器兼容性和预格式化的文本排版。
摘要由CSDN通过智能技术生成

实训目标

1) 了解 Web 前端开发工程师岗位需求和技术要求;

2) 了解 Web 前端开发技术组成;

3) 掌握 HTML 文档结构,学会编写简单的 HTML 程序;

4) 学会安装并使用常用 Web 前端开发工具(NotePad、Editplus、gedit、HBuilder、Jetrains WebStorm 等);

5) 掌握标题字、文本标记、段落与排版标记的语法;

6) 掌握文本段落排版的基本规则;

7) 能完成文本型 Web 网页的设计。

实训内容

1) 通过网络收集有关 Web 前端开发工程师岗位需要和技术要求;

2) 安装并使用各种常用的 Web 前端开发工具;

3) 安装各种 Web 浏览器软件,并熟知各种浏览器的功能和差异;

4) 掌握 NotePad、EditPlus 等 HTML 集成开发环境软件的功能;

5) 使用 NotePad、EditPlus 等编辑软件编写简易的 Web 网页程序;

6) 标题字标记、文本标记、段落与排版标记的应用。

实训项目

1) 学生简易主页设计;(30 分)

2) Meta 标记、body 标记属性使用;(30 分)

3) 文本与段落标记的应用;(30 分)

4) 课外拓展训练。(10 分)

下面就是博主自己完成的实训项目的过程附带部分个人思考:

项目 1-1 学生简易主页设计

实训指导过程:

1. 启动记事本程序,新建文本文件,修改文件名为“prj1-1.html”,在弹出的“重命名”对话 框中单击“是”按钮,如图所示。

实现的源码及HTML代码的基本格式框架如下:

 项目 1-2 meta标记、body标记属性的使用

实训指导过程:

1. 启动程序,创建 HTML 文档,在首行插入注释语句:<!--自己的姓名/学号-->;保存文件,输入文件名为 prj1-2.html。
2. 参照 meta 标记的定义,学会设置 meta 标记的 Keyword、Description、generator、Author
等属性。
3. 定义 body 标记的 bgcolor、background、text、link、alink、vlink、topmargin、leftmargin
等属性,实现页面背景颜色、背景图像和超级链接的颜色变化,注意同时设计 bgcolor、
background 属性使页面效果发生变化,并使用多种方法设置各类颜色。
4. 在 body 标记中插入段落 p 标记,段落内容如下:
Mozilla Firfox 是由 Mozilla 基金会与开源团体共同开发的网页浏览器。Firefox 28 全新
发布,从火狐官方中文网站上下载最新版 Firefox 火狐浏览器,拥有最快、最安全的上网体
验。

5. 在段落首部插入 4 个空格,设置“火狐官方中文网站”超链接。格式如下:

<a href=
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值