本文详细介绍了HTML的基本结构，包括doctype、html、head和body的使用。讲解了特殊符号、可视化标签如div、span、p、a、img、ul、li、table的用法，并强调了css在样式修改中的作用。通过实例展示了如何创建和链接超链接、设置图片大小、创建表格等，帮助初学者掌握HTML基础知识。
html叫做超本文标记语言，注意它只是标记语言，不是编程语言。
编写规范：
-
由标记（html, div, p, h1等）组成
-
标记成对出现（…），也有例外，比如
、
-
标记有层级关系
<html>
<head>
</head>
<body>
</body><html>
- 标记有内容文本或属性
<title>这是一个标签</title><meta name="" content=""></meta>
注意：
-
html不区分大小写
-
建议大家用双引号
当然单引号也可以，但是双引号才是professional的表现
html基本结构
<!DOCTYPE html><html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> </head> <body> </body></html>
-
doctype：必须这样写
-
html：其实不写也可以，为了规范，还是写上吧
-
head：用来设置网页的信息，比如标题、小图标等
-
body：网页内容（可视化标签）
特殊符号
- 空格： 【分号是必须写的】
注意，空格这里写一个 表示添加了一个空格，写多个也只会有一个空格
好，现在我们新建一个名为index.html的文件，你可以在桌面建一个txt文件，然后修改扩展名为HTML，然后打开方式选择sublime，或者其他编辑器。船长这里是建了一个flask项目，然后在templates文件夹下新建了一个。这里提醒大家的是，以后大家能用英文的地方尽量用英文，比如文件夹名、文件名等，不然会有各种问题等着你。
用pycharm这种IDE的话发现它会帮你写好模板，这里建议大家清空然后自己写一遍加深印象：
<!DOCTYPE html><html>
<head>
<title>第一节课</title>
<meta charset="UTF-8"/>
</head>
<body>
Hello World! </body></html>
写了Hello World!你就开始了HTML学习啦~
先和大家说一下什么是可视化标签，一句话：可以在<body>中看到的标签就是可视化标签，比如<p>、<body>、<div>等这些都是可以看到的，所以是可视化标签；而<style>、<meta>等在<body>中不能看到的标签，就是非可视化标签。注意：只有可视化标签，才能用css改变它的样式。
常用的可视化标签
这里只说几个有代表性的，其实所有标签都差不多，就像钢笔和铅笔一样，都是写字用的，只是作用不一样。
- div
<!DOCTYPE html>
<html>
<head>
<title>第一节课</title>
<meta charset="UTF-8"/>
<style>
div{
border:1px solid green;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div>This is a div</div>
<span>This is a span</span>
</body>
</html>
上面代码页面没讲的内容大家不要急，后面会讲。显示：
最低0.47元/天 解锁文章
2315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
