html5lang,html5浪漫

html5 的 lang="en"的使用问题

这个主要是告诉浏览器，本页面主要用什么语言。

创新互联-专业网站定制、快速模板网站建设、高性价比韩城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式韩城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖韩城地区。费用合理售后完善，十载实体公司更值得信赖。

很明显的一幕：你写个demo页面，里面写html lang="en"，页面内容都写中文，不要有英文。

chrome打开页面，虽然都是中文，但浏览器顶部会提示此页面是英文，是否需要翻译成中文。

html中的lang标记有什么用

写在html标签中的lang属性作用：声明当前页面的语言类型。

如： 

htmllang='en'

/html//英文 

htmllang='zh'

/html//中文 

htmllang='ja'/html//日文 

htmllang='en-us'/html//美式英文 

注意：lang属性中的语言代码不区分大小写。

htmllang='en-us'/html//英文 

htmllang='en-US'/html//英文 

上面的两行代码一样的效果。 

另外，lang属性也可以加到普通标签上。

扩展资料

html中的声明：

!DOCTYPE 声明必须是 HTML 文档的第一行，位于 html 标签之前。

!DOCTYPE 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，这样浏览器才能获知文档类型。

在 HTML 4.01 中，!DOCTYPE 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

现在主要记住：H5的声明方式：!DOCTYPE html

常用标签及其属性：

1-标题标签h1~h6(越来越小)。

标题标准属性：id, class, title, style, dir, lang, xml:lang；事件属性：onclick, ondblclick等。

2-链接标签aimg

a属性有：download、href、name、target等。

img有：src（规定显示图像的 URL）、alt（规定图像的替代文本）。

html5基本知识点

一、HTML的开发工具和使用的浏览器

开发工具：记事本等文本编辑器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。

浏览器：Chrome、Firefox、IE、Safari、IPhone、Android。

二、HTML的基本要素

DOCTYPE  描述文档的类型

html     网页的根元素，写在网页的在外面

head    网页的头部信息，写在html标记的里面

body    网页的内容，写在html标记的里面

具体描述：

1、DOCTYPE  描述文档的类型，规定web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

网页可以使用的具体版本，网页中可以使用那些标记，每个版本的DTD版本均有不同

使用例子

HTML4的例子

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

HTML5的例子

2、html/html 网页文档中的根标记

html 标签有三个特殊的属性

manifest   指定网页缓存文件，可以让用户离线的时候也可以访问文件。

xmlns   设置html名空间，比如把网页设置成xhml的时候可以使用这个值。

lang   设置网页的描述语言，比如中文是zh；英文是en。

3、head/head头部标签在网页中只能有一个，设置HTML文档的头部信息，里面内容不会在页面中显示出来·。

head里面的标记

meta 标记

title定义网页的标题

link 链接

script  标记JavaScript脚本的内容

style  标记css样式

meta  标记

4、body/body只能有一个，显示网页的主体内容。

代码示例：

请点击输入图片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4     meta charset="UTF-8" 5     title网页标题(显示在浏览器上)/title 6     meta name="description" content="网页内容的简单描述" 7     meta name="keywords" content="网页关键词" 8     link rel="/css/style.css" 9     script src="/js/script.js"/script10 /head11 body12     header网页头部内容/header13     main网页主要内容/main14     nav网页的导航内容/nav15     footer网页的页脚内容/footer16 /body17 /html

请点击输入图片描述

请点击输入图片描述

三、写在head中的标签

（一）、meta标签

meta元素的属性：

name 描述信息的名称，来标记这是一个什么样的信息

http-equiv  描述行为

content  描述的内容

charset   指定网页的编码

1、name 属性

1 meta name="author" content="nyw"2     !--作者， 定义网页的作者 --3 meta name="description" content="meta标记学习"4     !-- 描述，描述网页的实际内容 --5 meta name="keywords" content="HTML,meta"6     !-- 关键字，定义网页关键字 --

2、http-equiv属性

1 meta http-equiv="refresh" content="30"2     !-- 网页30s后自动刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4     !-- 网页30秒后跳转到dom.html文档 --

meta http-equiv="refresh" content="5,url=dom.html"

http-equiv描述网页的行为，行为 refresh刷新，内容为5，表示5秒后跳转到 dom.html这个文档。

3、content 属性

特殊属性

content-type   指定http头部信息的文字编码（最为常用）

default-style   指定优先使用的样式单（stylesheet）

refresh    用于网页的自动刷新或是页面跳转

set-cookie   设置页面的cookie（现在已经不再推荐使用）

4、charset属性

指定网页的编码，推荐使用UTF-8来增加网页的兼容性。

代码实例：

为搜索引擎抓取机器人准备一些信息

这段代码可以禁止搜索引擎缓存和跟踪网页。

meta name="robots" content="noindex,nofollow"

!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 --

代码实例：

