一、基本概念
1、简介
HTML：网页超文本标记语言，不是编程语言，是描述性的标记语言。
2、基本结构
1
2
3
4
5
6
7
8
<html> 文件开始标记
<head> 文件头开始的标记
……文件头的内容</head> 文件头结束的标记
<body> 文件主体开始的标记
……文件主体的内容</body> 文件主体结束的标记
</html> 文件结束标记
3、标记
<html>：html开头，表示网页文档的开始
<head>：标明文档的头部信息
<body>：指明文档的主体区域
二、编写方法
文档工具，如：记事本
IDE
三、浏览html文件
1、运行效果
如果用pycharm编写，不要直接运行，直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来，比较慢。
2、看源文件
鼠标右键-->查看源文件
HTML基本标记
一、<head>标记
head头部元素包括标题、基础信息和元信息等；
作用范围：整篇文档；
头信息中可以有：<meta>元信息、文档样式表和脚本等；
头部信息一般不会再网页上直接显示。
二、<title>标记
用来说明页面的用途，显示在浏览器的标题栏中。
位置：<head>……</head>之间
三、<meta>元信息
用来定义页面信息的说明、关键字和刷新等，它不用结束标记。属性有name和http-equiv。
1、设置页面关键字
供搜索引擎使用
1
2
3
4
5
6
<html lang="en">
<head>
<meta name="keywords" content="插入关键字" charset="utf-8">
<title>插入关键字</title>
</head>
</html>
2、设置页面说明
详细说明网页的内容
1
<meta name="description" content="设置页面说明" charset="utf-8">
3、定义编辑工具
设置网页编辑工具名称
1
<meta name="generator" content="Pycharm" charset="utf-8">
4、设置作者信息
1
<meta name="author" content="作者姓名" charset="utf-8">
5、设置网页文字及语言
1
<meta http-equiv="content-type" content="text/html; charset=utf-8">
6、设置网页定时跳转
1
<meta http-equiv="refresh" content="跳转的时间; URL=跳转的地址" charset="utf-8">
7、icon
1
2
3
<head>
<link rel="shortcut icon" href="image/favicon.ico">
</head>
8、css文件
9、js文件
四、主体标记<body>
1、背景色 bgcolor
默认颜色是白色或灰白色，bgcolor自定义背景颜色。
1
2
3
<body bgcolor="背景颜色">
……主体内容</body>
2、背景图片 backgroud
1
<body backgroud="背景图片">
3、文字颜色 text
1
<body text="文字的颜色">
4、链接文字属性 link
超链接的颜色默认是蓝色，访问后变成暗红色。可以通过link修改：
1
<body link="链接的颜色" alink="点击后的颜色">
5、边距 margin
设置页面和浏览器边框的距离
1
<body topmargin=上边距的值 leftmargin=左边距的值>
五、注释标记
1
<!-- 注释的内容 -->文字与段落标记
一、标题
1、h标记
<h1>~<h6>，级别从最高到最低。
1
2
3
4
5
6
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
……</body>
2、对齐方式 align
默认是左对齐，如更改，用align属性。
left：左对齐
center：居中
right：右对齐
1
<h1 align="center">一级标题居中对齐</h1>
二、文本基本标记
<font>标记用来控制字体、字号和颜色等属性。
1、字体属性 face
1
2
3
<body>
<p><font face ="字体样式">……</font></p>
</body>