小饶学编程之JAVA SE第二部分——Web 前端基础：08HTML5-CSDN博客

本文链接：https://blog.csdn.net/weixin_46460843/article/details/109807940

一、初识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技术的互相兼容)，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

网址：https://www.w3.org

中国网址：https://www.chinaw3c.org

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 】，内核为Trident
- Mozilla FireFox 火狐【网景】,内核为Gecko
- Google Chrome 谷歌【Google 】，内核为Webkit/Blink
- Apple Safari 【苹果】，内核为Webkit
- Opera 欧朋【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="http://www.bailiban.com" target="_blank" >百里半</a>
```
- arget性值为_self表示在当前窗口显示。值为_blank表示在新窗口中显示。

功能性链接

<!-- 调用JS代码 -->
<a href="javascript:alert('点我干什么？')">click me</a>
<!-- 调用邮件客户端 -->
<a href="mailto:122564283@qq.com">发送邮件</a>
<!-- 调用拨号功能 -->
<a href="tel:13112345678">拨打电话</a>
<!-- 调用压缩文件下载 -->
<a href="a.rar">下载</a>
<!-- 打开QQ聊天窗口，链接生成地址https://shang.qq.com/v3/widget.html -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=122564283&site=qq&menu=yes">
			<img border="0" src="http://wpa.qq.com/pa?p=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/right
- valign表示单元格内容在竖直方向上的对齐方式，值有top/middle/bottom
- tr上可以设置高度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属性默认值为text
- value表示文本框的初始内容
- 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表示默认选中此多选框。

按钮
```
<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">  &nbsp;</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">  &nbsp;</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">  &nbsp;</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="https://www.baidu.com/" target="_blank"><img src="img/logo-80px.gif" >百度一下</a></li>
			<li><a href="https://www.sogou.com/"><img src="img/sogou_union_a1.gif" >搜狗搜索</a></li>
			<li><a href="https://www.google.cn/"><img src="img/Logo_25wht.gif" >谷歌搜索</a></li>
			<li><a href="https://www.so.com/"><img src="img/t01b5a8f44b7454cc03.png" >360搜索</a></li>
			<li><a href="https://www.yahoo.com/"><img src="img/oms_001.gif" >雅虎搜索</a></li>
			<li><a href="http://www.soso.com/"><img src="img/logo_s.gif" >腾讯搜索</a></li>
			<li><a href="http://yyzai.com/"><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 】，内核为Trident
Mozilla FireFox 火狐【网景】,内核为Gecko
Google Chrome 谷歌【Google 】，内核为Webkit->Blink
Apple Safari 【苹果】，内核为Webkit
Opera 欧朋【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

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扩展

四、表单