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开发工具来编写
文本标签文章源自JAVA秀-https://www.javaxiu.com/310.html
格式：<font 属性名1="属性值1" 属性名2="属性值2" ...>内容</font> 属性: size: 设置字体大小 1最小 7最大 color: 设置字体颜色 可以使用英文设置 red 也可以使用光的三原色设置 #0000FF face: 设置字体属性
排版标签文章源自JAVA秀-https://www.javaxiu.com/310.html
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:标签和标签之间可以互相嵌套，但是不能瞎嵌套
案例-制作公司介绍页面
需求：使用已经学习的标签，制作公司介绍的页面文章源自JAVA秀-https://www.javaxiu.com/310.html
代码实现： <!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></p> <p>公司</p> <p>公司</p> <p>公司</p> <hr color="#FFA500"/> </body> </html>
超链接标签文章源自JAVA秀-https://www.javaxiu.com/310.html
格式: <a 属性名=“属性值”>内容</a> 属性： href:代表要跳转的路径 （核心） 1 跳转到互联网地址 2 跳转到当前页面 #(页面不刷新)或""(页面会刷新) 3 跳转到本地文件地址 4 打开发邮件的客户端，给指定邮箱发邮件。mailto: 邮箱地址 target：打开方式 取值: _blank:新建窗口打开 _self：在自身窗口打开(默认) title：鼠标移上去以后显示提示信息
列表标签 可以将数据展示成列表的结构文章源自JAVA秀-https://www.javaxiu.com/310.html
格式一：有序列表标签 <ol> <li></li> ..... </ol> 属性：type 1 默认使用数字序列 a,A 使用字母序列 i,I 罗马数字 格式二：无序列表标签 <ul> <li></li> ..... </ul> 属性：type disc ● 默认 square ■ circle ○
图片标签文章源自JAVA秀-https://www.javaxiu.com/310.html
格式:<img /> 属性: src: 将指定的图片地址引入到html文件页面中 （核心） width: 设置图片的宽度 height: 设置图片的高度 title: 鼠标移上去出现提示信息 alt: 图片找不到的提示功能
内联标签和块标签文章源自JAVA秀-https://www.javaxiu.com/310.html
我们写了这么多，发现有些标签可以换行 有些标签不能换行 内联标签：所有的标签内容都在一行 font b u i... 块标签：标签内容和标签内容之间会自动折行 hr p hn.. <div> <span> 单独使用没有任何意义 这2个标签要结合css一起使用才能出现效果
表格标签(重要) 可以使页面的数据展示起来更加的规范和美观文章源自JAVA秀-https://www.javaxiu.com/310.html
格式：<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 表示表格的脚部(了解)
标签总结：文章源自JAVA秀-https://www.javaxiu.com/310.html
文本标签： <font> 排版标签： <hn> <br> <hr> <b> <i> <u> <p> 超链接: <a> 属性：href 图片标签： <img> 属性：src 列表标签： <ol>有序 <ul>无序 <ol><li>内容</li></ol> 表格标签：<table><tr><td></td></tr></table> 合并单元
案例-制作旅游网首页页面
需求：使用今天学习的标签，制作如下的旅游网的页面文章源自JAVA秀-https://www.javaxiu.com/310.html
代码实现文章源自JAVA秀-https://www.javaxiu.com/310.html
<!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>文章源自JAVA秀-https://www.javaxiu.com/310.html继续阅读
速蛙云 - 极致体验，强烈推荐！！！购买套餐就免费送各大视频网站会员！快速稳定、独家福利社、流媒体稳定解锁！速度快，全球上网、视频、游戏加速、独立IP均支持！基础套餐性价比很高！这里不多说，我一直正在使用，推荐购买：https://www.javaxiu.com/59919.html
资源分享QQ群
本站是JAVA秀团队的技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默！
评论