HTML5
A.基础
1）简介
HTML是Hyper Text Markup Language的缩写，意思是“超文本标记语言”
用它编写出的文档的文件扩展名是".html"或".htm"
它是可提供浏览器解释浏览的文件格式
可以通过记事本，写字板或者IDE工具来编写，本章使用记事本编写
2）标记
HTML标记两端有两个符号"<"和">"，这两个符号称为角括号
html标签通常是成对出现的：<html></html>，开始标记和结束标记
在他们之间的文本是元素内容，标记与大小写无关
标记可以拥有自己的属性，可以为页面上的HTML元素提供附加信息
3）特点
a.简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便
b.可扩展性：超级文本标记语言广泛应用带来了加强功能，增加标识符等要求
超级文本标记语言采取子类元素的方式，为系统扩展带来保证
c.平台无关性：超文本标记语言可以使用在广泛的平台上
4）html的文档结构
a.<html></html>
<html>标记用于html文件的最前面，用来表示html文件的开始
</html>标记用于html文件的最后面，用来表示html文件的结束
两个必须放在一起使用
b.<head></head>
构成html文件的头部部分，在此标记之间可以使用<title></title>等标记对
这些标记都是描述html文档相关信息的标记对，它们之间的内容是不会出现在浏览器中
两个标记必须同时使用
c.<body></body>
是html文档的主体部分，在此标记可以包括：
<p></p>，<h1></h1>，<br>等众多标记
他们所定义的文本，图片等将会在浏览器中显示出来
两个标记必须同时使用
在此演示一下
1.首先创建一个记事本文件，将其命名为"我的网页.html，"文件图标发生改变
要将后缀名显示出来，否则改动的只是文件名，后缀名还是.txt，图标不会变
2.以记事本形式打开，并编写
<!-- 这是注释， 与java中不同 --> <html> <!--这是文件的开始--> <!-- 这是文件的头部部分 --> <head> <!-- 这是文件的主题，一会观察出现地方 --> <title>我的网页——html的结构</title> </head> <!-- 这是文档的主体部分，显示网页的内容 --> <body> <!--这里将显示在网页上面--> HelloWorld! </body> </html>3.保存，并以浏览器形式打开
这就是一个最简单的网页
5）META标记
是html语言的head部分的一个辅助性的标记，他位于head和title之间，提供给用户不可见的信息
meta标记被用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie
可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字
还可以设置页面的自动刷新以及等级等等
<meta name = "Author" content = "作者">
<meta name = "Keywords" content = "关键字">
<meta name = "Description" content = "描述">
<!-- 这是注释， 与java中不同 --> <html> <!--这是文件的开始--> <!-- 这是文件的头部部分 --> <head> <!-- meta标记 --> <meta name = "Author" content = "初学者"> <meta name = "Keywords" content = "HelloWorld!"> <meta name = "Description" content = "这是HTML最基础的结构！"> <!-- 这是文件的主题 --> <title>我的网页——html的结构</title> </head> <!-- 这是文档的主体部分，显示网页的内容 --> <body> <!--这里将显示在网页上面--> HelloWorld! </body> </html>当然现在已经不用：因为百度搜索显示顺序已经不是谁的匹配度高在前，而是哪个网页给的钱多在前
B.基本标记
1）概述
可能各位已经发现了一个问题，我们已经在记事本里进行了排版
可为何通过浏览器查看就变了样子
那是因为浏览器不像word，可以识别Enter和空格键
所以不管你按多少次空格，浏览器都会当作没看见
因此，引入标记
2）常用的分隔标记
强制断行标记：<br>
<html> <head> <!-- 主题 --> <title>常用分隔标记</title> </head> <!--内容--> <body> <!-- 强制断行标记 <br> --> 天长地久有时尽，<br> 此恨绵绵无绝期。 </body> </html>
强制分段标记：<p></p>
<html> <head> <!-- 主题 --> <title>常用分隔标记</title> </head> <!--内容--> <body> <!-- 强制分段标记 <p></p> --> <p> 孙子曰：兵者，国之大事，死生之地，存亡之道，不可不察也！ </p> <p> 故经之以五事，校之以计，而索其情。 </p> </body> </html>
空格：
（空格属于特殊字符，直接写出来，发表文章后，浏览器会将代码中的 识别成" "，所以为了观察，涉及特殊字符的，都用截图来看代码）
3）排版的标记
a.文字的置左，置中，置右
刚刚我们演示了分段标记<p>，再加上一些简单的属性设定：align
就可以让文字置左，置右，置中
b.置中标记
<center></center>
c.保持原样
<pre></pre>
<html> <head> <!-- 主题 --> <title>排版标记</title> </head> <!--内容--> <body> <!-- 保持原样 --> <pre> 孙子曰：兵者，国之大事，死生之地，存亡之道， 不可不察也！ 故经之以五是，校之以计，而索其情，一曰道， 二曰天，三曰地，四曰将，五曰法！ </pre> </body> </html>
4）字体标记
a.标题标记
<h1></h1>
<html> <head> <!-- 主题 --> <title>标题标记</title> </head> <!--内容--> <body> <!-- 标题标记 --> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>
b.设置字体标记
<font size = "7" color = "red" face = "黑体">内容<font>
颜色标记：#ff0000红 #00ff00绿 #0000ff蓝 三原色 所以#ffffff白色
<html> <head> <!-- 主题 --> <title>设置字体标记</title> </head> <!--内容--> <body> <!-- 设置字体标记 --> <!-- HTML中字体最大为7号 --> <!-- 颜色可用英文单词，也可以用16进制数 --> <!-- 字体必须是系统内装好的字体 --> <font size = "7" color = "red" face = "楷体">我爱你中国！</font><br> <pre><font size = "5" color = "#000000" face = "宋体">我爱你中国！</font></pre> </body> </html>
c.字体变化标记
<b></b>：加粗
<i></i>：斜体
<u></u>：底线
<kbd><kbd>：用较小的固定宽度显示字体
<var></var>：用斜体等宽字体显示文字
<html> <head> <!-- 主题 --> <title>字体变化标记</title> </head> <!--内容--> <body> <!-- 字体变化标记 --> <p>我爱你中国！</p> <!-- 加粗 --> <p><b>我爱你中国！</b></p> <!-- 斜体 --> <p><i>我爱你中国！</i></p> <!-- 底线 --> <p><u>我爱你中国！</u></p> <!-- 用斜体等宽字体显示文字 --> <p><var>我爱你中国！</var></p> <!-- 用较小的固定宽度显示字体 --> <p><kbd>我爱你中国！</kbd></p> </body> </html>
5）其他字体变化标记
<s></s>：文字有删除线
<sup></sup>：上标
<sub></sub>：下标
<em></em>：强调字体
<strong></strong>：加强字体
<code></code>：代码
<big></big>：比默认字号大一号
<small></small>：比默认字号小一号
<html> <head> <!-- 主题 --> <title>字体变化标记</title> </head> <!--内容--> <body> <!-- 字体变化标记 --> <p>3<sup>2</sup></p> <!-- 上标 --> <p>CO<sub>2</sub></p> <!-- 下标 --> <p><em>我爱你中国！</em></p> <!-- 强调字体 --> <p><strong>我爱你中国！</strong></p> <!-- 加强字体 --> <p><big>我爱你中国！</big></p> <!-- 比默认字号大一号 --> <p><small>我爱你中国1</small></p> <!-- 比默认字号小一号 --> <p><code>System.out.println("Hello World!")</code></p> <!-- 代码 --> </body> </html>
6）背景标记
a.设置背景颜色
<body bgcolor = "red"></body>
<html> <head> <!-- 主题 --> <title>设置背景</title> </head> <!--内容--> <body bgcolor = "#ffff00"> </body> </html>b.摄者背景图片
<body backfround></body>
路径如果没有盘符，就是 相对路径：当前文件所在的位置<html> <head> <!-- 主题 --> <title>设置背景</title> </head> <!--内容--> <body background = "mn.jpg"> </body> </html>
7）分割线
<hr>：上下分隔
<html> <head> <!-- 主题 --> <title>分割线</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <p>我爱你中国</p> <p>我爱你中国</p> <p>我爱你中国</p> <p>我爱你中国</p> <!-- 分割线 --> <hr> </body> </html>
设置分割线属性(color size width align)
<html> <head> <!-- 主题 --> <title>分割线</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <p>我爱你中国</p> <p>我爱你中国</p> <p>我爱你中国</p> <p>我爱你中国</p> <!-- 分割线 --> <hr color = "red" size = "10px" width = "300px" align = "center" ;/> </body> </html>
去除阴影<hr noshade>
8）img标记
<img src = "图片路径"><img>
设置图片属性
<html> <head> <!-- 主题 --> <title>图片</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <!-- 插入图片 --> <center> <!-- title：将鼠标悬停在图片上，提示的信息 --> <!-- alt：图片路径错误，提示的信息 --> <!-- border：图片的边框 --> <img src = "gyy.jpg" width = "200px" height = "200px" border = "1px" alt = "图片加载失败" align = "center" title = "高圆圆"></img> </center> </body> </html>
9）序列标记
a.有序列表<ol></ol>
<html> <head> <!-- 主题 --> <title>有序列表</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <!-- 有序号的列表标签 type = 序号类型，默认数字 start从几开始 类型可以有 a A 1 II --> <ol> <li>第一</li> <li>第二</li> <li>第三</li> </ol> <ol type = "1" start = "2"> <li>第一</li> <li>第二</li> <li>第三</li> </ol> <ol type = "a" start = "a"> <li>第一</li> <li>第二</li> <li>第三</li> </ol> <ol type = "I" start = "I"> <li>第一</li> <li>第二</li> <li>第三</li> </ol> </body> </html>
b.无序列表<li></li>
<html> <head> <!-- 主题 --> <title>无序列表</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <!-- 列表前面是几何图形 type默认实心圆disk --> <ul> <li>第一</li> <li>第二</li> <li>第三</li> </ul> <ul type = "circle"> <li>第一</li> <li>第二</li> <li>第三</li> </ul> <ul type = "square"> <li>第一</li> <li>第二</li> <li>第三</li> </ul> </body> </html>
c.自定义列表<dl></dl>
<html> <head> <!-- 主题 --> <title>自定义列表</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <!-- 自定义列表 --> <dl> <dt>什么是自定义列表？ <dd>这就是自定义列表 <dt>这是什么？ <dd>这是自定义列表 </dl> </body> </html>
10）特殊字符
html中有很多特殊的字符号是需要特殊处理的
<：<
>：>
&：&
" ："
11）超链接
<a></a>
<html> <head> <!-- 主题 --> <title>超链接</title> </head> <!--内容--> <body bgcolor = "#ffffff"> <!-- href 要跳转到路径，可以是文件，也可以是网页 --> <!-- target _blank新窗口打开 >self自身窗口打开 --> <a href = "http://www.baidu.com" target = "_self">进入百度，自身窗口打开</a><br> <a href = "http://www.baidu.com" target = "_blank">进入百度，新窗口打开</a> </body> </html>
12）表格标签
表格标签:table
行的标签:tr
单元格:可以理解为列,td
表格的标题:caption
表头:th标签:表头自动加粗,并且自动居中
合并单元格:
rowspan:行的合并
colspan:列的合并
一个表格要想能显示出来,就必须指定边框属性
border:边框
width:表格的宽度
heigth:表格的高度
align:对齐的方式 left center right
背景颜色:bgcolor
结果<body> <table border="1px" width="400px" height="300px" align="center" bgcolor="pink"> <caption style="color: #F00">2017年学生成绩表</caption> <tr> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> <tr align="center"> <td rowspan="2">张三</td> <td>软工1班</td> <td>90</td> </tr> <tr align="center"> <td>经济1班</td> <td>80</td> </tr> <tr align="center"> <td>李四</td> <td>计算机2班</td> <td>98</td> </tr> <tr align="center"> <td>王五</td> <td>通信1班</td> <td>85</td> </tr> <tr align="center"> <td colspan="2">平均分</td> <td>80</td> </tr> </table> </body>
13）表单标签
关于表单标签
1.form表单标签
常用属性：
action：表示提交的地址：如果是本地：#
method：提交的方式
a.get：
1)会将用户的信息:用户名或者用户密码显示到地址栏
2)使用该方式进行提交:那么文件大小是有限制的:不超过lKB
3)只适合简单的文件
b.post：
1)不会将用户的信息显示到地址栏:比较安全
2)该方式提交的文件大小是没有限制的!
name：用来到后台进行标记：表示当前这个是一个表单标签，并且作为标识
<body> <form action="#" method="post" name="formlist"> <input type="text" name="username" value="8~16位是数字或者是字母组成" size="35" /> <input type="password" name="password" size="30" /><br/> <input type="submit" value="提交" /> </form> </body>
2.form表单标签，有哪些表单项
<input type ="text"/> 文本输入框
<input type = "password"/>密码输入框
<input type ="radio"/>单选框
<input type="chackbox"/>复选框
<input type="hidden"/>隐藏域,不会显示在浏览器中,但是会携带数据
<select name="必填项">下拉菜单
<option value="必填"></option> 菜单选项
</select>
<input type = "file" name="必填"/>上传文件
<textare> 文本域:比如:自我介绍:自我描述.. </textarea>
<input type ="button" />一个按钮,必须指定value
<input type = "reset" /> 重置
<inpyt type = "submit"/>提交,一般情况要给定value属性
<body> <form action="#" method="post" name="formlist"> <!-- 不管是文本输入框还是密码输入框里必须写name属性：提交到后台进行标记 --> <input type="text" name="username" value="8~16位数字或者密码组成" size="30"/><br/> <input type="password" name="pwd" value="6~15位字母组成" size="25" /><br /> <!-- 单选框 1)把选项看成是同一组，那么必须指定的name属性为同一个名称，在选择的时候就可以让服务器知道选择了是什么 2)value属性必填的:标记到后台服务器中 --> 性别：<input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女<br/> <!-- 复选框: 1)把选项看成是同一组,那么必须指定的name属性为同一个名称,在选择的时候就可以让服务器 2)value属性必填的:标记到后台服务器中 --> 爱好：<input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="LOL"/>LOL <input type="checkbox" name="hobby" value="看电影"/>看电影<br/> <!--select:下拉菜单:必填的属性:name属性:后台服务器要进行识别,所有需要标记--> 籍贯：<select name="place"> <option value="请选择">请选择</option> <option value="西安">西安</option> <option value="郑州">郑州</option> <option value="武汉">武汉</option> <option value="兰州">兰州</option> </select><br/> <!-- 上传文件:name属性:后台服务器要识别,需要标记--> 上传图片：<input type="file" name="photo" /><br/> <!-- 隐藏域:hidden:不会显示在浏览器,会携带数据:name属性--> <input type="hidden" name="en" value="隐藏域" /><br/> <!-- 文本域 rows:当前文本域中可以填写多少行 cols:表示每一行中有多个字符 --> 自我评价： <textarea rows="5" cols="20">老子天下第一！</textarea><br/> <!--表示一个按钮:但是必须指定默认值,用户体验不好--> <input type="button" value="按钮" /><br/> <input type="reset" /> <input type="submit" value="提交" /> </form> </body>
3.做一个格式优雅的用户注册表单
<body> <form> <div> <center> <font color="#F00" size="7">用户注册</font> </center> </div> <table border="1px" align="center"> <tr> <td>用户名</td> <td><input type="text" name="username" value="4~14位数字或者字母" size="20" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd" value="123456" size="15"/></td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="LOL" />LOL <input type="checkbox" name="hobby" value="看电影" />看电影 </td> </tr> <tr> <td>学历</td> <td> <select name="edu"> <option value="请选择">请选择</option> <option value="高中">高中</option> <option value="大专">大专</option> <option value="本科">本科</option> <option value="说是">硕士</option> </select> </td> </tr> <tr> <td>上传照片</td> <td> <input type="file" name="photo" /> </td> </tr> <tr> <td>自我描述</td> <td> <textarea rows="5" cols="20">老子天下第一</textarea> </td> </tr> <tr align="center"> <td colspan="2"> <input type="button" value="注册" /> <input type="reset" value="重置" /> </td> </tr> </table> </form> </body>
14）框架标签
1.frameset:出现两个或两个以上的html页面的时候需要使用该标签:框架集
rows:按行分的每一个页面所占的百分比或者是长度
cols:按列分:就是从左往右看的时候,分为两部分:左边菜单,中间页面
frameset里面包含的每一个frame标签,并且frameset标签不能和body标签共存,否则无法显示
2.iframe：画中画
常用的属性;
scrolling:滚动条:auto yes no
wideth:宽度
height:高度
src:表示链接到的资源地址或者文件
frmaeborder:是否添画中画加边框
<iframe scrolling="auto" src="格式优雅的表单.html" width="400px" height="400px" frameborder="1"></iframe>
15）关于HTML5
对于Java后台来说，HTML5和CSS了解就行
一般网页设计都由专门的前端人员来完成
后台开发人员，只需要熟悉会用，偶尔做一些简单的界面
HTML5都是些静态的标签，在实际开发中都是结合CSS3使用
在开发中，HTML5只是给出一个标签，而具体的属性都由CSS3来设定
因此，HTML5中的其他标签：表格，表单，框架，多媒体等标签
在此就不详细介绍，在介绍CSS3中，遇到以上标签的时候，再详细介绍
相对于Java开发的逻辑性而言，HTML,CSS都是些记忆性的东西
在开发时，可通过查看W3School文档来学习并使用
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
