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

如:化学方程式
sub是subscript的缩写,在数学公式、化学方程式有广泛应用。
1 2 3 4 5 | <body><center>H<sup>2</sup>SO<sup>4</sup> 化学方程式硫酸分子</center></body> |
结果:

1 | <big>大字号内容</big> |
1 | <small>小字号内容</small> |
1 | <u>下划线内容</u> |
1 | <p>段落文字 |
它没有结束标记</p>,下一个<p>开始意味着上一个段落结束。
相当于windows的“\r\n”和linux的"\n"换行
1 | 文字内容<br>文字内容 |
1 | <nobr>不换行的许多文字</nobr> |
1 | <hr> |
1 | <hr width="宽度"> |
1 | <hr size="高度"> |
布尔值,加上它,不会显示例题形状的水平线。浏览器默认是显示一条立体形状带阴影的水平线。
1 | <hr noshade> |
1 | <hr color="颜色"> |
水平线默认是居中对齐,要想左对齐或右对齐,用align语法,该语法有3种:
center:居中
left:左对齐
right:右对齐
1 | <hr align="对齐方式"> |
以&开头,以;结束。
1 | |
| “ | " |
| & | & |
| < | < |
> | > |
| × | × |
| § | § |
还有更多,参考博客http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html。
原文:http://www.cnblogs.com/daliangtou/p/5169171.html