HTML学习笔记（三）

论坛 › 期权论坛 › 期权     
Coder的自我修养   2019-7-29 01:00   4600   0
HTML 段落HTML 中，段落是通过标签定义的。例如：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. This is a prograph.
复制代码
  1. This is a another prograph.
复制代码
  1. [/code][code]
复制代码
  1. [/code]用浏览器打开上述代码，显示效果为：[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-c9cd947b236126c8ecad26839ea42fea[/img]
  3. 使用标签之后，浏览器会自动在段落前后添加空行。
  4. 注意，使用空的段落标记（）来插入空行是一个不好的习惯。
  5. 另外，在上述代码中，第二行代码虽然并没有使用结束标签，但依旧可以正确显示。但是请注意，这并不是一个好的习惯，在未来的HTML版本中，必须使用结束标签。
  6. HTML 折行，如果我们希望在不产生一个新段落的情况下进行换行（新行），我们可以使用标签。例如：
  7. [list][*][*][*][*][*][*][*][*][/list][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This is a prograph  with line breaks.
复制代码
  1. [/code][code]
复制代码
  1. [/code]用浏览器打开上述代码，显示效果如下：[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-4fd2245b00e57d225776237b0d10113b[/img]
  3. 在 HTML 中， 和  很相似，但这里需要注意一些细微的区别。
  4. 在XHTML、XML、以及未来的HTML的版本中，不允许使用没有结束标签的HTML元素，因此，即使在浏览器中可以正常使用，也建议使用.
  5. 我们无法确定HTML显示的确切效果。因为屏幕的大小、以及窗口的调整都有可能导致不同的结果。
  6. 对于HTML, 我们无法通过在HTML代码中添加额外的空格或者换行来改变输出的效果。
  7. 当显示页面时，浏览器会通过移除源代码中多余的空格和空行。所有连续的空格或空行都会北算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也会被视为一个空格。
  8. 例如：
  9. [list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]
复制代码
  1. [/code][code]
复制代码
  1. 登幽州台歌
复制代码
  1. [/code][code]前不见古人，
复制代码
  1.    后不见来者。
复制代码
  1.    望天地之悠悠，
复制代码
  1.    独怆然而泪下。
复制代码
  1. [/code][code]
复制代码
  1. 可以看出，浏览器忽视了代码中的排版
复制代码
  1. [/code][code]
复制代码
把上述代码用浏览器打开，得到以下显示：

HTML 样式style 属性改变 HTML 元素的样式。
style 属性的作用：提供了一种改变所有 HTML 元素样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性 直接将样式添加到 HTML 元素，或者间接地在独立的样式表(CSS )中进行定义。
在 HTML 4 中，有若干的标签和属性是被废弃的。
被废弃的意思是指在未来的 HTML 版本中将不再支持这些标签和属性。
我们应该避免使用下面的标签和属性：1. &ltcenter>;2.  和 ; 3.  和 ; 4. .;5. align; 6. bgcolor; 7. color.
对于以上的属性和标签，应该使用样式来替代。
例如：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. Look! Styles and colors
复制代码
  1. [/code][code]
复制代码
  1. This text is in Verdana and red
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text is in Times and green
复制代码
  1. [/code][code]This text is 30 pixels high
复制代码
  1. [/code][code]This text is center prograph
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
用浏览器打开上述代码，得到以下界面:

HTML 文本格式化HTML 可以定义很多供格式化输出的元素，例如粗体和斜体字。
下面给出多个例子：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. This text is bold
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text is strong
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text is big
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text is emphasized
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text is italic
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text is small
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text contains
复制代码
  1. subscript
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]This text contains
复制代码
  1. superscript
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
用浏览器打开上述代码，显示效果如下：

例子2：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. 这是
复制代码
  1. 预格式文本。
复制代码
  1. 它保留了      空格
复制代码
  1. 和换行。
复制代码
  1. [/code][code]
复制代码
  1. pre 标签很适合显示计算机代码：
复制代码
  1. [/code][code]
复制代码
  1. for i = 1 to 10
复制代码
  1.      print i
复制代码
  1. next i
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
把上述代码用浏览器打开，得到以下显示：

例子3：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. Computer code
复制代码
  1. [/code][code]
复制代码
  1. Keyboard input
复制代码
  1. [/code][code]
复制代码
  1. Teletype text
复制代码
  1. [/code][code]
复制代码
  1. Sample text
复制代码
  1. [/code][code]
复制代码
  1. Computer variable
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]注释：这些标签常用于显示计算机/编程代码。
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code]把上述代码用浏览器打开，得到以下显示：[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-0a1dfdffc2f7a2e9fa78b178322f5168[/img]
  3. 例子4：
  4. [list][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]Written by Donald Duck.
复制代码
  1. Visit us at:
复制代码
  1. Example.com
复制代码
  1. Box 564, Disneyland
复制代码
  1. USA
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
把上述代码用浏览器打开，得到以下显示：

例子5：
  1. [/code][code]
复制代码
  1. [/code][code]etc.
复制代码
  1. [/code][code]
复制代码
  1. WWW
复制代码
  1. [/code][code]在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
复制代码
  1. [/code][code]仅对于 IE 5 中的 acronym 元素有效。
复制代码
  1. [/code][code]对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。
复制代码
  1. [/code][code]
复制代码
  1. [/code]把上述代码用浏览器打开，得到以下显示： [img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-a50dc9f59eb273ec313a292c19e75488[/img]
  3. 例子6：
  4. [list][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]Here is some Hebrew text
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
把上述代码用浏览器打开，得到以下显示：

例子7：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. 这是长的引用：
复制代码
  1. [/code][code]这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]这是短的引用：
复制代码
  1. [/code][code]这是短的引用。
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
把上述代码用浏览器打开，得到以下显示：

例子7：
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. 一打有 二十 十二 件。
复制代码
  1. [/code][code]大多数浏览器会改写为删除文本和下划线文本。
复制代码
  1. [/code][code]一些老式的浏览器会把删除文本和下划线文本显示为普通文本。
复制代码
  1. [/code][code]
复制代码
[code][/code]把上述代码用浏览器打开，得到以下显示：

回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
Coder的自我修养

积分:25
帖子:5
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP