2018-07-02 第五十七天 HTML

简介:
一、HTML概要

A、课程介绍

静态网页内容:

1.HTML:超文本标记语言---显示内容

2.CSS:层叠样式表-------------美化页面

3.JavaScript-----页面动态交互和特效

 

DHTML=HTML+CSS+JavaScript    

动态HTMLDynamic HTML,简称DHTML

只是动态效果,不是动态数据

 

4.jQuery:对JavaScript的封装

5.EasyUI:在jQuery基础上对HTMLCSS的封装  

 

i.对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置页面交互和特效。

一个很经典例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,

加上javascript这个植物人就可以对外界刺激做出反应,可以思 考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。

ii.如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人,没有JavascriptCSS是个毁容植物人。

iii.如果说HTML是建筑师,CSS就是干装修的,Javascript是魔术师。

 

B、 概念介绍

 

为什么学习HTML(作用)

遇到的问题:随着技术的发展 浏览器中的信息量的增大, 如何把信息完美的,漂亮的展现到用户的面前,这就是一个问题。

 

HTML的作用:格式化展现网页的信息,类似于人的骨骼。

 

什么是HTML

Hyper Text Markup Language 超文本标记语言,是一种用来制作网页的简单标记语言,用HTML编写的超文本文档称为HTML文档,HTML文档的扩展名是html或者htm

 

超文本:不仅仅可以书写文本还可以插入图片、音频、视频、超链接等

 

标记:标签

 

HTML版本

HTML1.0——19936月作为IETF工作草案发布(并非标准):

HTML 2.0——199511月作为RFC 1866发布

HTML 3.2——1997114日,W3C推荐标准

HTML 4.0——19971218日,W3C推荐标准

HTML 4.01(微小改进)——19991224日,W3C推荐标准

HTML 5——20141028日,W3C推荐标准

HTML4.01 是常见的版本。

 

编辑HTML的工具:

1.手工直接编写:记事本,UltraEdit

效率低下,有助于提高编写水平

2.使用可视化HTML编 辑 器:DreamweaverHBuilder

开发效率高,支持快捷键、代码提示、颜色区分等,支持可视化编程

 

显示HTML的工具:浏览器( 解释和执行HTML源码 )(IE    FireFox  Chrome

 

C、 三大基石

互联网三大基石:

  HTML:超文本标记语言  HyperText Markup Language

  HTTP:超文本传输协议  HyperText Transfer Protocol

  URL :统一资源定位符  Uniform Resource Locator

 

生活案例:多个客户给一个移动客服打电话

URL10086  100861111   100861213

HTML:移动客服回复的内容

HTTP: 客户和客服的通话规则:都说同一种语言,认真倾听不打断等,礼貌交谈

3eb9d0eadd48c7906995c7028d0e1f2a3c7d4f14

 

互联网实例:多个客户通过各自浏览器对同一个百度官网服务器进行访问

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>

<!--告诉浏览器按照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>


316b531d9415e44320c6a978f1b95dbdac0f143b

目录
相关文章
|
2月前
|
搜索推荐 前端开发 JavaScript
html的head元素seo优化详解
在HTML的`&lt;head&gt;`元素中进行SEO优化对于提升网页在搜索引擎中的排名至关重要。以下是几个关键策略:确保每个页面有唯一的标题标签(50-60字符),使用描述标签(150-160字符)概括内容并包含关键词,设置正确的字符集(如UTF-8),使用视口元标签优化移动端显示,添加规范链接避免重复内容,利用结构化数据(如JSON-LD)帮助搜索引擎理解内容,优化样式和脚本加载,以及设置网站图标增强品牌识别。这些措施能显著提高网页的搜索引擎可见性和用户点击率。
|
5月前
|
存储 前端开发 JavaScript
HTML五彩缤纷的爱心
HTML五彩缤纷的爱心
70 1
|
移动开发 前端开发 JavaScript
HTML丨一股脑塞给你的HTML攻略
前面讲的`JavaScript`学习基本暂时告一段落,我尽量用最简单的方式来介绍`HTML`!然后我会用一个《今天吃个啥?》为例,后期再加上`CSS`和`JavaScript`,使之成为一个完整的项目
HTML丨一股脑塞给你的HTML攻略
HTML|如何做简单基础的html网页
HTML|如何做简单基础的html网页
112 0
|
移动开发 前端开发 UED
HTML 学习总结
HTML 学习总结
215 0
HTML 学习总结
零基础HTML入门教程(3)——我的HTML第一个网页
我们这一小结讲了html最基本的语法,p标签是一个段落标签,所有的html标签都要放在body标签里面。本小结我们学习一下第一个html网页,html的最基本的语法,并熟练掌握html基本语法,熟练使用。
零基础HTML入门教程(3)——我的HTML第一个网页
|
移动开发 前端开发 Java
HTML 学习总结 !
HTML 学习总结 !
79 0
|
移动开发 HTML5
html5 h5学习总结
html5 h5学习总结
|
存储 移动开发 前端开发
万丈高楼平地起之学习HTML
万丈高楼平地起之学习HTML
|
容器
HTML学习
表格、svg
113 0
HTML学习