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>
上面代码页面没讲的内容大家不要急,后面会讲。显示: