第01章前端核心技术-HTML基础
学习目标
了解什么是HTML
掌握HTML标签、元素的概念 重点
掌握HTML常用头部元素的使用 重点
掌握HTML标题、段落、文本、图片等排版 重点 难点
掌握HTML超链接的使用 重点
HTML 是什么
HTML就是**超文本标记语言**（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言，主要功能就是控制网页显示的内容，而不关注内容样式的展示，样式的展示效果有css技术来实现
HTML 特点：
HTML 不是一种编程语言，而是一种简单的标记语言
HTML的文档也叫做 web页面（网页）
HTML文档只是一种简单的ASCII码[文本]，通过浏览器直接解释执行
一个网页的默认文件名是index.html，也就是说如果一个页面名叫index.html就可以在访问这个页面的时候忽略不写，如：
http://127.0.0.1:8888/demo/index.html -> http://127.0.0.1:8888/demo/
案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>超文本标记语言</h1>
<p>欢迎来到HTML的世界</p>
</body>
</html>
效果展示
案例解析
<!DOCTYPE html> 声明为 HTML第5版本的文档
<html> 元素是 HTML 页面的根元素，所以内容都应该写在其内部
<head> 元素包含了文档的元（meta）数据，用来设置页面参数
<title> 元素设置整个页面的在浏览器中的标题
<body> 元素包含整个页面的可见区域显示的内容
<h1> 元素显示一个一级标题
<p> 元素显示普通文字的段落
HTML 网页结构
下面是一个可视化的HTML页面结构：
说明
<head> 元素包含了文档的元（meta）数据，用来设置页面参数
<body> 元素包含整个页面的可见区域显示的内容
注意：只有 <body> 区域 (白色部分) 才会在浏览器中显示
HTML 标签（标记）
HTML**标记**通常被称为HTML**标签** (HTML tag)。把由<>括起来的部分统称为**标签**
HTML 标签通常是**成对出现**的，比如<p> 和</p>标签对中的第一个标签是**开始标签**（开放标签），第二个标签是**结束标签**（闭合标签）
也有特殊的标签，只有开头没有结尾，在开头后面加上/表示结尾，这种表签叫做**单标签**或者**空标签**，如：<br>
标签格式
<标签>内容</标签>
HTML 元素
由**开始标签**和**标签中的内容**和**結束标签**共同组成的**整体**，叫做一个元素。
如：
<body>
<h1>超文本标记语言</h1>
<p>欢迎来到HTML的世界</p>
</body>
HTML 属性
把写在**开始标签**中**键值对（名称/值对）**称之为属性。
HTML 元素可以设置属性，就像长方形的长宽属性一样。属性必须写在**开始标签**中，比如：<p align="center">段落</p>，属性总是以**名称/值**对的形式出现，比如：name="value"。
HTML属性作用
给元素中添加附加信息（仅仅添加数据）
控制元素显示的风格（改变元素默认显示样式）
案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<h1 align="center">居中对齐</h1>
<p align="left">左对齐默认</p>
<p align="center">居中对齐</p>
<p align="right">右对齐</p>
</body>
</html>
效果展示
HTML 标题
页面中文本标题（Heading）是通过 <h1> - <h6>标签进行定义的，从大到小:<h1> - <h6>。
标签描述案例<h1>一级标题<h1>标题H1</h1><h2>二级标题<h2>标题H2</h2><h3>三级标题<h3>标题H3</h3><h4>四级标题<h4>标题H4</h4><h5>五级标题<h5>标题H5</h5><h6>六级标题<h6>标题H6</h6>
案例03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档标题</title>
</head>
<body>
<h1>标题H1</h1>
<h2>标题H2</h2>
<h3>标题H3</h3>
<h4>标题H4</h4>
<h5>标题H5</h5>
<h6>标题H6</h6>
</body>
</html>
效果展示
HTML 段落&换行
HTML中文字一般都是写在标签里面的，普通文字用的标签就是段落P标签。
在HTML中空格和换行标记都会被自动忽略，不会显示，因此需要使用换行标签<br>来手动换行。
标签描述案例<p>普通文字标签（段落标签）<p>这是一个段落</p><br>换行<br/>
案例04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<p>这是一个段落，从第一行开始</p>
<p>这是第二个段落，会自动换行，另起一行开始</p>
<br/>
<p>这是第三个段落，在这之前使用了br标签来换行，所以间隔变大</p>
<p>这是第四个段落，一个br标签只能换一行，换几行需要几个br标签</p>
</body>
</html>
效果展示
HTML 头部
页面标题元素
<title>标签定义了不同文档的标题。
案例05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>当前网页在浏览器的标签页中的标题</title>
</head>
<body>
<h1>超文本标记语言</h1>
<p>欢迎来到HTML的世界</p>
</body>
</html>
效果：
网页参数设置元素
meta标签描述了一些基本的元数据。
<meta>标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
<meta> 元素通常用于指定网页的描述，关键词，文件的修改时间，作者，和其他元数据。
<meta>可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
案例06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档标题</title>
<!--为搜索引擎定义关键词-->
<meta name="keywords" content="HTML超文本标记语言">
<!--为网页定义描述内容-->
<meta name="description" content="前端必备的基础技能">
<!--定义网页作者-->
<meta name="author" content="star">
<!--每5秒钟刷新当前页面-->
<meta http-equiv="refresh" content="5">
<!--每5秒钟后自动给跳转-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
</head>
<body>
<h1>超文本标记语言</h1>
<p>欢迎来到HTML的世界</p>
</body>
</html>
效果：
HTML 水平分割线
实现水平分割线使用<hr>标签，**<hr>标签属性**如下：
属性值描述alignleft|center|right规定hr元素的对齐方式color颜色单词规定hr元素的颜色size像素规定hr元素的高度。width像素|百分比规定hr元素的宽度。
案例07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<h4 align="center">分割线的属性</h4>
<p align="center">分割线宽度属性（width="200"）</p>
<hr width="200">
<p align="center">分割线厚度属性（size="20"）</p>
<hr width="200" size="20">
<p align="center">分割线颜色属性（color="blue"）</p>
<hr width="200" size="20" color="blue">
<p align="center">分割线对齐属性（color="blue"）</p>
<hr width="200" size="20" color="blue" align="left">
</body>
</html>
效果展示
HTML 文本格式化
常用的文本格式化标签
标签描述案例<b>粗体文字<b>加粗</b><i>斜体字<i>斜体</i><small>小号字<small>小号</small><sub>下标字<sub>下标</sub><sup>上标字<sup>上标</sup><ins>插入字（下划线）<ins>下划线</ins><del>删除字（中划线）<del>中划线</del><em> 着重字，和 i相似<em>着重字</em>strong加重语气，和b相似<strong>加重语气</strong>font自定义字体(~~不推荐使用~~)<font size="3" color="red">自定义字体</font>
案例08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 文本格式化</title>
</head>
<body>
<h3 align="center">静夜思<small><i><sub>（李白<del>诗作</del>）</sub></i></small></h3>
<hr align="center" width="160">
<p align="center"><ins>床前明月<b>光</b></ins><sup>(1)</sup>，</p>
<p align="center"><ins>疑是地上<b>霜</b></ins><sup>(2)</sup>。</p>
<p align="center">举头<b>望</b>明月<sup>(3)</sup>，</p>
<p align="center">低头<b>思</b>故乡<sup>(4)</sup>。</p>
<hr width="160">
</body>
</html>
效果展示
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
如：在 HTML 中不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。
显示结果描述实体名称空格 <小于号<>大于号>©版权©®注册商标re&g;™商标&trade
案例09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">
软件开发 2222年©版权归属创作人：靳钟新™
</p>
</body>
</html>
效果展示
HTML 超链接
HTML使用标签<a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到**新的文档**或者**当前文档中的某个部分**。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用href属性来描述链接的地址。
在标签<a> 中使用target="_blank"属性来设置在浏览器新标签页中打开页面。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为**蓝色**字体并带有下划线。
访问过的链接显示为**紫色**并带有下划线。
点击链接时，链接显示为**红色**并带有下划线。
超链接属性
属性值描述hrefURL规定链接的目标 URL。target_blank | 规定在浏览器新标签页中打开目标网页 URL。仅在href属性存在时使用。 |
超链接语法
<a href="http://www.xx.com" target="_blank">这是一个超链接</a>
超链接锚点（书签）
超链接锚点类似淘宝点击菜单跳转到某一分类产品。
链接的**锚点**通过ID属性来指定。ID属性是每个元素都有的属性，为某元素指定ID编码
元素具有ID属性后，就可以通过超链接a标签的href属性来跳转到指定的元素。但是需要加上#前缀。如
1
2
<h1 id="aaa">顶部</h1>
<a href="#aaa">回到顶部</a>
案例10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr >
<h1 id="aaa">顶部</h1>
<a href="#bbb">回到中部</a>
<a href="#ccc">回到底部</a>
<hr >
往下看↓<br><br><br><br><br><br><br><br><br><br>
<hr >
<h2 id="bbb">页面中部</h2>
<a href="#aaa">回到顶部</a>
<a href="#ccc">回到底部</a>
<hr >
往下看↓<br><br><br><br><br><br><br><br><br><br>
往下看↓<br><br><br><br><br><br><br><br><br><br>
<hr >
<h2 id="ccc">页面底部</h2>
<a href="#aaa">回到顶部</a>
<a href="#bbb">回到中部</a>
<hr >
</body>
</html>
效果：
HTML 图片
在 HTML 中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签
要在页面上显示图像，你需要使用源属性src。src 指 source。源属性的值是图像的 URL 地址
图片标签属性
显示结果值实体名称srcURL规定图片的目标URL。width%|值规定图片的宽度。height%|值规定图片的高度。
定义图像的语法
<img src="logo.png" width="200" height="200" />
URL统一资源定位符
图片链接
HTML标签可以相互嵌套。当在超链接a标签中嵌套图片后，图片和超链接就合二为一，也就是说点击图片可以实现a标签的跳转功能。
案例11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像链接</title>
</head>
<body>
<a href="www.baidu.com" target="_blank">
<img src="img/timg.jpg" alt="提示文字" width="200" height="200" />
</a>
</body>
</html>
效果：
图片对齐模式
图片的对齐使用<img>标签的align属性控制
<img align="middle|top|bottom">
属性值：
值描述middlecenter把图像与周围文字的中央对齐。top把图像与周围文字的顶部对齐。bottom把图像与周围文字的底部对齐。
案例12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片对齐模式</title>
</head>
<body>
<img src="img/avatar.jpg" height="50"/>默认：底对齐
<br>
<img src="img/avatar.jpg" height="50" align="center"/>居中对齐align="center"
<br>
<img src="img/avatar.jpg" height="50" align="texttop"/>顶对齐align="texttop"
<br>
<img src="img/avatar.jpg" height="50" align="texttop"/>
<img src="img/avatar.jpg" height="50" align="right"/>右对齐align="right"
</body>
</html>
效果展示
图片整体居中
图片通过align属性只能控制显示在**左边**或者**右边**，却不能控制显示在中间。
HTML的标签可以嵌套，嵌套的时候往往外层标签的属性会作用于内层标签，利用此特性可以使用具有居中排版的标签来控制其内部的标签居中显示。
如使用<p></p>来包裹<img>标签来控制<img>标签居中显示。
案例13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片整体居中</title>
</head>
<body>
<h4 align="center">图片整体居中</h4>
<p align="center"><img src="img/timg.jpg" height="150" /></p>
</body>
</html>
效果展示
作业
制作微信聊天界面
要求：实现如下效果
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">与女神聊天</h1>
<hr>
<p><img src="img/07.jpg" width="30" align="center">你好呀！</p>
<p align="right">好，你妹<img src="img/01.jpg" width="30" align="center"></p>
<p><img src="img/03.jpg" width="30" align="center">修养啊！</p>
<p align="right">呵呵<img src="img/04.jpg" width="30" align="center"></p>
<p><img src="img/05.jpg" width="30" align="center">在干嘛呢！</p>
<p align="right">要你管<img src="img/06.jpg" width="30" align="center"></p>
<p><img src="img/07.jpg" width="30" align="center">雅黑</p>
<p align="right">......<img src="img/08.jpg" width="30" align="center"></p>
</body>
</html>
制作博客文章网页
要求：
分割线宽度640，
全部内容居中显示
点击底部的者文字，返回顶部标题
效果展示：
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center" id="top">三月，醉一场青春的流年</h1>
<hr width="750">
<p align="center"><img src="img/timg.jpg" width="30" align="center">作者：小小</p>
<hr size="20" width="750">
<p align="center">三月，醉一场青春的流年。慢步在三月的春光里，</p>
<p align="center">走停停，看花开嫣然，看春雨绵绵，</p>
<p align="center">感受春风拂面，春天，就是青春的流年。</p>
<p align="center">青春，是人生中最美的风景。，</p>
<p align="center">青春是一场花开的遇见；</p>
<p align="center">青春，是一场痛并快乐着的旅行；</p>
<p align="center">青春，是一场轰轰烈烈的比赛；</p>
<p align="center">青春，是一场轰轰烈烈的比赛；</p>
<p align="center">青春，是一场风花雪月的光阴。</p>
<br>
<br>
<p align="center">三月，醉一场青春的流年。慢步在三月的春光里，</p>
<p align="center">走停停，看花开嫣然，看春雨绵绵，</p>
<p align="center">感受春风拂面，春天，就是青春的流年。</p>
<p align="center">青春，是人生中最美的风景。，</p>
<p align="center">青春是一场花开的遇见；</p>
<p align="center">青春，是一场痛并快乐着的旅行；</p>
<p align="center">青春，是一场轰轰烈烈的比赛；</p>
<p align="center">青春，是一场轰轰烈烈的比赛；</p>
<p align="center">青春，是一场风花雪月的光阴。</p>
<br>
<p align="center"><a href="#top">回到顶部</a></p>
</body>
</html>
美文排版
要求：自选内容或者按照图文内容，实现类型如下效果
目的：学会使用HTML实现图文排版，练习打字速度