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

忘是亡心i 2022-12-22 09:28 120阅读 0赞

### 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发展史 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]

## 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>

有起始跟结束标签叫对标签，还有没有元素内容，直接开始就闭合的标签叫单标签。

## 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 注释 ##

# 二、常用标签 #

#### h ####

标题标签，游览器默认表现为独占一行、有段落间隙。一共分为6级标签，h1到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 ####

水平线标签。可以在网页中显示一条水平分隔线。

可用属性`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`更具有语义化，推荐。

#### 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=""/>`

*  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`表示在新窗口中显示。
 *  功能性链接
    
        
        <a href="javascript:alert('点我干什么？')">click me</a>
        
        <a href="mailto:122564283@qq.com">发送邮件</a>
        
        <a href="tel:13112345678">拨打电话</a>
        
        <a href="a.rar">下载</a>
        
        <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)表示列表选项。

*  `start`表示起始序号
 *  `type`表示序号类型
 *  `reversed`表示是否是倒序

#### ul/li ####

`ul`( unordered list)无序列表，`li`(list item)表示列表选项。

*  `type`表示列表符号类型，值一般可为`disc`/`square`/`circle`。

#### dl/dt/dd ####

dl(define list)用来定义列表，dt（define list title）用于生成定义列表中各列表项的标题，dd（define list define）用于生成定义列表各列表项的说明文字段，dd是对应dt的简短说明或解释。

#### div ####

div是一个容器标签，可以用来装载其它元素。当然div也可以嵌套div。一般跟css结合一起完成布局的功能。

<div>
    	<p>我们是段落标签，被div包含在其中。</p>
    </div>

# 三、表格 #

表格具有简单通用，结构稳定的特点。

*  `<table>`表示表格标签，它由行`<tr>`跟列`<td>`的单元格组成。一个简单的表格结构。

<table >	
        
        <tr>
            
            <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`表示跨列

# 四、 表单 #

HTML中的表单是用户用来在客户端提交数据到后台。表单使用`<form>`标签，要提交的数据都要放入此form标签中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 1]

*  `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: <input type="url" name="url" />
        
        数量: <input type="number" name="num" max="100" min="0" step="1" />
        
        音量: <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效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 2]

### 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效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 3]

### 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效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 4]

### 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效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 5]

### 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效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 6]

### 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>)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a90a59233ab34c12bcdf439e60cdeb00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201119130337579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201119125043188.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201119125103513.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201119125111721.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201119125119638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201119125126994.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center