HTML文字与排版

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/loverlucky/article/details/79131751

HTML文字与排版

段落效果——使用排版标记

  • < p > 标记:
    用来分出段落,成对出现。
  • < br > 标记:
    用来换行,没有结尾标记。建议使用:< br / >
  • < pre > 标记:
    成对出现,开始标记与结尾标记之间的文字按照原始代码的排列方式进行显示。
  • < blockquote > 标记:
    成对出现,表示引用文字,会将标记内的文字换行并缩进。
属性 设置值 说明
cite url 网址 说明引用的来源
  • < hr > 标记:
    添加分割线,让画面更加容易区分主题或段落。属性有: align, size, width, color, noshade 等。
  • < h1> 标记:
    设置段落的标题大小和级别,共有6个级别。由此标记标识的文字将会独占一行。

文字效果——使用文字标记

  • < foot > 标记:
    HTML5 已经停用。主要可以设计粗体斜体下划线等。
属性 设置值 说明
size 相对值(size+=2)
绝对值(size=2)
设置文字的大小,默认值为size=3
color 颜色名称(color=”red”)
HEX码(color=”#FF0000”)
设置文字的颜色
face 系统内置字形 设置文字的字体
  • < b > 标记:
    成对出现,将文字设置为粗体。
  • < u > 标记:
    成对出现,为文字添加下划线。
  • < i > 标记:
    成对出现,将文字设置为斜体。
  • < sup > < sub > 标记:
    成对出现,为文字添加上标和下标。通常用于公式的显示。

项目符号与编号——使用列表标记

  • 符号列表,又称为无序列表(Unordered List)
<ul>
    <li> ... </li>
    <li> ... </li>
</ul>
  • 编号列表,又称为有序列表(Ordered List)
<ol type="1" start="4" reversed="reversed">
    <li> ... </li>
    <li> ... </li>
</ol>
< ol >标记的属性
属性 设置值 说明
type 设置值有5种 设置数目样式,默认值:type=1
start 1、2、3等整数值 设置编号起始值,默认值:start=1
reversed reversed 反向排序数字改为由大到小
编号列表的样式
type设置值 项目编号样式 说明
1 1,2,3,… 阿拉伯数字
A A,B,C,… 大写英文字母
a a,b,c,… 小写英文字母
I I,II,III,… 大写罗马数字
i i,ii,iii,… 小写罗马数字
  • 定义列表(Definition List),适用于主题与内容的两段文字,通常第一段以< dt >标记定义主题,第二段以< dd >标记来定义内容。
<dl>
    <dt>
    .....
    <dd>
    ......
</dl>
  • 注释
<!-- 批注文字 -->
<!--[if IE]>只有IE会执行这里的语句<![endif]-->
<!--[if lt IE 9]>IE 9 以下的版本才会执行此语句(lt: lower than)<![endif]-->
  • 使用特殊符号
HTML中常用到的特殊符号
特殊符号 HTML 表示法
© &copy ;
< &lt ;
> &gt ;
&quot ;
& &amp ;
半角空格 &nbsp ;

新增中继标记——< meta >

meta 标记的语法可分为两大类:
<meta http-equiv="HTTP 表头信息" content="信息内容"
以及
<meta name="网页信息" content="信息内容"
http-equiv 属性主要用于定义HTTP表头信息,例如网页编码方式、自动换页等;name 属性则是描述网页的信息,例如网页关键字、网页作者等。两者必须搭配 content属性使用。meta属性放置与head里。

http-equiv 属性
  • content-type
    content-type 是设置网页文件的格式。语法如下:
    <meta http-equiv="content-type" content="text/html; charset=gb2321">
    content 属性里设置网页文件的格式的内容,每一项内容以分号分开;text/html 表示以 text 或 html 的标准来编译网页;charset 则是指定网页的编码字集(Character Set),big5 表示编码的字集使用的是繁体中文,若编码方式不对,用户会看到一对乱码。当网页没有指定编码方式时,浏览器会自动选择最适合的编码方式来显示网页。

  • refresh
    refresh 是让网页重新整理,语法如下:
    <meta http-equiv="refresh" content="10; url=http://www.baidu.com">
    content 属性用于设置默认秒数,如果加上 rul 参数,就表示跳到 url 所指定的网页(自动跳转);如果省略网址,就表示重新整理网页。上述代码中,content 属性的语句表示10秒后转往百度首页。

  • expires
    expires 属性是设置网页到期的时间,语法如下:
    <meta http-equiv="expires" content="sun, 22 Jun 2018 15:18:44 GMT">
    通常网页改动不大时,浏览器会先从暂存区读取网页,当网页过期时,才会到服务器重新读取。expires 用于设置网页到期的时间,content 值必须使用 GMT 时间格式。如果希望每次浏览网页都能重新下载网页,那么只要将 content 值设置为过去的时间即可。

  • pragma
    pragma 是设置 cache(快取)的模式,语法如下:
    <meta http-equiv="pragma" content="no-cache">
    content 的值表时禁止浏览器从暂存区读取网页,如此一来,用户将无法脱机浏览。

  • set-cookie
    set-cookie 是设置 cookie 到期的时间,语法如下:
    <meta http-equiv="set-cookie" content="sun, 22 Jun 2008 15:18:44 GMT">
    当 content 设置的时间到期时,cookie 将被删除。content必须使用 GMT 时间格式。

  • windows-target
    windows-target 是限制网页显示的目标窗口,语法如下:
    <meta http-equiv="windows-target" content="_top">
    content 值表示强制将网页显示于最上层,网页加入这句话可以用来防止别人在框架里显示您的网页。

name 属性
  • keywords
    keywords 是用来设置网页的关键词,语法如下:
    <meta name="keywords" content="animal,dog,动物,狗,宠物">
    content 属性用于填入网页的关键词,让搜索引擎可以更容易的根据 keywords 所设置的关键词搜寻到网页,关键词可以输入中文或英文,以逗号(,)分隔。

  • description
    description 用来说明网页的主要内容,语法如下:
    <meta name="description" content="网站简要说明">
    content 属性是描述此网页的简要说明,内容应简要明了,建议不要超过100个字符。

  • author
    author 用来说明网页的作者,语法如下:
    <meta name="author" content="Eileen">
    content 属性用于标明网页的作者姓名等资料。

  • creation-date
    creation-date 用来标注网页制作的时间,语法如下:
    <meta name="creation-date" content="sun, 22 Jun 2008 15:18:44 GMT">
    content 值必须使用 GMT 时间格式。

div 标记

< div > 标记是容器标记,结束必须有 < /div > 标记,属于独立的区块标记(block-level)。也就是说,它不会与其它组件同时显示在同一行,< /div > 标记之后会自动换行。其功能有点类似群组,只要放在 div 标记里的组件,都会称为单一对象。在 HTML 语法里,div 标记通常被用来做对齐功能,语法如下:
<div align="center" style="font-size: 13pt ; ">

div 标记属性如下:
  • align
    align 属性用来设置 div 标记里的组件对齐方式,设置值有center(居中对齐),left(靠左对齐),以及 right(靠右对齐)。

  • style
    style 属性里是 CSS 语法用来设置组件的样式,上面的语法的意思是将文字大小设置为 13pt。

span 标记

span 标记与 div 标记有些类似,差别在于 div 标记之后会换行,而 span 属于行内标记(inline-level),可与其它组件显示于同一行,语法如下:
<span style="font-size: 13pt ; ">
span 标记是 HTML4.0 之后才出现的,主要是针对 CSS 样式列表设计的,在 HTML 语法里较少使用。

阅读更多
换一批

没有更多推荐了,返回首页