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. node express 返回json object

    web 开发的过程中我们经常需要返回对象的json 格式,使用node express 是比较简单的, 1.node express 基础网站的创建 比较简单,以前的文章有 2.编写对象并导出对象 / ...

  2. bat计算两个时间差

    这个是脚本代码[保存为etime.bat放在当前路径下即可: 免费内容: :etime <begin_time> <end_time> <return>rem 所测 ...

  3. JS 得细心的坑位

    <script> function test(link) { link = link || 'none'; alert(link); } function test2(){ var lin ...

  4. hadoop 配置文件简析

    文件名称            格式                     描述 hadoop-env.sh      bash脚本            记录hadoop要用的环境变量 core- ...

  5. JUC线程池之 线程池的5种状态：Running, SHUTDOWN, STOP, TIDYING, TERMINATED

    线程池有5种状态:Running, SHUTDOWN, STOP, TIDYING, TERMINATED. 线程池状态定义代码如下: private final AtomicInteger ctl ...

  6. JDBC进行简单的增删改查

    一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操作 (1)定义记录的类(可选) (2)连接的获取 (3)insert (4)up ...

  7. qt书籍推荐

    <Qt Creator快速入门> 网友霍亚飞写的,他可算是Qt达人吧.这本书写得通俗易懂.与之配套的还有一个叫<Qt及Qt Quick开发实战精解>,属小项目实战,在入门的基础 ...

  8. linux 信号处理 三 （信号集的使用）

    sigprocmask系统调用 使用条件: 1.有时候不希望在接到信号时就立即停止当前执行,去处理信号,同时也不希望忽略该信号,而是延时一段时间去调用信号处理函数.这种情况是通过阻塞信号实现的. 2. ...

  9. 将ESXI所有的端口组迁移到分布式交换机的步骤

    1.如果是DELL服务器,一般有2-4个网口,那么所有的网口都把网线插到交换机上:2.DELL安装ESXI系统,根据不同的DELL硬件,要安装不同的ESXI版本.原则上越高版本,支持的硬件越多向下兼容 ...

  10. jquery二维码生成插件_二维码生成器

    jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar