HTML语法规范你懂多少！？第二次笔记，HTML（二）
文章目录
- HTML（二）
- meta标签
- HTML语法规范
- 总节一下语法规范
- 内联框架
- 超链接
- 上一篇
第二次笔记哦，虽然这些都很基础，但都罗列出来还是蛮多的。直叫人眼花缭乱。
HTML（二）
meta标签
上次笔记我们说了，meta标签：，就是设置浏览器的解码字符集。那mate标签还有没有其他的一些作用呢？我们来看看吧。
<html>
<head>
<meta charset="utf-8">
<title>meta标签的作用title>
<meta name="keywords" content="html5"/>
<meta name="description" content="发布h5、js等相关的信息"/>
head>
<body>
body>
html>
-
这里面
content="html5"就是关键词，name="keywords"用来说明后面content中的内容是关键词。当我们在搜索引擎中搜索html5时就有可能将我们的网页搜索出来。 -
而将keywords改成description时，就可以用来指定网页的描述。那关键词和描述有什么区别呢？也没啥区别，关键词是一个一个的词，而我们的描述是一句完整的话。
-
当然以上内容写完网页是看不见的，这些东西是搜索引擎在检索我们页面的时候，会同时检索我们的关键词、描述。但是这两个内容不会影响我们的网页在索搜引擎中的排名。
-
我们的meta还可以用来做请求的重定向。
-
先说下什么是请求的重定向。当我们在一个网页的时候，过了几秒钟自动跳转到其他网页中去，有点像一些网站的se情广告之类的玩意。总之在一个网页过一段时间重新请求到另一个网页中取就是请求的重定向了。
-
那我们要怎么写呢？
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>就是这样一段话，其中的
http-equiav涉及到了网络协议我们就先不讲，总之记住它就好了。这样content中的内容也很容易理解，就是在我们停留5s后自动跳转到百度。大概就是这个意思：
-
我们就说这么多meta的功能，真正使用的时候可能记不住这么多功能，可以去网站上搜索，或者查看API文档，我这里用菜鸟教程的网站：meta标签。
HTML语法规范
我们再来讲一下HTML的语法规范，其实准确的将是xHTMl的语法规范。为什么这么说呢？ 这个xHTMl是一个过渡阶段使用的，更加严格的语法规范。而h5的语法比较松散，就没有必要学了。
而这些规范也不是必须的东西。比如说我们再马路上靠右走，那你要是偏偏靠左走也没人拦着，但是有可能会被撞死。。。
-
首先HTML标签不区分大小写。但是我们一般都使用小写，除非一些公司的强制要求。这种公司也比较少，开玩笑说，这种公司都倒闭了，提这种无耻的需求。。。
-
HTMl中的注释不能嵌套（禁止套娃）。就是在注释中再写一个注释。然我们来看一错误的例子：
-->
-
HTMl标签必须结构完整。要么成对出现，要么是自结束标签。
<p>我是一个p标签p> <p>我也是一个p标签很显然上面的p标签是成对出现的复合要求，而下面的p标签不符合要求，但是我们看看效果呢？
好像没有什么不妥。。。这是为什么呢？因为，浏览器会以最大的善意来读取我们的代码，浏览器会尽最大的努力正确的解析。你所有不符合语法规范的内容，浏览器都会为你自动修正（如下图，在我们的页面中点F12进入开发者模式就可以看到）。那既然浏览器可以自动修正，我们就偷点懒不好么？？？注意：有些情况，浏览器会修正错误。所以我们还是一定要按照语法规范来写我们的代码。
- 另一个问题，一开始我们就说了，我们的代码必须写在
...之间，但当我们写在外面的时候呢？
我们这样写，会怎么样呢？
还真的没人敢管我了。。。
浏览器惯着我！！？？它怎么老惯着我呀，害，长得帅就是不一样！哈哈，其实浏览器这么惯着我们也是有原因的，假设A浏览器，严格遵守节操，不惯着我们，十分严格。B浏览器下线比较低，一般都会惯着我们，那你觉得那个浏览器更受欢迎呢，那个浏览器市场更好呢？？答案是显而易见的。简单来说，浏览器也得吃饭呀，混口饭吃不容易呀。。。
-
再说我们的自结束标签，就比如说
换行符，当我们这样写的时候也对。其实前一种是h5的写法，后一种是xhtml里的写法，两种写法都对。所以自结束的要求不是很严格。 -
html的标签可以嵌套，但是不能交叉嵌套，就像我们使用小括号和中括号一样，不能交叉嵌套。
([)]这样就乱了套了。
什么叫嵌套呢？
<p>今天天气<font color="blue">真不错font>p>这样的代码就叫嵌套。
而什么叫交叉嵌套呢？
<p>今天天气<font color="blue">真不错p>font>这样就叫交叉嵌套，这种写法就比较奇葩了，一般人写不出来。。。就像爷爷、爸爸分不清一样。但是我们刷新浏览器会发现效果还是一样的。。。太宠着我们了。。。但是浏览器帮助我们解析的时候可能导致结构不对了，所以千万不要这么写！！！或者你这么写吧，千万别让人看见，真让人看见，丢死人了Σ(oﾟдﾟoﾉ)。。。浏览器说：又是一个人扛下了所有。。
-
HTMl的属性必须有值，且值必须加引号！单引号和双引号都行，但一般都会用双引号。
总节一下语法规范
- html不区分大小写。
- 注释不能嵌套。
- 标签必须完整，要么成对出现，要么自结束标签。
- 标签可以嵌套，但是不能交叉嵌套。
- 属性必须有指，而且必须加引号。
内联框架
说说内联框架。这东西比较简单，用的不是特别多。简单来说：使用内敛框架可以引入一个外部的页面。
那么如何使用我们的内联框架呢？
<html>
<head>
<meta charset="utf-8">
<title>内敛框架title>
head>
<body>
<h1>我在外面h1>
<iframe src="html语法规范.html">iframe>
body>
html>
有点像我们从外面引入一张图片。
说一下我们的属性：
- src：就是指向外部页面的路径，可以使用相对路径。但是在我们的实际开发中，不推荐使用我们的内联框架。**因为我们的搜索引擎不会检索到我们内联框架中的内容。**也就是一些特殊情况要使用到，或者我们做的是一个内网项目，在某公司内部使用，不需要推到互联网上，才需要使用我们的内联框架。
- width、height:设置我们内敛框架的宽度和高度。
- name:为我们的内联框架取一个响亮的名字！（名字有什么用呢，我们先不说(￣▽￣)~*）
超链接
这个我们大家应该都比较熟悉了，就是我们从一个网页跳转到另一个网页用的超链接，随处可见。
<html>
<head>
<meta charset="utf-8">
<title>超链接title>
head>
<body>
<h1>我是超链接h1>
<a href="http://www.baidu.com">我是一个超链接a>
body>
html>
这都比较好理解了，但是当我们将www.baidu.com改成一个没有访问的连接，就比如：www.baidu12345.com会怎么样呢？我们来试试。
我们发现，一个是紫色的，一个是蓝色的。。。真神奇，点一下试试。
理所当然的没法访问。有访问和没访问还有有点区别的，这个也可以设置。。。但是这两个，都是在我们当前页面打开我们的超链接页面，如果我们需要在一个新的页面打开呢？？？
简单说下，我们的a标签有个属性叫做target：用来指定打开链接的位置。可选值有：
-
_self，表示在当前窗口中打开，这是默认值，上面的动图都是默认的这个值。等价于：
<a href="http://www.baidu.com" target="_self">我是一个超链接a> -
_blank，表示在新的窗口中打开链接。像我们的百度搜索完点击需要的链接一般都会在新的窗口中打开，而我们的Google则一般是在当前窗口打开。
-
内联框架name属性值，我们上面说内联框架的时候说过name的一个属性，这个属性值可以直接放到target中，然后我们点击就会在内联框架中出现我们的超链接。（这个不常用啦，了解就好）
再来说下，如果我们不确定我们的链接地址，我么可以使用一个#作为占位符。
<a href="#">回到顶部a>
那么#有什么作用呢？？？如果将我们的超链接地址设置为#，点击我们的超链接，会自动跳转到我们页面的顶部（回到顶部）。那么问题来了，既然有回到顶部，那有没有去底部呢？？？
这里我们就要介绍一个html的一个属性。html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识。这个属性叫做id！！！
<a href="#bottom">去底部a>
...
<a id="bottom" href="#">回到顶部a>
需要注意的是：
- id属性，在同一个页面中只能有一个，不能重复。
- id的开头不能是数字，只能是字母！！！
有时候，我们的网页底部会有一个联系我们这样一个按钮，点开以后，可以自动打开我们系统默认的邮件客户端。并且将收件人设置为mailto后面的地址。
<a href="mailto:邮箱地址">联系我们a>
这样代码，就可以实现我们的需求了。当然，要是没有系统默认的邮件客户端就没法打开了，不同浏览器的处理方式也不同。
好了我们的html基础就到这里了，接下来我会继续做css的笔记，在疫情期间，大家也要努力学习哦！！！
上一篇
HTML（一）