前言：
此时小伙伴们对“用什么写html”大约比较着重，你们都想要分析一些“用什么写html”的相关知识。那么小编在网络上汇集了一些关于“用什么写html””的相关资讯，希望同学们能喜欢，看官们快快来学习一下吧！HTML表示hyper text mark language, 用于网页格式说明。
用visual studio code写html，新建一个目录，再在这个目录下新建一个文件，扩展名为html.
为了及时显示网页效果，需要给vs code下载一个插件: live server.
html的语法核心，是各种标记文本的格式元，统称为element。
1、开始标签< >和结束标签</ >
每个element有一个特定的名称，写在尖括号(angle bracket)内，表示一个格式的开始，称为开始标签，然后接内容，再以一对尖括号结束，尖括号内的element名称前多了一个反斜杠，称为结束标签。
例如： <b>Hello</b>
这里，<b>表示字体为bold（粗体）格式开始标签，后面的文本按粗体显示，</b>表示粗体格式结束标签。
对于图片的标签，不需要结束标签，如<img src="panda.jpg">
2、一个html文件的基本结构
<!DOCTYPE html> <!--version--><html lang = "en"> <head> <!--head for name in browser Tab--> <title>Your Website Tile in Browser Tab</title> </head> <!--body is a necessary element--> <body> <h1>Heading 1</h1> </body></html>
第一行有关html版本信息。一对<html>标签，内嵌了一对<head>标签和一对<body>标签。
head标签的作用，是给出这个网页再浏览器browser中打开时的TAB标签名，body标签内的为显示在浏览器窗口中的文本、图像、超链接以及它们的描述标签。
绿色行为注释, 格式为 <!-- -->.
huml文件，有许多的格式元素(element), 在书写格式排版上，为了可读性，需要将不同层级的元素，用缩进格式展示，内嵌的元素要缩进。
3、标签的属性attribute
标签的属性，比如一幅图像的路径及名称，<img src="images/panda.jpg">.
标签的属性，总是写在开始标签内。
4、第一节课用到的元素说明
元素后面的汉字，说明元素的用途：
<b> </b> 粗体
<i> </i> 斜体
<a> </a> 网址链接
<nav> </nav> 导航
<ol> </ol> 有序号列表
<ul> </ul> 无序号列表
<p> </p> 段落
<img> </img> 图像
下面是第一节课html文件：
<!DOCTYPE html> <!--version of html, necessary element--><html lang = "en"> <!--beginning tag of html, necessary element --> <!--head is a necessary element --> <head> <!--head for name in browser Tab--> <title>My Website</title> </head> <!--body is a necessary element--> <body> <!--h for heading element. The number for ranks--> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <div> <!--shortcut Alt+Z in Windows for wordWrap--> <!--p for paragraph element--> <p>LearnCpp.com is a free website devoted to teaching you how to program in C++. Whether you’ve had any prior programming experience or not, the tutorials on this site will walk you through all the steps to write, compile, and debug your C++ programs, all with plenty of examples.</p> <p>Becoming an expert won’t happen overnight, but with a little patience, you’ll get there. And LearnCpp.com will show you the way.</p> </div> <!--img for image element. no close tag needed for img element--> <!--src for source file path and name--> <!--width for size of image displayed in horizontal direction--> <!--alt for content about image if image showed failure--> <img src="bill-gates.jpg"width="300px"alt="Bill Gates, founder of Microsoft."> <!--list element: ul for unordered ol, ol for ordered ol with number such as 1 2 3--> <ol> <!--ordered list of items--> <!--li for list item--> <li>blue</li> <li>red</li> <li>green</li> </ol> <ul> <!--unordered list of items--> <li>koala</li> <li>gorilla</li> <li>giraffe</li> </ul> <nav> <!--nav for navigation element--> <!-- a for hyperlink--> <!--blank for open lnk in a new Tab--> <a href="; target="_blank" rel="noopener,noreferrer"> HTML Tutorial First Lesson </a> <a>About</a> </nav> </body></html> <!--end tag of html-->
在vs code的底行状态栏：
点击Go Live, 就可以进入一个网页，展示html文件界面：
标签： #用什么写html #code怎么运行html #viscode怎么运行html
