[Web基础]-HTML

holic-x...大约 24 分钟

[Web基础]-HTML

网页的构成

HTML：通常用来定义网页内容的含义和基本结构
CSS：通常用来描述网页的表现与展示效果
JavaScript：通常用来执行网页的功能与行为

1.基本概念

❓什么是html？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

❓html标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 html
HTML 标签通常是成对出现的，比如 b 和 /b
标签对中的第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）

html文档=网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示内容。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

html 与 /html 之间的文本描述网页

body 与 /body 之间的文本是可见的页面内容

h1 与 /h1 之间的文本被显示为标题

p 与 /p 之间的文本被显示为段落

2.html语法

【1】html解析

创建一个标准的html页面（可通过编辑器直接创建）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html的基本应用</title>
	</head>
	<body>
	</body>
</html>

语法	说明
`<!DOCTYPE html>`	声明文档类型（html5后这是最短的有效的文档声明）规定了HTML页面必须遵从的良好规则
`<html>`	包裹了整个完整的页面，是一个根元素（顶级元素）其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素
`<head>`	head标签是一个容器，定义的内容不会在HTML页面中显示，这些内容包括在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等。 `<meta charset="utf-8">`：页面的元数据信息，设置文档使用utf-8字符集编码 `<title>`：定义文档标题，出现在浏览器标签上，在收藏页面时，可用来描述页面
`<body>`	定义文档内容（文本，图片，音频，游戏等）

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html的基本应用</title>
	</head>
	<body>
				<!--
        	h1-h6标题标签
        -->
        <h1>This is a heading!</h1>
        <h2>This is a heading!</h2>
        <h3>This is a heading!</h3>
        <h4>This is a heading!</h4>
        <h5>This is a heading!</h5>
        <h6>This is a heading!</h6>
        
        <!--
        	p 段落标签
        -->
       	<p>今天天气挺好</p>
        <p>好好学习</p>
        <p>天天向上</p>

				<!--
        	a 超链接标签
        -->
        <a href="https://www.baidu.com">百度</a>
        <br/><!-- br 换行标签 自结束 -->
        <a href="https://www.taobao.com">淘宝</a>
        <br/>
        <a href="2.html">跳转到本地页面</a>
        <br/>
	</body>
</html>

【2】html的语法规则

🔖元素

基本概念

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）

标签	描述
`<head>`	定义文档的信息
`<title>`	定义文档的标题
`<base>`	定义页面链接标签的默认链接地址
`<link>`	定义文档和外部资源的关系
`<meta>`	定义文档中的元数据
`<script>`	定义客户端脚本文件
`<style>`	定义样式文件

元素语法

HTML 元素以开始标签起始，以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

# 嵌套的html元素
<html>
<body>
	<p>This is my first paragraph.</p>
</body>
</html>

🔖属性

基本概念

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在 HTML 元素的开始标签中规定

属性	描述
class	为html元素定义一个或者多个类名(classname从样式文件中引入)
id	定义元素的唯一id
style	定义元素的行内样式（inline style）
title	定义元素的额外信息（作为工具条使用）

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="bisque">	
			<!--
				属性是在标签内的以key=value的形式存在，可以决定当前的样式或者位置获取其他行为
      -->
			 <h1 align="center">测试相关属性</h1>
	</body>
</html>

🔖标题

标题（Heading）是通过 <h1> - <h6> （从大到小）等标签进行定义的

水平线是通过<hr />进行定义的

注释可插入 HTML 代码中，从而提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们

<html>
<body>
	<h1>h1标题</h1>
  <!--
				注释内容
  -->
	<hr />
</body>
</html>

🔖段落

HTML 段落：段落是通过 <p> 标签定义的

HTML 换行：换行是通过<br/>标签实现的

🔖标签

（1）文本格式标签

文本格式标签

标签	描述
`<b>`	定义粗体文本
`<big>`	定义大号字
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字
`<s>`	不赞成使用。使用 `<del>` 代替。
`<strike>`	不赞成使用。使用 `<del>` 代替。
`<u>`	不赞成使用。使用样式（style）代替。

