HTML

最新推荐文章于 2022-11-30 10:54:53 发布

最骚的就是你

最新推荐文章于 2022-11-30 10:54:53 发布

阅读量680

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/libin_1/article/details/51337944

本文介绍了HTML头部元素的应用，包括<link>、<style>、<script>等标签的使用方法，并展示了如何通过CSS控制列表样式的实例。

头部

概述

<head> 元素包含了所有的头部标签。<head> 元素中通常包含脚本（scripts），样式文件（CSS），及各种 meta 信息。

头部可包含的元素标签
- <link>，描述 HTML 文档链接的外部资源的地址。通常用于链接到样式表。如下：
```
<link rel="stylesheet" href="mystyle.css">
```
- <style>，指定了 HTML 文档样式文件的引用地址。该元素的内容用来渲染 HTML 文档（通常情况下，我们会使用单独的 CSS 文件来渲染 HTML 文档）。如下：
```

<style>
    body {background-color: yellow;}
</style>

<link rel="stylesheet" href="mystyle.css">
```
- <script>，标示所要加载的脚本文件。在大多数的项目中，我们会使用外部脚本
```

<script>
    document.getElementById("p").innerHTML = "段落被修改";
</script>

<script src="my_jquery_functions.js"></script>
```
- <base>，定义了该 HTML 文档中，所有链接的默认链接（基本的链接地址/链接目标，基地址）
```
<base href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">
```
- <meta>，定义了只被浏览器解析，而不显示在界面上的元数据。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。重要作用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务
```

<meta name="description" content="Free Web tutorials on HTML and CSS">

<meta name="author" content="Hege Refsnes">

<meta http-equiv="refresh" content="30">

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
```
- <title>，定义文档标题。该标题作用于显示在浏览器工具栏的标题，显示在收藏夹的标题，显示在搜索引擎结果页面的标题
```
<title>HTML Document</title>
```

列表

概述
- 在 HTML 中，我们可以使用列表标签（<ol>、<ul>）的 type 属性来设置列表的标记类型。在 CSS 中我们可以更加灵活的控制列表的标记。
可控制的列表项标记样式

|属性|含义|
|list-style-type|列表项标记的类型|
|list-style-image|设置列表项的标记为图片|
|list-style-position|列表项标记的位置|

示例

代码

HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-04 样式 3</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <ul id="normal">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <ul id="image">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>
</html>

CSS 文档

#normal
{
    list-style-type: square;
}
#image
{
    list-style-image: url("item_tag.png");
}

效果图