HTML:一种标记语言而不是编程语言(10.0)

HTML 背景

背景(Backgrounds)

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色(Bgcolor)

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

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

以上的代码均将背景颜色设置为黑色。

背景(Background)

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

<body background="C:\Users\Re:CREATORS\Pictures\1.gif">

实例

下面的代码是一个例子,一个背景颜色和文字颜色搭配良好的例子,使页面中的文字易于阅读:

<html>

<body bgcolor="#d0d0d0">
<p>bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!bilibili!</p>
</body>

</html>

输出如下:

下面的代码是一个例子,背景图像和文字颜色使页面文本易于阅读的例子:

<html>

<body background="C:\Users\Re:CREATORS\Pictures\壁纸\1.jpg">

</body>

</html>

HTML 脚本

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

HTML script 元素

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

script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”:

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

<noscript> 标签

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

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

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

<script type="text/javascript">
document.write("Hello World")
</script>
<noscript>Your browser doesn't support JavaScipt</noscript> 
标签 描述
<script> 定义客户端脚本。
<noscript> 为不支持客户端脚本的浏览器定义替代内容。

HTML 文件路径

路径 描述
<img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中

HTML 头部元素

HTML <head> 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

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

下面的代码是一个例子,一个简化的 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document...</body>
</head>
</html>

HTML <base> 元素

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

<head>
<base href="http://www.bilibili.com" />
<base target="_black" />
</head>

HTML <link> 元素

<link> 标签定义文档与外部资源之间的关系。

<link> 标签最常用于连接样式表:

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

HTML <style> 元素

<style> 标签用于为 HTML 文档定义样式信息。

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

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

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

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

针对搜索引擎的关键词

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

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

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

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

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

HTML 头部元素

标签 描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

HTML 实体

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

字符实体类似这样:

&entity_name;

或者

&#entity_number;

如需显示小于号,我们必须这样写:&lt; 或 &#60;

不间断空格(non-breaking space)

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

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

HTML 中有用的字符实体

注释:实体名称对大小写敏感!

显示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
分(cent) &cent; &#162;
£ 镑(pound) &pound; &#163;
¥ 元(yen) &yen; &#165;
欧元(euro) &euro; &#8364;
§ 小节 &sect; &#167;
© 版权(copyright) &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

下面的代码是一个例子,

<!DOCTYPE html>
<html>
<body>
<h2>字符实体</h2>

<p>&X;</p>

<p>用实体数字(如:"#174")或者实体名称(如:"pound")替代"X",然后查看结果。</p>
</body>
</html>

HTML 统一资源定位器

URL - Uniform Resource Locator

当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。

统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。

语法规则:

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

解释:

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

URL Schemes

以下是其中一些最流行的 scheme:

Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file   计算机上的文件。

猜你喜欢

转载自blog.csdn.net/qq_40061206/article/details/95062795