（2）"计算机输出"标签

"计算机输出"标签

标签	描述
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<tt>`	定义打字机代码
`<var>`	定义变量
`<pre>`	定义预格式文本
`<listing>`	不赞成使用。使用 `<pre>` 代替
`<plaintext>`	不赞成使用。使用 `<pre>` 代替
`<xmp>`	不赞成使用。使用 `<pre>` 代替

（3）引用、引用和术语定义

引用、引用和术语定义

标签	描述
`<abbr>`	定义缩写
`<acronym>`	定义首字母缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目

（4）语义化标签

为了更好的组织文档，HTML5规范中设计了几个语义元素，可以将特殊含义传达给浏览器。

标签	名称	作用	备注
header	标头元素	表示内容的介绍	块元素，文档中可以定义多个
nav	导航元素	表示导航链接	常见于网站的菜单，目录和索引等，可以嵌套在header中
article	文章元素	表示独立内容区域	标签定义的内容本身必须是有意义且必须独立于文档的其他部分
footer	页脚元素	表示页面的底部	块元素，文档中可以定义多个

（5）参考案例

参考案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML 文本格式化</title>
		<br/>
		<b>this is bold粗体文字</b>
		<br/>
		<big>this is big大号字</big>
		<br/>
		<i>this is italic斜体字</i>
		<br/>
		<small>this is small小号字</small>
		<br/>
		<strong>this is strong加重语气</strong>
		<br/>
		<!-- sub下标字   sup上标字 -->
		5的3次方:5<sup>3</sup>
		<br/>
		log<sub>2</sub>n
		<hr/>
		<!-- ins定义插入字 -->
		世界杯最终站：<ins>法国队</ins>和<ins>克罗利亚队</ins>
	</head>
	<body>
	</body>
</html>

参考案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>预格式输出文本</title>
	<body>
		<pre>
			春眠不觉晓
				处处闻啼鸟
					夜来风雨声
						花落知多少
		</pre>
		<p>
			第一章 开篇
			<hr /><!-- hr是分隔标签，显示一条横线分隔符 -->
			第二章 发展
			<br /><!-- br是换行标签 -->
			第三章 迭代
		</p>
		<hr />
		<!--
        	abbr 标签 定义缩写，鼠标进入则显示相关内容
        -->
		<abbr title="www.baidu.com">百度</abbr>
		<abbr title="www.taobao.com">淘宝</abbr>
		<br />
		<!--
        	bdo标签 设置文本显示的方向
        	ltr：从左到右正向显示文本信息（默认）
        	rtl：从右到左反向显示文本信息
        -->
		<bdo dir="ltr">hello guigu</bdo>
		<bdo dir="rtl">hello 硅谷</bdo>
	</head>
	</body>
</html>

🔖html css

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。网页现在的新标准是W3C，基本模式为html（网页结构）+css（网页样式）+javascript（行为）

（1）外部样式表

外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，便可以通过更改一个文件来改变整个站点的外观

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

参考案例

mystyle.css:
h1 { text-align: center;color: brown; font-family: "楷体";}
p{ text-align: right;color: blueviolet; font-size: 20px;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html引用CSS外部样式表</title>
	</head>
	 <!--定义引入外部css样式-->
	<link rel="stylesheet" type="text/css" href="../css/mystyle.css"> 
	<body>
		<h1>引用外部样式css的h1标签</h1>
		<p>引用了外部样式css的p标签</p>
		<h3>相应的css表中没有指定的样式的h3标签</h3>
	</body>
</html>

（2）内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。便可以在 head 部分通过 <style> 标签定义内部样式表

<head>
	<style type="text/css">
		body {background-color: red}
		p {margin-left: 20px}
	</style>
</head>

（3）内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
	This is a paragraph
</p>

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html引用内部css样式</title>
	</head>
	<!--
		 如果在定义了内部样式表的同时并且引用了外部css样式表
		 如果存在重复的样式，内部样式会相应地进行覆盖	
	-->
	<!-- 定义内部样式表 -->
	<style type="text/css">
		h1{ text-align: right; color: darkmagenta;font-size: 3em;}
		p {text-align: left; color: lightseagreen; font-size: 3em;}
	</style>
	<body>
		<h1>引用了内部css样式的h1标签</h1>
		<p>引用了内部css样式的p标签</p>
		<!-- 
			也可以在标签内部直接定义样式，称之为内联样式
			样式的作用范围：内联样式<内部样式<外部样式
			如果存在的相同的属性,作用范围小的样式会覆盖作用范围大的样式
		-->
		<p style="font-size: 20px; color: lightblue;">引用了内联样式的p标签</p>
	</body>
</html>

🔖链接与图像

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接和图片导入测试</title>
	</head>
	<!--
    	除却通过bgcolor属性设置背景颜色，还可以通过background属性设置背景图片
    	background="../img/4.jpg"
    	亦可通过内联样式设置背景图片的相关属性
    -->
	<body style="background-image: url(../img/4.jpg); background-repeat: no-repeat;">
		<p>超链接测试</p>
		<!--
			标签a中的target属性能够指定打开超链接的方式：空白页或者是当前页等(默认是覆盖当前页)
		-->
		<!--可以用指定的文本作为超链接-->
		<a href="http://www.baidu.com">百度 </a>
		<!--也可以用指定的图片作为超链接-->
		<a href="http://www.baidu.com" target="_blank"><img src="../img/1.png"/></a>
		<!--
        	a:利用a标签创建电子链接的两种方式：
        	1.简单创建方式：（需要安装邮件客户端程序）
        	<a href="mailto:someone@factzone.com?Subject=Hello%20again" 
        		target="_top">...</a>
        	2.复杂创建方式：
        	<a href="mailto:someone@example.com?cc=someoneelse@example.com
        		&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=
        		You%20are%20invited%20to%20a%20big%20summer%20party!" 
        		target="_top">...</a>
        -->
        <p>
			简单方式创建电子邮件链接：
			<a href="mailto:someone@factzone.com?Subject=Hello%20again" 
				target="_top">
			发送邮件</a>
		</p>
		<p>
			复杂方式创建电子邮件链接：
			<a href="mailto:someone@example.com?cc=someoneelse@example.com
				&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=
				You%20are%20invited%20to%20a%20big%20summer%20party!" 
				target="_top">发送邮件!</a>
		</p>
		<hr />
		
		<p>图片导入测试</p>
		<!-- 
			通过img标签可以导入静态图片，也可以导入动态图片
			此外，还可通过设置标签的相关属性调整图片的大小以及图片的显示位置
      alt 属性用来为图像定义一串预备的可替换的文本
		-->
		<img src="../img/2.jpg" />
		<br />
		<img src="../img/10.png" />
		<br />
		<p style="text-align: center;">
			<img src="../img/5.jpg" width="200" height="200" />
		</p>
	</body>
</html>

🔖表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<col>`	定义用于表格列的属性
`<colgroup>`	定义表格列的组

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：border=“1”

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格基本测试1</title>
	</head>
	<style type="text/css">
		h3 {text-align: left; font-family: "楷体"; font-size: 20px;}
	</style>
	<body>
		<h3>一行一列的表格</h3>
		<table border="1">
			<tr>
				<td>100</td>
			</tr>
		</table>
		<br />
		
		<h3>一行三列的表格</h3>
		<table border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
		</table>
		<br />
		
		<h3>两行三列的表格</h3>
		<table border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
		<br />
		
		<h3>带有普通边框的表格</h3>
		<table border="1">
			<tr>
				<td>100</td>
			</tr>
		</table>
		<br />
		
		<h3>带有粗的边框的表格</h3>
		<table border="5">
			<tr>
				<td>100</td>
			</tr>
		</table>
		<br />
		
		<h3>带有很粗的边框的表格</h3>
		<table border="10">
			<tr>
				<td>100</td>
			</tr>
		</table>
		<br />
		
		<h3>没有边框的表格</h3>
		<table border="0">
			<tr>
				<td>100</td>
			</tr>
		</table>
		<br />
		
		<h3>带有横向表头的表格</h3>
		<table border="1">
			<tr>
				<th>姓名</th>
				<th>学号</th>
				<th>电话</th>
				<th>住址</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>20158888000000</td>
				<td>8008208820</td>
				<td>上海</td>
			</tr>
		</table>
		<br />
		
		<h3>带有垂直表头的表格</h3>
		<table border="1">
			<tr>
				<th>姓名</th>
				<td>张三</td>
			</tr>
			<tr>
				<th>学号</th>
				<td>2015888800000</td>
			</tr>
			<tr>
				<th>电话</th>
				<td>8008208820</td>
			</tr>
			<tr>
				<th>住址</th>
				<td>上海</td>
			</tr>
		</table>
		<br />
		
		<h3>存在横跨两列的单元格</h3>
		<table border="1">
			<tr>
				<th>姓名</th>
				<th colspan="2">电话</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>123456789</td>
				<td>07211234567</td>
			</tr>
		</table>
		<br />
		
		<h3>存在横跨两行的单元格</h3>
		<table border="1">
			<tr>
				<th>姓名</th>
				<td>张三</td>
			</tr>
			<tr>
				<th rowspan="2">电话</th>
				<td>123456789</td>
			</tr>
			<tr>
				<td>07211234567</td>
			</tr>
		</table>
		<br />
	</body>
