实现快捷生成HTML代码

ublime / vscode 快捷生成HTML代码的实现

文章目录

1.基本html结构

2.生成div加类名的快捷键

3.带类名的div

4.带id的div

5.属性【】

6.后代>

7.兄弟+

8.上级^

9.乘法*

10.文本{}

1、基本html结构

操作：输入 !+Enter键

注意：这里输入“！”+回车键前，需要清空原来生成的基本结构

实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     
</body>
</html>

2、生成div加类名的快捷键

操作：输入 div.list>div.item_$*6

实现效果：

<div class="list">
    <div class="item_1"></div>
    <div class="item_2"></div>
    <div class="item_3"></div>
    <div class="item_4"></div>
    <div class="item_5"></div>
    <div class="item_6"></div>
</div>

3、带类名的div

操作：输入 div.wrapper

实现效果：

<div class="wrapper"></div>

4、带id的div

操作： div#wrapper

实现效果：

<div id="wrapper"></div>

5、属性 []

操作： span[title=“test”]

实现效果：

<span title="test"></span>

6、后代 >

操作：输入div>span>a

实现效果：

<span title="test"></span>

7、兄弟 +

操作： div+p+span

实现效果：

<div></div>
<p></p>
<span></span>

8、上级 ^

操作： div>span^i

实现效果：

<div><span></span></div>
<i></i>

9、乘法 *

操作： ul>li*2

实现效果：

<ul>
    <li></li>
    <li></li>
</ul>

10、文本 {}

操作： div>span{这是文本}

实现效果：

<div><span>这是文本</span></div>

HTML从哪入手？

自学的话，首先要理解html的作用。html，hypertext markup language，超文本标记语言，用来展示网页中的内容。同时 HTML 也是我们学习前端开发的基础。随着 web 前端技术的飞速发展，HTML 和 CSS 也成为了编程者的必备技能。而要想做一个网页光会这一门语言是不够的，还需要自学css，JavaScript。其中html和css较JavaScript容易。

可以这样理解，HTML，是一个文件类型，可以被浏览器解析。如果不使用浏览器打开，我们看到的将是一行行代码，在浏览器中打开以后呢，就会出现一些静态效果了。下面介绍一下初步的一些HTML语法知识。

HTML 标签非常注重语义化，很多标签都是通俗易懂的，大大降低了我们学习的难度。这套 HTML 教程更是为了避免初学者走太多的弯路，指出了许多其它 HTML 教程中没有提到的学习误区，并且给初学者提供了一个具体的学习思路，除了注重 HTML 知识点的讲解，更加注重 web 前端开发技巧和思维。帮助大家快速入门，其中包含大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。

学海无涯，苦做舟，学习如同修行，只有潜心才可以领悟真谛。HTML 中的每一个小知识点都可以让页面发生不同的变化，现在就让我们行动起来，跟着 HTML 教程的步伐，让我们一起走进 HTML 的世界。

HTML语言特点

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

● 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

● 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

● 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

● 通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

什么时候用HTML

B（Browser）/S（Server）架构方向，也是我们以后主攻方向

为什么要学HTML

我们以后主要为企业内部提供解决方案，例如：企业内部的办公系统、供应链管理系统、客户关系管理系统等，而这些系统通常对界面的表现要求较低，对业务处理和数据处理要求较高，并且要求降低升级维护的成本，B/S架构可以更好的被企业接受，所以我们以后主要的方向是开发基于B/S架构的应用，B/S架构的开发通常又被叫做Web开发，Web开发通常包括Browser浏览器端的开发以及Server服务器端的开发。

虽然我们是学习Java后台服务器编程，但是前端页面编写要了解，能看懂，简单的页面效果可以实现即可；

怎么开发HTML

创建一个以 .html或 .htm 结尾的文件，用文本编辑器打开就可以开发

怎么运行HTML

用浏览器打开以.html或.htm的文件就可以自上而下解析执行，不需要编译

DTD：Document Type Definition

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

● DTD文件的作用

● 帮助你编写合法的代码

● 它让浏览器正确地显示器代码，或者说DTD只是写给检查器看的

HTML与W3C（World Wide Web:www）

