那些酷炫的网页你也可以做到——第二篇(HTML排版)

简介: 那些酷炫的网页你也可以做到——第二篇(HTML排版)

HTML的排版标签

HTML注释

<!--  注释格式如下:  --><!--  HTML的注释不会翻译到网页上  -->


排版布局:类似于以前画的黑板报,需要将图片文字等进行布局,

达到最好的展示效果。

<p></p>   段落标签
特点:标签的开始和结尾默认产生一行空行
属性:align     
对齐方式:center(中间对齐)、left(向左对齐)、
right(向右对齐)、justify(两端对齐)
<pre>预设格式标记
作用:令文件按照原始码的排列方式显示
<br/>换行标签


下面我们看一个实例:

<body>    这是主体标签 <br>    感谢关注,共同学习。 <br><p>              静夜诗
           床前明月光, 
           疑是地上霜,
           举头望明月,
           低头思故乡。
</p></body>


image.png

执行结果:

加入预设格式标记

<body>    这是主体标签 <br>    感谢关注,共同学习。 <br><p><pre>              静夜诗
           床前明月光, 
           疑是地上霜,
           举头望明月,
           低头思故乡。
</p></body>


image.png

<hr/>水平线标签,加上这个之后页面上出现一条水平线
属性:1.color颜色属性
(1)<hrcolor="red"/>(2) RGB三原色(red、green、blue):
               #12af90,三组十六进制。
             3个字节的二进制位:000000~FFFFFF
2.width,宽度属性,水平线宽度
(1)直接写像属值:200px
(2)编写百分比:30%,代表整个屏幕像素的30%
<hrcolor="red"width="300"/><hrcolor="red"width="30%"/><div></div>    在网页上声明一块区域,
 div是块级元素,内容后面默认有换行。
<span></span> 在页面上声明一块区域,
 span标签是行内元素,默认在一行。

image.png

<!DOCTYPE html><html><head><title>这是头部标签</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body>    这是主体标签 <br>    感谢关注,共同学习。 <br><p><pre>              静夜诗
           床前明月光, 
           疑是地上霜,
           举头望明月,
           低头思故乡。
</p><hrcolor="red"width="300"align="center"><div><pre>                                                      大家好,我是静静的雨,感谢大家点开这篇文章,希望我的文章可以帮助到你,加油,一起学习。
</div><hrcolor="red"width="300"align="center"><span>留个关注,避免迷路。
</span></body></html>

image.png

目录
相关文章
|
25天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
29 0
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1月前
|
移动开发 HTML5
可达鸭举牌网页版本在线生成源码html5
可达鸭举牌网页版本,在线生成源码,点击分享即可制作DIY自己的举牌文字网页,需要GIF动图的自行用GIF图片录制工具录制下来。
39 1
可达鸭举牌网页版本在线生成源码html5
|
1月前
|
前端开发
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
这篇文章提供了HTML网页作业的完整代码,包括仿写商城首页和学校官网网页的源码,以及如何运行和项目结构等详细信息。
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
|
23天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
22天前
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码,动态点燃鞭炮动画祝福新年快乐,带新年背景音乐,无加密完整可用,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。
31 0
新年快乐鞭炮祝福html网页源码
|
30天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
41 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
29天前
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
|
1月前
|
前端开发 Java 关系型数据库
通过HTML网页对mysql数据库进行增删改查(CRUD实例)
通过HTML网页对mysql数据库进行增删改查(CRUD实例)
144 0
|
1月前
|
移动开发 JavaScript Android开发
如何实用便捷的在本地真机调试WEB端HTML5网页
如何实用便捷的在本地真机调试WEB端HTML5网页