</html>

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格基本测试2</title>
	</head>
	<style type="text/css">
		h3 {text-align: left; font-family: "楷体"; font-size: 20px;}
	</style>
	<body>
		<h3>表格内的标签</h3>
		<table border="1">
			<tr>
				<td>
					<p>这是一个段落</p>
					<p>这是另外一个段落</p>
				</td>
				<td>
					<p>这个单元格包含一个表格</p>
					<table border="1">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<p>这个单元格包含一个列表</p>
					<ul>
						<li>苹果</li>
						<li>香蕉</li>
						<li>菠萝</li>
					</ul>
				</td>
				<td>HELLO</td>
			</tr>
		</table>
		<hr />
		<h3>设置指定的单元格背景</h3>
		<table border="1">
			<tr>
				<td bgcolor="#20B2AA">First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td bgcolor="brown">Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr />
		<!--
			cellpadding属性指定单元格边距
			cellspacing属性指定单元格间距
         <table border=”10” cellpadding=”10” cellspacing=”10”>...</table>
		-->
		<h3>使用align属性排列单元格内容</h3>
		<table border="2">
			<tr>
				<th align="left">消费项目</th>
				<th align="right">一月</th>
				<th align="right">二月</th>
			</tr>
			<tr>
				<td>衣服</td>
				<td align="right">$241.10</td>
				<td>$50.20</td>
			</tr>
			<tr>
				<td>化妆品</td>
				<td align="right">$30.00</td>
				<td align="right">$44.45</td>
			</tr>
			<tr>
				<td>食物</td>
				<td align="right">$730.40</td>
				<td align="right">$650.00</td>
			</tr>
			<tr>
				<th align="left">总计</th>
				<th align="right">$1001.50</th>
				<th align="right">$744.65</th>
			</tr>
		</table>
	</body>
