- 为什么学习HTML? 学了能做些什么?
什么是HTML?
HTML:
超文本标记语言(Hyper Test Markup Language)
HTML不是一种编程语言,而是一种标记语言,描述网页的语言
HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。
2. W3C--------w3school
HTML 4.01开始为了严谨,制作了XML
严谨过头,有了HTML5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gb2312"/>
<title>网页标题</title>
</head>
<body>
........
</body>
</html>
1.<title>,是网页标题
2.标题<head>标题<title>
3.<meta charset="UTF-8">----修改编码格式,防止乱码
4.标题之后,是内容。 <body>是文档内容
- 开发环境以及开发工具
- 开发环境:windows linux Mac OSX
- 开发工具:Dreamweaver Eclipse FrontPage WebStorm...
- WebStorm优点:只能的代码不全、代码提示、自动保存。。
- title ---网页名
body--网页的内容
<html>
<head lang ="en">
<meta charset="GB2312"/>
<title> 我的第一个网页</title>
</head>
<body>
hello world!
</body>
</html>
5. HTML基本标签
名称 标签 示例
<h1>~~<h6> 标题的大小字号-h1大号字 <h1>静夜思</h1>
<p></p> 段落标签,换段 <p>床前明<br/>疑是</p>
<br/> 换行标签,但是换行 <p>床前明<br/>疑是</p>
<hr/> 水平线标签 <hr/>
<em>...</em> 斜体 <em>举头望明月</em>
<strong>...</stong> 字体加粗 <strong>低头思故乡</stong>
<br/> 和 <hr/>---单标记,只有一个就有作用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GB2312"/>
<title>网页名字</title>
</head>
<body>
<h1>静夜思</h1>
<em><strong>作者:李白</strong></em>
<hr/>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月,低头思故乡。<br/></p>
</body>
</html>
6.路径:相对路径和绝对路径
c:\1\2\3\4.txt
c:\1\2\3\5.txt
如何定位5.txt??
答:相对路径:5.txt
绝对路径:c:\1\2\3\5.txt
链接实例演示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GB2312"/>
<title>锚链接</title>
</head>
<body>
<p><img src="E:/学习HTML的图片/img1.png" alt="菇凉">七夕</p>
<p><a href="mailto:zhangsan@163.com">给站长写信</a></p>
</body>
</html>
图片标签案例2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GB2312"/>
<title>案例</title>
</head>
<body>
<!--h1标题-->
<h1>静夜思</h1>
<em><strong>作者:<李 © 白></strong></em>
<hr/>
<p>窗前明月光</p>
<img src="E:\学习HTML的图片\img2.png" alt="这是一个美女的图片"/>
</body>
</html>
7.超链接
<a href=”链接地址” target=”目标窗口位置”>文本或图像</a>
超链接的应用
- 页面间链接:A页B页,网上常见链接
- 锚链接:跳至自身固定位置,或A页调到B页固定位置,需要锚标记
<a href=”#me”>点击我</a>
<a name=”me”>跳到这里来</a>
- 功能性链接:电子邮件、QQ、MSN等链接
<a href=”mailto:邮箱地址”>给站长写信</a>
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
可以是文字、图片、网站
窗口: self------自身窗口
blank---新建窗口
锚链接:
作用:从A页面的甲位置跳转到本页中的乙位置
从A页面的甲位置跳转到B页面中的乙位置
步骤:1.创建跳转标记
<a name="marker">乙位置</a>
2.创建跳转链接
<a href="#marker">甲位置</a>
图像标签:
<img src=”图片路径” alt =”替换文本” width=”x” height=”y”/>
width-----------宽度
height----------高度
超链接标签:
<a href="链接路径" target="目标窗口位置">需要链接的文本或者图像</a>
锚链接:跳转到同一个页面的固定位置
1.html-----------<a href=”#me”>点击我</a>
2.html-----------<a href=”#me”>跳到这里来</a>
功能链接:
<a href=”mailto:邮箱地址”>给站长写信</a>
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
8.注释和特殊符号
空格------------------
小于号<-------------<
大于号>------------->
引号””--------------";
版权符号@-------©;
9.常见图片格式:jpg gif png bmp
网页上经常用到:jpg gif
10. 块元素和行内元素
块元素
无论内容多少,该元素独占一行(p、h1-h6…)
行内元素
内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)
示例:
<p>我是p元素</p>
<h1>我是标题h1</h1>
<a href="#">我是超链接a元素</a>
<strong>我是strong元素</strong>
11.HTML5的结构元素
header 标题头部区域的内容(用于页面或页面中的一快区域)
footer 标记脚部区域的内容(用于页面或页面中的一快区域)
section Web页面中的一块的区域
article 独立的文章内容
aside 相关内容或应用(常用语侧边栏)
nav 导航类辅助内容
12.总结