html编程的基本格式(前端入门html)
html编程的基本格式(前端入门html)
2024-11-22 07:04:38  作者:农村就是卡  网址:https://m.xinb2b.cn/life/jkm476398.html
前言

在制作网页时,文字是最基本的元素之一。让阅读者更容易阅读,短时间里获得更多信息,是网页创作者的目标。本篇将介绍各种文字格式标签的使用方法。

本篇主要针对初学者的一篇教程,如果你非常熟悉html,可以忽略本篇文章。

目录标题文字文字格式标签段落标签其它标签标题文字

在网上浏览时经常看到一些标题文字,用来对应章节划分,它们以固定的字号显示,总共有6种级别的标题,从 h1 至 h6 依次减小,如下图:


html 代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>标题</title></head><body><h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6></body></html>

标题对齐方式可以使用 align 属性,分别有三个属性:

left —— 左对齐center —— 居中对齐right —— 右对齐

如下图:


html代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>标题</title></head><body><h1>这是标题 1</h1><h2 align="left">这是标题 2</h2><h3 align="center">这是标题 3</h3><h4 align="right">这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6></body></html>

文字格式标签

除了标题,网页中普通文字也是不可缺少的,而各种文字效果可以使网页更加漂亮。

只需在<body>和</body>之间输入文字,就会直接在页面中显示,如何设置这些文字的格式,这里使用<font>标签,下面将逐一介绍各种文字格式用法。

一、设置字体、字号、颜色 —— <font> 标签

<font> 标签在HTML 4 中用于指定字体、字体大小和文本颜色,但在HTML5 中不支持。

face 属性:字体类型size 属性: 字体字号大小color 属性:字体颜色


html代码:

<html><body><div><font face="宋体">字体</font></div><div><font size="5">5号字体</font></div><div><font color="red">颜色</font></div><div><font size="5" face="arial" color="blue">一起使用</font></div></body></html>

在html5中不建议使用,请用 css 样式代替。

二、粗体、斜体、下划线、删除线—— strong、em、u、del

效果如下:


html代码:

<!DOCTYPE html><html><body><p>这是普通文本 - <strong>这是粗体文本</strong>。</p><p>这是普通文本 - <em>这是斜体</em>。</p><p>这是普通文本 - <u>这是下划线</u>。</p><p>这是普通文本 - <del>这是下划线</del>。</p></body></html>

注:html 5 和 html 4 相关标签存在巨大差异,比如 strong 和 b 、del 和 s、em 和 i 等效果相同,在html5 中不支持,b、s、i 标签,已不建议使用,关于各种差异,可自己了解下就可以了。

3、上标和下标 —— sup、sub

效果如下:


html代码:

<html><body><p>普通文本 <sup>上标</sup></p><p>普通文本 <sub>下标</sub></p><p>数学公式 X<sup>3</sup> 5X<sup>2</sup> - 5 = 0</p><p>数学公式 X<sub>1</sub> - 2X<sub>1</sub> = 0</p></body></html>

4、空格——


一般在网页中输入文字时,在段落中明明增加了空格,却在页面中看不到,这是因为在html中,浏览器本身会将2个句子之间的所有半角空白仅当做一个空白来看待。所以在这里使用空格符代替,每个空格符代表一个半角空格,多个空格可以使用多次。

html代码:


由于头条不显示空格字符,所以用图片代替

效果:


5、其它特殊字符

除了空格字符,在网页中还有一些特殊字符也需要使用代码来代替,一般情况下,特殊字符由前缀 “&” 开始、字符名和后缀 “;” 组成,和空格符类似。如下表


特殊字符有很多,这里只列出一些例子,具体自己搜索了解下。

段落

在网页中要把文字有条理地显示,需要使用到段落标签,下面介绍一些与段落相关的标签。

段落标签——p

在网页中,通过 <p>定义为一个段落。

html代码:

<html><body><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p><p>段落元素由 p 标签定义。</p> </body></html>

效果:


换行标签——br