</html>

🔖列表

列表

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义定义列表
`<dt>`	定义定义项目
`<dd>`	定义定义的描述
`<dir>`	已废弃。使用 `<ul>` 代替它
`<menu>`	已废弃。使用 `<ul>` 代替它

分组标签

标签	描述
`<div>`	定义文档区域（块级：block-level）
`<span>`	组合文档中的行内元素，内联元素（inline）

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

div元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

参考案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表标签测试</title>
	</head>
	<body>
		<h3>无序列表标签测试</h3>
		<p>普通无序列表</p>
		<ul>
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ul>
		<!--
        	通过标签属性相应指定标签的符号列表
        	type="属性值"
        -->
        <p>circle项目符号无序列表</p>
        <ul type="circle">
        	<li>苹果</li>
        	<li>香蕉</li>
        	<li>柠檬</li>
        	<li>橘子</li>
        </ul>
        
        <p>disc项目符号无序列表</p>
        <ul type="disc">
        	<li>苹果</li>
        	<li>香蕉</li>
        	<li>柠檬</li>
        	<li>橘子</li>
        </ul>
        
        <p>square项目符号无序列表</p>
        <ul type="square">
        	<li>苹果</li>
        	<li>香蕉</li>
        	<li>柠檬</li>
        	<li>橘子</li>
        </ul>
		<hr />
		
		<h3>有序列表测试</h3>
		<p>普通有序列表</p>
		<ol type="1">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		
		<p>以指定值开始计数的普通有序列表</p>
		<ol type="1" start="50">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		
		<p>小写字母有序列表</p>
		<ol type="a">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		
		<p>大写字母有序列表</p>
		<ol type="A">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		
		<p>小写罗马字母有序列表</p>
		<ol type="i">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		
		<p>大写罗马字母有序列表</p>
		<ol type="I">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		<hr />
		
		<!--
        	针对无序列表，会自动区分不同的符号
        -->
		<h3>嵌套列表测试</h3>
		<ul>
			<li>牛奶</li>
				<ol type="1">
					<li >蒙牛</li>
					<li>伊利</li>
				</ol>
			<li>咖啡</li>
			<li>茶</li>
				<ul>
					<li>红茶</li>
					<li>绿茶</li>
						<ul>
							<li>清远绿茶</li>
							<li>广西擂茶</li>
						<ul>
				<ul>
		</ul>
		
		<!--
        	自定义列表：
        	<dl>
        		<dt>列表项目</dt>
        		<dd>-项目描述</dd>
        		......
        	</dl>
        -->
        <h4>自定义列表</h4>
        <dl>
        	<!--第1项-->
        	<dt>浙江</dt>
        	<dd>-温州</dd>
        	<dd>-台州</dd>
        	<dd>-杭州</dd>
        	<!--第2项-->
        	<dt>广东</dt>
        	<dd>-深圳</dd>
        	<dd>-广州</dd>
        	<dd>-惠州</dd>
        </dl>
	</body>
