那些酷炫的网页你也可以做到——第二篇(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

目录
相关文章
|
1月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
69 0
|
2月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
1月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
48 1
【HTML】构建网页的基石
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
|
2月前
|
存储 文字识别 前端开发
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能