前端开发-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占有大量的 ...

随机推荐

hasura graphql server 集成gatsby
hasura graphql server 社区基于gatsby-source-graphql 开发了gatsby-postgres-graphql 插件, 可以快速的开发丰富的网站基本使用安装h ...
使用ioctl获取网卡统计信息
ethtool -S获取接口统计信息总共分三步: 1.获取统计项个数,使用SIOCETHTOOL+ETHTOOL_GSSET_INFO 2.(可选)获取统计项名字,使用SIOCETHTOOL+ETHT ...
pthread中errors.h的代码
#ifndef __errors_h #define __errors_h #include <unistd.h> #include <errno.h> #include &l ...
Cropperjs 插件知识点
cropper.js 通过 canvas 实现图片裁剪,最后再通过 canvas 获取裁剪区域的图片base64串. 1. Container 容器 2. canvas 图片 3. crop 裁剪框
opencv中的更通用的形态学
为了处理更为复杂的情况,opencv中还支持更多的形态学变换. 形态学名称操作过程操作名称是否需要temp参数开操作 open open(src)=先腐蚀,后膨胀 CV_MOP_OPEN 否 ...
Linux strace命令一
简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...
PMP学习笔记
PMI:Project Management Institute,项目管理协会于1969年在美国成立,致力于全球范围内的项目管理研究.标准制定和出版.价值倡导.职业认证和学位课程认证.现在,PMI已 ...
wxWidgets：入门
0. 介绍 wxWidgets是一个开源的跨平台的C++构架库(framework),它可以提供GUI和其它工具.目前的3.0.0版本支持所有版本的Windows.带GTK+或Motif的Unix和M ...
spring boot学习(3) SpringBoot 之MVC 支持
第一节:@RequestMapping 配置url 映射第二节:@Controller 处理http 请求转发到一个页面,以前是转发到jsp页面,现在使用freemarker: 在pom.xm ...
在HTML标签的事件后面直接写JS代码
<input type="button" onclick="document.getElementdByTagName('div')[0].innrtHTML='S ...

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

3、title标签

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

随机推荐

热门专题