</html>

🔖表单和输入

表单

表单是一个包含表单元素的区域

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

表单使用表单标签（<form>）定义

输入

多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框

参考案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单测试</title>
	</head>
	<body>
		<!--  
			form代表是一个表单    这个表单的数据都可以提交到服务端进行处理
			action 是提交表单的位置 就剩具体提交到的服务器
			method 是提交表单的方式    分为两种post方式和get方式 
			如果需要利用表单发送邮件则可定义如下：
			<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
				......	
			</form>
		-->
		<form action="" method="post">
			<table border="1">
				<tr>
					<!-- type属性  是当前输入框的类型        
						id也是用来标识当前输入框 
			 			name标识这个输入框的   
			 			其中表单提交的时候获取表单中的值就是根据name属性获取
			 		-->
					<td>用户名</td>
					<td><input type="text" name="username" id="username"/></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="pwd" id="pwd"/></td>
				</tr>
				<tr>
					<!-- 
						单选框选择的输入类型为“radio”，默认选中 
						则使得checked属性为“checked”
						如果是输入框，在表单提交的时候 直接获取表单的内容，   
						如果是单选按钮或者复选按钮
					-->
					<td>性别</td>
					<td>
						<input type="radio" name="sex" value="male" checked="checked"/>男
						<input type="radio" name="sex" value="female"/>女
					</td>
				</tr>
				<tr>
					<!-- 复选框选择的输入类型为“checkbox” -->
					<td>兴趣爱好</td>
					<td>
						<input type="checkbox" name="likes" value="eat" checked="checked"/>吃饭
						<input type="checkbox" name="likes" value="sleep" />睡觉
						<input type="checkbox" name="likes" value="game" />打游戏
						<input type="checkbox" name="likes" value="qdm" checked="checked"/>敲代码
					</td>
				</tr>
				<tr>
					<!-- 定义下拉框使用select标签，添加选项通过option标签实现 -->
					<td>学历</td>
					<td>
						<select>
							<option value="博士">博士</option>
							<option value="硕士">硕士</option>
							<option value="本科">本科</option>
							<option value="专科">专科</option>
							<option value="高中">高中</option>
						</select>
					</td>
				</tr>
				<tr>
					<!-- 定义文本域用textarea标签 -->
					<td>备注</td>
					<td><textarea name="desc" rows="5" cols="40"></textarea></td>
				</tr>
				<tr>
					<!-- 定义按钮用input标签，类型选择为相应的提交、重置类型，会自动操作-->
					<td><input type="submit" value="提交"/></td>
					<td><input type="reset" value="重置"/></td>
				</tr>
			</table>
		</form>
	</body>
