html字体大小、颜色、粗体、下划线代码（局部）

Posted 2023-03-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html字体大小、颜色、粗体、下划线代码（局部）相关的知识，希望对你有一定的参考价值。

最好能在给出代码后，再坐下各个代码分别代表的含义
我看到个<h1 align="center"></h1>，这个h1是什么意思啊？

方法和详细的操作步骤如下：

1、第一步，如果要修改下划线的颜色，大小和其他样式，可以通过border属性设计，使用起来更灵活，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后， border-bottom属性用于设置底部边框样式，见下图，转到下面的步骤。

3、第三步，执行完上面的操作之后，border-bottom: #FF0000 2px solid ；将边框大小设置为2PX红色边框，见下图，转到下面的步骤。

4、第四步，执行完上面的操作之后，观察到相同的效果，发现下划线是整个屏幕的宽度，因此接下来将更改宽度，见下图，转到下面的步骤。

5、第五步，执行完上面的操作之后，宽度设置为180px，可以根据实际情况进行调整，见下图，转到下面的步骤。

6、第六步，执行完上面的操作之后，将显示下划线效果，见下图。这样，就解决了这个问题了。

参考技术A 1、文本标签(命令)
<pre></pre> 创建预格式化文本
<h1></h1> 创建最大的标题
<h6></h6> 创建最小的标题
<b></b> 创建黑体字
<i></i> 创建斜体字
<tt></tt> 创建打字机风格的字体
<cite></cite> 创建一个引用,通常是斜体
<em></em> 加重一个单词（通常是斜体加黑体）
<strong></strong> 加重一个单词（通常是斜体加黑体）
<font size=?></font> 设置字体大小，从 1 到 7
<font color=?></font> 设置字体的颜色,使用名字或十六进制值
2、图形(命令)
<img src="name"> 添加一个图像
<img src="name" align=?> 排列对齐一个图像:左中右或上中下
<img src="name" border=?> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=?> 设置水平线的大小（高度）
<hr width=?> 设置水平线的宽度（百分比或绝对像素点）
<hr noshade> 创建一个没有阴影的水平线

3、链接(命令)
<a href="URL"></a> 创建一个超链接
<a href="mailto:EMAIL"></a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a> 创建一个位于文档内部的靶位
<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接

4、格式排版(命令)
<p> 创建一个新的段落
<p align=?> 将段落按左、中、右对齐
<br> 插入一个回车换行符
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前，并加上一个数字
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前，并加上一个圆点
<div align=?> 一个用来排版大块html 段落的标签，也用于格式化表

二、HTML基本语法

文件格式<html></html>(文件的开头与结尾)
主题<title></title>(放在文件的开头)
文头区段<head></head>(描述文件的信息)
内文区段<body></body>(放此文件的内容)
标题<h?></h>(?=1~6,改变标题字的大小)
标题对齐<h align=right,left,center></h>
字加大<big></big>
字变小<small></small>
粗体字<b></b>
斜体字<i></i>
底线字<u></u>
上标字<sup></sup>
下标字<sub></sub>
居中<center></center>
居左<left> </left>
居右<right> </right>
基本字体大小<basefont size>(取值范围从1到7，默认值为3)
改变字体大小<font size=?></font>(?=1~7)
字体颜色<font color=#rrggbb></font>(RGB色码)
指定字型<font face=?></font>(?=宋体，楷体等)
网址链结<a href="URL"></a>
设定锚点<a name="?"></a>(?以容易记为原则)
链结到锚点<a href="#?"></a>(同一份文件)
<a href="URL#?"></A>(锚点不同文件)
显示图形<img src="URL"></a>
图形位置<img src="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)
图形取代文字<img src="URL"alt=?>(无法显示图形时用)
图形尺寸<img src="URL" width=? height=?>(?以像素为单位)
连结图形边线<img src="URL"border=?>(?以像素为单位)
图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)
段落<p></p>
断行<br></br>
横线<hr>
横线厚度<hr size=?>(?以像素为单位)
横线长度<hr width=?>(?以像素为单位)
横线长度<hr width=?%>(?与页宽相比较)
实横线<hr noshade>(无立体效果)
背景图案<body background=图形文件名>(图形文件格式为gif和jpg)
背景颜色<body bgcolor=#rrggbb>(RGB色码)
背景文字颜色<body text=#rrggbb>(RGB色码)
未链结点颜色<body link=#rrggbb>(RGB色码)
已链结点颜色<body vlink=#rrggbb>(RGB色码)
正在链结点颜色<body alink=#rrggbb(RGB色码)

