HTML基础-第一部分
今日课程导航：
前言：这是为第一天更技术博客，最近我们也在学Web站点设计课程，其中之一涉及到HTML网页的基础部分，希望把我自己所学，分享给大家。(#^.^#)
1 HTML基础架构
（1）什么是HTML？
（1） HTML是一种超文本标记语言（Hyper Text Markup Language）由一套标记标签（文本、文字、列表、超链接等）因此HTML不是编程语言。
（2）HTML是用来描述网页的一种语言。
（3）HTML使用标记标签来表述语言。
（4）HTML文档也叫做web页面
（2）HTML标记长什么样？
HTML标记也通常叫做HTML标签（HTML tag）
<标签>内容
><title>HTML基础</title>由上述例子可知：
- HTML标签由尖括号包围的关键词
- HTML标签通常是成对出现的。比如和，第一个叫做开始标签，第二个叫做结束标签。
（3）HTML元素是啥勒！
“HTML 标签” and “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>This is a paragraph.</p>（4）HTML文档？网页？
- HTML描述网页也称为网页
- HTML文档包含HTML标签和纯文本即是由HTML元素组成
- Web浏览器的作用是读取HTML文档，并以网页的形式显示HTML文档，浏览器不会显示标签，标签自身来解释页面的格式内容。
相信小伙伴们迫不及待想看HTML文档是什么面目了吧，接下来一个小小的例子，见识庐山正面目。
<!--DOCTYPE 声明了文档类型-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个HTML文档</title>
</head>
<body>
<h1>欢迎你来学习HTML基础课程</h1>
<p>我也可以试试哦</p>
</body>
</html>文档内容解析
！DOCTYPE html 声明了文档类型。一般来说这里是固定不变的。
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
<title></title>这是网页的标题部分
<html lang ="en">告诉浏览器界面使用的语言 en-English
<title></title>定义文档的标题，即搜索引擎中页面的标题
大家可以动手试试哦！！
差点忘了大家可能还不知道开发工具，编写HTML语言有许多高效工具，在这里简单为大家介绍几款。
在介绍完基础之后，为大家详细的介绍软件的情况。
- notepad++:这个百度一下就能找到
- 记事本：windows自带的，一般开发时比较繁杂
- webstorm 百度下载或者我可以分享给大家，这也是我比较常用的一款开发工具。
- Dreamweaver：这是一款明星前端开发软件，但是我还没用过。
（5）HTML（meta）元素
meta:元数据 是关于数据的信息，不会显示在网页里。
标签始终位于head元素内
charset属性描述文档的语言，一般选用UTF-8
2 文字与段落标记
（1）标题字H
HTML 标题（Heading）
<h1> -<h6> 标签来定义标题字的属性：对齐属性align
align=”left”/”right”/”center”
格式：<h align =""></h>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题字</title>
</head>
<body>
<h1 align="center">告白气球</h1>
<h2 align="left">赛乃河畔，左岸的咖啡</h2>
<h3 align="left">我手一杯 品尝你的美</h3>
<h4 align="right">亲爱的 爱上你 从那天起</h4>
<h5 align="right">拥有你就拥有全世界</h5>
<h6 align="center">甜蜜的很轻易</h6>
</body>
</html>
（2）文本基本标记
文本基本标记即字体font
- > 字体属性：face
- 格式：
<font face="">内容</font>- > 字号属性：size
- 格式：
<font size="">内容</font>- > 字号颜色：color
格式：
<font color="">内容</font>案例介绍：
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本基本标记</title>
</head>
<body>
<font face="微软雅黑">微软雅黑的字体</font>
<!--br是换行符-->
<br>
<font size="10px">字体的大小</font>
<br>
<font color="blue">我是字体颜色</font>
<!--字体基本标记属性的综合应用-->
<br>
<font
face="微软雅黑" size="5px" color="#a9a9a9">
我是5px灰色微软雅黑的字体
</font>
</body>
</html>
微软雅黑的字体
字体的大小
我是字体颜色
（3）文本格式化标记
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本基本标记</title>
</head>
<body>
<!--p为段落标记-->
<p> <b ><font size="10px">浮夸</font></b></p>
<p><i>你当我是浮夸吧</i></p>
<p><em>夸张只因为我很怕</em></p>
<p><small>似木头似石头的话</small></p>
<p><strong>得到注意吗</strong></p>
<p><del>>其实怕被忘记</del></p>
<p><ins>至放大来演吧</ins></p>
</body>
</html>
浮夸
你当我是浮夸吧
夸张只因为我很怕
似木头似石头的话
得到注意吗
>其实怕被忘记
至放大来演吧
（4）段落标记
- 段落标记p 可以将HTML文档分割为若干段落。
- 格式:
<p></p>- 换行标记br
-格式：
<br>代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本基本标记</title>
</head>
<body>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这个段落没有演示分行的效果</p>
<p>这个<br>段落<br>演示了分行的效果</p>
</body>
</html>这是第一个段落
这是第二个段落
这个段落没有演示分行的效果
这个
段落
演示了分行的效果
（5）水平线hr
- 添加水平线
- 属性:
- 高度：width
- 宽度：size
- 水平线去掉阴影:noshade
- 水平线颜色:color
- 水平线排列:align
**讲完了文字与段落标记，我们来演练一个综合应用吧。
案例代码如下：可以按照代码来动手演示哦！**
代码如下：
<html>
<head>
<meta charset = "UTF-8">
<title> 文字与段落标记</title>
</head>
<!--标题字标记-->
<!--标题字对齐属性align-->
<!--left.center.right-->
<h1>一级标题</h1>
<h2 align = "left">二级标题</h2>
<h3 align ="center">一级标题</h3>
<h4 align = "right">一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<br>
<br>
<!--<文字基本标记font-->
<!--字体属性face-->
<!--字号属性size-->
<!--颜色属性color-->
<p><font face ="宋体" size = "100" color ="red"> 有缘路上左手牵右手</font></p>
<p><font face="楷体" size = "80" color = "blue">温柔的说晚安</font></p>
<p><font face="黑体" size ="60" color = "yellow">晚安宝贝</font></p>
<br>
<br>
<br>
<!--文本格式化标记-->
<!--粗体标记b,strong-->
<!--斜体标记i cite em-->
<!--上标的标记sup-->
<!--下标的标记sub-->
<!--下划线u-->
<center>
<small><p><b>加粗文字1</b></p></small>
<big><p><strong> 加粗文字2</strong></p></big>
<big>
<p><i>斜体文字</i></p>
<p><em>你是不是斜体</em></p>
<p><cite>我是斜体</cite></p>
</big>
<p><u>下划线字体</u></p>
</center>
<br>
<br>
<!--段落标记p-->
<!--换行标记br-->
<!--水平线标记hr-->
<!--宽度width-->
<!--高度size-->
<!--去掉阴影noshade-->
<p align = "center">动物世界</p>
<hr align ="center"
width = "500"
size = "3"
noshade
color = "red">
东打一下西戳一下
动物未必需要尖牙
示爱的方法有礼貌或是我管它
要将情人一口吞下
还要显得温文尔雅
螳螂委屈的展示旧伤疤
求偶时候一惊一乍
因为害怕时常倒挂
走投无路的情况下舍弃了尾巴
如果不能将它同化就寄生于它
大不了一同腐化
努力进化 笑动物世界都太假
祖先 已磨去爪牙
相爱相杀 一定有更好的办法
攀比一下 谁先跪下
不再进化 动物世界里都太傻
为情表现到浮夸
得到了你就该丢下
人性来不及粉刷
所以啊 人总患孤寡
麋鹿本来约在树下
说好一起浪迹天涯
</body>
</html>效果如下所示：
后记
HTML第一部分先更新两章基础部分，因为笔者是第一次写技术相关的博客内容，很多东西还不熟悉，更新较慢，我希望能把握所学的东西分享给大家，同时我也能做到孰能生巧。
第二部分预告：
1. 想知道你为什么能从一个页面到达另一个页面吗?下部分超链接给你奇迹。
2.想知道百度导航是怎么做出来的吗？列表给答案。
下一篇： python爬虫基础（6：IP代理池）