1、html的特点

1、html不需要编译，直接可以又浏览器去运行。

2、html文件是一个文本文件

3、html文件必须使用html或者htm为文件后缀

4、html对大小写不敏感

2、HTML的基本结构

<html>
<head>
    <title>标题</title>
</head>
<bady>
    <p>hello world</p>
</body>
</html>

1、上面就是一个很基础的html的基本结构，head标签是显示头部信息，在网页中是不会显示出来的，body标签是用来显示网页主体内容。标签一般都是成对出现的，当然比如说<hr/>表示水平线，它是单个出现的。

2、对于每个标签呢，有很多属性，可以将这些属性设置在标签里面，比如说：背景颜色bgcolor，布局方式align等等，重要的不是你能记住多少属性，而是要理解，对于一个标签有哪些可以改变的东西。属性参考可以去查阅下面这个网址中的内容：点击即可进入。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

<html>
<head>
	<title>标题</title>
</head>
<body bgcolor="red">
	<p>hello world</p>
	<hr align="center" color="black" size=30 width=500/><!-- hr是水平线-->
</body>
</html>

3、文档声明和meta标签

1、<！DOCTYPE>声明必须放在HTML文档的第一行，<! DOCTYPE>声明不是HTML标签。

2、当网页出现乱码时，我们是缺少对网页编码的设置。问题解决，在<head>和</head>里面添加一行编码设置的代码：

<meta http-equiv="Content-Type" content="text/html;charse=utf-8">

前面的http-equiv是说文档类型，后面的content是说内容是html的文件，编码形式是utf-8；其中utf-8和gb2312都是支持简体中文，具体什么编码形式要根据网站的建设要求来写。

4、文字和段落

1、首先<h1>-<h6>是标题标签，是段落标签，align对齐属性有left，right，center，justify（对行进行伸展，这样每行都有相等的长度），换行标签 。

扫描二维码关注公众号，回复： 3058188 查看本文章

2、我们需要在段落的前面输入空格，但是我们手动输入空格是不起作用的，使用   来代表空格，注意后面还有一个分号。

5、修饰标签和特殊符号

1、水平线的标签是<hr/>,那么这个标签的属性我们可以去前面说的网址去查找。

2、修饰标签：文字斜体：

加粗： <stong></stong>

下标：

上标：

下划线：<ins>

删除线：<del>

3、我们可以写一些完整的代码在这里，可以直接拿到网页上去看看这些效果

<!DOCTYPE html>
<html>
<head>
	<title>标题</title>
	<meta http-equiv="Content" content="text/html;charse=utf-8">
</head>
<body bgcolor="red">
	<p>CSDN是最大<i>的博客平台</i>,我经常在上面<em>去写博客</em></p>
	<p> 创立于<b>1999年</b>，是中国的IT社区和服务平台，为中国的<stong>软件开发者<stong>和IT从业者提供知识传播</p>
	<p>职业发展<sub>111</sub>、软件开发<sup>222</sup>等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职</p>
        <p><ins>业发展社交圈</ins>、通过软件开发实现技术商业化等刚性需求。<del>拥有超过3000万注册会员<del></p>
	
</body>
</html>

4、还有一些特殊符号，像空格就是特殊符号，需要用特殊的字符串去代替，还有一些，我们列举如下：

6、无序列表

1、无序列表是列表的每一项前面都有一个小圆点，或者是方块，或者是空心圆，这个取决于type属性的值。

<!DOCTYPE html>
<html>
<head>
	<title>标题</title>
	<meta http-equiv="Content" content="text/html;charse=utf-8">
</head>
<body bgcolor="red">
	<ul type="disc">  <!--  默认是小黑圆点-->
    		<li>列表的一项</li>
    		<li>列表的一项</li>
	</ul>
	<ul type="circle">  <!--  是空心圆-->
    		<li>列表的一项</li>
    		<li>列表的一项</li>
	</ul>
	<ul type="square">   <!--  小黑方块-->
    		<li>列表的一项</li>
    		<li>列表的一项</li>
	</ul>
</body>
</html>

7、有序列表

1、有序列表就是列表的每一项前面是使用数字类标注的。数字的类型取决于type的值，1是默认值，就是用阿拉伯数字表示的，a是小写字母来表示，A是大写字母来表示，i是小写罗马数字来表示，I是大写罗马数字来表示。

<ol type="1">  
    <li>列表的一项</li>
    <li>列表的一项</li>
</ol>
<ol type="a"> 
    	<li>列表的一项</li>
    	<li>列表的一项</li>
</ol>
<ol type="i">   
    	<li>列表的一项</li>
    	<li>列表的一项</li>
</ol>

8、定义列表

1、定义列表是列表和列表描述共同组成的。注意的是：<dl>标签里可以又多个<dt> ，<dt>里面也可以又多个<dd>，而且<dt>和<dd>两个标签是同级的。还有就是<dd>标签中的内容会相对于<dt>标签的内容自动缩进。

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
</dl>

9、图片

1、使用<img>标签，<img>标签是单标签，使用反斜杠来闭合。有四个比较重要的属性，分别是src表示图像的来源，alt表示图片的文字，用于图片加载不出来时显示的文字，还有height和width表示宽和高。

2、src有绝对路径和相对路径，绝对路径就是指着图片的路径是从盘符开始写的，比如说下面的这种形式：

