2020-04-16

HTML基础_3

HTML基础_3
本部分主要介绍脚本，文件路径，以及头部元素！

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML script 元素

script 标签用于定义客户端脚本，比如 JavaScript。

script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
==下面的脚本会向浏览器输出“Hello World!”：==

1
2
3

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

<noscript >标签

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

JavaScript:
   <script type="text/javascript">
   <!--
   document.write("Hello World!")
   //-->
   </script>
   
VBScript:
   <script type="text/vbscript">
   <!--
    document.write("Hello World!")
    '-->
</script>

HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

网页
图像
样式表
JavaScript

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL：

1	<img src="https://dss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=864621958,2201859862&fm=202&src=780&crossm&mola=new&crop=v1">

以下是代码加载的效果：

相对路径

相对路径指向了相对于当前页面的文件。

在本例中，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：

1	<img src="/images/picture.jpg" alt="flower">

好习惯

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

HTML 头部元素

HTML <head> 元素

<head>元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script>以及<style>。

HTML <title> 元素

<title>标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
1. 定义浏览器工具栏中的标题
2. 提供页面被添加到收藏夹时显示的标题
  1. 显示在搜索引擎结果中的页面标题

一个简化的 HTML 文档：

<!DOCTYPE html>
    <html>
    <head> 
       <title>Title of the document</title>
    </head>

    <body>
        The content of the document......
    </body>

    </html>

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）

<head>
  <base href="http://www.w3school.com.cn/images/" />
  <base target="_blank" />
</head>

HTML <link> 元素

<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：

1
2
3

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

HTML <meta> 元素

元数据（metadata）是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta>标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

1	<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

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

注释：name 和 content 属性的作用是描述页面的内容。

HTML 字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：

1
2
3

&entity_name;
或者
&#entity_number;

如需显示小于号，我们必须这样写：

&lt; 或 &#60;

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

==到这里，HTML基础第三部分就结束啦==

本文标题:HTML基础_3

文章作者:Mr.AZ

发布时间:2020年04月16日 - 10时50分

最后更新:2020年04月16日 - 10时57分

原始链接:https://oldaz.github.io/2020/04/16/HTML%E5%9F%BA%E7%A1%80_3/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。