第二部分——Web 前端基础：08HTML5"/>
小饶学编程之JAVA SE第二部分——Web 前端基础：08HTML5
HTML5
- 一、初识HTML
- 1.1 什么是HTML
- 1.2 HTML发展史
- 1.3 W3C
- 1.4 W3C标准
- 1.5 浏览器
- 1.6 元素
- 1.7 属性
- 1.8 基本结构
- 1.9 注释
- 二、常用标签
- h
- p
- hr
- strong/b
- em/i
- u
- del/s
- br
- font
- span
- pre
- img
- center
- 特殊符号
- a
- ol/li
- ul/li
- dl/dt/dd
- div
- 三、表格
- 四、 表单
- 五、案例
- 5.1案例一
- 5.1.1效果
- 5.1.2代码
- 5.2案例二
- 5.2.1效果
- 5.2.2代码
- 5.3案例三
- 5.3.1效果
- 5.3.2代码
- 5.4案例四
- 5.4.1效果
- 5.4.2代码
- 5.5案例五
- 5.5.1效果
- 5.5.2代码
- 六、总结
- 6.1 W3C标准
- 6.2 五大浏览器、四大内核
- 6.3表单中get和post的区别
- 6.4扩展
一、初识HTML
1.1 什么是HTML
HTML（Hyper Text Markup Language），超文本标记语言。
超文本：文字、图片、音频、视频、动画等。
1.2 HTML发展史
1.3 W3C
W3C: （World Wide Web Consortium）万维网联盟，又称W3C理事会，创建于1994年，国际最著名的标准化组织。是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言HTML（标准通用标记语言下的一个应用）、可扩展标记语言 XML（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web信息的无障碍指南（WCAG）等，有效促进了Web技术的互相兼容)，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
网址：
中国网址：
1.4 W3C标准
- 结构(Structure)化标准语言（HTML、XML）
- 表现(Presentation)标准语言（CSS）
- 行为(Behavior)标准（JAVASCRIPT）
1.5 浏览器
浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。
浏览器由外壳（Shell）跟内核（core）组成，而内核又由渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎组成。浏览器最重要的部分是浏览器的内核。
- 五大浏览器以及四大内核
Microsoft Internet Explorer IE 【Microsoft 】，内核为TridentMozilla FireFox 火狐 【网景】,内核为GeckoGoogle Chrome 谷歌 【Google 】，内核为Webkit/BlinkApple Safari 【苹果】，内核为WebkitOpera 欧朋 【Opera】,内核为Presto/webkit/Blink
1.6 元素
HTML规范是W3C制定的，开发者只要按照规范来开发HTML代码，就能在游览器中得到正确的显示。HTML语法中是基于元素的，也叫标签或者标记。
元素 = 起始标记（begin tag） + 元素内容 + 元素属性 + 结束标记(end tag)。
<h1 align="center">welcome to bailiban.</h1>
有起始跟结束标签叫对标签，还有没有元素内容，直接开始就闭合的标签叫单标签。
<br/>
<meta charset="utf-8" />
1.7 属性
属性部分写在起始标签内部，用来对标签进行补充跟描述的。一般分为局部属性跟全局属性。属性的样式效果底层都是通过CSS实现的。
- 局部属性：某些元素独有的属性。
- 全局属性【通用属性/标准属性】：所有标签都具备的属性。
id：给元素取ID。ID值不要重复。title：鼠标悬停显示的文本内容。class：定义元素的类选择器。style：定义元素的行内样式。
1.8 基本结构
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title></title></head><body></body>
</html>
<!DOCTYPE html>表示告诉游览器我们遵循什么规范，不写默认这个，表示H5规范。html是根标签，所有内容都写在里面。<head>标签表示网页头部信息。<meta>标签表示描述信息，描述网页信息给游览器识别。<title>标签表示网页标题信息。<body>标签表示网页主题部分。
1.9 注释
<!-- HTML中的注释 -->
二、常用标签
h
标题标签，游览器默认表现为独占一行、有段落间隙。一共分为6级标签，h1到h6。
<h1 align="center">一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>
常用属性有align，用来控制标题在水平方向上的对齐方式，值有left/center/right，分别表示居左/居中/居右对齐。
p
<p> 标签定义段落。p 元素会自动在其前后创建一些空白。P标签也有align属性，表示水平对齐方式。
<p>welcome to bailiban . </p><p>welcome to bailiban . </p><p>welcome to bailiban . </p>
hr
水平线标签。可以在网页中显示一条水平分隔线。
<hr />
<hr align="right" color="red" width="50%" size="10" />
可用属性align表示水平对齐方式，color设置颜色，width设置宽度,size表示线条粗细。
strong/b
strong标签跟b标签都是表示粗体，strong更具有语义化，推荐。
<b>seven</b>
<strong>seven</strong>
em/i
em标签跟i标签都是表示斜体，em更具有语义化，推荐。
<em>seven</em>
<i>seven</i>
u
下划线。
<u>bailiban</u>
del/s
del标签跟s标签删除标签,del更具有语义化，推荐。
<del>原价999.99</del>
<s>原价999.99</s>
br
br标签表示换行,它是一个单标签，自闭合。
<br/>
font
字体标签，设置文本字体属性。
<font size="3" color="#FF0000" face="微软雅黑 华文行楷">大家好，欢迎大家来到百里半学习。</font>
-
可用属性有
size表示字符大小，范围1到7； -
color设置文本颜色， -
face设置文本字体，可设置多个，默认从前往后，需要系统存在此字体文件才可正常显示。
span
无语义。
<span>hello.</span>
pre
预格式化文本元素，内部文本保留原样，空白不会被折叠。
空白折叠：在源代码中的连续空白字符（空格，换行，制表符），会被折叠为一个空格。
<pre>大家好， 欢迎大家来到百里半学习。希望大家能找到一个 好的工作。</pre>
img
图片标签，往网页中插入图片。
<img src="资源路径" alt="当图片无法展示时候的替代文字" title="全局属性" width="宽度 px 或者 %" height=""/>
<img src="img/a.PNG" alt="美丽风景" title="美丽风景" width="400" height="200"/>
- src属性设置图片的资源路径。
- alt属性设置图片无法显示时的文本提示。
- title属性设置当鼠标悬停时的文本提示。
- width/height设置图片的宽度跟高度，单位默认像素px可省略，也可使用百分比的形式。
- img标签有align属性，但并不表示水平对齐方式，
- 如果要水平对齐的效果：
①可通过p标签嵌套
②直接使用center标签。
center
可直接将标签内部元素设置到水平居中的位置。
<center>seven</center>
特殊符号
用于页面上特殊符号的显示。常用的特殊符号如下：
-
表示空格 -
>表示大于符号> -
>表示小于符号< -
©表示版权符号 -
¥表示人民币符号
a
超链接，主要用于页面跳转。
<a href="目标页面位置" target="目标窗口位置" > 链接的文本或者图片 </a>
-
页面跳转
<a href="" target="_blank" >百里半</a>arget性值为_self表示在当前窗口显示。值为_blank表示在新窗口中显示。
-
功能性链接
<!-- 调用JS代码 --> <a href="javascript:alert('点我干什么？')">click me</a> <!-- 调用邮件客户端 --> <a href="mailto:122564283@qq">发送邮件</a> <!-- 调用拨号功能 --> <a href="tel:13112345678">拨打电话</a> <!-- 调用压缩文件下载 --> <a href="a.rar">下载</a> <!-- 打开QQ聊天窗口，链接生成地址.html --> <a target="_blank" href="=3&uin=122564283&site=qq&menu=yes"><img border="0" src="=2:122564283:52" alt="你好，加我领取学习资料" title="你好，加我领取学习资料"/> </a> -
锚点
在网页的任意位置做记号，可以从其它位置跳转到该记号位置。
<span id="top">顶部</span>……<a href="#top" >回到顶部 </a>还可以在其它页面直接定位到此页面的某个锚点处。
<a href="a.html#top" >回到顶部 </a>
ol/li
ol(order list)有序列表，li(list item)表示列表选项。
<ol start="10" type="1" reversed="reversed" ><li>武庚纪</li><li>斗罗大陆</li><li>盘龙</li></ol>
start表示起始序号type表示序号类型reversed表示是否是倒序
ul/li
ul( unordered list)无序列表，li(list item)表示列表选项。
<ul type="disc" ><li>武庚纪</li><li>斗罗大陆</li><li>盘龙</li></ul>
type表示列表符号类型，值一般可为disc/square/circle。
dl/dt/dd
dl(define list)用来定义列表，dt（define list title）用于生成定义列表中各列表项的标题，dd（define list define）用于生成定义列表各列表项的说明文字段，dd是对应dt的简短说明或解释。
<dl><dt>标题标题</dt><dd>内容内容</dd><dd>内容内容</dd>
</dl><dl><dd><img src="图片路径" alt="" /></dd><dt>图片标题</dt>
</dl><dl><dt>电影标题</dt><dd>主要演员：刘德华，周润发</dd><dd>影片长度：90分钟</dd><dd>内容介绍：……..</dd>
</dl>
div
div是一个容器标签，可以用来装载其它元素。当然div也可以嵌套div。一般跟css结合一起完成布局的功能。
<div><p>我们是段落标签，被div包含在其中。</p>
</div>
三、表格
表格具有简单通用，结构稳定的特点。
<table>表示表格标签，它由行<tr>跟列<td>的单元格组成。一个简单的表格结构。
<!-- 这是一个表格 -->
<table > <!-- 一个tr代表一行 --><tr><!-- 一个td代表一个单元格 --><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
table标签有一些常用属性border表示单元格边框粗细程度cellpadding表示边框跟单元格内容的间距cellspacing表示表框跟边框之间的间距距离align表示表格在网页中水平的对齐方式- width表示宽度，可以是像素，也可以是百分比
- height表示高度，单位像素
tr跟td标签上有一些常用属性align表示单元格内容在水平方向上的对齐方式，值有left/center/rightvalign表示单元格内容在竖直方向上的对齐方式，值有top/middle/bottomtr上可以设置高度height，td上可以设置宽度width- tr跟td上的定义如果有冲突采取就近原则
td上还有些常用属性rowspan表示跨行colspan表示跨列
<table border="1" width="300px" align="center" height="300px" cellpadding="0" cellspacing="0"><tr height="50%" align="right" valign="top"><td width="100px">1</td><td width="100px" align="center" valign="middle" >2</td><td width="100px">3</td></tr><tr><td rowspan="2">4</td><td>5</td><td>6</td></tr><tr> <td colspan="2">8</td> </tr> </table>四、 表单
HTML中的表单是用户用来在客户端提交数据到后台。表单使用<form>标签，要提交的数据都要放入此form标签中。
-
form表单<form aciton="url" method="get" ><!-- 此处放入要提交的表单数据 --></form>action属性表示此要提交的后台服务器的请求地址。method属性表示要提交的方式，值为get/post，get会将数据拼接在地址后面，不安全，高效。post会封装到请求体中，更加安全，可以传输文件等2进制数据。
-
文本框
用户名： <input name="user_name" type="text" value="seven" placeholder="请输入用户名" maxlength="6" />name属性是跟文本框起名字，只有设置此属性值才会将此字段的值提交到后台。type表示此input标签的类型，值为text表示文本框，type属性默认值为textvalue表示文本框的初始内容placeholder表示提示内容maxlength表示文本框的内容长度
-
密码框
密码：<input name="user_pwd" type="password" value="seven" placeholder="请输入用户密码" maxlength="6" />type属性值设置为password表示此输入框为密码框，内容以*号显示。- 其它属性同文本框
-
单选框
<input type="radio" value="boy" name="sex" /> 男 <input type="radio" value="girl" name="sex" checked="checked" /> 女-
type值为radio表示输入框类型为单选框。
-
要让多个单选框有互斥效果则必须将它们设置到一组中，即让他们有相同的name属性值
-
checked是让单选框默认选中。
-
-
多选框
<input type="checkbox" value="study" name="hobby" checked="checked"/> 学习 <input type="checkbox" value="game" name="hobby" /> 游戏 <input type="checkbox" value="girl" name="hobby" /> 女孩- 多选框的type属性值为
checkbox。 value属性值为提交的数据值。- 一组多选框的
name属性值必须相同。 checked表示默认选中此多选框。
- 多选框的type属性值为
-
按钮
<input type="button" value="点击我" />- 按钮组件需要将
type属性值设置为button。 value值为按钮上显示的文本。
- 按钮组件需要将
-
图片按钮
<input type="image" src="img/a.PNG" />- 图片按钮的
type值为image，点击图片可以提交表单。 src属性设置图片的url
- 图片按钮的
-
提交按钮
<input type="submit" value="登录" />- type属性值设置为submit表示提交按钮，具有提交表单数据的功能。
- value属性值为显示在按钮上的文本。
-
重置按钮
<input type="reset" value="重置" />type属性值为reset表示重置按钮，具有重置表单数据的功能。value属性值为显示在按钮上的文本。
-
下拉框
家乡：<select name="city"><option value="wuhan">武汉</option><option value="suizhou" selected="selected">随州</option><option value="xiangyang">襄阳</option><option value="xiaogan">孝感</option></select>name表示提交数据的key。option中的value表示选中后提交的属性值。selected表示默认选中此下拉框
-
文本域
自我介绍：<textarea name="introduce" cols="50" rows="10" maxlength="20" >这个家伙很懒，什么也没有留下...</textarea>name为数据提交的key。cols表示列数，rows表示行数。maxlength表示最大长度。
-
文件域
<input type="file" name="my_file" />type值为file表示为文件域。name为提交数据的key值。
-
其它
<!-- 邮箱验证 --> 邮箱：<input type="email" name="email" /> <!-- URL --> URL: <input type="url" name="url" /> <!-- 数字,max最大值，min最小值，step步增 --> 数量: <input type="number" name="num" max="100" min="0" step="1" /> <!-- 滑块，max最大值，min最小值，step步增 --> 音量: <input type="range" name="voice" min="0" max="100" step="2" /> <!-- 搜索 --> 搜索: <input type="search" name="search" /> <!-- 颜色 --> 颜色: <input type="color" name="color" value="#00ff00" /> <!-- 出生日期 --> 出生日期: <input type="datetime-local" name="birthday" /> <!-- 星期 --> 星期: <input type="week" name="week" />
五、案例
5.1案例一
5.1.1效果
5.1.2代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无标题文档</title></head><body><table border="1" cellspacing="0" cellpadding="0" align="center" width="600px"><tr align="center" valign="center" ><th colspan="5">价格表</th></tr><tr align="center" valign="center"><td colspan="2">型号</td><td>容量</td><td>价格</td><td>变化</td></tr><tr align="center" valign="center"><td rowspan="3"><img src="img/作业1.png" ></td><td rowspan="3">miniplayer</td><td>512MB</td><td>699元</td><td>-</td></tr><tr align="center" valign="center"><td>1GB</td><td>850元</td><td >-</td></tr><tr align="center" valign="center"><td>2GB</td><td>1099元</td><td>-100元</td></tr><tr align="center" valign="center"><td>备注</td><td colspan="4">AAA电池、FM、USB2.0</td></tr></table></body>
</html>5.2案例二
5.2.1效果
5.2.2代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="0" cellspacing="15px" cellpadding="0" align="center"><tr><td colspan="2" rowspan="2"><img src="img/1.jpg" ></td><td><img src="img/3.jpg" ></td><td><img src="img/4.jpg" ></td><td colspan="2"><img src="img/2.jpg" ></td></tr><tr><td><img src="img/5.jpg" ></td><td><img src="img/6.jpg" ></td><td><img src="img/7.jpg" ></td><td rowspan="2"><img src="img/13.png" ></td></tr><tr><td><img src="img/8.jpg" ></td><td><img src="img/9.jpg" ></td><td><img src="img/10.jpg" ></td><td><img src="img/11.jpg" ></td><td><img src="img/12.jpg" ></td></tr></table></body>
</html>5.3案例三
5.3.1效果
5.3.2代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">td {width: 130px;height: 30px;}</style></head><body style="background-color: #C7C7C7;"><table border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="white" ><tr bgcolor="#C7C7C7" ><caption colspan="5">个人简历</caption></tr><tr><td bgcolor="#F3F3F3" align="right">姓名：</td><td> </td><td bgcolor="#F3F3F3" align="right">年龄：</td><td> </td><td rowspan="4"> </td></tr><tr><td bgcolor="#F3F3F3" align="right">婚姻状况：</td><td> </td><td bgcolor="#F3F3F3" align="right">民族：</td><td> </td></tr><tr><td bgcolor="#F3F3F3" align="right">户口所在地：</td><td> </td><td bgcolor="#F3F3F3" align="right">身材：</td><td> </td></tr><tr><td bgcolor="#F3F3F3" align="right">目前所在地：</td><td> </td><td bgcolor="#F3F3F3" align="right">政治面貌：</td><td> </td></tr><tr > <td colspan="5"> </td></tr><tr><th bgcolor="#F3F3F3" align="left" colspan="5">求职意向及工作经历</th></tr><tr><td bgcolor="#F3F3F3" align="right">人才类型：</td><td colspan="4"> </td></tr><tr><td bgcolor="#F3F3F3" align="right">应聘职位：</td><td colspan="4"> </td></tr><tr><td bgcolor="#F3F3F3" align="right">工作年限：</td><td> </td><td colspan="2" bgcolor="#F3F3F3" align="right">职称：</td><td> </td></tr><tr><td bgcolor="#F3F3F3" align="right">求职类型：</td><td> </td><td colspan="2" bgcolor="#F3F3F3" align="right">可到职日期：</td><td> </td></tr><tr><td bgcolor="#F3F3F3" align="right">月薪要求：</td><td> </td><td colspan="2" bgcolor="#F3F3F3" align="right">希望工作地区：</td><td> </td></tr><tr height="90px"><td bgcolor="#F3F3F3" align="right" >个人工作经历：</td><td colspan="4">......<br><br>......</td></tr><tr > <td colspan="5"> </td></tr><tr><th bgcolor="#F3F3F3" align="left" colspan="5">教育背景</th></tr><tr><td bgcolor="#F3F3F3" align="right">毕业院校：</td><td colspan="4"> </td></tr><tr><td bgcolor="#F3F3F3" align="right">最高学历：</td><td> </td><td bgcolor="#F3F3F3" align="right">毕业日期：</td><td colspan="2" > </td></tr><tr><td bgcolor="#F3F3F3" align="right">所学专业一：</td><td> </td><td bgcolor="#F3F3F3" align="right">所学专业二：</td><td colspan="2" > </td></tr><tr height="90px"><td bgcolor="#F3F3F3" align="right" >受教育培训经历：</td><td colspan="4">......<br><br>......</td></tr><tr > <td colspan="5"> </td></tr></table></body>
</html>5.4案例四
5.4.1效果
5.4.2代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ol><li><a href="/" target="_blank"><img src="img/logo-80px.gif" >百度一下</a></li><li><a href="/"><img src="img/sogou_union_a1.gif" >搜狗搜索</a></li><li><a href="/"><img src="img/Logo_25wht.gif" >谷歌搜索</a></li><li><a href="/"><img src="img/t01b5a8f44b7454cc03.png" >360搜索</a></li><li><a href="/"><img src="img/oms_001.gif" >雅虎搜索</a></li><li><a href="/"><img src="img/logo_s.gif" >腾讯搜索</a></li><li><a href="/"><img src="img/logo_search.gif" >迅雷搜索</a></li></ol></body>
</html>5.5案例五
5.5.1效果
5.5.2代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>申请表</title></head><body style="background-color: #E7E7E7;"><form action="index.html" method="get"><table border="0" cellspacing="" cellpadding="0" ><caption>申请表</caption><tr><td>姓名</td><td><input type="text" name="name" /></td></tr><tr><td>性别</td><td><input type="radio" value="boy" name="sex" checked="checked" id="boy_input" /> <label for="boy_input">男</label>
<input type="radio" value="girl" name="sex" id="girl_input"/> <label for="girl_input">女</label></td></tr><tr><td>教育程度</td><td><input type="checkbox" name="edu" id="" value="zhuanke" />专科<input type="checkbox" name="edu" id="" value="benke"checked="checked" />本科<input type="checkbox" name="edu" id="" value="shuoshi" />硕士<input type="checkbox" name="edu" id="" value="bohsi" />博士</td></tr><tr><td>月薪</td><td><input type="" name="monthMoney" /></td></tr><tr><td>附注</td><td ><textarea rows="2" cols="" value="" style="resize:none;">请在这里输入附注</textarea></td></tr><tr><td>国籍</td><td><select><option value ="country">韩国</option><option value ="country" selected="selected">中国</option><option value ="country">美国</option><option value ="country">日本</option></select></td></tr><tr><td><button type="submit" >提交</button></td><td><input type="reset" name="" id="" value="重置" /></td></tr></table></form></body>
</html>六、总结
6.1 W3C标准
- 结构(Structure)化标准语言（HTML、XML）
- 表现(Presentation)标准语言（CSS）
- 行为(Behavior)标准（JAVASCRIPT）
6.2 五大浏览器、四大内核
Microsoft Internet Explorer IE 【Microsoft 】，内核为TridentMozilla FireFox 火狐 【网景】,内核为GeckoGoogle Chrome 谷歌 【Google 】，内核为Webkit->BlinkApple Safari 【苹果】，内核为WebkitOpera 欧朋 【Opera】,内核为Presto->webki->Blink
6.3表单中get和post的区别
method属性表示要提交的方式，值为get/post。
get：参数（数据）拼接在URL（地址）后面，只能传字符串。特点：不安全，高效。
post：会封装到请求体中，可以传输文件等2进制数据。特点：速度慢，更加安全。
6.4扩展
- HTML遵循html的语法，在浏览器显示的时候使用。
- HTML5是在2008年火起来的。
- 局部属性：某些元素独有的属性。
- 全局属性【通用属性/标准属性】：所有标签都具备的属性。
- 图片按钮和提交按钮都具有提交表单数据的功能。
- 设置textarea不可拖动
<textarea style="resize:none;"></textarea>)
更多推荐
小饶学编程之JAVA SE第二部分——Web 前端基础：08HTML5
发布评论