此篇博文主要记录一些标签的常用属性
Font标签
- size：字体大小
- color：颜色
- face：字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ASK 第一个网页</title>
</head>
<body>
<font color="red" size="3" face="verdana">verdana字体</font>
</body>
</html>
Body标签
- text：文本颜色
- bgcolor：背景色
- background：背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ASK 第一个网页</title>
</head>
<body text="orange" background="15.jpg">
<font color="red"><p>一些段落</p></font> <!-- 因为设置了红色字体 所以是红色的 -->
<p>又一些段落</p> <!-- 默认为橙色 -->
</body>
</html>
一些文本修饰标签
- <big>相对默认文字大一些
- <small>对默认文字小一些
- <b>加粗
- <strong>加强语气
- <i>斜体
- <em>斜体
- <u>下划线
- <s> 删除线
- <ins><del> 下划线和删除线
- <sup> <sub> 上标和下标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ASK 第一个网页</title>
</head>
<body>
<big>大字体</big><br />
<small>小字体</small><br />
<b>加粗字体</b><br />
<strong>加强语气字体</strong><br />
<i>斜体</i><br />
<em>斜体</em><br />
<u>下划线</u><br />
<s>删除线</s><br />
<ins>下划线</ins><br />
<del>删除线</del><br />
<sub>下标</sub>
<sup>上标</sup>
</body>
</html>
段落标签(p标签)
段落标签会自动换行。并且会省略在编译时所输入的多余的换行和空格。
- align：排列方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ASK 第一个网页</title>
</head>
<body>
<p align="center">
一个段落，
就算在段落中换行，
但是浏览器还是会省略换行 和 多余的空格。
</p>
<p>段落标签是一段段落，它会自动换行。</p>
</body>
</html>
换行单标签
<hr>：分割线标签。
- size：分割线的高度。
- width：分割线的宽度。
- align：排列样式。
- noshade：不添加阴影效果 值为:noshade
<br>：强制换行标签。
<pre>标签
<pre>：预格式化文本，通常用来表示计算机源代码，在pre标签中的内容会保留所有的空格和换行。
- width：定义每行的最大字符 (一般是40、80、132)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ASK 第一个网页</title>
</head>
<body>
<pre>
<font color="purple">var</font> someObj = <font color="purple">AnyClass</font>()
<font color="green">someObj</font>.<font color="purple">set</font>("<font color="red">someValue"</font>)
</pre>
</body>
</html>
<h1>~<h6>标签
标题标签，h1是字体最大的标签，h6是最小的标签。
- align：排列样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>大标题</h1>
<h6>小标题</h6>
</body>
</html>
center标签
居中显示
<ol> <ul> <li> 标签
<ol>标签是有序列表标签。
- start：序号的起始值(数字)
- type：默认是数字序号，如果想用字母序号 值为"a"
<ul>标签是无序列表标签。
- type：序号类型 disc是实心圆圈，square实心方块，circle空心圆圈
<li>标签是列表中的项目标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="1" start="3">
<li>北京</li>
<li>天津</li>
<li>上海</li>
</ol>
</body>
</html>
自定义列表标签
<dl>是自定义列表标签，它配合着<dt>(自定义列表中的定义项目标签)标签和<dd>(自定义列表中的描述项目标签)标签来使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<dl>
<dt>苹果公司</dt>
<dd>苹果公司（Apple Inc. ）是美国的一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等三人于1976年4月1日创立。</dd>
<dt>华为公司</dt>
<dd>华为有限公司是一家生产销售通信设备的民营通信科技公司，总部位于中国广东省深圳市龙岗区坂田华为基地。华为的产品主要涉及通信网络中的交换网络、传输网络、无线及有线固定接入网络和数据通信网络及无线终端产品，为世界各地通信运营商及专业网络拥有者提供硬件设备、软件、服务和解决方案。华为于1987年在中国深圳正式注册成立。</dd>
<dt>绿地集团</dt>
<dd>绿地集团是中国第一家也是目前（截止2013年）唯一一家跻身《财富》世界500强的以房地产为主业的企业集团。2015年位居《财富》世界500强第258位[1] 。绿地集团房地产开发项目遍及全国主要省区市，特别在超高层、大型城市综合体、高铁站商务区及产业园开发领域遥遥领先，目前的世界十大高楼近一半来自绿地。2014年实现经营收入超过42,51.51亿元，较上年增长3.7%，预计2015年经营收入突破5000亿。</dd>
</dl>
</body>
</html>
meta标签
meta元素是提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。meta元素一般定义在文档头部，且不包含任何内容。
- name：提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以*使用对自己和源文档的读者来说富有意义的名称，"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<!DOCTYPE html> <html> <head> <!-- 告诉搜索引擎 你的页面关键字 --> <meta name="keywords" content="html,html新手学习笔记" /> <title>day2</title> </head> <body> </body> </html><!DOCTYPE html> <html> <head> <!-- 告诉搜索引擎 你的页面的主要内容 --> <meta name="description" content="新手学习HTML的笔记分享,HTML的标签笔记(随时更新)" /> <title>day2</title> </head> <body> </body> </html>- http-equiv：http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对，当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
-
<!DOCTYPE html> <html> <head> <!-- 可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输，时间必须是GMT时间 --> <meta http-equiv="expires" content="Thur,18Aug201616:00:00GMT" /> <title>day2</title> </head> <body> </body> </html><!DOCTYPE html> <html> <head> <!-- 不可使用本地的缓存来访问网页(无法脱机预览) --> <meta http-equiv="pragma" content="no-cache" /> <title>day2</title> </head> <body> </body> </html><!DOCTYPE html> <html> <head> <!-- 自定刷新，指定3秒后跳到新的URL --> <meta http-equiv="refresh" content="3;www.baidu.com" /> <title>day2</title> </head> <body> </body> </html> - content：content 属性提供了名称/值对中的值。该值可以是任何有效的字符串，content 属性始终要和 name 属性或 http-equiv 属性一起使用。
图片标签
- src：图片的路径。
- alt：图片的代替文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day2</title>
</head>
<body>
<b>Apple Watch 是苹果公司于2014年9月公布的一款智能手表，有Apple Watch、Apple Watch Sport 和Apple Watch Edition 三种风格不同的系列。Apple Watch 采用人造蓝宝石水晶屏幕与Force Touch触摸技术，有多种颜色可供选择。</b>
<img src="apple.jpg" alt="Apple" align="middle" />
</body>
</html>
<a>标签
- href：指向哪个链接。
- target：在什么地方打开链接(新建页面还是当前页面)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day2</title>
</head>
<body>
<!-- 打开一个内部的URL -->
<a href="learn2.html" target="_blank">另一个链接</a>
<!-- 外部链接 -->
<a href="http://www.baidu.com">百度一下</a>
<!-- 图片链接 -->
<a href="http://www.apple.com" target="_blank"><img src="apple.jpg" alt="watch" /></a>
<!-- 下载链接 -->
<a href="auto.rar">点击下载</a>
<!-- 空连接 -->
<a href="#">空链接</a>
<!-- 邮箱链接 -->
<a href="mailto:alexsunkang@163.com">联系我们</a>
<!-- 锚点标签 -->
<!-- 在这里设置一个锚点 -->
<h1><a name="top"></a>一个标题 设置为这个页面的顶点</h1>
<p>一些段落：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。</p>
<p>PHP原始为Personal Home Page的缩写，已经正式更名为 "PHP: Hypertext Preprocessor"。注意不是“Hypertext Preprocessor”的缩写，这种将名称放到定义中的写法被称作递归缩写。PHP于1994年由Rasmus Lerdorf创建，刚刚开始是Rasmus Lerdorf为了要维护个人网页而制作的一个简单的用Perl语言编写的程序。这些工具程序用来显示 Rasmus Lerdorf 的个人履历，以及统计网页流量。后来又用C语言重新编写，包括可以访问数据库。他将这些程序和一些表单直译器整合起来，称为 PHP/FI。PHP/FI 可以和数据库连接，产生简单的动态网页程序。</p>
<p>在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本，Lerdorf写了一些介绍此程序的文档。并且发布了PHP1.0！在这的版本中，提供了访客留言本、访客计数器等简单的功能。以后越来越多的网站使用了PHP，并且强烈要求增加一些特性。比如循环语句和数组变量等等；在新的成员加入开发行列之后，Rasmus Lerdorf 在1995年6月8日将 PHP/FI 公开发布，希望可以透过社群来加速程序开发与寻找错误。这个发布的版本命名为 PHP 2，已经有 PHP 的一些雏型，像是类似 Perl的变量命名方式、表单处理功能、以及嵌入到 HTML 中执行的能力。程序语法上也类似 Perl，有较多的限制，不过更简单、更有弹性。PHP/FI加入了对MySQL的支持，从此建立了PHP在动态网页开发上的地位。到了1996年底，有15000个网站使用 PHP/FI。</p>
<p>在1997年，任职于 Technion IIT公司的两个以色列程序设计师：Zeev Suraski 和 Andi Gutmans，重写了 PHP 的剖析器，成为 PHP 3 的基础。而 PHP 也在这个时候改称为PHP：Hypertext Preprocessor。经过几个月测试，开发团队在1997年11月发布了 PHP/FI 2。随后就开始 PHP 3 的开放测试，最后在1998年6月正式发布 PHP 3。Zeev Suraski 和 Andi Gutmans 在 PHP 3 发布后开始改写PHP 的核心，这个在1999年发布的剖析器称为 Zend Engine，他们也在以色列的 Ramat Gan 成立了 Zend Technologies 来管理 PHP 的开发。</p>
<p>在2000年5月22日，以Zend Engine 1.0为基础的PHP 4正式发布，2004年7月13日则发布了PHP 5，PHP 5则使用了第二代的Zend Engine。PHP包含了许多新特色，像是强化的面向对象功能、引入PDO（PHP Data Objects，一个存取数据库的延伸函数库）、以及许多效能上的增强。PHP 4已经不会继续更新，以鼓励用户转移到PHP 5。</p>
<p>2008年PHP 5成为了PHP唯一的有在开发的PHP版本。将来的PHP 5.3将会加入Late static binding和一些其他的功能强化。PHP 6 的开发也正在进行中，主要的改进有移除register_globals、magic quotes 和 Safe mode的功能。
PHP最新稳定版本：5.4.30(2013.6.26)
PHP最新发布的正式版本：5.5.14(2014.6.24)
PHP最新测试版本：5.6.0 RC2(2014.6.03)
2013年6月20日，PHP开发团队自豪地宣布推出PHP 5.5.0。此版本包含了大量的新功能和bug修复。需要开发者特别注意的一点是不再支持 Windows XP 和 2003 系统。
2014年10月16日，PHP开发团队宣布PHP 5.6.2可用。四安全相关的错误是固定在这个版本，包括修复cve-2014-3668，cve-2014-3669和cve-2014-3670。所有的PHP 5.6鼓励用户升级到这个版本。</p>
<!-- 因为在标题处设置了锚点，所以在这里可以定义一个标签，点击后可以返回设置锚点处 -->
<a href="#top">回到文本顶部</a>
</body>
</html>
<table>标签
- width：表格宽度。
- align：对齐方式。
- bgcolor：表格背景色。
- background：表格背景图案。
- border：表格边框宽度，如果不设置或设置为0，就代表没有边框。
- tr：行。
- td：列。
- th：标题，会在表格中居中显示。
<!DOCTYPE html> <html> <head> <title>day3</title> <meta charset="utf-8"> </head> <body> <table border="1" width="800"> <tr> <th> 姓名 </th> <th> 电话 </th> <th> 地址 </th> </tr> <tr align="center"> <td> Alex-Mercer </td> <td> 159-0000-0000 </td> <td> china-beijing-someaddress </td> </tr> </table> </body> </html>- caption：表格标题。
<!DOCTYPE html> <html> <head> <title>day3</title> <meta charset="utf-8"> </head> <body> <table border="1"> <caption>跨两列的单元格</caption> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Alex-mercer</td> <td>159-0000-0000</td> <td>8500-0000</td> </tr> </table> <br /> <table border="1" align="center"> <caption>跨两行的单元格</caption> <tr> <th>姓名</th> <td>Alex-mercer</td> </tr> <tr> <th rowspan="2">电话</th> <td>159-0000-0000</td> </tr> <tr> <td>8500-0000</td> </tr> </table> </body> </html>- cellpadding：单元内容距离单元格的距离。
<!DOCTYPE html> <html> <head> <title>day3</title> <meta charset="utf-8"> </head> <body> <table border="1" cellpadding="10"> <caption>cell padding</caption> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>- cellspacing：单元格距离表格边框的距离。
<!DOCTYPE html> <html> <head> <title>day3</title> <meta charset="utf-8"> </head> <body> <table border="1" cellspacing="10"> <caption>cell padding</caption> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>- frame：规定边框的可见部分。值为：
- void
- above
- below
- hsides
- lhs
- rhs
- vsides
- box
- border
<!DOCTYPE html> <html> <head> <title>day3</title> <meta charset="utf-8"> </head> <body> <table frame="box"> <caption>box</caption> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <br /> <table frame="above" cellpadding="10"> <caption>above</caption> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <br /> <table frame="below" cellspacing="20"> <caption>below</caption> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
<form>标签
form标签是用于为用户输入创建表单，表单用于向服务器传输数据。form是块级元素，前后会产生折行。
- enctype：规定在发送表单数据前如果对其进行编码。
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- action：action属性定义在提交表单时执行的动作。
- method：method属性是在提交表单的时候指定HTTP方法，GET或POST。
- <input>标签：文本输入标签
<h4>普通文本输入框</h4> <form action=""> 名: <input type="text" name="lastname" /> <br /> 姓: <input type="text" name="firstname"> <br /> <!-- 提交表单 --> <input type="submit" name="提交"> </form> <br /> <h4>密码文本输入框</h4> <form> 账户: <input type="text" name="user" size="20" maxlength="10"> <br /> 密码: <input type="password" name="password"> </form> <br /> <h4>复选框</h4> <form> T恤: <input type="checkbox" name="T"> <br /> 西装: <input type="checkbox" name="Suit"> </form> <br /> <h4>单选框</h4> <form> 男: <input type="radio" checked="checked" name="Sex" value="male"> <br /> 女: <input type="radio" name="Sex" value="female"> </form> <br />- <fieldset>：用以组合表单数据
<form action=""> <fieldset> <legend>个人资料</legend> <b>First Name</b> <br /> <input type="text" name="first_name" value="Sun"><br /><br /> <b>Last Name</b> <br /> <input type="text" name="Last_name" value="Kang"><br /><br /> <input type="submit" name="提交"> </fieldset> </form>- <select>：下拉表单
<form action=""> <select name="name_list"> <option value="alice">Alice</option> <option value="alex" selected="selected">Alex</option> <option value="alisa">Alisa</option> </select> </form>- <textarea>：多行文本输入
<form action=""> <p>请输入文字</p> <textarea rows="10" cols="40"></textarea> <br /> <input type="submit" name="提交"> </form>- <button>：按钮
<button type="button" onclick="alert('hello')">点击有惊喜</button>