自己是最好的老师，我想你只有抛开成绩和名次为自己的前途感到担忧而开始自愿的学习知识时才能真正领悟到这句话的意思。
要多想
——章北海的父亲这么对他说
个人认为HTML作为我前端课程最先开始学习的部分还是很容易理解的，学习容易理解的知识方法很简单，背！
但是好记性不如烂笔头，所以让我们来 写！
（但是编程难就难在你看老师一顿操作猛如虎，自己一试变成二百五）
由于HTML的开发者文档介绍的标签种类非常繁多，功能也十分齐全。奈何本人精力有限而且迫切希望开始下个阶段的学习，因此接下来的文章会从中挑选一些常见的标签浅谈其用法并在这个过程中自己动手实现这些功能，已达到自学的目的
首先我们用VS新建一个index.html文件
打开它我们可以看到一些‘必要’的标签，vs已经自动帮我们写好了
观察这份文档的主体部分，我们可以找到以下几个标签
<html> <head> <meta> <body> <title> 以及我后加的<p>作为最最常见的标签我们来依次了解他们的作用
<html>
<html> 元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。
在html元素上提供具有有效IETF标识语言标记的lang属性，将有助于屏幕阅读技术确定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕阅读器通常会默认使用操作系统的设置语言，这可能会导致错误陈述。
这里我们把en改成zh-cn试一下
并没有什么不同
那么删掉lang呢（依然没有什么不同）
<head>
head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
那么如果我们不写<head>会怎么样
运行
得到了和添加<head>相同的结果，但审查元素我们发现是浏览器自动为我们补全了<head>
但一些浏览器不会帮我们自动补全，所以为了避免一些不必要的麻烦自己写代码的时候记住一定不要忘记写<head>标签。
<meta>
<meta> 元素表示那些不能由其它HTML元相关元素 (<base>,<link>,<script>,<style>或<title>) 之一表示的任何元数据信息.
在这个文档中<meta>做了两件事，第一定义了这篇文档使用UTF-8编码，第二定义了网页的viewport。
content属性值：
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
<body>
body元素表示文档的内容。document.body属性提供了可以轻松访问文档的 body 元素的脚本。
我们可以看到文档的内容只有一行
<p>Hello World</p>
<title>
<title>元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。
讲文档中的title改为title
网页的标题也会随之变化
<p>
<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
既然<p>是块级元素，那么我们在后面再添加一个<p>标签观察一下变化
运行
果然两个<p>标签中的内容被分开显示了
那么除了文档中自动添加的标签还有哪些常用的标签呢
<h1>---<h6>
<h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用，例如，自动构造某个文档中的内容表（就像本文档右边浮动栏一样）。
我们一次添加6个标题，观察区别
运行
可以清楚的看到<h1>至<h6>标签显示的字体是从大到小的顺序，因此我们也叫<h1>标签为主标题（上面waiting拼错了，不要在意这些细节）
<input>
<input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
上面的网页非常单调，我们希望在网页中加入一些互动的内容
运行
这样我们就有了一个可以和访问者互动的网页，但是你会发现点击contact me按钮没有任何反应（因此你也不用担心会有人联系你）。那么怎么让网站的管理者获取你想要提交的信息呢
<from>
<form>元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
效果是这样的
点提交后，会把我们输入的用户名和密码提交给目标服务器
<a>
<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
我们来试一下
我们可以看到在网页上多了一个访问QQ的按钮
点击按钮就可以直接访问QQ的官网
代码中href包含超链接指向的URL或URL片段。
URL片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML元素的ID）。URLs不限于基于Web（HTTP）的文档，也可以使用浏览器支持的任何协议
如果我们在href=""中输入#
我们知道#是代表一个锚点，当href中的内容为#时我们的浏览器会自动跳转到开头
如果我们希望得到一个点击后不会有任何反应的按钮则需要在href中输入一个伪协议
<a href="javascript:;">什么都不会做的按钮</a>这样点击“什么都不会做的按钮”什么都不会做
如果我们想点击按钮后什么都不发生，那么href后面的内容为空可以么？
答案是不行！
经测试href内容为空时页面会刷新
<iframe>
表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。
我们试着在网页中插入一个浏览器窗口
这样
效果是这样
下面是一个结合<a>和<iframe>配合使用的方法，实现的效果是点击按钮会在<iframe>窗口中打开按钮指定的网页
为了更清晰的展示效果这里修改了<iframe>的默认尺寸
效果如图
以上就是一些HTML常用标签的简单用法。以后学会新标签的使用后会另开文章。
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
