一、HTML5简介
1.超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
2.可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
3.HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
二、网页编辑工具
1.记事本
2.Dreamweaver
3.WebStorm
三、HTML5作用
1.需要将java在后台根据用户请求处理的请求结果在 浏览器中显示给户. 在浏览器中数据需要使用友好的格式展现给用户.
2.HTML是告诉浏览器接收到的数据使用什么样的数据 组织形式进行显示.
四、互联网的三大基石:
1.URL:统一资源定位符.(唯一的定位一个网络资源)
2.HTTP:超文本传输协议.(规范浏览器和服务器之间数据交 互的格式)
3.HTML:超文本标记语言(有效的组织数据在浏览器端的显 示)
五、HTML网页基本结构
HTML的文档声明: 文件名.html 或者 文件名.htm
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
这是我的网页
</body>
</html>
注:1.<title>标签告诉浏览器使用 什么标题显示网页
2.<!DOCTYPE html>告诉浏览器使用什么规范
3.<meta charset="UTF-8" />推荐utf-8,还可设置为gb2312、GBK等在<!DOCTYPE html>后面设置
a.gb2312包含全部中文字符
b/.utf-8 则包含全世界所有国家需要用到的字符
c.页面编码应与页面文件保存时的编码一致
2.<body></body>是网页主体
3.< body>、</body>等成对的标签,分别叫开放标签和闭合标签
单独呈现的标签(空元素),如 <hr/> ;意为用 / 来关闭空元素
4.HTML是由浏览器进行解析执行的
六、网页基本标签
1. 标题标签:<h1>一级标题</h1>~<h6>六级标题</h6>,H1标签最大字体
2.段落标签:<p>深圳欢迎你,有梦想谁都了不起!</p>
3.换行标签:
<p>
深圳欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
深圳欢迎你,为你开天辟地<br />
……
</p>
4.水平线标签
<p>
<h1>深圳欢迎你</h1>
<hr/>
深圳欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
深圳欢迎你,为你开天辟地<br />
……
</p>
</body>
</html>
5.字体样式标签
a.加粗:<strong>…</strong>
b.斜体:<em>…</em>
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂<br/>
<em>1918</em>年赴美国克拉大学学习银行学<br/>
……
</p>
6.注释和特殊符号
特殊符号 | 字符实体 | 示例 |
空格 | | <a href="#">百度</a> | <a href="#">新浪</a> |
大于号(>) | > | 如果时间>晚上6点,就坐车回家 |
小于号(<) | < | 如果时间<早上7点,就走路去上学 |
引号(") | " | W3C规范中,HTML的属性值必须用成对的"引起来 |
版权符号@ | © | © 2003-2018大锋 |
7、图像标签
a.常见的图像格式 :JPG、GIF、PNG、BMP
<img src="path" alt="text" title="text" width="x" height="y" />
src:图像地址;alt图像的替代文字;title:鼠标悬停提示文字;width:图像宽度;height:图像的高度
8.衔接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
href:衔接路径;target:衔接在那个窗口打开,常用值是_self或_blank_
<!--文本超衔接-->
<a href="detail.html" target="_blank">孩子,欢迎降落在这残酷的世界</a>
<!--图像超衔接-->
<a href="detail.html" target="_blank">
<img src="image/img1.png" alt="孩子,欢迎降落在这残酷的世界"
title="孩子,欢迎降落在这残酷的世界" />
</a>
七、常用的超链接
1.锚链接:
a.从A页面的甲位置跳转到本页中的乙位置
b.从A页面的甲位置跳转到B页面中的乙位置
<!--创建跳转标记-->
<a name="marker">乙位置</a>
<!--创建跳转链接-->
<a href="#marker">甲位置</a>
2. 功能性链接
电子邮件、QQ、MDN
<a href="mailto:bdqnWebmastes@bdqn.cn">联系我们</a>
八、行内元素和块元素
1.块元素:无论内容多少,该元素独占一行(p、h1-h6…)
2.行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)
<p>我是p元素</p>
<h1>我是标题h1</h1>
<a href="#">我是超链接a元素</a>
<strong>我是strong元素</strong>