【零基础入门前端系列】—网页标题、段落标记、强制换行、水平线(二)

简介: 标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

【零基础入门前端系列】—网页标题、段落标记、强制换行、水平线(二)

一、标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

    <h1>这是一个标题。</h1>
    <h2>这是一个标题。</h2>
    <h3>这是一个标题。</h3>
    <h4>这是一个标题。</h4>
    <h5>这是一个标题。</h5>
    <h6>这是一个标题。</h6>

2345_image_file_copy_595.jpg

  • 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
  • 搜索引擎使用标题为您的网页的结构和内容编制索引。
  • 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
  • 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

2345_image_file_copy_596.jpg

    <h1 align="center">这是一个标题。</h1>
    <h2 align="right">这是一个标题。</h2>
    <h3 align="left">这是一个标题。</h3>
    <h4>这是一个标题。</h4>
    <h5>这是一个标题。</h5>
    <h6>这是一个标题。</h6>

2345_image_file_copy_597.jpg

二、段落标记

段落是通过 <p> 标签定义的。

注意:浏览器会自动地在段落的前后添加空行。(</p>块级元素

2345_image_file_copy_598.jpg

 <p align="center">这是一个段落 </p>
    <p>这是另一个段落</p>

2345_image_file_copy_599.jpg

三、强制换行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br/> 标签:

<p>这个<br/>段落<br/>演示了分行的效果</p>

2345_image_file_copy_600.jpg

四、水平线

<hr /> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

<hr /> 元素被用来分隔 HTML 页面中的内容(或者定义一个变化)。

<h1>HTML</h1>
    <p>HTML 是用于描述 web 页面的一种语言。</p>
    <hr/>
    <h1>CSS</h1>
    <p>CSS 定义如何显示 HTML 元素。</p>

2345_image_file_copy_601.jpg

2345_image_file_copy_602.jpg

2345_image_file_copy_603.jpg

 <p>好好学习</p>
    <hr color="red" align="center" width="500" size="10">
    <p>备战春秋招</p>

2345_image_file_copy_604.jpg

2345_image_file_copy_605.jpg

相关文章
|
4天前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
48 30
|
5天前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
17 3
|
8天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
11天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
22 5
|
11天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
44 4
|
11天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
20 2
|
12天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
26 2
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
30天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。