Elwin_Wang

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
HTML学习笔记

本文引自： https://www.w3school.com.cn/html/index.asp

1. 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

2. HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

3. HTML <dfn> 元素定义项目或缩写的定义。

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

4. 条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

5.

　　外部样式表

　　　　<head>
　　　　<link rel="stylesheet" type="text/css" href="mystyle.css">
　　　　</head>

　　内部样式表

　　　　<head>
　　　　<style type="text/css">
　　　　body {background-color: red}
　　　　p {margin-left: 20px}
　　　　</style>
　　　　</head>

　　内联样式

　　　　<p >
　　　　This is a paragraph
　　　　</p>

6. 使用 Target 属性，你可以定义被链接的文档在何处显示。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

7. 命名锚的语法：

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

基本的注意事项 - 有用的提示：

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

8. 替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

背景图片：

<body background="/i/eg_background.jpg">

设置对齐方式的图像：

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

9. 注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

10. 

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
 
<table border="1"
cellpadding="10">
<table border="1"
cellspacing="10">
<tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
<table frame="box">
15. 大多数 HTML 元素被定义为块级元素或内联元素。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<p><span>some text.</span>some other text.</p>

16. 使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

17. 使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

18.背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

19. <noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内.

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

20.使用相对路径是个好习惯（如果可能）。

21. 一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

<meta name="keywords" content="HTML, CSS, XML" />

22. HTML 字符实体:

HTML 中的常用字符实体是不间断空格(&nbsp;)。

https://www.w3school.com.cn/tags/html_ref_entities.html

23. URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

scheme://host.domain:port/path/filename

 

解释：

 

  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机（http 的默认主机是 www）
  • domain - 定义因特网域名，比如 w3school.com.cn
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename - 定义文档/资源的名称

24. URL 编码参考手册

 https://www.w3school.com.cn/tags/html_ref_urlencode.html

25. 客户端脚本  JavaScript

26. 服务器端脚本 ASP 和 PHP

27. 如何从 HTML 转换到 XHTML

  1. 向每张页面的第一行添加 XHTML <!DOCTYPE>
  2. 向每张页面的 html 元素添加 xmlns 属性
  3. 把所有元素名改为小写
  4. 关闭所有空元素
  5. 把所有属性名改为小写
  6. 为所有属性值加引号

  7. 文档结构

    • XHTML DOCTYPE 是强制性的
    • <html> 中的 XML namespace 属性是强制性的
    • <html>、<head>、<title> 以及 <body> 也是强制性的

    元素语法

    • XHTML 元素必须正确嵌套
    • XHTML 元素必须始终关闭
    • XHTML 元素必须小写
    • XHTML 文档必须有一个根元素

    属性语法

    • XHTML 属性必须使用小写
    • XHTML 属性值必须用引号包围
    • XHTML 属性最小化也是禁止的

 

 
posted on 2020-10-20 08:40  Elwin_Wang  阅读(102)  评论(0)    收藏  举报