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标签：

  1. 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>-->

前端开发-2-HTML-head标签的更多相关文章

  1. 前端开发HTML5——表单标签

    表单简介 Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用.form通常由一到多个表单元素组成,这些表单元素是单行/多行 ...

  2. 在做APP前端开发时应注意的一些问题

    在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...

  3. APP前端开发时应注意的一些问题

    在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...

  4. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  5. Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性

    正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...

  6. python 之 前端开发（HTTP协议、head标签、img标签、a标签、列表标签）

    第十一章前端开发 11.1 HTTP 1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等 1.keepalive连接: 1.长连接允许HTTP设备 ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. 前端开发必备！Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  10. 移动web页面前端开发总结

    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...

随机推荐

  1. vertx.io 与nodejs 一个简单的性能比较

    vertx.io 与node 都是可以进行js运行的一个引擎,但是vertx 支持的语言相对于node 多,可以查看官网.今天下网上查询相关的信息 时来了解到vertx.io 性能比node 好,于是 ...

  2. Xamarin版的C# SVG路径解析器

    原文:Xamarin版的C# SVG路径解析器 Xamarin版的C# SVG路径解析器,对SVG的Path路径进行解析,其中包括: 主程序SvgPathParser.cs, 相关接口定义:ISour ...

  3. System帐户!我使用你登陆

    大家知道,SYSTEM是至高无上的超级管理员帐户.默认情况下,我们无法直接在登录对话框上以SYSTEM帐户的身份登录到Windows桌面环境.实际上SYSTEM帐户早就已经“盘踞”在系统中了.想想也是 ...

  4. 理解git

    为了真正了解git,我们从底部.底层开始,了解git核心,知其然并知其所以然. 为什么要进行版本控制呢? 因为编写文件不可能一次到位,文件总是有不同的状态需要保存下来,方便以后出错回滚. git 是目 ...

  5. 编程实现C库函数

    1.memcpy函数 memcpy 函数用于 把资源内存(src所指向的内存区域) 拷贝到目标内存(dest所指向的内存区域):拷贝多少个?有一个size变量控制拷贝的字节数: 函数原型:void * ...

  6. import和export语法报错

    “最近在学习ES6”,但是在chrome中新建了js通过ES6语法(import,export)无法引入外部JS,报错: Uncaught SyntaxError:Unexpected token { ...

  7. c# 模拟POST上传文件到服务器

    using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...

  8. 【appium】根据xpath定位元素

    1. 背景 本文尝试使用的试验对象是SDK自带的NotePad应用实例,假设已经有两个Notes分别是“note1”和“note2”添加到Notepad上面,我们要做的就是尝试用xpath的方法来定位 ...

  9. Oracle Grid control 11g及Active DataGuard 11g安装部署

    Oracle Grid control 11g及Active DataGuard 11g安装部署(一) 原贴 http://blog.csdn.net/lichangzai/article/detai ...

  10. PHP图像处理

    1.创建画布: $img=imagescreatetruecolor(200,200); 创建颜色并填充 $red=imagecolorallocate($img,255,0,0);  //创建颜色 ...