在写文字时,除了自动换行外,换可以使用<br>标签强制文字换行,这个和 p 段落标签不一样。段落标签的换行是隔行的,而br不是,时2行文字更加紧凑。

html代码:

<html><body><p>第一个段落<br />换行1<br />换行2<br />换行3<br />最后一行.</p><p>第二个段落 <br />换行1<br />换行2<br />换行3<br />最后一行.</p></body></html>

效果如下:


如果不想文字被浏览器自动换行,可以使用<nobr></nobr>标签处理,如下图:

改行文字不会被自动换行,会看到出现横向滚动条。


保留原始排版方式——pre

在网页制作中,有时需要保留一些特殊的排版效果,这是使用标签控制就会很麻烦,使用<pre>标签就可以保留文本的格式排版效果。如下图:


html代码:

<html><body><pre>这是预格式文本。它保留了 空格和换行。</pre><p>pre 标签很适合显示计算机代码:</p><pre>for i = 1 to 10 print inext i</pre><p>这是一个ok效果</p><pre> O O k K O O K K O O K K</pre></body></html>

其它标签右缩进—— blockquote

使用<blockquote>可以实现文字段落缩进,每使用一次,段落就缩进一次,可以嵌套使用。

实例代码:

<html><body>Here comes a long quotation:<blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.</blockquote>请注意,浏览器在 blockquote 元素前后添加了换行,并增加了外边距。</body></html>

效果如下:


请注意,浏览器在 blockquote 元素前后添加了换行,并增加了外边距。

水平线——hr

在段落和段落之间加上一行水平线,将段落隔开。如下效果:


html代码:

<html><body><p>hr 标签定义水平线:</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p></body></html>

文字标注——ruby

在网页中可以通过添加对文字的标注来说明某段文本。

效果如下:


html代码:

<!DOCTYPE HTML><html><body><p>ruby 使用语法:</p><ruby> 被说明的文字 <rt> 标注 </rt></ruby></body></html>

其它标签——var、code、kbd等

<dfn>

定义一个定义项目。

<code>

定义计算机代码文本。

<samp>

定义样本文本。

<kbd>

定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

<var>

定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

<cite>

定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

总结

本篇介绍了大部分常用的文本格式标签,在制作网页时会经常使用到。如何掌握这些标签使用,很简单,可以使用文本编辑器或类似w3cshool 在线可编辑预览的工具,亲手写一写,熟悉每个标签的用处,无需死记硬背,关键在于理解。

最后,感谢您的阅读及关注,祝你学习愉快。

上篇:前端入门——HTML的发展历史

