HTML的基本

人在校生一枚，希望可以找到志同道合的小伙伴一起进步，不定期的更新自己的收获，如果有大神的话可以指出我的不足，我用的是VS code软件来写代码的

什么是 HTML

HTML 是个缩写，全称Hyper Text Markup Language，译为超文本标记语言。它是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML的结构

html的后缀名有两种一种是.html，另一种是.htm （两种并无区别）
快捷创建基本结构的方法：方法一：可以在开头打一个“!”号，方法二：打一个html，智能提示会出现html:5 选中即可。

HTML的头部

在<hard>头部标签中你可以插入脚本（scripts）,样式文件（CSS），以及各种meta信息。可以添加在头部区域的元素有：<title>，<style>，<meta>，<link>等等

<title>定义网页标题</title>
<meta>元素：描述了一些基本的元数据，元数据不显示在页面上，但会被浏览器解析，<meta>通常用于指定网页的描述，关键词，作者。

注释快捷键：CTRL+? （注释是不被运行的，作用就是帮助程序员记东西）

 <!--这是一个注释-->

HTML属性

通用属性：几乎所有元素都可以使用的属性，例如 id、name、style等
私有属性：某个一个/类元素所具备的属性
事件属性：为某个元素绑定事件（DOM学习）
自定义属性：开发者为某个元素设置的属性，一般都是在前端框架中使用
参考介绍https://developer.mozilla.org/zh-CN/

HTML完整结构

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
			<!--头部，js和css写在这里面-->
 </head>
 <body>
       <!--内容主体-->
 </body>
 </html>

可能我写的会有些不清楚，到后面有代码的时候就会清楚了

局一张图

上图是京东的登录页面，这和我们接下来要学习的东西有关系。

《踏上编程之路的必经之路之html篇六》中我们学习了table表格，今天我们要学习的这叫做form表单。

form表单就是专门用来实现用户登录、用户注册、信息收集之类的页面的。

日常网购一般都要求我们先登录，输入用户名和密码，点击登录后才可以进行物品的购买，那我们就用form表单来实现一下登录。

form表单中包含了input标签，input标签属于单标签。单标签是相对于双标签来讲的。以前的a标签、p标签、span标签等，都属于双标签，它们的特点是一对一对的，比如a标签，要写成<a></a>。比如p标签，要写成<p></p>，它们都是有一个开始，有一个结束。都是成双入对的。

单标签则没有结束标签，比如上面的input标签，它就没有</input>这样的结束。单标签还有我们之前学的img图片标签，br换行标签等。

input标签只能包含在form标签中，也就是说只要有input出现的地方，必定会有一个form标签包围着它。

而上一篇中的tr和td标签只能包含在table表格标签中，它们是组合。不能分开单独使用。

同样的情况还有li标签，只能包含在ul无序列表标签，ol有序列表标签中，dt标签和dd标签只能包含在dl标签中。

上面代码在浏览器中的效果：

这样一个简易的登录页面就做出来了，是不是很简单啊，我们试着填写用户名和密码来尝试一下登录。

你会发现，你输入的密码并不是明文的，也就是说你输入的密码会以黑点的形式呈现，这是为了安全，如果不这样，你输密码的时候很可能会被你背后的人看到。

那这个是怎么实现的呢？其实你应该已经发现了，input标签里面有个type属性，type设置为password就是以密码形式呈现。type设置为text就是以明文显示，type设置为submit就是一个按钮。

提交按钮的input里面我们还设置了一个value属性，这个属性用来设置，按钮的文字，我们这里设置的是登录，为了加深理解，我们给它改为登入。

浏览器中就会相应地显示为登入：

form表单中除了可以写input外，还可以有select下拉选择标签、textarea文本域标签、button按钮标签（这个按钮和<input type="submit">都是按钮，用的时候看你自己喜好）。

下面通过一个例子来了解上面的各种标签的使用。

案例：添加一篇文章，要求填写文章标题、文章分类、发表频道、文章内容。

浏览器中的效果：

上述代码中form标签中有select标签，这个的作用是产生一个下拉框，供用户选择。

select里面包含option标签，这个就是具体可以选择项。我们这里设置了三个：财经、教育、历史。同我们前面讲的一样，option必须包含在select里面，而select必须包含在form表单标签中，它们是组合，不能打单独使用。

在这个例子中，我们还是用到了单选。

红框框住的就是我们设置的单选，具体对应代码中的：

单选也是用的input标签，只不过它的type是radio，还有一个要注意的地方就是name属性，我们这里可以选择的项是：新视觉、猎奇、杂说，它们三个的name属性都设置为了：channel。只有设置name都一样，才能单选，否则就成了多选了。

文章内容我们使用到了textarea文本域标签，它和<iniput type="text">的区别是，textarea可以放更多的文字。