</html>

参考案例2

案例分析：数据周围绘制一个带标题的框
<!-- 简单的表单测试 -->
<form>
<fieldset>
		<legend>健康信息</legend>
			身高：<input type="text" />
			体重：<input type="text" />
	</fieldset>
</form>

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

标签	描述
`<form>`	定义供用户输入的表单
`<input>`	定义输入域
`<textarea>`	定义文本域 (一个多行的输入控件)
`<label>`	定义一个控制的标签
`<fieldset>`	定义域
`<legend>`	定义域的标题
`<select>`	定义一个选择列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个按钮
`<isindex>`	已废弃。由 `<input>` 代替

🔖音频、视频

需要谙熟大量技巧，以确保音频文件、视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放

使用插件：浏览器插件是一种扩展浏览器标准功能的小型计算机程序。插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示

（1）音频

方式1：使用<embed>元素

<embed height="100" width="100" src="song.mp3" />

存在问题：

<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证
不同的浏览器对音频格式的支持也不同
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频
如果用户的计算机未安装插件，无法播放音频
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放

方式2：使用<object>元素

<object height="100" width="100" data="song.mp3"></object>

方式3：借助外部插件（雅虎播放器）

<!-- 借助插件播放音频 -->
<p><a href="../song/1.mp3">播放 mp3</a></p>
<p><a href="../song/2.wav">播放 wav</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

（2）视频

1.使用<embed>标签
<embed src="movie.swf" height="200" width="200"/>
2.使用<object>标签
<object data="../song/1.mp4" width="1000" height="600"></object>
3.利用其它网站的资源播放视频（此处以优酷进行举例）
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

🔖框架

基本概念

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档

很难打印整张页面

框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架

每个 frameset 定义了一系列行或列

rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

參考案例

index.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	frameset框架不能写在body内
    	由frameset的属性确定相关的内容（划分比例）
    -->
    <!--划分为上下两部分：比例 -->
    <frameset rows="20%,80%">
    	<frame src="head.html" name="head"/>
    	<frameset cols="20%,80%"><!--划分为左右两部分-->
    		<frame src="left.html" name="left"/>
    		<frame src="body.html" name="body"/>
    	</frameset>
    </frameset>
</html>

head.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="#20B2AA">
		<p><h3 align="center">后台管理系统</h3></p>
	</body>
</html>

left.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p><a href="http://www.baidu.com" target="body">百度</a></p>
		<p><a href="http://www.taobao.com" target="body">淘宝</a></p>
		<p><a href="#" target="body"><img src="../img/1.png" width="200" height="50"/></a></p>
		<p><a href="music.html" target="body">点击播放音乐</a></p>
		<p><a href="video.html" target="body">点击播放视频</a></p>
	</body>
</html>

body.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

music.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	导入音频信息有两种方式
        	1.通过embed标签
        	2.通过object标签
        -->
        <embed src="../song/1.mp3" width="200" height="50"></embed>
        <object data="../song/1.mp3" width="200" height="50"></object>
	</body>
</html>

video.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	导入视频信息有两种方式
        	1.通过embed标签
        	2.通过object标签
        	3.或者是通过相关网站提供的内容导入外部
        	    的视频信息
        -->
        <embed src="../song/1.mp4" width="1000" height="600"></embed>
        <object data="../song/1.mp4" width="1000" height="600"></object>
	</body>
</html>

昵称

邮箱

网址

按正序
按倒序
按热度

[Web基础]-HTML

预览: