1.HTML基础

一、基本语法

1.HTML（超文本标记语言）

2.HTML特点

1.不需要编译，直接由浏览器执行
2.HTML是一个文本文件
3.HTML文件必须使用html或者htm为文件名后缀
4.HTML大小写不敏感

3.基本结构

<html>   
    <head>     
        <title>标题</title>
    </head>
    <body>
    	网页主体内容
    </body>
</html>

4.标签属性

1.语法：
<标签名 属性名1=‘属性值’ 属性名2=‘属性值’ …> …</标签名>

<body bgcolor='red'>
     hello
</body>

2.注释：
< ! - - hr是水平线 - ->（必须在英文状态下书写）

二、文档段落

1.DOCTYPE文档类型声明

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

2.网页编码设置（网页乱码时）

在 < head > < /head >之间添加：

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

utf-8可以显示中、英、韩、日等文字，gb2312 简单中文，GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312。

3.文章和段落标签

1.标题标签：< h1 >< /h1 > ~ < h6 >< /h6 > 一共有六个
2.段落标签：< p > < /p >
3.align对齐属性值：

<p align="center">
</p>

值	描述
left	左对齐
right	右对齐
center	居中对齐
justify	对行进行伸展，这样每行都有相等长度

4.换行标签：< br/>
5.空格必须在英文状态下输入 &nbsp
6.要保留编辑器下的格式，就用< pre > < /pre >代替< p > < /p >
7.水平线：< hr/ >

属性	描述
width	设置水平线宽度，可以像素或百分比
color	颜色
align	设置水平线居中对齐
noshade	设置水平线无阴影效果

8.修饰标签：

1.文字斜体：< i > < /i >、< em > < /em >
2.加粗：< b > < /b >、< strong > < /strong >
3.下标：< sub > < /sub >
4.上标：< sup > < /sup >
5.下划线：< ins >…
6.删除线：< del >…

9.特殊符号：

属性	显示结果	描述
&lt；	<	小于号或者显示标记
&gt ；	>	大于号或者显示标记
&reg；	®	已注册
&copy；	©	版权
&trade ；	™	商标
&nbsp；	space	不断行的空白

三、列表标签

1.无序列表（小黑点）

1.语法：

<ul>
         <li>列表项</li>
         <li>列表项</li>
         ...
</ul>

2.type属性：

值	描述
disc	圆点
square	正方形
circle	空心圆

<ul type="disc">  </ul>

2.有序列表

1.语法：

<ol>
         <li>列表项</li>
         <li>列表项</li>
         ...
</ol>

2.type属性值：

值	描述
1	数字1、2…
a	小写字母
A	大写字母
i	小写罗马数字
I	大写罗马数字

3.列表标签

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

1.定义标签内可以有多个< dt >
2.对每一个< dt >可以有多个< dd >
3.< dt >和< dd >是同级标签
4.三个标签要一起使用

四、图像和超链接

1.图像标签

1.语法：

< img scr="" alt="" …/>

2.img属性：

属性	值	描述
Scr（必写）	URL	显示图像的UGL
alt	文字	图像替代文本
height	数值和百分比	图像的高
width	数值和百分比	图像的宽

3.绝对路径：

从盘符开始写起，

<img src="E:/html/A/UNINE.jpg"/>

4.相对路径：

1.图片和你所编辑的网页在同一目录下面 < img src=“1.jpg/>
2.图片在上一级目录中 < img src=”…/1.jpg"/>(…就是上一级的文件链)
3.图片在下一级目录中 < img src=“文件夹名/1.jpg”>

5.alt属性

当由于
1.网速太慢
2.src属性的错误
3.浏览器禁用图像时，
用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容

<img src="A/AUNINE.jpg" alt="UNINE"/>

6.图片性质

//像素：不变
<img src="E:/html/A/UNINE.jpg" width="80px" height="50px" />
//百分比：会根据页面大小改变
<img src="A/UNINE.jpg" alt="UNINE" width="20%" height="10%" />

2.超链接标签

1.语法：

< a href=" " >内容< /a>
href:链接地址，可以时内部链接或者外部链接。

2.站内链接：

<a href="888.html">hahaha</a>

3.站外链接：

<a href="https://www.imooc.com/">hahaha</a>

4.空链接：需要链接效果但是无法确定链接目标时

在href属性中用#表示

<a href="#">hahaha</a>

5.属性：

属性	描述
href	链接地址
target	链接的目标窗口_self(原本页面上打开)、_blank(在新的页面上打开)、_top、_parent
title	链接提示文字:光标放在文字上时会出现相应提示文字
name	链接命名

6.定义锚：(同一页面)

1.目录：
< a herf = “#锚名1”> 目录1 < /a >
< a herf = “#锚名2”> 目录2 < /a >
…
< a herf = “…” name=“锚名1”> 内容 < /a >
xxxxxx
< a herf = “…” name=“锚名2”> 内容 < /a >
xxxxxx
点击目录即可跳转到
#文字跳转

<a href="#mooc">mooc</a>
//点击就可以跳转到文字
<a href="https://www.imooc.com/" name="mooc" >haha</a>
//：文字显示haha，点击跳转至mooc网，mooc只是一个连线定位罢了

#图片跳转
直接以图片

<a href="#tupian1">tupian1</a>
//点击就可以跳转到图片
<a name="#tupian1"><img src="E:/html/A/UNINE.jpg"/></a>

7.定义锚：(不同页面)

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

//第一个页面
<a href="888.html#123">
   <img src="E:/html/A/UNINE.jpg"" /></a>
    XXXXXXXX
//第二个页面
<a name="123"><img src="E:/html/1122333.jpg"/>

点击图片，即可跳转到另一个页面的该锚点

8.电子邮件链接：

< a href = “mailto:邮件地址” >…< /a >

9.文件下载：

< a href = “文件下载地址” >…< /a >