HTML规范是由w3c负责制定的，W3C是世界万维网联盟（World Wide Web:www）

安装浏览器

FireFox、Google、IE

HTML元素

HTML标签

<>表示开始标记

</>表示结束标记

<html>开始标签

</html>结束标签

html为元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

● HTML 元素以开始标签起始

● HTML 元素以结束标签终止

● 元素的内容是开始标签与结束标签之间的内容

● 某些 HTML 元素具有空内容（empty content）

● 空元素在开始标签中进行关闭（以开始标签的结束而结束）

● 大多数 HTML 元素可拥有属性

嵌套 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

上面的例子包含三个 HTML 元素。

HTML 实例解释

● <p> 元素：

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：This is my first paragraph。

● <body> 元素：

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注释：未来的 HTML 版本不允许省略结束标签。

空元素

有一些元素必须使用单个标签表示。这些被称为空元素。

一个这样的元素是 hr 。

hr 是一个分组元素，用于表示一个段落级别的内容。

您可以使用以下两种方式之一使用void元素 - 第一种方法是仅指定开始标记，如以下代码所示。

浏览器知道hr是一个void元素，因此不希望看到结束标记。

您可以使元素与空元素一致，如下面的代码所示。

HTML注释

注释是关于HTML元素的有用信息。注释使HTML文档更易读和可理解。

HTML中的注释以标签<！-- 开头，并以 --> 结尾。

浏览器将忽略您在这些标记中放置的任何内容。

以下代码具有HTML注释。

HTML标签

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。

HTML标签的大小写无关的，例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。

实例

标签定义及使用说明

<html> 标签告知浏览器这是一个 HTML 文档。

<html> 标签是 HTML 文档中最外层的元素。

<html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

浏览器支持

所有浏览器都支持 <html> 标签。

段落标签：<p></p>

定义：可以把 HTML 文档分割为若干段落

标题字：<h1></h1>至<h6></h6>

标题是通过 <h1> - <h6> 等标签进行定义的

<h1>定义最大标签，<h6>定义最小标签

换行：<br>

定义：<br> 可插入一个简单的换行符

<br> 标签是空标签，它没有结束标签

注释：

水平线：<hr/>

预留格式<pre>内容</pre>

定义：页面中输入什么样式就显示什么样式

实例：< >

搭配视频效果更佳~~

https://www.ixigua.com/690746767030039398

、前提简介

1.1什么是JavaScript

JavaScript是一种动态的计算机编程语言。它是轻量级的，最常用作网页的一部分，其实现允许客户端脚本与用户交互并创建动态页面。它是一种具有面向对象功能的解释型编程语言。

1.2JavaScript和Java语言的区别

Javascript和Java没有任何关系，它们是不同的两种语言(java是一种程序设计语言，javascript 是客户端的脚本语言)，只是名字上都有一个Java而已。

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程，还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

1.3Html、Css和Javascript

这三个要素共同构成了Web开发的基础。

HTML：页面的结构-标题，正文，要包含的任何图像
CSS：控制该页面的外观（这将用于自定义字体，背景颜色等）
JavaScript：不可思议的第三个元素。创建结构（HTML）和美学氛围（CSS）后，JavaScript使您的网站或项目充满活力。

1.4Javascript作用

表单数据验证：表单数据验证是JavaScript最基本也是最能体现效率的功能。
动态HTML（即DHTML）：动态HTML指不需要服务器介入而动态变化的网页效果，包括动态内容、动态样式、动态布局等。比如改变盒子的尺寸，背景颜色，图片等。
用户交互：用户交互指根据用户的不同操作进行的响应处理。例如：联动菜单等。
数据绑定：HTML中表单和表格能够以.txt文件定义的数据源，通过对位于服务器端的数据源文件的访问，便可以将数据源中的数据传送到客户端，并将这些数据保存在客户端。
少量数据查找：能够实现在当前网页中进行字符串的查找和替换。
AJAX核心技术：AJAX即异步JavaScript+XML。该对象提供一种支持异步请求的技术，使客户端可以使用JavaScript向服务器提出请求并处理响应，但并不影响用户在客户端的浏览。
Nodejs就是使用的javascript做后端，是目前为止唯一的一个既能做前端、又能做后端的语言。