下篇:前端入门——html 列表

  • 关节脱位处理步骤(关节脱位后怎么办)
  • 2024-11-22关节脱位后怎么办在一些强对抗性的体育项目中,外力冲击有时难以避免当冲击强度达到一定程度时,关节的上下两个骨端会失去原有的正常位置,而致错位对于突如其来的关节脱位,很多人容易不知所措,不知该怎么处理?关节脱位该不该应急。
  • 夏日漱石bgm微电影(新晋乐队橘子海香港走红)
  • 2024-11-22新晋乐队橘子海香港走红近日,新晋乐队橘子海在香港举办巡演首站,演出取名“潮湿”的香港,近200人挤满MOMLivehouse狭小的空间,著名乐评人袁志聪、音乐人黄靖均到场观看据悉乐队今年将发行首张专辑,并开启全国巡演香港演。
  • 要想皮肤好你必须了解的护肤技巧(就从6大护肤步骤开始)
  • 2024-11-22就从6大护肤步骤开始你身边有没有这样的人,每天洗脸非常认真,又是卸妆水、小苏打、洗面奶,再加个去角质,几月或几年后发现皮肤变得越来越干燥不仅如此,还出现各种各样的肌肤问题,细纹,肌肤敏感,干燥泛红,尤其现在夏天,皮肤油脂。
  • 吃艾草的典故 河西小吃艾灰面里潜藏的诗经遗存情节
  • 2024-11-22吃艾草的典故 河西小吃艾灰面里潜藏的诗经遗存情节今年四月底戈壁滩是一个难得的雨季,春雨敲打在窗户上,正是“节物相催各自新,痴心儿女挽留春”时节,五一小长假,朋友惊喜的打来电话说:“要拉我到乡村原野见证一下河西纯粹的艾灰面”,我在电话里幽默的说:“骗。
  • 蒙迪欧2.0t正时工具(蒙迪欧2.0LDuratec-HE)
  • 2024-11-22蒙迪欧2.0LDuratec-HE正时链条的拆卸01转动曲轴至1缸活塞上止点前45°02拆下曲轴皮带轮03取下皮带轮摩擦垫圈04拆下发动机正时前盖05按下图所示方法锁止正时链条张紧器,释放链条张紧力沿箭头1方向45°压正时链条张紧导轨。
  • 玖月奇迹和粉丝合唱北京欢迎你(玖月奇迹个唱票已售罄)
  • 2024-11-22玖月奇迹个唱票已售罄本周六(13日),著名器乐演唱组合玖月奇迹将在北京奥体中心开唱,在这近三小时的演唱会中,玖月奇迹将为大家献唱多首经典之作而据知情人透露,很多歌迷为能近距离的欣赏玖月奇迹双排键绝技,自开票当天,本次演唱。
  • 英语妻子单词(英语单词怕老婆)
  • 2024-11-22英语单词怕老婆#学问分享官#一个男人的成功有一种哲学,就是怕老婆一跪,二哭,三认错,大事化了,小事化无怕老婆用英语怎么说呢?(图片源于网络)英语口语:“怕老婆”英语怎么表达?呵呵whip英[wɪp]习语have/h。
  • 格林童话小镇之旅作文(DAY5童话小镇直击赞美童真和梦想)
  • 2024-11-22DAY5童话小镇直击赞美童真和梦想孩童的梦想纯粹而美好,他们的天真烂漫和天马行空有着治愈的力量,也是许多设计师的灵感来源今日童话小镇上,上演了两场浪漫美梦,将无尽的快乐和真善美传递出去银河的奇幻之旅Q.cutians·李飞自信快乐祝福。
  • 历史抗日战争片大轰炸(献礼抗战胜利70周年)
  • 2024-11-22献礼抗战胜利70周年河北新闻网讯(燕赵都市报记者崔哲)今年是中国人民抗日战争暨世界人民反法西斯战争胜利70周年作为献礼抗战胜利70周年之作,3D史诗巨制《大轰炸》已在浙江象山投入紧锣密鼓的拍摄中7月7日,在纪念“七七事变。
  • 椰子营养价值及宜忌(深度解读椰子的营养功效及选购方法)
  • 2024-11-22深度解读椰子的营养功效及选购方法椰子【别名】胥椰,胥余,越子头,椰僳,胥耶,越王头,椰糅等【食性】性温味甘,归胃、脾、大肠经【功效】清暑解渴、补益脾胃、杀虫消疳【主治】主治暑热类渴,津液不足之口渴;椰子壳油治癣,疗杨梅疮【食用价值】。
  • 广州富力vs上海申花直播(上海申花对阵梅州客家)
  • 2024-11-22上海申花对阵梅州客家北京时间9月19日消息,中央电视台直播2022赛季中超联赛第16轮补赛,涉及上海申花、梅州客家队、河南嵩山龙门、上海海港队央视体育发布赛事直播信息,中央电视台奥林匹克频道直播上海申花对阵梅州客家,CC。
  • 手机突然网卡怎么办(这几种途径都可检查)
  • 2024-11-22这几种途径都可检查查看手机的网络模式,如使用的是4G/3G网络即可使用高速的数据业务,使用2G网络(GSM网络)速率相对较慢查看手机的信号强度,如果信号较弱,可能是由于信号强度影响手机的速率另外上网的速率与手机终端支持。