textarea标签有两个属性需要说一下，cols代表的是列，rows代表的是行，cols设置的值越大，textarea的框越宽，rows的值设置的越大，textarea的框越高。我们来尝试一下：

先把cols设置成60，textarea就会变宽。

rows设置为30，textarea就会变高 :

form表单中还可以设置多选，我们也来尝试一下：

浏览器中的效果：

红框框住的部分就是我们实现的多选，多选用的也是input标签，type为checkbox

你可以自己动手尝试一下

我们整体的需求都实现了，但是整个页面看起来很不美观，所以我们需要调整一下，我决定采用table表格来调整，把文章标题、请选择分类、内容这些文字性的东西放到一列，input、select等标签放在另一列里面，使整个页面看起来更加整齐。

浏览器中的效果：

经过调整以后，看起来已经不那么丑了，在《做网站需要学习哪些知识》中，我们介绍过美化页面需要用Css和JavaScript，光用html是不可能做到很美观的。

在讲完html后，我们就会讲Css和JavaScript。

今天的内容就到这里了，记得要动手实践哦！

分享成果，随喜正能量】喜欢感恩，顺利就越来越多；喜欢助人，贵人就越来越多；喜欢抱怨，烦恼就越来越多；喜欢知足，快乐就越来越多；喜欢逃避，失败就越来越多；喜欢分享，朋友就越来越多；喜欢生气，疾病就越来越多；喜欢占便宜，贫穷就越来越多；喜欢施财，富贵就越来越多；喜欢享福，痛苦就越来越多；喜欢学习，智慧就越来越多。

《VBA信息获取与处理》教程是我推出第六套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。这部教程给大家讲解的内容有：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪贴板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的，更具研究的价值。

教程共两册，八十四讲。今日的内容是专题八 VBA与HTML文档,内容是：HTML超文本标记语言

第一节什么是HTML超文本标记语言

我们上网需要浏览器，浏览器的作用就是把服务器返回的源代码，翻译成我们可视的生动的页面。它的作用是和VBA代码一样的，就要要把各种逻辑关系用代码的形式表现出来。服务器返回返回的源代码是什么语言呢，就是通常所说的，超文本标记语言。超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

1 超文本标记语言的作用

什么是标记语言呢？顾名思义，它只能用于展示，展示我们所看到的网页页面。不是编程语言。为啥叫超文本呢，大家仔细看，这堆源代码有什么特征呢，就是有很多<…>这样的文本，一般而言，我们把<…>叫做标签。我们先看看下面一段的源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>小游戏,4399小游戏,小游戏大全,双人小游戏大全 - www.4399.com</title>

截图：

网页截图：

浏览器正是把上面的代码翻译成了我们上面的网页。

2 超文本标记语言的基本特征

超文本语言中的标签都是成对出现的，这也是这种语言的特征。例如：“<title>小游戏,4399小游戏,小游戏大全,双人小游戏大全 - www.4399.com</title>”。

第一个<title>叫做开始标签，第二个</title>多带了个/叫结束标签。标签之间就是网页的文本，例如这个例子，就是我们网页标题的文本“小游戏,4399小游戏,小游戏大全,双人小游戏大全 - www.4399.com”。所以，标签的作用就是，给文本打上标记，告诉浏览器，怎么显示这个文本。例如本例，要求浏览器把“小游戏,4399小游戏,小游戏大全,双人小游戏大全 - www.4399.com”显示成网页的标题。HTML文档=文本+标签，这就是所谓超文本。

3 超文本标记语言的一个简单实例

在上面我讲了什么是HTML语言，及其特征，下面我们通过一个实例进一步认识他：

<html>

<body>

<h1>学习VBA语言</h1>

<p>为了更好的掌握VBA的各个知识点，您可以参考我的第一套教程：VBA代码解决方案</p>

</body>

</html>

我们把上面的几行代码录入到记事本中，保存成.html文件。HTML基础学习.HTML

然后正常双击大家这个文件，就会是一个浏览器文件了：

本节知识点回向：

什么是HTML语言？特征是什么？

本节参考文件：HTML基础学习.html

我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：

【分享成果，随喜正能量】修持好了内心，心平气和，就不与琐事较劲，不与挫折较劲，不与不愉较劲。生活也才顺畅，人生自然福气满满。 

在线咨询

上一篇：除了 filter 还有什么置灰网站的方式？
下一篇：百度安全的 OpenRASP 项目究竟是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML的基本

什么是 HTML

HTML的结构

HTML的头部

HTML属性

《踏上编程之路的必经之路之html篇六》中我们学习了table表格，今天我们要学习的这叫做form表单。

今天的内容就到这里了，记得要动手实践哦！

第一节 什么是HTML超文本标记语言

1 超文本标记语言的作用

2 超文本标记语言的基本特征

3 超文本标记语言的一个简单实例

您的项目需求

第一节什么是HTML超文本标记语言