2018-07-02 第五十七天 HTML_http ,,,万维网的三大基石 site:blog.csdn.net-CSDN博客

本文链接：https://blog.csdn.net/Winnieeeee/article/details/80890751

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

http://www.w3school.com.cn/

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>

<body>

<p class="header_p">head中常用标签</p>

</div>

</header>

Hello World!

</body>

</html>

三、常用的小标签

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="header_p">常用的小标签</p>

</div>

</header>

<p>常用的小标签：不会自动的换行</p>

<p>可以互相嵌套</p>

<b>字体加粗标签 b</b>

</p>

</p>

<u>下划线标签 u</u>

</p>

<del>删除线标签 del</del>

</p>

换行 br<br />

</p>

<big><big><big>字体变大big标签，可以嵌套更大</big></big>

</big>

</p>

<small>字体变小small标签</small>

</p>

sup上标标签<sup>666</sup>

</p>

sub下标标签<sub>999</sub>

</p>

<i>

font标签<br />

你有你的腹肌，我有我的肚皮

不是很帅，但是很皮

</font>

</i>

</p>

<span>span标签</span>

</p>

<hr />

<!--

列表标签：（3种）

作用：制作页面的导航、商品的展示（滑动门），树形菜单等

-->

<p>无序列表--type前面的形状</p>

<li>javaSE

<ul>

<li>javaSE1</li>

</ul>

</li>

<li>javaEE</li>

<li>javaME</li>

</ul>

<p>有序列表--也可以是A,数字，I</p>

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

<title>HTML中body中常用标签学习</title>

</head>

<body>

<p class="header_p">body中常用标签</p>

</div>

</header>

百度--原始

<p> “百度”二字,来自于八百年前南宋词人辛弃疾的一句词：<br />众里寻他千百度。这句话描述了词人对理想的执着追求。</p>

<pre>

“百度”二字,来自于八百年前南宋词人辛弃疾的一句词：

众里寻他千百度。这句话描述了词人对理想的执着追求。

</pre>

</div>

</body>

</html>

五、Img & Marquee

<!DOCTYPE html>

<!--

img:图片不会自动的换行

src:图片的路径{相对路径,网络路径}

如果宽和高只是指定一个属性，那么另外的一个属性会等比例的放大和缩小

title：图片的标题

alt：图片无法正常显示的属性

border：图片的边框

-->

<html>

<head>

<title>Img & Marquee</title>

</head>

<body>

<p class="header_p">Img & Marquee</p>

</div>

</header>

</div>

<hr />

</marquee>

</div>

</body>

</html>

六、超链接a标签

<!DOCTYPE html>

<html>

<!--

超链接标签的作用：（不会自动的换行）

【1】：实现不同页面的跳转

href:跳转到的路径

target：打开方式{_blank新开，_self当前页}

【2】：实现锚点功能

一个页面的锚点：

两个页面的锚点：

本页面：

<a href="small_normal.html##dt">小标签自定义列表</a>

另一个页面：

-->

<head>

<title>超链接a标签</title>

</head>

<body>

<p class="header_p">超链接a标签</p>

</div>

</header>

<hr />

<a href="body_normal.html" target="_blank">body中常用标签网页</a>

<a href="small_normal.html#dt" target="_blank">小标签自定义列表</a>

</a>

</div>

</body>

</html>