html

2023-11-02 21:20:16

此随笔来自https://pythonav.com/wiki/detail/5/60/

1、基本结构

点击查看代码

<!DOCTYPE html>
<html lang="en">  <!--  -->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    </body>
</html>

每个html都应该包含上述部分。

点击查看代码

<!DOCTYPE html>

，指定文档类型为html格式，浏览器会根据html格式去渲染下面的标签。

点击查看代码

<html lang="en">...</html>

，HTML文件内容区域，所有的内容都应该写到它的内部。其中lang=”en”表示页面是英文格式，翻译页面时会读取此值来获取当前页面是什么语言编写。

点击查看代码

<head>...</head>

，放一些描述信息。

点击查看代码

<body>...</body>

，放希望浏览器呈现出的内容。

2、head标签
head标签相当于人的大脑，内部可以放一些页面的描述信息，该部分内容虽然不会在页面展示，但也起到非常重要的作用。
2.1 title 标题
title标签用于指定网页的标题，所有网站页面标签部分的文字都是基于title实现。

点击查看代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>我的网页</title>
    </head>
    <body>
        ...
    </body>
</html>

2.2 meta 文档字符编码 meta标签可以定义文档的字符编码，即：浏览器会按照charset设置的编码去读取下面的文档内容。

点击查看代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
    </head>
    <body>
        <h1>呵呵</h1>
    </body>
</html>

注意：1. 定义字符编码的标签必须放在最上方；2. 乱码现象：文件编码和charset字符串编码不一致时，浏览器会根据charset定义去读取内容，所以就会出现乱码。 2.3 meta 页面刷新 meta标签设置页面定时刷新。

点击查看代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>世上最牛逼的页面标题</title>
        <meta http-equiv="Refresh" content="5" />
    </head>
    <body>
        <h1>这是个栗子，快运行起来。</h1>
    </body>
</html>

页面跳转可以用

点击查看代码

<meta http-equiv="Refresh" Content="5;Url=http://www.pythonav.com" />

2.4 meta 关键字 meta标签可以设置关键字，用于搜索引擎收录和关键字搜索。

点击查看代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>世上最牛逼的页面标题</title>
        <meta name="keywords" content="欧美，日韩，国产，网红" />
    </head>
    <body>
        <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1>
    </body>
</html>

2.5 meta 网站描述 meta标签可以设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息。

点击查看代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>野鸭子</title>
        <meta name="keywords" content="欧美，日韩，国产，网红" />
        <meta name="description" content="野鸭子是一个面向全球的皮条平台。" />
    </head>
    <body>
        <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1>
    </body>
</html>

码农公寓

此随笔来自https://pythonav.com/wiki/detail/5/60/

相关文章