HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

已于 2025-05-14 16:26:01 修改
阅读量551 收藏 6
点赞数 16
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端 html5 HBuilder github
于 2025-05-09 20:40:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HRDMN/article/details/147836728

系列文章目录

HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大

HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.3 超链接-外部链接，内部链接，书签链接

HTML-2.4 滚动字幕marquee  

HTML-3.1 表格table

 HTML-3.2 表格的跨行跨列（课表制作实例）

 HTML中应用CSS样式的三种常见方法 

HTML-3.3 表格布局（学校官网简易布局实例）

HTML-3.4 表单form

HTML-实战之 百度百科（影视剧介绍） 

目录

系列文章目录

HTML-1.1 文本字体样式

前言

一、内容讲解

二、代码运行

1.代码运行

2.代码运行结果

总结

前言

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、内容讲解

1.标题标签h1-h6 实物意义   h1字体最大 一级标题align
2.字体设置font         属性 size 1-7       字体face 
3.分割线hr 单标签    属性 wideth      像素or      百分比size color -->
4.复制的快捷键ctrl+shift+r 或者 p*+tab
5.段落标签p 属性align
6.快捷键多点选择 按住ctrl不放+鼠标点击
7.单标签 br 段内回车
8.特殊符号&nbsp

二、代码运行

1.代码运行

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>htmlContent-文本</title>
        <!-- 古诗 -->
        <!-- 1.标题标签h1-h6 实物意义   h1字体最大一级标题align -->
        <!-- 2.字体设置font 属性size 1-7 字体face -->
        <!-- 3.分割线hr 单标签 属性 wideth 像素or 百分比size color -->
        <!-- 4.复制的快捷键ctrl+shift+r 或者 p*+tab -->
        <!-- 5.段落标签p 属性align -->
        <!-- 6.快捷键多点选择 按住ctrl不放+鼠标点击 -->
        <!-- 7.单标签br 段内回车 -->
        <!-- 8.特殊符号&nbsp -->
    </head>
    <body>
        <h1 align="center">
            <font size="5" color="blue" face="times new roman,宋体">静夜思</font>
            </h1>
        <h4 align="center">李&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;白</h4>
        <hr width="60%" size="70" color="green"/>
        <p align="center">床前明月光</p>
        <p align="center">疑是地上霜</p>
        <p align="center">举头望明月</p>
        <p align="center">低头思故乡</p>
        <hr width="60%" size="70" color="green"/>
        <p align="center">床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>
        
        <!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> -->
    </body>
</html>

2.代码运行结果

总结

以上就是今天要讲的内容，本文仅仅简单记录了html文本格式的设置，仅作为一份简单的笔记使用，大家根据注释理解。

