HTML-HTML基本结构和head标签

2022-10-12 09:16:13

HTML基本结构和head标签

基本结构

<!DOCTYPE html>
<!--指定文档类型为html格式，浏览器会根据html格式去渲染下面的标签.-->
<html lang="en">  
    <!-- HTML文件内容区域，所有的内容都应该写到它的内部。其中lang=”en”表示页面是英文格式，翻译页面时会读取此值来获取当前页面是什么语言编写。 -->
    <head>  
        <!-- 放一些描述信息 -->
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body> 
        <!--放希望浏览器呈现出的内容。-->
    </body>
</html>

head标签

title

标题，title标签用于指定网页的标题

meta

文档字符编码

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

<meta charset="UTF-8">

页面刷新

meta标签设置页面定时刷新。

<meta http-equiv="Refresh" content="5" />

页面跳转特别方式：
<meta http-equiv="Refresh" content="5;Url=http://www.pythonav.com" />

关键字

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

<meta name="keywords" content="欧美，日韩，国产，网红" />

网站描述

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

<meta name="description" content="野鸭子是一个面向全球的皮条平台。" />

IE浏览器设置

<meta http-equiv="X-UA-Compatible" content="IE=edge">

国产浏览器

<meta name="renderer" content="webkit">
目前国内只有360浏览器可以使用此meta标签

触屏缩放

meta标签可以设置页面是否支持触屏缩放功能

width=device-width ，表示宽度按照设备屏幕的宽度。
initial-scale=1.0，初始显示缩放比例。
minimum-scale=0.5，最小缩放比例。
maximum-scale=1.0，最大缩放比例。
user-scalable=yes，是否支持可缩放比例（触屏缩放）

<!--支持触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

<!--不支触屏持缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

link图标

link标签可以设置网页标题上的图标。

<link rel="shortcut icon" href="图标文件路径">

通用模板head标签设置

<head>
    <meta charset="UTF-8">
    <title>设置标题</title>
    <meta name="keywords" content="关键字"/>
    <meta name="description" content="网站描述"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="shortcut icon" href="/image/chicken.icon">
</head>