请点击输入图片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4     meta charset="UTF-8" 5     title网页标题(显示在浏览器上)/title 6     meta name="author" content="nyw" 7     !--作者， 定义网页的作者 -- 8     meta name="description" content="meta标记学习" 9     !-- 描述，描述网页的实际内容 --10     meta name="keywords" content="HTML,meta"11     !-- 关键字，定义网页关键字 --12     meta http-equiv="refresh" content="30"13     !-- 网页30s后自动刷新 --14     meta http-equiv="refresh" content="5,url=dom.html"15     !-- 网页30秒后跳转到dom.html文档 --16     meta name="robots" content="noindex,nofollow"17     !-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 --18 /head19 body20 /body21 /html

请点击输入图片描述

（二）、title、base标记

title和base标记都是写在head标签中

title：设置网页的标题

写法：title内容/title。

base：指定网页跳转基准URL，如果不指定的话默认为当前网站的当前路径。

写法：base href=""

base属性值：

href  指定网页跳转到基准URL，如果不指定的话则默认为当前网站的当前路径。

base href=""  这是将页面跳转到百度的网站打开。

target  指定链接的跳转帧如果不指定的话，则是在当前页面中跳转。

base target="_blank" 网页中的链接都应该在新的窗口中打开。

terget属性值：

_blank  在新窗口中打开被链接的文档

_self   默认值，在相同框架中打开被链接的文档

_parent   在父框架集中

_top   在整个窗口中打开被链接文档·

framename   在指定框架中打开被链接文档

（三）、link标记

link标记：链接外部文件时使用的标记，可以把外部文件的内容引入到当前文件中来，使当前网页实现更多的功能。

link属性：

href：指定链接外部路径的路径和文件名，要设置全路径并且带文件名

rel：引用文件，引用资源的类型定义

我们在使用link标签引用外部文件的时候，外部文件的类型是多种多样的。

alternate   代替文档（种子，其他语言版本，其他格式等等）

author   网页的作者

help  帮助文件的链接

icon  网页的图标

next  如果是连续网页的时候，指定下一个网页

prefetch   把链接外部资源时提前缓存起来。

prev   如果是连续网页

media  链接文件或是资源属于哪一种资源。

hreflang   链接文件的语言种类

type  链接文件的mi/me类型（比如说，图片图标文本）

sizes  根据link链接文件的类型，来指定文件的大小

代码示例：

链接网页图标：

网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹

1 !-- 网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹 --2     link rel="icon"3     !-- 示例 --4     link rel="icon" href="img/favicon.png" type="image/png"5     link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"6     link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png"

注意：后面的href和前面type标注的类型要一致，这样既可以显示在浏览器，又可以显示在手机上

链接外部样式单

1 link rel="stylesheet"2     link rel="stylesheet" href="style1.css" media="screen"3     link rel="stylesheet" href="style2.css" title="主题样式文件"4     link rel=" alternate stylesheet" href="style3.css" title="可选样式单"

说明：

alternate 会在浏览器中会弹出一个对话框，供用户可以进行选择

media  表示媒体类型为屏幕，可以是手机，但不包括打印机和投影仪

title  对这个link进行简单的说明

网站RSS种子指定

!-- 网站RSS种子指定 --

link rel="alternate" type="application/rss+xml"

为搜索引擎的准备的网页的URL

!-- 为搜索引擎的准备的网页的URL --

link rel="canonical"

link rel="canonical" href=""

HTML标签里 lang删掉默认什么类型网页？

!DOCTYPE HTML//这个网页的文档类型，这个是html5的写法

html lang="en"//这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）

head//这个就是头部的那个标签了。

meta charset="UTF-8"//这个是设置的编码为UTF-8的

中文字体这个写法也是可以显示的啊。。当然你文件保存的格式也应该是utf-8的

html中lang问题

W3C的规定是：HTML 4.01中的lang的属性值使用RFC1766中的定义值。HTML 4.01的语言代码不区分大小写。

!DOCTYPE HTML//这个网页的文档类型，这个是html5的写法

html lang="en"//这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）

head//这个就是头部的那个标签了。

meta charset="UTF-8"//这个是设置的编码为UTF-8的

如果浏览器遵循W3C标准，lang属性可以用来定义样式。class定义了主要CSS，lang可以在class的基础上做出适当修改。

比如：

style

p{/*lang无效*/

font-family: "宋体"

font-size: 14px;

color: #F00;

}

p:lang(zh-CN){/*lang="zh-CN"*/

font-family: "宋体"

}

p:lang(en-US){/*lang="en-US"*/

font-family: Arial

}

/style

这里p标签的主要CSS只定义了字体大小和颜色，然后就需要通过标签的lang属性来确定字体。

lang属性的好处呢，就在于它的CSS继承性，或许p标签需要定义很多样式，但不同的语言（其实也不只是语言）可能需要变动少量的样式，如果把这些样式分开定义，可能就会似的CSS很冗长，浪费用户的流量和内存。

很多大网站不加可能是因为没有这个需求吧，这个属性定义了是什么语言显示页面的