史上最全wireshark使用教程，8万字整理总结，建议先收藏再耐心研读
孙叫兽的博客
07-14 3万+
目录 第1章介绍... 1 1.1.什么是Wireshark. 1 1.1.1.主要应用... 1 1.1.2.特性... 1 1.1.3.捕捉多种网络接口... 2 1.1.4.支持多种其它程序捕捉的文件... 2 1.1.5.支持多格式输出... 2 1.1.6.对多种协议解码提供支持... 2 1.1.7.开源软件... 2 1.1.8.Wireshark不能做的事... 2 1.2.系通需求... 2 1.2.1.一般说明... 2 ...
3万字干货HTML+CSS入门指南（建议收藏）
李南江
08-01 4924
什么是浏览器 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已 常见主流浏览器 浏览器市场份额-国内统计 浏览器市场份额-国外统计 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现 IE内核 Trident 谷歌内核 WebKit / Blink 火狐内核 Gecko Saf
HTML段落标签、换行标签、文本格式化标签与水平线标签
小何代码咖啡馆
04-16 5970
在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签。在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用。标签用于定义段落，它可以将整个网页分为若干个段落。标签可以在网页上实现水平分割线的效果。注意，水平分割线标签为单标签。为文本分段可以使用段落标签。包裹需要放在一段的文字。标签表示换行，也可以用。在HTML中，常见用。
HTML基础
m0_62943934的博客
12-18 2232
在前端代码中，是一个特殊的 HTML 实体编码，它代表着一个不断开的空格（non-breaking space）。实际上，是 Non-Breaking Space 字符的字符实体引用。通常情况下，HTML 中的连续空格会被合并成一个空格，而使用可以插入多个连续的不断开的空格。这对于需要保持连续空格的特殊排版需求非常有用，比如在文本对齐、制作表格或生成固定宽度的布局时。例如，如果你想在 HTML 中插入 5 个连续的空格，你可以使用以下代码： 在浏览器渲染时，会被解析为一个不断开的空格，确保这些空格不会被合并
Web前端之Html中的换行或回车符号不起作用的解决办法、white、space、line、pre、br
CSDN博客主页地址：https://mengjian.blog.csdn.net/
08-31 1万+
Web前端之Html中的换行或回车符号不起作用的解决办法、white、space、line、pre、br
关于html入门：网页字体的设置
hdxx2022的博客
03-08 2875
不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。
html中分割线的使用
wyongess的博客
04-17 1万+
标签的多种属性解决了这个问题，常用的属性有width、size、align、color和titile。 width：即表示宽度，属性值默认单位为像素(px)，也可以用百分比来表示分割线所占空间的比例； size：表示分割线的厚度或高度，属性值默认单位也为像素(px)；  aling：为对齐方式，类似于的align； color：即颜色，我们可以根据需要设置分割线的不同颜色；
html中加分割线,多种HTML分割线
weixin_42128015的博客
05-30 1万+
一、普通1、横线2、居中横线size=1>align线条位置(可选left、right、center)；width线条长度；color颜色；size厚度二、特效(效果并不是孤立的，可相互组合)1、两头渐变透明SIZE=3>2、纺锤形color=#987cb9 SIZE=10>3、右边渐变透明color=#987cb9 SIZE=3>4、左边渐变透明color=#987cb9...
JavaEE-v4.0-HTML-授课
InLoadwetrust的博客
02-09 631
JavaEE-v4.0-HTML-授课 1 HTML快速入门 1.1 网页的介绍 网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。 网页的构成 HTML：用来制作网页基础内容和基本结构。 CSS：用来制作网页美化效果。 JavaScript：用来制作网页动态效果。 1.2 HTML的介绍 1.2.1 HTML的介绍 HTML（
前端——HTML
LiLiLiLaLa的博客
04-22 8232
1.前端三门技术 学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript： HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等 CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等 JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等 使用工...
HTML基础知识汇总
qq_43544490的博客
08-03 3747
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
前端html-常用分割线
qq_31856061的博客
06-30 2541
普通 <HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 特效（效果并不是孤立的，可相互组合） 1、两头渐变透明： <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> 2、纺锤
HTML之设置文字和文本样式
DoubleC的博客
04-21 5087
在CSS样式中,最基本的属性是用来设置文字和文本的样式。"文字"指的是单个文字或单词,"文本"指的是由文字组成的内容。为字体设置样式主要是设置字、词的样式,对文本设置样式样式主要是对整段文章设置样式。 设置文字样式 CSS对文字样式的设计有文字字体的设置、文字大小、文字粗体、文字斜体以及字间距等样式的设置。 字体设置 在HTML里可以使用来设置文字字体,而在CSS中设置字体所用到的属性是...
在html中设置全局字体样式
仙路尽头谁为峰
10-06 1万+
背景 需要对一个没有设置布局样式的html文档中所有文字样式进行修改，作为一个不是很了解前端开发的人来说，自然是想有没有那种比较简单，能在html中加几行代码就把所有段落字体样式进行统一修改的案例，网上搜了一堆教程发现很多都是要新建一个外部css文件引入，感觉太麻烦，一番波折后终于尝试出了比较适用于新手的速成法。 说明 这种方法适用于在不引入外部CSS的情况下，直接在html文档的head节点中为页面中各级节点中包含的文本内容设置字体样式。 html字体样式设置 此处设置了整个html中h1、h2、h3、h
HTML中设置字体
最新发布
musy_的博客
05-28 156
设置字体缩进大小。
四、html字体样式，外观属性
热门推荐
helloWorldAndYou的博客
09-06 2万+
字体样式 font-size:字号大小 ont-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少 单位 说明 相对长度单位 em 相对于当前对象内文本的字体尺寸 px 像素（推荐） 绝对长度单位 in 英寸 ...
HTML的文本样式标签与文本格式化标签/学习笔记
No1banana的博客
01-21 2273
一、文本样式标签 文本样式标签的作用是用来控制网页中文本的字体字号和颜色。 <font 属性 = “属性值”> 文本内容 </font> 常用的属性 1、face：设置文字的字体，黑体、宋体、微软雅黑等 2、size：设置文字的大小，可以取1到7之间的整数值 3、color：设置文字的颜色，red/十六进制颜色值 示例代码 <!doctype html> <html> <head> <meta charset="UTF-8"> &l
html中字体都可以设置哪些,html中设置字体的属性有哪些
weixin_36119965的博客
06-30 3285
html中设置字体的属性：font、font-family、font-size、font-style、font-variant、font-weight、“@font-face”、font-size-adjust、font-stretch。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。字体属性定义字体，加粗，大小，文字样式。html中设置字体的属...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值