记事本写网页教案-HTML格式化排版进阶

 时间:2024-10-14 13:12:48

1、上次回顾:记事本写入如下代码,加入背景图片,保存后,浏览器刷新显示效果--------------------------------------------------------------------------------<html><head> <title>记事本写网页教案</title></head><body background="1.jpg"><h1>春晓</h1><hr /><blockquote> 春眠不觉晓,<br /> 处处闻啼鸟。<br /> 夜来风雨声,<br /> 花落知多少。<br /><blockquote><hr /></body></html>---------------------------------------------------------------------<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。这里<body background="1.jpg">表示添加背景图片,地址为1.jpg也就是.html文件和.jpg文件在一个文件夹。

记事本写网页教案-HTML格式化排版进阶
记事本写网页教案-HTML格式化排版进阶

2、记事本改写如下代码,保存后,浏览器刷新显示效果--------------------------------------------------------------------------------<html><head><title>记事本写网页教案</title></head><body background="1.jpg"><h1>春晓</h1><hr /><pre> 春眠不觉晓,<br /> 处处闻啼鸟。<br /> 夜来风雨声,<br /> 花落知多少。<br /></pre><hr /></body></html>---------------------------------------------------------------------<blockquote> 引用标签改成<pre><pre>标签被称为预格式化标签,标签内的文字保留空格和回车。

记事本写网页教案-HTML格式化排版进阶

3、记糙怍牢莱事本添加style="text-align:center"代码,保存后,浏览器刷新显示效果------------------------------------幻腾寂埒--------------------------------------------<html><head><title>记事本写网页教案</title></head><body background="1.jpg"><h1 style="text-align:center">春晓</h1><hr /><pre style="text-align:center"> 春眠不觉晓,<br /> 处处闻啼鸟。<br /> 夜来风雨声,<br /> 花落知多少。<br /></pre><hr /></body></html>---------------------------------------------------------------------style="text-align:center" 这段属性代码表示居中对齐。style="text-align:center"是HTML5最新的规范:style 属性淘汰了旧的 <font> 标签style 属性淘汰了旧的 "align" 属性style 属性淘汰了“旧的” bgcolor 属性

记事本写网页教案-HTML格式化排版进阶

4、记事本改写如下代码,保存后,浏览器刷新显示效果--------------------------------------------------------------------------------<html><head><title>记事本写网页教案</title></head><body background="1.jpg"><h1 style="text-align:center">春晓</h1><hr /><pre style="text-align:center"> <b> 春眠不觉晓,</b> <strong> 处处闻啼鸟。</strong> <big>夜来风雨声,</big> <em> 花落知多少。</em></pre><hr /></body></html> ---------------------------------------------------------------------<b>标签表示加粗加黑<strong>标签表示加黑<big>标签表示字体变大<em>标签表示强调重点

记事本写网页教案-HTML格式化排版进阶

5、记事本改写如下代码,保存后,浏览器刷新显示效果--------------------------------------------------------------------------------<html><head><title>记事本写网页教案</title></head><body background="1.jpg"><h1 style="text-align:center">春晓</h1><hr /><pre style="text-align:center"> <b style="font-family:arial;color:red;font-size:20px;"> 春眠不觉晓,</b> <strong> 处处闻啼鸟。</strong> <big>夜来风雨声,</big> <em> 花落知多少。</em></pre><hr /></body></html>---------------------------------------------------------------------font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:20px表示屏幕分辨率,数值越大,显示越大。

记事本写网页教案-HTML格式化排版进阶

6、记糙怍牢莱事本改写如下代码,保存后,浏览器刷新显示效果---------------------------------------------------------------------幻腾寂埒-----------<html><head><title>记事本写网页教案</title></head><body background="1.jpg"><h1 style="text-align:center">春晓</h1><hr /><pre style="text-align:center"> <b style="font-family:arial;color:red;font-size:20px;"> 春眠不觉晓,</b> <strong style="font-family:verdana;color:blue;font-size:30px;"> 处处闻啼鸟。</strong> <big>夜来风雨声,</big> <em> 花落知多少。</em></pre><hr /></body></html>---------------------------------------------------------------------font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:30px表示屏幕分辨率,数值越大,显示越大。

记事本写网页教案-HTML格式化排版进阶

7、记糙怍牢莱事本改写如下代码,保存后,浏览器刷新显示效果---------------------------------------------------------------------幻腾寂埒-----------<html><head><title>记事本写网页教案</title></head><body background="1.jpg"><h1 style="text-align:center">春晓</h1><hr /><pre style="text-align:center"> <b style="font-family:arial;color:red;font-size:20px;"> 春眠不觉晓,</b> <strong style="font-family:verdana;color:blue;font-size:30px;"> 处处闻啼鸟。</strong> <big style="background-color:green">夜来风雨声,</big> <em style="background-color:yellow"> 花落知多少。</em></pre><hr /></body></html>---------------------------------------------------------------------style 属性淘汰了“旧的” bgcolor 属性。background-color 属性为元素定义了背景颜色。

记事本写网页教案-HTML格式化排版进阶
  • Aldec Active-HDL的安装教程
  • flash中怎么制作斜角文字
  • 会声会影视频原声音怎么去掉
  • 如何在ACDsee中快速制作漂亮的照片幻灯片
  • 提高人际沟通技巧有哪些方法
  • 热门搜索
    我爱我班手抄报内容 古诗词手抄报图片 初中英语手抄报版面 有关卫生的手抄报 法治社会手抄报 向上向善手抄报 爱祖国手抄报资料 关于道德的手抄报 百善孝为先手抄报内容 关于梦想的手抄报图片