(上面这个作用是直接用的我的老师的课件，我可没这么6懂这么多。他一个10多年开发经验的资深程序员哈哈哈哈哈哈，有点想帮忙宣传一下他的网课，但想想还是算了吧，感觉打广告有点不好)

*********************************************一条华丽的分割线***************************************************

二、实操代码

2.1Javascript写在本html内

1. js程序必须写在script标签中。
2. script:可以写在网页中的任何位置。
3. type=“text/javascript”：表示当前的语言是javascript语言。这个属性是可以省略的。

举例：上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			alert("出错啦")
		</script>
	</body>
</html>

拿代码去运行一下就知道了

2.2Javascript可以写在单独的文件中（外联方式）

创建一个js文件，在js文件中编写js代码。(外部文件中编写js代码就直接写代码就可以了，不用再添加script标签)

比如说在js目录下面创建一个 test.js文件里面的代码为alert(“出错啦！”)

举例上代码

a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script src="js/test.js" type="text/javascript" charset="UTF-8">
			
		</script>
		
	</body>
</html>

拿代码去运行一下就知道了

2.3实战：点击一个盒子，让另外一个盒子变色

举例上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
		
		<script type="text/javascript">
			//目标：点击box1时，让box2变颜色
			var b1 = document.getElementById("box1")
			b1.onclick=function(){
				// 当点击b1的时候，执行此处的代码
				document.getElementById("box2").style.backgroundColor="pink"
			}
		</script>
	</body>
</html>

运行效果拿去试试就知道了，点一下第一个小盒子

2.4实战：一个按钮绑定一个事件

在js中，使用关键字function可以定义一个函数，函数里面的代码不会自动执行，只有函数被调用后，函数里面的代码才会执行。
可以给网页中的任何html容器标签绑定点击事件。οnclick=“add();” onclick表示点击的时候执行。
js中有两个函数parseInt 将字符串转为数字。 parseFloat():将字符串专为浮点类型。

举例上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<input type="text" name="tb1" id="tb1" value="" />+<input type="text" name="tb2" id="tb2" value="" /> =<input type="text" name="tb3" id="tb3" value="" />
	<input type="button" id="btnjisuan" value="计算" onclick="add();" />
	
	<a href="javascript：void(0);"  onclick="bb();">腾讯</a>
	
	
	<script type="text/javascript">
		
		function add()
		{
			
			var v1=document.getElementById("tb1").value;
			var v2=document.getElementById("tb2").value;
			var v3=parseInt(v1) + parseInt(v2);
			document.getElementById("tb3").value=v3;
		}
		
		function bb()
		{
			location.href="http://www.qq.com"; //通过js代码实现页面的跳转 
			
		}
	</script>
	</body>
</html>

拿去运行一个就知道了哈哈哈哈，这个学会了，下面那个就容易多啦！
*********************************************一条华丽的哈哈哈哈哈哈哈哈***************************************************

2.4实战：变换皮肤

实现效果：点击什么颜色代表的小框框，就会弹出穿啥衣服的 fairy

（哈哈哈哈本人敲爱看这些美丽的事物哈哈哈哈）

自己可以下载一些图片或者颜色渐变图片用来做背景，放在img里面，可自己命名。基本格式如下图：

上代码：

网页换肤.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/css2.css" id="btnlink"/>
	</head>
	<body>
		
		<div id="box1">
			<span id="s1" onclick="a1();">志玲</span><span id="s2" onclick="a2();">依林</span><span id="s3" onclick="a3();">昆凌</span>
			
			
		</div>
		
		<script type="text/javascript">
			function a1()
			{
				document.getElementById("btnlink").href="css/css1.css";
			}
			
			function a2()
			{
				document.getElementById("btnlink").href="css/css2.css";
			}
			
			function a3()
			{
				document.getElementById("btnlink").href="css/css3.css";
			}
			
			
			
		</script>
		
	</body>
</html>

css1.css

*{
	margin: 0;
	padding: 0;
}


html,body{
	width:100%;
	height: 100%;
}