<!DOCTYPE html>
<html>
<head>
		<title>hello</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<img src="C:\Users\Administrator\Desktop\QQ截图20180817152425.png" alt="截图">
</body>
</html>

但是特别要注意的一点就是假如html文件中的图片显示出现了乱码，一定是编码格式的问题，我们在html文件中声明了这个文件是utf-8编码，我们最好在记事本中写完代码保存为utf-8的编码形式。这样才可以。

3、相对路径，图片相对于编写的html文件的位置的不同会造成相对路径写法的不同：

（1）图片和文件在同一目录下：<img src="1.jpg">

（2）图片在文件的上一级目录：<img src="../1.jpg">

（3）图片在文件的下一级目录：<img src="文件夹名/1.jpg">

4、<img>标签的宽高属性有两种表现，一种是用像素来写死图片的大小，另外一种就是使用百分比来表示相对于父容器的百分比大小：

<!DOCTYPE html>
<html>
<head>
		<title>hello</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<img src="C:\Users\Administrator\Desktop\QQ截图20180817152425.png" alt="截图" height="50px" width="30px">
	<img src="C:\Users\Administrator\Desktop\QQ截图20180817152425.png" alt="截图" height="50%" width="30%">
</body>
</html>

10、链接

10.1普通链接

1、在网页的链接最显著的特征就是将鼠标放在链接的地方鼠标会变成一个小手。那么来看看链接的语法。

<a href="">内容<a>

其中注意的href可以是内部链接，也可以是外部链接，内部链接指的是项目中其他html的文件，也可以说成同一个站内的其他网页。外部链接就是其他网站的网址。比如说下面的代码所示：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="https://www.imooc.com/">点击跳转到慕课网<a>
	<a href="../muke.html">点击跳转到慕课网<a>
</body>
</html>

2、<a></a>标签的内部可以是其他标签，可以给img，文字等等加链接，点击会跳转。对文字加<a>链接，文字的颜色会变化，还会添加下划线。

3、链接还有下面的属性：

target（链接的目标窗口：_blank（新的窗口打开新的页面） _self（当前窗口打开网址。默认值） _top _parent），

title（链接的提示文字：把鼠标移动到链接的地方会显示的文字），

name（链接的命名）

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>

	<a href="#" title="这个是截图"><!--光标移动到图片上就会显示 “这个是截图” 的提示文字-->
		<img src="C:\Users\Administrator\Desktop\QQ截图20180817152425.png" alt="截图" height="50%" width="30%">
	<a>
	<a href="https://www.imooc.com/" target="_blank">点击跳转到慕课网</a> <!--在新的窗口中打开慕课网的网页-->
</body>
</html>

10.2空链接

1、当我们想要显示链接效果，但是又没有链接地址的情况下，我们可以使用空链接。在href的属性中使用#来代替网址，如下

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="#">
		<img src="C:\Users\Administrator\Desktop\QQ截图20180817152425.png" alt="截图" height="50%" width="30%">
	<a>
	<a href="#">点击跳转到慕课网</a>
</body>
</html>

10.3锚链接（同一页面）

1、锚是来实现在同一个页面实现不同位置的跳转，通常是左边有目录，点击目录页面就能自动滚动到响应的位置。

2、定义锚需要使用到href和name的属性：使用#和锚的名字的结构。

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1">文字，图片都行，也可以没有</a><!--这里的锚定位不一定里面有内容，只是定位的作用-->
    xxxxx
    xxxxxxxxxx
<a href="..." name="锚名2">文字，图片都行，也可以没有</a><!--这里的锚定位不一定里面有内容，只是定位的作用-->
    xxxxx
    xxxxxxxxxx

10.4锚链接（不同页面）

1、在网页1点击锚会跳转到网页2的某个锚点的位置，是这样定义的：

网页1：<a href="网页名称#锚名">...</a>
网页2：<a name="锚名">...</a>

2、现在我们现在展示一下hello.html的代码

<!DOCTYPE html>
<html>
<head>
		<title>hello</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="#mao1" >目录1</a>
	<a href="#mao2" >目录2</a>
	<a href="#mao3" >目录3</a>
	<a href="#mao4" >目录4</a>
	<a  name="mao1"></a>
	<p>目录1</p>
	<p>12312312323</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<a  name="mao2"></a>
	<p>目录2</p>
	<p>12312312323</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<a  name="mao3"></a>
	<p>目录3</p>
	<p>12312312323</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<a  name="mao4"></a>
	<p>目录4</p>
	<p>12312312323</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

再展示一下hello1.html文件代码

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="hello.html#mao1"  target="_blank">目录1</a>
	<a href="hello.html#mao2"  target="_blank">目录2</a>
	<a href="hello.html#mao3"  target="_blank">目录3</a>
	<a href="hello.html#mao4"  target="_blank">目录4</a>
</body>
</html>

很明显我们在运行hello1.html文件在浏览器当中，点击目录3就会跳转到新的网页，就是hello.html的网页，并跳到name为mao3的<a>标签的位置。你可以在网页上试试，这种经常会在某种编程语言的官网上使用到这种例子。

10.5电子邮件标签

1、电子邮件的标签如下定义：

<a href="mailto:邮箱地址">...</a>

10.6文件下载

1、文件下载的定义：这个地址可以是本地项目中的文件，后者是网上的文件下载地址。

<a href="下载文件的地址：">...</a>

前端基础夯实--（HTML系列）HTML基础