码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记(2)---文字标签

时间:2014-09-09 16:11:28      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:blog   http   color   io   使用   ar   2014   div   sp   

   文字是网页设计的基础部分,设置好文字的样式,可以起到事半功倍的效果,通常可以使用两种方法。

   第1种方法是直接使用HTML标记进行设置,如:使用粗体标记<B>将文本设置为加粗样式。

   第2种方法是使用css,层叠样式表。

  HTML定义了6级标题,1-6级,标题文字随级数增大依次减小。

  <h1>h1的效果</h1>

  <h2>h2的效果</h2>

  <h3>h3的效果</h3>

  <h4>h4的效果</h4>

  <h5>h5的效果</h5>

  <h6>h6的效果</h6>

  利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。   align=“left / center / right”         

测试实例一如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body >
    <font  color="#FF0066"  size="+6"  >字体设置</font>
      <h1>这个是h1的效果</h1>
      <h2>这个是h2的效果</h2>
      <h3>这个是h3的效果</h3>
      <h4>这个是h4的效果</h4>
      <h5>这个是h5的效果</h5>
      <h6>这个是h6的效果</h6>
      <h7>这个是h7的效果</h7>
      <h8>这个是h8的效果</h8>
    </body>
</html>

测试程序实例二:

<HTML>
	<HEAD>
		<title>字体对齐方式</title>
  </HEAD>
  <BODY>
  	<h1 align="left">left的效果</h1>
  	<h2 align="center">center的效果</h2>
  	<h3 align="right">right的效果</h3>
  </BODY>
</HTML>


HTML文字设置:

<B>设置文字以粗体的方式显示。语法<B>…</B>
<I> 设置文字以斜体显示。语法<I>…</I>
<EM>效果同<l>语法<EM>…</EM>
<SUP>设置文字以上标文本效果显示。语法<SUP>…</SUP>
<SUB>设置文字以下标文本效果显示。语法<SUB>…</SUB>
<U>设置文字以下划线显示。语法<U>…</U>
<S>设置文字以删除线显示。语法<S>…</S>
<FONT>控制的字体、大小和文字。

  语法:

  <FONT face=“字体”,size=“文字大小”,color=“颜色值”>…</FONT>

   face 控制文字使用的字体

  size 控制文字的大小

  color 设置文字颜色

测试实例三:

<HTML>
   <HEAD>
	<title>字体设置</title>
  </HEAD>
  <BODY>
  	<B>粗体</B><br>
  	<I>斜体</I><br>
  	<EM>斜体</EM><br>
  	字体<SUP>上标</SUP><br>
  	字体<SUB>下标</SUB><br>
  	<U>下划线</U><br>
  	<S>删除线</S><br>
  </BODY>
</HTML>



HTML学习笔记(2)---文字标签

标签:blog   http   color   io   使用   ar   2014   div   sp   

原文地址:http://blog.csdn.net/chun_1959/article/details/39155399

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!