Web前端开发——HTML基础、格式化文本与段落

一、自荐信页面

题目:
编写代码实现如图3-12所示的页面效果。设计要求:页面上方水平分隔线粗细为1px、颜色为#000fff,页面下方水平分隔线粗细为1px、颜色为#00ffff。

Web前端开发——HTML基础、格式化文本与段落_第1张图片
注意观察图片上文字结构:两道分隔线,分隔线中间是正文,正文内容注意段落的首行缩进和换行。这些是在编写网站代码时需要注意的内容
下手实践:
Web前端开发——HTML基础、格式化文本与段落_第2张图片

知识要点:
1、如果想要自己在桌面新建html文档,可以选择新建文档,将文档后缀名改为html。在更改后缀名时要注意自己的电脑是不是设置了隐藏后缀名选项(可以在“文件—查看—选项—查看”中查看),如果设置了隐藏文件后缀名选项,则更改文档后缀名会更改失败;
2、在Sublime Text软件中,使用"!"+"Tab"键 自动生成HTML文档结构;
3、< em >是斜体字设置,斜体字设置+居中设置,注意编写位置,居中设跟段落设置一起放置;
4、编写段落时为了使编写界面整洁,可以自己调整段落布局,在网站显示时,不会受影响。
5、注意各种标记的使用方法和使用位置。

效果图:
Web前端开发——HTML基础、格式化文本与段落_第3张图片

二、标题字标记及文本标记的应用

题目:
按如下要求设计Web页面,如图3-13所示。要求如下:
(1)3号标题字设置标题“数学方程式”,样式采用style标记定义,格式为字体大小24px、颜色红色、文本居中对齐;
(2)一条宽度为80%、大小为2px、颜色为蓝色的水平线;
(3)方程式1:2x2+3x=9;
(4)方程式2:x1+x2=10;
style标记提示:在头部插入样式标记,定义如下:

Web前端开发——HTML基础、格式化文本与段落_第4张图片注意:主要训练style标记
下手实践:
Web前端开发——HTML基础、格式化文本与段落_第5张图片知识要点:
注意头部style标记的用法

效果图:
Web前端开发——HTML基础、格式化文本与段落_第6张图片

你可能感兴趣的:(web,上机笔记,web,html)