一、基本语法
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.空格必须在英文状态下输入  
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.特殊符号:
属性 | 显示结果 | 描述 |
---|---|---|
<; | < | 小于号或者显示标记 |
> ; | > | 大于号或者显示标记 |
®; | ® | 已注册 |
©; | © | 版权 |
&trade ; | ™ | 商标 |
 ; | 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 >