title: HTML
文章目录
一、基础
1、简单的HTML页面架构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
2、HTML常见标签
meta
meta标签
<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
有利于网站seo
meta name="keywords" conten="频度词,描述词" />
link
link标签
<link>标签定义文档与外部资源的关系。
提示和注释
1、link元素是空元素，它仅包含属性
2、此元素只能存在于head部分，不过它可出现任何次数。
3、支持HTML中的全局属性(全局属性是可与所有HTML元素一起使用的属性)。
4、支持HTNL中的事件属性(有能力让事件触发浏览器中的动作，例如当用户单元素时启动JavaScript)。
script
<script>标签
1、标签用于定义客户端脚本，比如Javascript。
2、scrptt元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件。
3、必须的type属性规定脚本的MIME类型。
<script type="text/javascript">
document.write("Hello World!")
</script>
注释
HTML注释
<!-- 这是一段注释。主是不会在浏览器中显示。-->
1、注释标签用于在源代码中插入注释。注释不会再浏览器中显示。
2、注释对代码解释，有助于理解与后期的维护。
3、使用注释来隐藏浏览器不支持的脚本。
示例：
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
注释：注释结尾处的两条斜杠(//)是javascript注释符号。在浏览器可以执行脚本的时候让html的注释失效，在浏览器不支持脚本运行的时候可以注释掉脚本的内容，不至于让让本的内容显示为纯文本。
P
P标签
1、标签定义的是普通的段落。
2、p元素自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。
3、此标签支持HTML中的全局属性和事件属性。
<p>This is some text in a very short paragraph</p>
标题标签
由大到小：
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
定义与用法：
1、<h1>定义最大的标签，<h6>定义最小的标签。
2、由于h元素拥有确切的语句，因此不要利用标题标签来改变同一行中的字体大小。
br
br标签
1、换行。
2、<br>标签只是简单地开始新的一行。
3、<br>标签是空标签(意味着他没有结束标签，因此这是错误的：<br></br>)。在XHTML中，把结束标签放在开始标签中也就是<br />。
4、使用<br>来输入空行，而不是分隔符。
hr
br标签
1、<hr>标签在html页面中创建一条水平线。
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
文本属性
<strong>加粗</strong>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<del>删除线</del>
<font>规定字体,字体大小，字体颜色。</font>
<font size="3" color="red">This is some text!</font>
pre
pre标签
1、被包围的pre元素中的文本通常会保留空格和换行符，文本会呈现为等宽字体。
2、一般常见应用来表示计算机的源代码。
<pre>
这是
预格式文本。
它保留了
和换行。
</pre>
3、form表单和input标签
form表单
from表单：规定当提交表单时向何处发送表单数据。
1、method(规定用于发送form-date的HTTP方法)，提交的方式有两种，get和post。
·get：是会在浏览器上显示出来。
·post：是不会在浏览器上显示出来。
2、action，提交的的地方。
·为空的时候就是本页面。
3、enctype发送之前是需要编码的。
·application/x-www-form-urlencode 普通编码
·multipart/form-data 上传文件时候的编码
· text/plain 以纯文本的编码
input
type属性：
1、type="text"：创建单行文本输入框
2、type="password"：密码输入框
3、type="radio"：单选按钮
4、type="checkbox"：复选框
5、type="button"：普通按钮
6、type="submit"：提交按钮
7、type="reset"：重置按钮
8、type="image"：图像按钮
9、type="file"：文件域
10、input type="url"：输入URL字段
11、input type="tel" name="tel"：用来输入电话号码
12、input type="search" name="search"：搜索字符串
13、type="email"：该控件用来输入"email"地址
14、input type="color" id="color"：颜色选择器
name属性
元素的名称；这个不需要多解释了，也就是name的取值代表为当前input元素起个名字。
size属性
元素的宽度；很多人都知道在HTML中，常见的宽度是用 width 表示的，而在input中 width 属性只使用与 type="image" 时使用，input元素的宽度需要通过size属性来设定，size的值为数字，数字越大input元素越长，数字越小input元素越短；
value属性
定义input元素的默认值；
当 input type="text"、"password"、"hidden" 时，定义输入字段的初始值；
当 input type="button", "reset", "submit" 时，定义按钮上的显示的文本；
当 input type="checkbox", "radio", "image" 时，定义与输入相关联的值；
注意：input type="checkbox" 和 input type="radio" 中必须设置 value 属性；value属性无法与 input type="file" 一同使用。
maxlength属性
定义input元素中可输入的最长字符数；如 maxlength="50" 表示最多可以输入50个字符；
style属性
为input元素设定CSS样式；
width属性
当 input type="image"时，通过width属性控制元素的宽度；
height属性
当 input type="image"时，通过width属性控制元素的高度；
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示范代码</title>
</head>
<body>
<form method="post" action="" enctype="application/x-www-form-urlencoded">
帐号:<input type="text" name="username" size="30" maxlength="10" value="admin"/><br/>
密码:<input type="password" name="password" size="30" /><br />
<input type="hidden" name="token" value="asdahiodhaohdiohaiodhoaihd"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" value="提交"/>
</form>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="button" value="提交"/>
</form>
<form method="get" action="" enctype="multipart/form-data">
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
</form>
</body>
</html>
a标签、img标签、table标签
a
- a标签定义超链接，用于从一张页面链接到另一张页面。
- a元素最重要的属性是href属性，它指示链接的目标。
<a href="指定要跳转的目标界面的链接">需要展示给用户看见的内容</a>
1、<a href="http://www.baidu.com">百度</a>
2、<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
target属性就是专门控制如何跳转的
self：在当前页面跳转。
_back：在新的选项卡跳转，也就是新建页面跳转。
3、<a href="http://www.baidu.com" target="_blank" title="点击会跳转到百度首页喔">百度</a>
tiele属性是来控制鼠标悬浮时显示的提示内容。
4、 <a href="#text">跳转</a>
如果某个元素含有id/name属性，那么这个元素就是网页的一个锚点
利用a标签的href属性就能跳转到该锚点
<a href="#" name="text">跳转</a>
img与area
- img元素是向网页嵌入一幅图像。从技术上来讲，不是插入到网页中来，而是链接到网页中，
img格式：<img src="被引用图像的地址" alt="图像的替代文本">
1、<img src="/i/eg_tulip.jpg" alt="图像的替代文本" />
alt 规定图像的替代文本。
src 规定显示图像的url
width 规定图片的高度
height 规定图片的宽度
- area标签定义图像映射中的区域。
- area标签总是嵌套在map标签中。
- img标签中的usemap属性与map元素name属性相关联，创建图像与映射之间的联系。
1、矩形 （左上角顶点坐标为（x1,y1）,右下角顶点坐标为（x2,y2））
<area shape ="rect" coords ="x1,y1,x2,y2" href ="url" alt="提示" />
2、圆形（圆形坐标为（x1,y1）,半径为r）
<area shape ="circle" coords ="x1,y1,r" href ="url" alt="提示" />
- 本章综合示例
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
table
- table标签定义htnl表格。
- 简单的htnl表格是由table元素以及一个或者多个tr、th或者td元素组成。
- tr元素定义表格行、th元素定义表头、td元素定义表格单元。
- width宽度、 height高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="2">
<!--
border 边框
cellpadding 单元边与内容的空白
cellspacing 单元格的空白
-->
<tr><th>#</th><th>名字</th><th>年龄</th></tr>
<tr><td>1</td><td>刘备</td><td>18</td></tr>
<tr><td>2</td><td>张飞</td><td>19</td></tr>
<tr><td>3</td><td>赵云</td><td>20</td></tr>
<tr><td>总数</td><td colspan="2">3人</td></tr>
<!--
colspan 行
-->
</table>
<table border="1" cellpadding="10" cellspacing="2">
<tr><th>#</th><th>名字</th><th>年龄</th></tr>
<tr><td>1</td><td>刘备</td><td>18</td></tr>
<tr><td>2</td><td>张飞</td><td>19</td></tr>
<tr><td>3</td><td>赵云</td><td rowspan="2">20</td></tr>
<!--
rowspan 竖
-->
<tr><td>4</td><td>马超</td></tr>
</table>
</body>
</html>
基础单选框、复选框，下拉选框、文本域
- 单选框radio
单选框语法：<input name="Fruit" type="radio" value="" />
使用input标签、name为自定义、type类型为"radio"的表单。
示例：
<form action="" method="get">
您最喜欢水果？<br /><br />
<label><input name="Fruit" type="radio" value="" />苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
</form>
- 复选框checkbox
复选框语法：<input name="Fruit" type="checkbox" value="" />
使用input标签、name为自定义、type类型为"checkbox"的表单。
示例：
<form action="" method="get">
您最喜欢水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
<label><input name="Fruit" type="checkbox" value="" />其它 </label>
</form>
下拉选框
使用方法：
<select>
<option value='提交值'>选项</option>
</select>
·selected="selected"：给某一个选项加上此属性就是设置此属性为默认选项。
示例：
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected="selected">广州</option>
</select>
文本域 textarea
- textarea标签定义多行的文本输入控件。
<textarea rows="10" cols="20">
此处写文本
</textarea >
本章综合示例
- fieldset：对表单进行分组，一个表单可以有多个fieldset。
- legend：说明每组的内容描述。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<fieldset>
<legend>个人信息</legend>
<form>
<label>帐号</label><input type="text" name="username"/><br>
<label>密码</label><input type="password" name="password" /><br>
性别 <input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2"><br>
喜欢的语言<input type="checkbox" name="app[]" value="php"/>php<input type="checkbox" name="app[]" value="aspx"/>aspx<input type="checkbox" name="app[]" value="asp"/>asp<br>
地址<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<br>
个人简介<br />
<textarea rows="10" cols="30" name="info"></textarea><br>
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
</form>
</fieldset>
</body>
</html>
列表
无序列表
<ul type="disc">
<li><a href="#">第一课</a></li>
<li><a href="#">第二课</a></li>
<li><a href="#">第三课</a></li>
<li><a href="#">第四课</a></li>
</ul>
- type的类型可以是square circle disc
有序列表
<ol type="I">
<li><a href="#">第一课</a></li>
<li><a href="#">第二课</a></li>
<li><a href="#">第三课</a></li>
<li><a href="#">第四课</a></li>
</ol>
- type默认的是数字
- a 小写字母列表
- A 大写字母列表
- I 罗马字母列表
- i 小写罗马字母列表
补充
frameset
- frameset 不能在body内使用
- frame 一般都是在frameset中使用
- cols 定义框架集中列的数目和尺寸
- rows 定义框架集中行的数目和尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="30%,*">
<frame src="menu.html" />
<frame src="main.html" name="c" />
</frameset>
</frameset>
<body>
</body>
</html>
属性scrolling
- scrolling一般在iframe标签中应用。也可以在frameset标签中使用
- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
<iframe scrolling="auto|yes|no">
<frameset cols="50%,50%">
<frame src="frame_a.htm" scrolling="yes">
<frame src="frame_b.htm">
</frameset>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
