点击刷新
一、HTML5的介绍
● 前端：展示页面、与用户交互 — HTML
● 后端：数据的交互和传递 — JavaEE/JavaWeb
1.前端开发的工作模式
● 网页的组成部分(HTML+CSS+JAVASCRIPT)
● HTML：页面结构
● CSS：页面样式表现
● JavaScript：交互行为
2.运行环境–浏览器
● 现阶段：主要是本地直接通过游览器打开，后期我们再将网页放置到服务器上，通过http协议来访问我们需要的资源
● 尽量使用谷歌浏览器和火狐浏览器
3.开发网页利器
● HBuilder编写软件
● 官方下载地址：http://www.dcloud.io/
4.HTML简介
● HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
● HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。
5.HTML基本结构
<!DOCTYPE html> -------HTNL标识符
<html> -------跟控制标记
<head> -------头控制标记
<meta charset="UTF-8">
<title></title> -------标题标记
</head>
<body> -------网页显示区域
</body>
</html>
设置网页标题+网页主体显示中文信息
二、常用标签
1.标题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
h1~h6:标题标签
注意：其余无效标签认为是文本内容
-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<h7>七级标签</h7>
</body>
</html>
2.段落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
p：段落标签
-->
<p>用真心待她人</p>
<p>做美丽的自己</p>
</body>
</html>
3.文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
span：文本标签
br：换行标签
hr：分割线标签
-->
<span>送人玫瑰</span>
<br />
<span>留有余香</span>
<hr />
</body>
</html>
4.图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
img：图片标签
src：资源地址
width：宽
height：高
alt：图片加载失败后展示的文本内容
单位：
px -- 像素
% --- 按照窗口的百分比
-->
<img src="../img/呆萌小猪.png" width="120px" height="150px"/>
<br />
<img src="../img/呆萌小猪.png" width="10%" />
<br />
<img src="../img/呆萌小猪.png" width="10%" alt="图片加载失败..."/>
</body>
</html>
5.有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
ol：有序列表
type="1" -- 阿拉伯数字
type="A" -- 大写英文字母
type="a" -- 小写英文字母
type="I" -- 大写罗马数字
type="i" -- 小写罗马数字
li：项
-->
<h3>注册流程：</h3>
<ol type="1">
<li>填写基本信息</li>
<li>绑定手机号</li>
<li>绑定邮箱</li>
<li>绑定银行账号</li>
<li>注册成功</li>
</ol>
</body>
</html>
6.无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
ul：无序列表
type="circle" -- 空心圆
type="disc" -- 实心圆
type="square" -- 实心方块
li：项
-->
<h3>进入游戏步骤：</h3>
<ul type="square">
<li>打开王者荣耀</li>
<li>挑选游戏模式</li>
<li>开始游戏</li>
<li>挑选英雄</li>
<li>开始出击</li>
</ul>
</body>
</html>
7.定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
dl：定义列表
dt：列表标题
dd：列表内容
-->
<dl>
<dt>
<img src="../img/呆萌小猪.png" width="10%"/><span>呆萌小猪</span>
</dt>
<dd>
<p>2000年出生于地球 </p>
<p>2岁上幼儿园，5岁上小学，11岁上初中，14岁上高中，17岁上大学</p>
<p>22岁毕业于xxx大学</p>
</dd>
</dl>
</body>
</html>
列表案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>
<h3>荤菜</h3>
<ol>
<li>回锅肉</li>
<li>农家小炒</li>
<li>红烧狮子头</li>
<li>糖醋排骨</li>
</ol>
</li>
<li>
<h3>素菜</h3>
<ol>
<li>土豆炒洋芋</li>
<li>番茄炒西红柿</li>
<li>玉米炒包谷</li>
<li>菌子炒蘑菇</li>
</ol>
</li>
<li>
<h3>汤类</h3>
<ol>
<li>三鲜汤</li>
<li>酸菜豆米汤</li>
<li>紫菜蛋花汤</li>
</ol>
</li>
</ul>
</body>
</html>
8.超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
a：超链接
href="资源地址"
target="_self" -- 本卡页中跳转
target="_blank" - 新增卡页中跳转
-->
<a href="08_列表案例.html" target="_self">跳转到本地页面</a>
<br />
<a href="../index.html" target="_self">跳转到本地其他目录页面</a>
<br />
<a href="http://www.baidu.com" target="_blank">跳转到百度页面</a>
<br />
<a href="07_定义列表.html" target="_blank">
<img src="../img/呆萌小猪.png" width="10%" />
</a>
</body>
</html>
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
Target属性：
_blank：在新窗口中打开被链接文档。
_self：默认。在相同的框架中打开被链接文档。
_top：在整个窗口中打开被链接文档。
_parent：在父框架集中打开被链接文档
9.瞄点超链接
● 掌握name属性，创建锚链接
● 在文档的某个位置，关联到该锚点查看 Chapter 4。
● 在文档的某个位置，设置锚点Chapter 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
锚链接
链接到锚点位置
-->
<a href="#new01">国际</a>
<a href="#new02">教育</a>
<a href="#new03">娱乐</a>
<a href="#new04">视频</a>
<a name="new01"></a><!--锚点-->
<h2>国际事件</h2>
<h2>国际事件</h2>
<h2>国际事件</h2>
<h2>国际事件</h2>
<h2>国际事件</h2>
<a name="new02"></a><!--锚点-->
<h2>教育通知</h2>
<h2>教育通知</h2>
<h2>教育通知</h2>
<h2>教育通知</h2>
<h2>教育通知</h2>
<h2>教育通知</h2>
<h2>教育通知</h2>
<a name="new03"></a><!--锚点-->
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<h2>娱乐新闻</h2>
<a name="new04"></a><!--锚点-->
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
<h2>腾讯视频</h2>
</body>
</html>
10.表格
表格由
● 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
● 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
完整的表格：
● cellspacing=“20px” ：规定单元格之间的空白
● cellpadding=“5px” ：规定单元格边沿与其内容的空白
● th：定义表头
● tr：行
● td：列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
table：表格标签
border="1" -- 有格子
tr -- 行
th -- 列（居中、加粗）
td -- 列（居左）
-->
<table border="1" width="50%">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘备</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>关羽</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>28</td>
</tr>
<tr>
<td>貂蝉</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
模拟计算器键盘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
rowspan="n" -- 占n行
colspan="n" - 占n列
-->
<table border="1" width="50%" height="300px">
<tr>
<th>C</th>
<th>-></th>
<th>+</th>
<th>-</th>
</tr>
<tr>
<th>7</th>
<th>8</th>
<th>9</th>
<th>*</th>
</tr>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
<th>/</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th rowspan="2">=</th>
</tr>
<tr>
<th colspan="2">0</th>
<th>.</th>
</tr>
</table>
</body>
</html>
11.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
用户名框：<input type="text" /><br />
密码框： <input type="password" /><br />
单选框：
<input type="radio" name="xxx"/>
<input type="radio" name="xxx" />
<input type="radio" name="xxx" />
<br />
多选框：
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<br />
上传文件：<input type="file" /><br />
下来链表：
<select>
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
<br />
<!--
required="required" -- 必填项
readonly="readonly" -- 只读
-->
<textarea cols="20" rows="5" required="required" readonly="readonly">
文本域
</textarea>
<br />
<!-- 将表单中的数据提交给服务器 -->
<input type="submit" value="提交按钮" /><br />
<!-- 将数据还原 -->
<input type="reset" value="重置按钮" /><br />
<!-- 点击普通按钮就会触发fun01函数 -->
<input type="button" value="普通按钮" onclick="fun01()"/><br />
<!-- 图片按钮和提交按钮的功能一样 -->
<input type="image" src="../img/呆萌小猪.png" width="20px" height="20px"/>
</form>
<script type="text/javascript">
function fun01(){
alert("送人玫瑰，手有余香");
}
</script>
</body>
</html>
优化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
action="服务器地址"
method="post" -- 请求方式
注意：表单必须有name属性才能将数据发送给服务器
placeholder="请输入账号" -- 默认显示
checked="checked" -- 单选框/多选框的默认选中
selected="selected" -- 下拉列表的默认选中
-->
<form action="服务器地址" method="post">
账号：<input name="username" type="text" placeholder="请输入账号" /><br />
密码：<input name="password" type="password" placeholder="请输入密码" /><br />
性别：
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
<br />
爱好：
<input type="checkbox" name="hobbys" value="football" />足球
<input type="checkbox" name="hobbys" value="basketball" />篮球
<input type="checkbox" name="hobbys" value="shop" />购物
<br />
籍贯：
<select name="province">
<option value="sc">四川</option>
<option value="gz" selected="selected">贵州</option>
<option value="sc">云南</option>
<option value="sc">广东</option>
<option value="sc">重庆</option>
</select>省
<select name="city">
<option value="gy">贵阳</option>
<option value="gy">毕节</option>
<option value="gy">六盘水</option>
<option value="gy">遵义</option>
<option value="gy">铜仁</option>
</select>市
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
三、HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
● 框架结构标签（）一般，我们习惯叫框架集
● 框架结构标签（）定义如何将窗口分割为框架
● 每个 frameset 定义了一系列行或列
● rows/cols 的值规定了每行或每列占据屏幕的面积
框架标签（Frame）
● Frame 标签定义了放置在每个框架中的 HTML 文档。
● 在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,80%">
<frame src="advertisement.html" noresize="noresize"/>
<frameset cols="30%,70%">
<frame src="goods_list.html" noresize="noresize"/>
<frame name="goods_info" src="man.html" noresize="noresize"/>
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="man.html" target="goods_info">男装</a><br />
<a href="woman.html" target="goods_info">女装</a><br />
<a href="child.html" target="goods_info">童装</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>广告栏</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>男装</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>女装</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>童装</h1>
</body>
</html>
基本的注意事项 - 有用的提示：
● 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=“noresize”。
● 为不支持框架的浏览器添加 标签。
● 重要提示：不能将 标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
四、HTML内联框架
● iframe 用于在网页内显示网页。
● 使用 iframe 作为链接的目标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.taobao.com" target="page">淘宝</a>
<iframe name="page" width="100%" height="400px"></iframe>
</body>
</html>
五、常见名词的解释
● WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。**W3C：**万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们后面学的html、css等标准都是由此机构主导制定。
● HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。
六、HTML5新特性
1.定义文档类型
在文件的开头总是会有一个标签
| 语言 | 文档类型声明方式 |
|---|---|
| html4 | |
| html5 |
2.新增表单内容
<form action="#" method="post">
日期选择器：<input type="date"/><br/>
时间选择器：<input type="time"/><br/>
邮箱输入框：<input type="email"/><br/>
数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
URL输入框： <input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="谷歌" value="http://www.google.com" />
<option label="百度一下" value="http://www.baidu.com" />
</datalist><br/>
<input type="submit" value="提交"/>
</form>
© 著作权归作者所有
举报
发表评论
0/200