三、具体在做html文件前,我们还有哪些需要做的：

1、网页图象一般有什么要求？
受网络传输速度制约，图象要尽量小。一般每幅最大不要20K。
图象格式一般为gif和jpg两种。通常单调的可以考虑使用gif压缩。用jpg处理照片比较合适，因为里面包含许多色彩的缓和变化。不管是哪种，做好后都应压缩以给图片减肥，但不要压得太多而失真。压缩可用JPEG Optimizer或Image Optimizer两种工具，若用photoshop5.5做的图象，保存时直接用Save For Web可进行压缩。另外，Gif格式可作成动画。

2、选择图片的网络存储空间
建议各位卖家们事先可以找一个稳定的空间来存放你的图片，以确保你的买家随时可以看到精美漂亮的商品。注意：不要把图片存放在免费相册里，因为这些相册的路径一般都是虚拟的，每一次浏览的URL都会改变，这对我们卖家来说是非常不好的。
另外要注意的一点是：有一些买家反映看到的卖家商品的图片是小叉叉，这是因为一些卖家在用HTML粘贴图片的时候把自己电脑中C盘或者D盘(也就是本地路径)的图片的路径直接直接复制在命令中，这样就会造成卖家自己可以看到这些图片而你的买家们看到的则是叉叉！所以卖家们在用HTML制作图片的时候一定要注意不要用本地路径直接粘贴图片！

四、练习的例子：（红色字体部分即可修改成你自己的自定义）

第一：用HTML来插入一个图片，
<img src="http://www.cyberhome.cn/images/girl/PLMM_A.jpg">

Key:

第二：用HTML来插入一个URL，
<a href="http://www.cyberhome.cn/images/girl/PLMM_F.jpg">点击我进入</a>

Key:点击我进入

第三：插入url的同时，插入图片，点击图片就可以进入这个url，如做一个插入网园淘艺坊的图片链接代码： <a href="http://taobao.cyberhome.cn/"><img src="http://www.cyberhome.cn/images/girl/PLMM_C.jpg"></a>

Key:

第四：插入一段音乐
高山流水：<embed src="http://www.cyberhome.cn/images/hill-water.mid" width="72" height="25" autostart="false" loop="1" align="absmiddle" controls="smallconsole/playbutton/pausebutton/stopbutton"></embed>

Key:

何日君再来：<a href="http://202.108.23.172/m?ct=134217728&tn=baidumt, 何日君再来 &word=mp3, http://lib.jiutai.org/longresdemo/fWJjZGVmZ2hhYmVlbWhpbjE$.mp3,, [%BA%CE%C8%D5%BE%FD%D4%D9%C0%B4]&si = %BA%CE%C8%D5%BE%FD%D4%D9%C0%B4;; %B5%CB%C0%F6%BE%FD&lm = 16777216">何日君再来</a>
Key:
何日君再来参考技术B 一楼的是在别人那复制的，写得也乱七八糟的没整理，我给你说简单明了的

