一、HTML概要
A、课程介绍
静态网页内容：
1.HTML：超文本标记语言---显示内容
2.CSS：层叠样式表-------------美化页面
3.JavaScript：-----页面动态交互和特效
DHTML=HTML+CSS+JavaScript
动态HTML（Dynamic HTML，简称DHTML）
只是动态效果，不是动态数据
4.jQuery：对JavaScript的封装
5.EasyUI：在jQuery基础上对HTML和CSS的封装
i.对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置页面交互和特效。
一个很经典例子是说HTML就像 一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，
加上javascript这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。
ii.如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容植物人。
iii.如果说HTML是建筑师，CSS就是干装修的，Javascript是魔术师。
Bã 概念介绍
为什么学习HTML（作用）
遇到的问题：随着技术的发展 浏览器中的信息量的增大， 如何把信息完美的，漂亮的展现到用户的面前，这就是一个问题。
HTML的作用：格式化展现网页的信息，类似于人的骨骼。
什么是HTML
Hyper Text Markup Language 超文本标记语言，是一种用来制作“网页”的简单标记语言，用HTML编写的超文本文档称为HTML文档，HTML文档的扩展名是html或者htm。
超文本：不仅仅可以书写文本还可以插入图片、音频、视频、超链接等
标记：标签
HTML版本
HTML1.0——在1993年6月作为IETF工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准
HTML4.01 是常见的版本。
编辑HTML的工具：
1.手工直接编写：记事本，UltraEdit；
效率低下，有助于提高编写水平
2.使用可视化HTML编 辑 器：Dreamweaver、HBuilder；
开发效率高，支持快捷键、代码提示、颜色区分等，支持可视化编程
显示HTML的工具：浏览器（ “解释和执行”HTML源码 ）（IE FireFox Chrome）
Cã 三大基石
互联网三大基石：
HTML：超文本标记语言 HyperText Markup Language
HTTP：超文本传输协议 HyperText Transfer Protocol
URL ：统一资源定位符 Uniform Resource Locator
生活案例：多个客户给一个移动客服打电话
URL：10086 100861111 100861213
HTML：移动客服回复的内容
HTTP: 客户和客服的通话规则：都说同一种语言，认真倾听不打断等，礼貌交谈
互联网实例：多个客户通过各自浏览器对同一个百度官网服务器进行访问
URL:网址
http://www.baidu.com/
HTML：开发网页的语言，服务端响应内容的开发语言，有浏览器给解释并展示
HTTP: 客户和服务器的通信规则（数据的格式、含义等）
参考资料
API CHM
WWW：英文全称为“World Wide Web，中文名字为“万维网”，常简称为Web。分为Web客户端和Web服务器程序。
WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”,并且由一个URL标识；这些资源通过超文本传输协议HTTP传送给用户，而后者通过点击链接来获得资源。
W3C
World Wide Web Consortium，万维网联盟
W3C的职能：负责制定和维护web行业标准
二、head中常用标签
<!DOCTYPE html>
<!--
文档约束
HTML5的文档约束：<!DOCTYPE html>
HTML4中的文档约束：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
-->
<html>
<!--和浏览器中的配置标签放到head中-->
<head>
<!--告诉浏览器按照UTF-8的形式解析该网页-->
<meta charset="UTF-8">
<!--HTML4中指定网页的编码-->
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<!--标题标签-->
<title>Day1</title>
<!--提升浏览器的搜索引擎-->
<!--关键字-->
<meta name="keywords" content="java，HTML，CSS" />
<!--描述-->
<meta name="description" content="百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。" />
<!--作者-->
<meta name="author" content="baidu,百度" />
<!--3S之后刷新网页并且跳转到指定的网址中-->
<!--<meta http-equiv="refresh" content="3;http://www.baidu.com" />-->
<!--禁止浏览器缓存的标签-->
<meta http-equiv="Cache-Control" content="no-Cache" />
<meta http-equiv="Pragma" content="no-Cache" />
<!--预期缓存的时间-->
<meta http-equiv="expires" content="0">
<!--导入css-->
<link rel="stylesheet" href="../css/normal.css" />
</head>
<!--用于展现到用户面前的信息，标签放到body -->
<body>
<header id="header" class="mui-bar ">
<div class="header_div_style">
<p class="header_p">head中常用标签</p>
</div>
</header>
Hello World!
</body>
</html>
三、常用的小标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day1</title>
<link rel="stylesheet" href="../css/normal.css" />
</head>
<body>
<header id="header" class="mui-bar ">
<div class="header_div_style">
<p class="header_p">常用的小标签</p>
</div>
</header>
<p>常用的小标签：不会自动的换行</p>
<p>可以互相嵌套</p>
<p class="new_div">
<b>字体加粗标签 b</b>
</p>
<p class="new_div">
<i>斜体标签 i</i>
</p>
<p class="new_div">
<u>下划线标签 u</u>
</p>
<p class="new_div">
<del>删除线标签 del</del>
</p>
<p class="new_div">
换行 br<br />
</p>
<p class="new_div">
<big><big><big>字体变大big标签，可以嵌套更大</big></big>
</big>
</p>
<p class="new_div">
<small>字体变小small标签</small>
</p>
<p class="new_div">
sup上标标签<sup>666</sup>
</p>
<p class="new_div">
sub下标标签<sub>999</sub>
</p>
<p class="new_div">
<!--字体标签 color：颜色 size：字体大小 1-7等级 也可以指定px face:字体的风格 -->
<i>
<font color="red" size="5" face="楷体">
font标签<br />
你有你的腹肌，我有我的肚皮
不是很帅， 但是很皮
</font>
</i>
</p>
<p class="new_div">
<!--css样式操作span标签-->
<span>span标签</span>
</p>
<!--分割线-->
<hr />
<!--
列表标签：（3种）
作用：制作页面的导航、商品的展示（滑动门），树形菜单等
-->
<div class="new_div">
<!--无序列表-->
<p>无序列表--type前面的形状</p>
<ul type="square">
<li>javaSE
<ul>
<li>javaSE1</li>
<li>javaSE1</li>
<li>javaSE1</li>
</ul>
</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
<!--有序列表 也可以是A,数字，I-->
<p>有序列表--也可以是A,数字，I</p>
<ol type="I">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ol>
<!--自定义列表-->
<p id="dt">自定义列表</p>
<dl>JAVA：
<dt>javaEE</dt>
<dd>javaEE1</dd>
<dd>javaEE2</dd>
<dd>javaEE3</dd>
</dl>
</div>
</body>
</html>
四、body中常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML中body中常用标签学习</title>
<link rel="stylesheet" href="../css/normal.css" />
</head>
<body>
<header id="header" class="mui-bar ">
<div class="header_div_style">
<p class="header_p">body中常用标签</p>
</div>
</header>
<div class="new_div">
百度--原始
<!--标题标签 h1-h6 字体自动的加粗加黑 会自动的换行 align：位置属性 -->
<h1 align="center">百度--h1</h1>
<h2 align="right">百度--h2</h2>
<h3>百度--h3</h3>
<h4>百度--h4</h4>
<h5>百度--h5</h5>
<h6>百度--h6</h6>
<h7>百度--h7--无效</h7>
<!--分割线标签 size:垂直的大小 width：宽度 align：位置属性-->
<hr size="10px" width="500px" color="aqua" align="center" />
<!--p段落标签会自动的换行 br ：换行 :空格-->
<p> “百度”二字,来自于八百年前南宋词人辛弃疾的一句词：<br />众里寻他千百度。这句话描述了词人对理想的执着追求。</p>
<!--预文本标签:会按照指定的格式输出 灵活性比较大-->
<pre>
“百度”二字,来自于八百年前南宋词人辛弃疾的一句词：
众里寻他千百度。这句话描述了词人对理想的执着追求。
</pre>
</div>
</body>
</html>
五、Img & Marquee
<!DOCTYPE html>
<!--
img:图片 不会自动的换行
src:图片的路径{相对路径,网络路径}
如果宽和高只是指定一个属性，那么另外的一个属性会等比例的放大和缩小
title：图片的标题
alt：图片无法正常显示的属性
border：图片的边框
-->
<html>
<head>
<meta charset="UTF-8">
<title>Img & Marquee</title>
<link rel="stylesheet" type="text/css" href="../css/normal.css" />
</head>
<body>
<header id="header" class="mui-bar ">
<div class="header_div_style">
<p class="header_p">Img & Marquee</p>
</div>
</header>
<div class="new_div">
<!--网络路径OK-->
<!--引入动态图片-->
<img title="图片标题" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530531745586&di=323504a3df32a00eba350d3a17b49c11&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa6efce1b9d16fdfaed3bb1d9bf8f8c5494ee7bb5.jpg" />
<img src="../img/test10.jpg" height="300px" title="图片标题">
<img src="../img/test9.jpg" width="200px" title="图片标题">
</div>
<hr />
<div class="new_div">
<!--跑马灯 direction:滚动的方向 height：路径的高度 scrollamount：每秒滑动的像素 -->
<marquee scrollamount="50px">
<img src="../img/test1.jpg" title="图片标题" />
<img src="../img/test2.jpg" title="图片标题" />
<img src="../img/test3.jpg" title="图片标题" />
<img src="../img/test4.jpg" title="图片标题" />
<img src="../img/test5.jpg" title="图片标题" />
<img src="../img/test6.jpg" title="图片标题" />
<img src="../img/test7.jpg" title="图片标题" />
<img src="../img/test12.jpg" title="图片标题" alt="错误的图片"/>
</marquee>
</div>
<!--相对路径OK-->
<img src="../img/test8.jpg" />
<!--绝对路径不行-->
<img src="F:/HBuilder_8.8.0_windows/HBuilder/HBuilderProject/Test/img/test8.jpg" />
</body>
</html>
六、超链接a标签
<!DOCTYPE html>
<html>
<!--
超链接标签的作用：（不会自动的换行）
【1】：实现不同页面的跳转
href:跳转到的路径
target：打开方式{_blank新开，_self当前页}
【2】：实现锚点功能
一个页面的锚点：
<a id="top" href="#bottom">返回底部</a>
<a href="#top" name="bottom">返回顶部</a>
两个页面的锚点：
本页面：
<a href="small_normal.html##dt">小标签自定义列表</a>
另一个页面：
<a name="three">第3章</a>
-->
<head>
<meta charset="UTF-8">
<title>超链接a标签</title>
<link rel="stylesheet" type="text/css" href="../css/normal.css" />
</head>
<body>
<header id="header" class="mui-bar ">
<div class="header_div_style">
<p class="header_p">超链接a标签</p>
</div>
</header>
<div class="new_div">
<!--快速书写换行的快捷键 br*10 按TAB-->
<!--超链接标签实现锚点功能-->
<a name="top" href="#bottom">返回底部</a>
<hr />
<!--相对路径-->
<a href="body_normal.html" target="_blank">body中常用标签网页</a>
<!--网络的路径-->
<a href="http://www.baidu.com">百度</a>
<!--超链接标签实现不同页面之间的锚点-->
<a href="small_normal.html#dt" target="_blank">小标签自定义列表</a>
<!--超链接结合图片的使用-->
<a href="http://www.baidu.com">
<img src="https://www.baidu.com/img/bd_logo1.png" />
</a>
<!--为了提现回到顶部和前往底部-->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#top" name="bottom">返回顶部</a>
</div>
</body>
</html>
