前端开发-2-HTML-head标签

最新推荐文章于 2024-07-29 15:46:22 发布

weixin_30788619

最新推荐文章于 2024-07-29 15:46:22 发布

阅读量84

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/foremostxl/p/9816505.html

版权

browser英 /'braʊzə/ 美 /'braʊzɚ/ 浏览器

explorer英 /ek'splɔːrə(r)/ 美 /ɪk'splɔrɚ/ 探险者，资源管理器

1.index
2.head标签相关内容
3.常用标签一
4.常用标签二 table
5.常用标签二 form
6.标签分类

1、index

<!--声明文档的类型 标记该文档为HTML5的文件-->
<!DOCTYPE html>

<!-- 页面的根节点 -->

<!--
html中的标签都是闭合标签  闭合标签包含 双闭合和单闭合
双闭合：<html></html>
单闭合：<meta />
 -->

<html>
    <head>
        <!-- 声明头部的元信息  对我们文档 规定编码格式 -->
        <meta charset="utf-8">
        <!-- 包含头部的信息  是一个容器 包含 style title meta script link等 -->
    </head>
    <body>
        <!-- 包含浏览器显示的内容标签 div p a img input等等 -->
        这是我们的文档结构
    </body>
</html>

2、head标签

文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等

3、title标签

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

我们接下来做一个小练习，创建一个带有我们自定义标题内容的网页：

4、meta标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，

这些不同的参数值就实现了不同的网页功能。

常用的meta标签：

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2 name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，

content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">

其他标签

<!--标题-->
<title>路飞学城</title>
<!--icon图标（网站的图标）-->
<link rel="icon" href="fav.ico">
<!--定义内部样式表-->
<style></style>
<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>

<!DOCTYPE html>
<!--en 能翻译网页-->
<html lang="en">
<head>
    <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->

    <!--文档的标题-->
    <title>路飞学城</title>

    <!-- 常用两个属性
        http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
      -->
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- 5秒之后 重定向 到路飞学城的网站 -->
    <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" />

    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 为了我们的SEO优化  工作的时候下面这两句 要写-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="路飞学城">

    <!-- 定义我们的网站图标 -->
    <link rel="icon" href="fav.ico">

    <!-- 引入外部样式表 -->
    <link rel="stylesheet" type="text/css" href="index.css">

    <!--定义内部样式表-->
    <style type="text/css">

    </style>

    <!--定义内部脚本文件-->
    <script type="text/javascript">

    </script>

    <script src="index.js"></script>


</head>
<body>

</body>
</html>

<!--这里是用 html:5 + Tab 自动生成的！！-->
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>Document</title>-->
<!--</head>-->
<!--<body>-->

<!--</body>-->
<!--</html>-->

转载于:https://www.cnblogs.com/foremostxl/p/9816505.html

weixin_30788619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发-2-HTML-head标签

browser英/'braʊzə/美/'braʊzɚ/浏览器explorer英/ek'splɔːrə(r)/美/ɪk'splɔrɚ/探险者，资源管理器1.index2.head标签相关内容3.常用标签一4.常用标签二 table5.常用标签二 form6.标签分类 1、index<!--声明文档的类型标记该文档为HTML5的文...
复制链接

扫一扫