学习 HTML 在线

2462title

    1.title标签只能在head标签内出现；
  • 2.定义浏览器工具栏中的标题;
  • 3.浏览器中收藏夹内书签的名称是title的内容；
  • 4.title的内容可以方便搜索引擎索引页面；
  • 5.从搜索引擎搜索到的内容的标题往往是网页title的内容；title通常体现了网页的主题内容，所以记得一定要加上。

2461pre

<pre>标签的定义及使用说明：

1、该标签可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，并且文本会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码。

2、该元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

3、标签中的特殊符号被转换为符号实体，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"。

4、可以导致段落断开的标签（比如<h1>、<p> 和 <address> 标签）尽量不要包含在 <pre> 所定义的块里，我试过现在的浏览器（Google、IE和火狐），虽然可以把段落结束标签解释为简单地换行，但是在代码编辑器里会报错 "Invalid location of tag (h1)."

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
   <pre>你好     我是Natalie
  
  我即将成为<h1>一名技术</h1>大神。

以下是火狐浏览器运行的结果

2460pre

  • pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中。
  • pre元素中允许的文本可以包含物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签，比如<a>标签放到<pre>块中时，就像放在HTML/XHTML文档的其他部分中一样即可。
  • 制表符tab在<pre>标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
  • 如果希望使用<pre>标签来定义计算机源代码，比如HTML源代码，请使用符号实体来表示特殊字符。一般将<pre>标签与<code>标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。
  • 如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性。

2459meta

还有一个 viewport 属性，这里面没有提到，它用于移动端显示优化的。

可以参考这篇文章：viewport 深入理解（https://www.facesoho.com/w3cnote/viewport-deep-understanding.html）

里面提到 6 个属性：

width设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许

还有一个属性：minimal-ui，参考：

iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏（http://36kr.com/p/210516.html），这个在 iOS8 中已经废弃了。

2458meta

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->