body{
	background-image: url(../img/blue.jpg);
	background-repeat: repeat-x;  /* 设置不重复平铺 */
}

#box1{
	width: 186px;
	height: 60px;
	background-color: white;
	margin: 0 auto;
	position: relative;
}
#s1{
	width: 60px;
	height: 60px;
	background-color: blue;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;  /* 子绝父相 */
	left: 0;
	top: 0;
}
#s2{
	width: 60px;
	height: 60px;
	background-color:green;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	left: 62px;
	top: 0;
}
#s3{
	width: 60px;
	height: 60px;
	background-color: pink;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}

css2.css

*{
	margin: 0;
	padding: 0;
}


html,body{
	width:100%;
	height: 100%;
}

body{
	background-image: url(../img/green.jpg)
}

#box1{
	width: 186px;
	height: 60px;
	background-color: white;
	margin: 0 auto;
	position: relative;
}
#s1{
	width: 60px;
	height: 60px;
	background-color: blue;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;  /* 子绝父相 */
	left: 0;
	top: 0;
}
#s2{
	width: 60px;
	height: 60px;
	background-color:green;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	left: 62px;
	top: 0;
}
#s3{
	width: 60px;
	height: 60px;
	background-color: pink;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}

css3.css

*{
	margin: 0;
	padding: 0;
}


html,body{
	width:100%;
	height: 100%;
}

body{
	background-image: url(../img/pink.jpg)
}

#box1{
	width: 186px;
	height: 60px;
	background-color: white;
	margin: 0 auto;
	position: relative;
}
#s1{
	width: 60px;
	height: 60px;
	background-color: blue;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;  /* 子绝父相 */
	left: 0;
	top: 0;
}
#s2{
	width: 60px;
	height: 60px;
	background-color:green;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	left: 62px;
	top: 0;
}
#s3{
	width: 60px;
	height: 60px;
	background-color: pink;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}

一些很基础的东西，要是写起来那就太多了，很多不常用的，到了我们需要它的时候谷歌和百度就行了。
由于时间关系，暂时更到这里。

原文链接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/109188646

作者：我一个超级无敌可爱的人鸭

出处：CSDN

在线咨询

上一篇：如何将doc文档生成html页面
下一篇：HTML5新特性

您的项目需求

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

整合营销服务商

实现快捷生成HTML代码

ublime / vscode 快捷生成HTML代码的实现

文章目录

1、基本html结构

操作： 输入 !+Enter键

实现效果：

2、生成div加类名的快捷键

操作： 输入 div.list>div.item_$*6

实现效果：

3、带类名的div

操作： 输入 div.wrapper

实现效果：

4、带id的div

操作： div#wrapper

实现效果：

5、属性 []

操作： span[title=“test”]

实现效果：

6、后代 >

操作： 输入div>span>a

实现效果：

7、兄弟 +

操作： div+p+span

实现效果：

8、上级 ^

操作： div>span^i

实现效果：

9、乘法 *

操作： ul>li*2

实现效果：

10、文本 {}

操作： div>span{这是文本}

实现效果：

HTML从哪入手？

HTML语言特点

什么时候用HTML

为什么要学HTML

怎么开发HTML

怎么运行HTML

DTD：Document Type Definition

HTML与W3C（World Wide Web:www）

安装浏览器

HTML元素

HTML标签

HTML 元素语法

嵌套 HTML 元素

HTML 文档实例

HTML 实例解释

<html> 元素：

不要忘记结束标签

空元素

HTML注释

HTML标签

标签定义及使用说明

浏览器支持

、前提简介

1.1什么是JavaScript

1.2JavaScript和Java语言的区别

1.3Html、Css和Javascript

1.4Javascript作用

二、实操代码

2.1Javascript写在本html内

2.2Javascript可以写在单独的文件中（外联方式）

2.3实战：点击一个盒子，让另外一个盒子变色

2.4实战：一个按钮绑定一个事件

2.4实战：变换皮肤

您的项目需求

操作：输入 !+Enter键

操作：输入 div.list>div.item_$*6

操作：输入 div.wrapper

操作：输入div>span>a