HTML文本

标题 

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

执行结果：

标题对齐

属性值 含义
left 文字左对齐
center 文字居中对齐
right 文字右对齐 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3 align="center">居中标题</h3>
<h3 align="left">左对齐标题</h3>
<h3 align="right">右对齐标题</h3>
</body>
</html>

执行结果：

文字

属性值 含义
em 斜体内容
u 带下划线的文字
strike 或 s 带删除线的文字(strike 已不推荐使用)

示例代码: 

<em> 斜体内容 <em>
<u> 带下划线的内容 </u>
<strike> 带删除线的内容 </strike>

执行结果：

斜体内容
带下划线的内容
带删除线的内容

小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详页</title>
</head>
<body>
<img src="timg.jpg"/> <!-- 这是一个本地图片 -->
<h3 align="left">产品分类：高科技产品</h3>
<h3 align="left">制造商：高新科技</h3>
<h3><s>原价：88.8</s> 活动价：18.8</h3>
</body>
</html>

上标与下标

属性值 含义
sup 上标
sub 下标 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<h3 align="center"> 上标和下标 </h3>
<h3 align="center">X<sup>3</sup> + 9X<sup>2</sup> - 3 = 0</h3>
<h3 align="center">3X<sub>1</sub> + 2X<sub>2</sub> = 10 </h3>
</body>
</html>

执行结果：

特殊符号

符号 属性值(html中的写法) 含义
" &quot; 引号
< &lt; 左尖括号
> &gt; 右尖括号
x &times; 乘号
§ &sect; 小节符号
&nbsp; 空格

段落 

<p> 段落文字 </p>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<h3 align="center"> 名诗 </h3>
<p align="center">人生若只如初见，何事秋风悲画扇。 —— 纳兰性德《木兰词·拟古决绝词柬友》</p>
<p align="center">明月几时有？把酒问青天。 —— 苏轼《水调歌头·丙辰中秋》</p>
</body>
</html>

执行结果：

段落的换行标记 

<p>
一段文字 <br/> 一段文字
</p>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<h3 align="center"> 名诗 </h3>
<p align="center">人生若只如初见，何事秋风悲画扇。 —— 纳兰性德《木兰词·拟古决绝词柬友》 <br/>明月几时有？把酒问青天。 —— 苏轼《水调歌头·丙辰中秋》</p>
</body>
</html>

执行结果：

段落的原格式标记

原格式标记：就是不对文本的样式进行重新排版 
<pre>
文本内容
</pre>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<pre>
    　　 ,?iヽ..　　
　　ノ?,, ヽミ
　(?,,／ ) 　ヽ?～—～′′ヾ?ミミミ彡
　　　　 　    　  ）
　　　　(　、 ..）_＿彡( ,,.ノ
　　　　/／（ ?　　　 ?.ノ (
　 　　 //　　＼Ｙ?　.. 〆　.い
　　 （?　　　　　 く?　　 //
　　　　　　　　　　　 く?
</pre>
</body>
</html>

执行结果：

如果没有使用<pre> </pre>大概长这样：

水平线 

<hr>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<pre>
    　　 ,?iヽ..　　
　　ノ?,, ヽミ
　(?,,／ ) 　ヽ?～—～′′ヾ?ミミミ彡
　　　　 　    　  ）
　　　　(　、 ..）_＿彡( ,,.ノ
　　　　/／（ ?　　　 ?.ノ (
　 　　 //　　＼Ｙ?　.. 〆　.い
　　 （?　　　　　 く?　　 //
　　　　　　　　　　　 く?
</pre>
<hr> <!-- 在这里 -->
</body>
</html>

执行结果：

posted @ 2018-10-12 23:42  每一天，为明天。  阅读(73)  评论(0)    收藏  举报