html5概述
超文本标记语言(hyper text markup language)
超文本：有着比文本更加强大的功能 普通文本只能书写文字
超文本可以书写文字 图片 视频 超链接等等超出文本的功能范畴
标记语言：由内置标签去描述的一门语言
后缀名以 *.html 或 *.htm结尾
作用
作用:用来制作各种各样的网页展示内容的
html语法规范
1 html文件里面的结构是由头标签和体标签组成 头部分（HEAD） 体部分（body)
2 html标签是不区分大小写的
3 html标签是由开始标签和结束标签组成 <font>内容</font>
有主体内容的方式（双标签） <font>内容</font>
没有主体内容的方式（单标签） <hr />
4 html标签中可以设置属性 <font 属性名1=“属性值1” 属性名2=“属性值2”>内容</font>
html的入门程序
<html>
<head>
<title>这是标题</title>
</head>
<!--我是html的注释 可以用来做提示-->
<!--bgcolor:是标签的属性 用来设置网页的背景色-->
<body bgcolor="red">
这里是正文
</body>
</html>
html标签 是网页的根标签 有且只能有一个,所有内容都要放在这个根标签下
head标签 网页的头部 用来设置网页标题的
body标签 网页的主体 网页的内容主要写在主体中 可用展示
<!--注释--> 功能与Java中的注释一样，可以出现多次可以出现任何地方
浏览器查看时不显示，右键查看源码可以看到
html的内置标签演示（重要） 使用iead开发工具来编写
文本标签
格式：<font 属性名1="属性值1" 属性名2="属性值2" ...>内容</font>
属性:
size: 设置字体大小 1最小 7最大
color: 设置字体颜色 可以使用英文设置 red 也可以使用光的三原色设置 #0000FF
face: 设置字体属性
排版标签
1 标题标签 格式：<hn></hn> n代表1~6 1最大,6最小 会自动换行
属性：
align:对齐的方式 取值：left:左(默认) center:居中 right:右
2 水平线标签 格式：<hr/>
属性：
width: 宽度
size: 粗细
color: 颜色
align:对齐的方式 取值：left:左 center:居中(默认) right:右
3 换行标签 格式：<br />
4 加粗标签 格式：<b>内容</b>
5 斜体标签 格式：<i>内容</i>
6 下划线标签 格式：<u>内容</u>
7 段落标签 格式：<p>内容<p/> 属性：title 如果鼠标移动到段落上，会出现提示文字
ps:标签和标签之间可以互相嵌套，但是不能瞎嵌套
案例-制作公司介绍页面
需求：使用已经学习的标签，制作公司介绍的页面
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公司介绍案例</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="#FFA500"/>
<!--空格是用特殊符号来控制的： 代表一个空格-->
<p> <font color="red">“中关村黑马程序员训练营”</font>是由<i><b>传智播客</b></i>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。 目前，<u><b>“中关村黑马程序员训练营”</b></u>已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。</p>
<p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>
<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
<hr color="#FFA500"/>
</body>
</html>
超链接标签
格式: <a 属性名=“属性值”>内容</a>
属性：
href:代表要跳转的路径 （核心）
1 跳转到互联网地址
2 跳转到当前页面 #(页面不刷新)或""(页面会刷新)
3 跳转到本地文件地址
4 打开发邮件的客户端，给指定邮箱发邮件。mailto: 邮箱地址
target：打开方式 取值: _blank:新建窗口打开 _self：在自身窗口打开(默认)
title：鼠标移上去以后显示提示信息
列表标签 可以将数据展示成列表的结构
格式一：有序列表标签
<ol>
<li></li>
.....
</ol>
属性：type 1 默认使用数字序列 a,A 使用字母序列 i,I 罗马数字
格式二：无序列表标签
<ul>
<li></li>
.....
</ul>
属性：type disc ● 默认 square ■ circle ○
图片标签
格式:<img />
属性:
src: 将指定的图片地址引入到html文件页面中 （核心）
width: 设置图片的宽度
height: 设置图片的高度
title: 鼠标移上去出现提示信息
alt: 图片找不到的提示功能
内联标签和块标签
我们写了这么多，发现有些标签可以换行 有些标签不能换行
内联标签：所有的标签内容都在一行 font b u i...
块标签：标签内容和标签内容之间会自动折行 hr p hn..
<div> <span> 单独使用没有任何意义 这2个标签要结合css一起使用才能出现效果
表格标签(重要) 可以使页面的数据展示起来更加的规范和美观
格式：<table><tr><td>内容</td></tr></table>
<table>：表示表格
<tr>：表示一行
<td>: 表示一列
属性: （重要）
border:边框 默认没有
width:宽度 可以设百分比占满整个屏幕
align:可以设置table tr td
例如：align=center table:整个表格居中 tr:一行的内容居中 td:单个单元格内容居中
单元格的属性：（重要）
rowspan 跨行
colspan 跨列
可选的：（了解）
设置单元格的属性：
一行一列代表一个单元格 整个表格是由多个单元格组成
cellspacing 设置单元格之间的间隔 默认2
cellpadding 设置单元格边框与文字之间距离
th:表示表头 默认居中加粗（可以没有）
caption:表示表格名称（可以没有）
thead 不显示任何的内容，在逻辑上将表格分成不同的部分，表示表格的头部(了解)
tbody 表示表格的主体，无论我们的代码中有没有tbody，在浏览器中都是存在的(了解)
tfoot 表示表格的脚部(了解)
标签总结：
文本标签： <font>
排版标签： <hn> <br> <hr> <b> <i> <u> <p>
超链接: <a> 属性：href
图片标签： <img> 属性：src
列表标签： <ol>有序 <ul>无序 <ol><li>内容</li></ol>
表格标签：<table><tr><td></td></tr></table> 合并单元
案例-制作旅游网首页页面
需求：使用今天学习的标签，制作如下的黑马旅游网的页面
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<img src="img/top_banner.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="img/logo.jpg" />
</td>
<td align="center">
<img src="img/search.png" width=60%"/>
</td>
<td>
<img src="img/hotel_tel.png" width="70%"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="orange">
<table width="100%">
<tr>
<td>
<a href="#" style="text-decoration:none">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">首页</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="img/banner_3.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<img src="img/icon_5.jpg" />黑马精选
<hr color="red"/>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="img/icon_6.jpg" />国内游
<hr color="red"/>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%">
<tr>
<td rowspan="2" width="40%">
<img src="img/guonei_1.jpg" width="100%"/>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
</tr>
<tr>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
<td>
<img src="img/jiangxuan_1.jpg" width="100%"/>
<p><font size="2">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<p><font color="red">¥998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="img/footer_service.png" width="100%"/>
</td>
</tr>
<tr>
<td bgcolor="orange">
<p align="center">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</p>
</td>
</tr>
</table>
</body>
</html>
扫一扫
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
