一、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>