WEB前端开发人员交流社区

搜索
查看: 2381|回复: 0

[基础知识] HTML文字与段落《三》

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-21 14:56:03 | 显示全部楼层 |阅读模式
文字的字体(Font)和颜色(Color)

定义文字大小和颜色使用font标签对。

基本语法:

<font>……</font>

它的的属性值有: face(字体 )color(颜色)等

示例:

[HTML] 纯文本查看 复制代码
<html> 
<head>
    <title>h标签演示</title>
</head>
<body>
    <font  face="黑体" color="red">文字的字体和颜色</font>
</body>
</html>

[/table]


文章标题(H标签)

在浏览网页中最先关注的是文章的标题,字体很大很突出. 通常使用对标签.h标签分为6种,分别是 - ,字体从大到小.

示例:

[HTML] 纯文本查看 复制代码
<html> 
<head>
    <title>h标签演示</title>
</head>
<body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
</body>
<html>

运行结果:



标题字的对齐属性(align)
[HTML] 纯文本查看 复制代码
<html>
<head>
    <title>标题字的对齐属性(align)</title>
</head> 
<body>
    < h2 align = left >左对齐< / h2 >  
    < h2 align = center >居中对齐< / h2 >  
    < h2 align = right > 右对齐< / h2 > 
</body>
</html>

运行结果:


字体加粗(B标签)
[HTML] 纯文本查看 复制代码
<html> 
<head>
    <title>B标签演示</title>
</head>
<body>
    这是没有使用b标签的正常字体
    <b>使用b标签加粗的字体</b>
</body>
<html>

运行结果:

可能你会有个疑问,html代码明明是2行,怎么显示结果是一行。这是因为Html代码中的换行、空格、tab缩进等是不会在浏览器中显示的。

示例:

那么在HTML如何实现换行?只需要在源码中需要加上一个换行
标签,如图


斜体标记,,

基本语法:

<i> ……</i>

<em> ……</em>

<cite> ……</cite>


示例:

[HTML] 纯文本查看 复制代码
<html>
<head> 
    <title>斜体标记i,em,cite标签</title>
</head>
<body>
    <i>斜体标记i演示</i>
    <em>斜体标记em演示</em>
    <cite>斜体标记cite演示</cite>
</body>
</html>

运行结果:

有一些标签,用来指出包含的文本有特殊的意义,比如(表示缩写),(表示强调),(表示更强地强调),(表示引用),(表示地址)等等。这些标签不是为了定义显示效果而存在的,所以从浏览器里看它们可能没有任何效果,也可能不同的浏览器对这些标签的显示效果完全不同。


下划线标记 < U >和删除线标记 < s >
基本语法:<u>……</u>

基本语法:<s>……</s>
         <strike>……</strike>

段落标记(P)

浏览器解析HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出哪些文字是属于同一段落的,这就用到了标签。
标签式段落标记,浏览器会自动地在段落的前后添加空行。

基本语法:

<p> ……</p>

示例:

[HTML] 纯文本查看 复制代码
<html>
<head>
    <title>P标签示例</title>
</head>
<body>
    <p>这是第一个段</p>
    <p>这是第二个段</p>
</body>
</html>

显示结果:


换行标签

也有人不用,而用

只表示换行,不表示段落的开始或结束,所以通常没有结束标签。

[HTML] 纯文本查看 复制代码
<html>
<head>
    <title>BR标记示例</title>
</head>
<body>
    这是第一段<br />
    这是第二段
</body>
</html>

显示结果:

从P标签和BR标签在浏览器显示的结果中可以看出,使用

标签换行上下文有间距(浏览器会自动地在段落的前后添加空行),而
标签换行是软换行,上下文没有间距.


关于
标签的使用,你可能会发现有的网页
没有/符号,浏览器也能正常显示。那么

的区别是什么呢?
HTML升级版标准规定,不允许使用没有结束标签(闭合标签)的HTML元素。虽然现在
在所有浏览器中的显示都没有问题,标准推荐使用有闭合标签的

关于<br>标签的使用,你可能会发现有的网页<br>没有/符号,浏览器也能正常显示。那么<br> 和<br />的区别是什么呢?
HTML升级版标准规定,不允许使用没有结束标签(闭合标签)的HTML元素。虽然现在<br>在所有浏览器中的显示都没有问题,标准推荐使用有闭合标签的

水平线标记(HR)

标签在HTML页面中创建水平线,hr元素可用于分隔内容。它的属性有:
  • width(水平线的宽度标记)
  • size(水平线的高度)
  • color(水平线的颜色)
  • noshade水平线去掉阴影属性标记
  • align:水平线对齐属性

前面已经简单的用过了HR标签,这次为其添加上属性,示例:

[HTML] 纯文本查看 复制代码
<html>
    <head> <title>HR标签演示</title></head>
<body>
    <h1>带属性值的HR标签演示</h1>
    <hr width=70% size=3 color=bule alingn=center  />
</body>
</html>


输入特殊符号

基本语法:  ;"  &

例如我们想在网页显示多个空格,可是在源代码中无论你敲多少空格,实际的显示页面只能显示一个

如上所示,显示的结果并没有我们预期的结果,同样的我们想在网页上显示和HTML代码有冲突的符合如大于号(>)或小于号(<)等等怎么办呢?在HTML语言中专门为显示这些特殊的符号设定了标签.常用的特HTML殊符号对应代码的如图:




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2023-9-22 18:46

快速回复 返回顶部 返回列表