HTML小白也能懂-1
HTML简介
什么是HTML?
HTML指超文本标记语言（Hyper Text Markup Language），它不是一种编程语言而是一种标记语言。
超文本：采用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言：用标签标注网页内容，浏览器在运行网页时就可以根据标注显示相应的格式。
HTML能做什么？
制作网页。
html基础
基本的HTML标签-四个实例
HTML标题
HTML标题是通过<h1> - <h6>等标签进行定义的
实例
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h6>这是6级标题</h6>
运行结果
HTML段落
HTML段落是通过<p>标签进行定义的，在同一组<p>标签里的内容可称为一个段落，与下一个段落会有较大行间距。
实例
<p>这是一个段落</p>
<p>这是另一段</p>
运行结果
HTML链接
HTML链接是通过<a>标签进行定义的,通过点击超链接的名字就可以直接跳转到对应的网页。
实例
<a href="http://www.baidu.com">百度</a>
运行结果
HTML图像
HTML图像是通过标签进行定义的。
实例
<img src="img/Female.gif" />
<img src="img/Female.gif" width="75" height="75" />
运行结果：
注意：插入的图片必须和所建的文件在同一个项目中才可以运行成功。
图像的名称和尺寸是以属性的形式提供的。
HTML元素
HTML文档是由HTML元素定义的。
HTML元素是指从开始标签到结束标签的所有代码。
HTML属性
属性为HTML元素提供附加信息。
实例1：
<a href="http://www.baidu.com">百度</a>
HTML链接由<a>标签定义。链接的地址在href属性中指定。
实例2：
<h1 align="center">一级标题居中对齐</h1>
<!-- 拥有对齐方式的附加信息 -->
运行结果：
实例3：
<body bgcolor="bisque">
<!-- 拥有背景颜色的附加信息 -->
</body>
运行结果：
实例4：
<table border="1">
</table>
<!-- 用有表格表框的附加信息 -->
HTML标题
标题标签不仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为网页的结构和网页内容编制索引。
因为用户可以通过标题标签来快速浏览网页，所以用标题来呈现文档结构是很重要的。
程序实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <h1>到<h6>代表标题标签,一共六级 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<!--
标题标签可直接占一行
align="center" 文本居中对齐
align="right" 文本向右对齐
align="left"文本向左对齐（默认）
-->
<h1 align="center">一级标题居中对齐</h1>
<!-- 注释用"Ctrl+/"表示，插入注释可提高代码的可读性，使人更容易理解-->
</body>
</html>
运行结果：
HTML段落
程序实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 段落标签,在<p>标签内的话即可称为一个段落,下一段落会有较大行间距 -->
<p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
<p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
<!-- 换行标签<br/> -->
<p>这是一段话这是一行字符这是一段话<br/>这是一行字符这是一段话这是一行字符</p>
<!-- 空格标签  -->
这是一段话这是一行字符 这是一段话这是一行字符
<!-- 大于号>,小于号< -->
<b >是一个加粗符号
<!-- 注册商标 -->
®
<!-- 版权 -->
©
<!-- 空格 -->
</body>
</html>
运行结果：
HTML列表：
列表可以分为有序列表和无序列表两大类。
程序实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--有序列表前的标注默认类型是阿拉伯数字-->
<ol>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
<!--有序列表前的标注默认类型也可使用大小写英文字母或者是大小写罗马数字，如下以大写字母为例。
-->
<ol type="A">
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
<!--无序列表前的标注默认类型是实心原点-->
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
<!--无序列表前的标注也可使用空心原点或者是方形，如下以空心原点为例。-->
<ul type="circle">
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
</body>
</html>
运行结果：
HTML超链接
链接HTML代码很简单，他类似这样：
<a href="ur1">Link text</a>
href属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例：
<a href="http://www.baidu.com">百度</a>
上面这行代码显示为：百度
HTML链接-target属性
使用target属性我们可以定义被链接的文档在何处显示。
下面这行代码会在新窗口打开文档，若没有特殊说明则默认为target=_self在本页面中打开.
<a href="http://www.baidu.com" target="blank">百度</a>
注意：“链接文本”不必一定是文本。图片或者其他HTML元素都可以成为超链接。
程序实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- target=""默认为从当前网页打开即和target="_self"效果一
样,若想新建网页打开可用target="_blank" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="baidu.html" target="_blank">自建百度</a>
<a href="http://www.qq.com">
<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
<img src="img/qq.ico" width="100" height="100"
alt="正在努力加载"
title="本产品由腾讯公司开发"
/>
</a>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 当没有互联网时可以在本项目中新建一个html文件也可练习超链接操作，
如下方的自建百度 -->
<!-- target=""默认为从当前网页打开即和target="_self"效果一
样,若想新建网页打开可用target="_blank" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="baidu.html" target="_blank">自建百度</a>
<a href="http://www.qq.com">
<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
<img src="img/qq.ico" width="100" height="100"
alt="正在努力加载"
title="本产品由腾讯公司开发"
/>
</a>
</body>
</html>
</html>
运行结果：
超链接定义锚点
程序实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--
超链接定义锚点
超链接找锚点
<a href="#锚点名称">链接名称</a>
定义锚点
<a name="名称">aaa</a>
-->
<body>
<h3> <a name="top"></a></h3>
<a href="#p1">产品1</a>
<a href="#p2">产品2</a>
<a href="#p3">产品3</a>
<a href="#p4">产品4</a>
<a href="#p5">产品5</a>
<hr >
<h3> <a name="p1">产品1</a></h3>
<img src="img/nike/1.png" />
<h3> <a name="p2">产品2</a></h3>
<img src="img/nike/2.png" />
<h3> <a name="p3">产品3</a></h3>
<img src="img/nike/3.png" />
<h3> <a name="p4">产品4</a></h3>
<img src="img/nike/4.png" />
<h3> <a name="p1">产品5</a></h3>
<img src="img/nike/5.png" />
<!-- 设置“返回顶部”的锚点点击可以迅速返回最顶部 -->
<h3 align="right"><a href="#top">返回顶部</a></h3>
</body>
</html>