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

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

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

前端开发HTML5——表单标签
表单简介 Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用.form通常由一到多个表单元素组成,这些表单元素是单行/多行 ...
在做APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性
正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...
python 之前端开发（HTTP协议、head标签、img标签、a标签、列表标签）
第十一章前端开发 11.1 HTTP 1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等 1.keepalive连接: 1.长连接允许HTTP设备 ...
前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
前端开发必备！Emmet使用手册
介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...
[转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
移动web页面前端开发总结
移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...

随机推荐

oracle 变量作用域
以下为测试代码块DECLARE v_i number := 100; v_p VARCHAR2(200) := 'a';BEGIN DECLARE v_i number := 999; ...
在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ
在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. ...
Oracle 表空间与数据文件
-============================== --Oracle 表空间与数据文件 --============================== /* 一.概念表空间:是一个或多 ...
RabbitMQ-官方指南－RabbitMQ配置
原文:http://www.rabbitmq.com/configure.html RabbitMQ 提供了三种方式来定制服务器: 环境变量定义端口,文件位置和名称(接受shell输入,或者在环境配 ...
C#读取Mysql blob字段 (转帖)
http://blog.csdn.net/config_man/article/details/6123191 开发环境:Windows XP Professional SP3.VS2008.Winf ...
51nod 1673 树有几多愁——虚树+状压DP
题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1673 建一个虚树. 一种贪心的想法是把较小的值填到叶子上,这样一个小值限制到的 ...
HttpFileCollection类
最近在学HttpRequest类搞文件上传的时候看到Request.Files返回了HttpFileCollection 这个类的一个对象,这个类用于获取浏览器上传的文件集合,在文件上传的时候可以通过 ...
Dynamics CRM 2011 通过数据库修改实体字段的长度需要注意的地方
一.首先打开数据库,我这里以SQL Server 2012数据库为例. 1.选择工具—>选项 ,如图1 图 1 2. 选择表设计器和数据库设计器—>阻止保存要求重新创建表的更改(S)把前面 ...
opencv中的缩放函数
图像处理里面缩放操作是比较常见的: 最近邻插值:类似简单映射的处理方式,目标图像w1,h1,原始图像w0,h0,则在目标图像上的点(x,y)的像素点实际对应原始图上(x*w0/w1,y*h0/h1)的 ...
datacolumn 表达式除数为0
dt.columns.add("avgp",typeof(decimal),"IIF(qty=0,0,price/qty)")

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

3、title标签

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

随机推荐

热门专题