- HTML全称：Hyper Text Markup Language超文本标记语言
不是编程语言
HTML使用标记标签来描述网页
2. HTML标签
开始标签，结束标签。
例如：<html> </html>
3. HTML页面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8’>
<title>aaaa<title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
例子解释
-
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
- 自闭合标签和闭合标签 meta就是自闭合标签 大多数都是闭合标签
- 常用标签
4. head标签
里面重要的标签meta和title
meta标签：
<meta charset="UTF-8"> 标识字符集 <meta name="Keywords" content="汽车之家"> 网站的关键字 <meta name="descrtion" content="哈哈好"> 网站的描述信息
<meta http-equiv="Refresh" content="10,http://www.baidu.com"> 10秒后跳转到百度 <link rel="icon" href="//www.jd.com/favicon.ico"> 获得京东的小图标
title标签：
<title>JD</title>
5. body标签
标签分类： 块级标签和内联标签
区别：块级标签可以独占一行，可以设置长宽高。
内联标签不能独占一行，不可以设置长宽高。
注意：块级标签只能嵌套块级标签和内联标签 p标签只能嵌套内联标签(特殊)
内联标签只能嵌套内联标签
块级标签:h1 h2 h3 h4 h5 h6 p div
内联标签b span a img
6. 具体标签
标题 总共就6个
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
段落 <p> </p> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
链接
<a href="http://www.w3school.com.cn">This is a link</a>
<a href="http://www.sohu.com" target="_blank">点击</a> 打开一个新的窗口
图像
<img src="w3school.jpg" width="104" height="142" />
空元素(换行)
<br> 旧版本使用这个。
<br /> 以后都是使用这个。
水平线
<hr />在HTML页面中创建水平线。
b标签 加粗
注释
<!—- 与 -->
div标签 常用的标签
span标签
7. HTML属性
属性总是出现在HTML元素的开始标签中。
<a href="http://www.w3school.com.cn">This is a link</a>
链接的地址在href属性中指定。
标题的属性。
<h1 align="center"> 拥有关于对齐方式的附加信息。
主体的属性
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
注：属性值永远都在引号内。双引号是最常用的。有时候也用单引号。name='Bill "HelloWorld" Gates'
8. HTML的style属性
应该避免使用下面这些标签和属性：
|
标签 |
描述 |
|
<center> |
定义居中的内容。 |
|
<font> 和 <basefont> |
定义 HTML 字体。 |
|
<s> 和 <strike> |
定义删除线文本 |
|
<u> |
定义下划线文本 |
|
属性 |
描述 |
|
align |
定义文本的对齐方式 |
|
bgcolor |
定义背景颜色 |
|
color |
定义文本颜色 |
以上标签和属性都不会再使用。现在都使用style属性了。
例子一，如下：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
定义主体的背景色为黄色
定义标题2的背景为红色
定义段落的背景为绿色
这个替换bgcolor属性。
例子二，如下：
<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
例子三，如下：
<html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
- HTML文本格式化
文本格式化标签
|
标签 |
描述 |
|
定义粗体文本。 |
|
|
定义大号字。 |
|
|
定义着重文字。 |
|
|
定义斜体字。 |
|
|
定义小号字。 |
|
|
定义加重语气。 |
|
|
定义下标字。 |
|
|
定义上标字。 |
|
|
定义插入字。 |
|
|
定义删除字。 |
|
|
不赞成使用。使用 <del> 代替。 |
|
|
不赞成使用。使用 <del> 代替。 |
|
|
不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
|
标签 |
描述 |
|
定义计算机代码。 |
|
|
定义键盘码。 |
|
|
定义计算机代码样本。 |
|
|
定义打字机代码。 |
|
|
定义变量。 |
|
|
定义预格式文本。 |
|
|
<listing> |
不赞成使用。使用 <pre> 代替。 |
|
<plaintext> |
不赞成使用。使用 <pre> 代替。 |
|
<xmp> |
不赞成使用。使用 <pre> 代替。 |
引用、引用和术语定义
|
标签 |
描述 |
|
定义缩写。 |
|
|
定义首字母缩写。 |
|
|
定义地址。 |
|
|
定义文字方向。 |
|
|
定义长的引用。 |
|
|
定义短的引用语。 |
|
|
定义引用、引证。 |
|
|
定义一个定义项目。 |
- HTML的CSS
l 外部样式:需要引入外部的css文件,使用link标签
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head>
l 内部样式 在头部定义css，使用style标签。
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
l 内联样式 直接在标签的开始处定义
使用style属性，如下：
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
- HTML的链接
超链接可以是一个字，一个词，或者一组词，也可以是一副图像，您可以点击这些内容跳转到新的文档或者当前文档中的某个部门。
l <a>标签用来创建链接。
使用href：指向另一个文档的链接。
使用name：指向文档内的链接。
<a href=”url”>Link text</a>
url可以为新的文档，也可以是本机文档。
例子：
<a href="http://www.w3school.com.cn/">Visit W3School</a>
l target属性
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
设定打开一个新的窗口。
l name属性
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
l 发送邮件链接
<html>
<body>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
- HTML的图像
l 使用<img>标签定义。
语法: <img src=”url” />
url可以是本机，也可以是其他文档的图片。
例子：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
l 替换文本属性
<img src="boat.gif" alt="Big Boat">
例子：
<img src="boat.gif" alt=”wang”>
- HTML的表格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table>标签定义表格，border定义边框
<tr>定义行
<td>定义在这一行的单元格
- HTML的头部元素
l <title>
例子：
<title>Title of the document</title>
l <base>
指定页面上的所有链接都指向指定地址。
例子：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
l <link>
连接外部样式
l <style>
与上面的内部样式一样。
l <meta>
此标签必须在<head>内部。
必须的属性content.
可选的属性http-equiv,name,scheme.
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
- HTML的脚本
- HTML的列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>