html---2.设置网页文本内容

博客主要介绍了HTML中标题文字、文字格式、段落格式的设置,还提及了水平线以及其他文字标记等内容,聚焦于HTML在文字和段落方面的相关操作。

2.1标题文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题文字的建立</title>
</head>
<body>
2.1.1标题文字标记&lth&gt
从h1到h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr>
2.1.2标题文字的对齐方式-align
属性值:left;center;right
<h1>古诗介绍</h1>
<h2 align="center">作者辛弃疾</h2>
<h3 align="left">三更灯火五更鸡,正是男儿发愤时</h3>
<h4 align="right">黑发不知勤学早,白首方悔读书迟</h4>
</body>
</html>

2.2设置文字格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置文字格式</title>
</head>
<body>
2.2.1设置字体---face<br>
<font face="隶书">登山则情满于山</font><br>
<font face="华文彩云">观海则意溢于海</font><br>

2.2.2设置字号---默认字体为3号<br>
<font size="1">1号字体</font><br>
<font size="2">2号字体</font><br>
<font size="3">3号字体</font><br>
<font size="4">4号字体</font><br>
<font size="5">5号字体</font><br>
<font size="6">6号字体</font><br>
<font size="7">7号字体</font><br>
<font size="+2">默认字体+2,就是五号字体</font><br>
<hr>

2.2.3设置文字的颜色<br>
<font color="red">红色字体</font><br>
<font face="隶书" color="#a52a2a">登山则情满于山</font><br>
<font face="华文彩云" color="aqua">观海则意溢于海</font><br>
<hr>

2.2.4粗体,斜体,下划线---strong,em,u<br>
<font color="red">红色字体</font><br>
<strong><font color="red">红色字体</font><br></strong><br>
<em><font face="隶书" color="#a52a2a">登山则情满于山</font><br></em>
<u><font face="华文彩云" color="aqua">观海则意溢于海</font><br></u>

2.2.5上标下标--- sup,sub<br>
R<sup>2</sup><br>
PM<sub>2.5</sub>

2.2.6删除线---strike<br>
<strike><font face="隶书">登山则情满于山</font></strike><br>
<strike><font face="华文彩云">观海则意溢于海</font></strike><br>

2.2.7等宽文字标记---code常用于设置英文效果,使用改标记实现网页中字体等宽的效果,是页面更加整齐<br>

2.2.8空格 &nbsp;<br>
在html中直接打空格时没有作用的   不信你看<br>
正确方法 哈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hahaha<br>

2.2.9其他特殊符号
1." &quot;
2.< &lt;
3.> &gt;


</body>
</html>

2.3设置段落格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
2.3.1段落标记&lt;p&gt;
<p>段落文字</p>
<p>家祭勿忘告乃问</p>
<p>王师北定中原日</p>

2.3.2取消文字换行标记---nobr:如果单行文字过长,浏览器会自动换行显示,使用该标记强制不换行<br>
<nobr>发的海军东海防空的空间发货的开发计划的独家首发的机会附近的环境分好的数据看结婚多久发货的数据库恢复可见当时的但警方的说法还是觉得和副驾驶的环境经典服饰电话分机多少积分</nobr><br>

2.3.3换行标记---br:段落与段落会隔行换行,导致文字的行间距过大,使用br紧凑换行<br>
<h1 align="center">龚自珍</h1><br>
九州生气赤风雷,万马齐暗究可哀<br>
我劝天公重抖擞,不拘一格降人才<br>

2.3.4保留原始排版方式标记---pre:在网页制作中,使用pre会保留输入的格式<br>
<pre>如      这些空格是会保留的</pre>

2.3.5居中对齐标记---center:就像word里面的居中<br>
<center><h1>龚自珍</h1><br>
九州生气赤风雷,万马齐暗究可哀<br>
    我劝天公重抖擞,不拘一格降人才<br></center>>

2.3.6向右缩进标记---blockquote:每使用一次,缩进一次
<blockquote>登高</blockquote>
<blockquote>不知天之高也</blockquote>
<blockquote>不登高山</blockquote>
<blockquote>不知地之厚也</blockquote>
<blockquote>不临深溪</blockquote>
</body>
</html>

2.4水平线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
2.4.1添加水平线---hr
<hr>

2.4.2设置水平线的宽度和高度
<hr width="50" size="80"> 设置宽和高,width和size

2.4.3设置水平线的颜色
<hr color="blue">

2.4.4设置水平线的对齐方式---align
<hr align="left">

2.4.5去点水平线阴影
<hr noshade="noshade">

</body>
</html>

2.5其他文字标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
2.5.1文字标注标记---ruby:说明网页中某段文字
<ruby>
    有情芍药含春蕾,物理蔷薇洛小志<br><br>
    <rt>
        作者秦观
    </rt>
</ruby>

2.5.2声明变量var
定义变量的格式为:变量值:数值或表达式的值<br>
其中符号":="是定义符,又称赋值符,<br>
如:定义x=y+6<br>
<var>x</var>:=<var>y+6</var>

2.5.3忽视html标记:---plaintext,xmp标记也会显示在页面上
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值