<font size="12px"></font> 字体大小这里是设置为12像素也可以设置其他大小注意单位可以使像素还可以是其他的比如厘米英寸都可以
<font color="red"></font> 字体颜色这里设置为红色也可以使蓝色 blue 绿色green 或更精确丰富的 16进制值如 #873422
<strong> </strong> 字体加粗 (也可以用 <b></b> ,不推荐)
<u> </u> 下划线
-----------------------------------------------------
<h1 align="center"></h1> 这段代码我给你分开解释
首先<h1></h1>是【标题标签】，除了h1还有h2 h3 h4 h5 h6字体大小依次减小，这主要是根据实际情况用的。【但不是用来控制字体大小用的】。
align="center"是属性 center 是值。也就是让h1 标题剧中显示显示在网页的最中间还有 left 、right 让标题显示在左边或右边。。
---------------------------------------
插一下嘴现在用来控制网页外观表现都是用css 来控制的也就是样式表比如我们写这样的标题<h1>html的文字样式</h1>，再写一个副标题<h2>----写给入门同学</h2>。用上面的写法话就是
<h1 align="center">html的文字样式</h1></br><h2 align="right">----写给入门同学</h2>，【 </br>是换行的意思】
这段代码就是让主标题剧中显示二副标题h2 在下一行的靠网页右边显示
------用css则不这样写了，
直接内容<h1>html的文字样式</h1></br><h2>----写给入门同学</h2>
然后写样式 h1text-align="center";,h2text-align="right";当然这段控制样式的css代码要写在样式<style></style>标签里这里就不多说了

有什么问题再问我吧本回答被提问者采纳

Discuz!代码

我如何使用Discuz!代码

Discuz!代码	效果
[b]粗体文字 Abc[/b]	粗体文字 Abc
[i]斜体文字 Abc[/i]	斜体文字 Abc
[u]下划线文字 Abc[/u]	下划线文字 Abc
[color=red]红颜色[/color]	红颜色
[size=3]文字大小为 3[/size]	文字大小为 3
[font=仿宋]字体为仿宋[/font]	字体为仿宋
[align=Center]内容居中[/align]	内容居中
[url]http://www.comsenz.com[/url]	http://www.comsenz.com（超级链接）
[url=http://www.Discuz.net]Discuz! 论坛[/url]	Discuz! 论坛（超级链接）
[email][email protected][/email]	[email protected]（E-mail链接）
[[email protected]]Discuz! 技术支持[/email]	Discuz! 技术支持（E-mail链接）
[quote]Discuz! Board 是由康盛创想（北京）科技有限公司开发的论坛软件[/quote]	引用: 原帖由 admin 于 2006-12-26 08:45 发表 Discuz! Board 是由康盛创想（北京）科技有限公司开发的论坛软件
[code]Discuz! Board 是由康盛创想（北京）科技有限公司开发的论坛软件[/code]	代码: Discuz! Board 是由康盛创想（北京）科技有限公司开发的论坛软件
[hide]隐藏内容 Abc[/hide]	效果:只有当浏览者回复本帖时，才显示其中的内容，否则显示为“** 隐藏信息跟帖后才能显示 ***”
[hide=20]隐藏内容 Abc[/hide]	效果:只有当浏览者积分高于 20 点时，才显示其中的内容，否则显示为“** 隐藏信息积分高于 20 点才能显示 **”
[list][]列表项 #1[]列表项 #2[*]列表项 #3[/list]	列表项＃1 列表项＃2 列表项＃3
[img]http://www.discuz.net/images/default/logo.gif[/img]	帖子内显示为：
[img=88,31]http://www.discuz.net/images/logo.gif[/img]	帖子内显示为：
[media=400,300,1]多媒体 URL[/media]	帖子内嵌入多媒体，宽 400 高 300 自动播放
[fly]飞行的效果[/fly]	飞行的效果
[flash]Flash网页地址 [/flash]	帖子内嵌入 Flash 动画
[qq]123456789[/qq]	在帖子内显示 QQ 在线状态，点这个图标可以和他（她）聊天
X[sup]2[/sup]	X2
X[sub]2[/sub]	X2