HTML入门

 HTML (HyperText Markup Language) 不是一种编程语言;它是一种标记语言， 用于告诉您的浏览器如何构造您访问的网页。它可以像Web开发人员希望的那样复杂或简单。 HTML由一系列的 元素组成, 您可以使用它来封装，包装或标记内容的不同部分，使其以某种方式显示 或以某种方式执行。封闭tags 可以使一点内容成为超链接以链接到Web上的另一页面，斜体字等等。

解析一个HTML结构

 开始标签（Opening tag）：包括元素的名称（在本例中，p），包裹在开始和结束尖括号中。 这表示元素开始或开始生效 - 在这种情况下，表示了一个段落的开头。

 结束标签（Closing tag）：这与开始标记相同，除了它在元素名称之前包含正斜杠。 这表示元素结束的位置 - 在这种情况下，表示了一个段落的结尾. 没有包含结束标记是一个常见的初学者错误.并可能导致奇怪的结果。

 内容（Content）：这是元素的内容，在这种情况下只是文本。 

 元素（Element）：开始标记，加结束标记，加内容，等于元素。 

空元素

不是所有元素都拥有开始标签，内容和结束标记. 一些元素只有一个标签， 通常用来在此元素所在位置插入/嵌入一些东西 。

 例如：元素img是用来在元素 img所在位置插入一张指定的图片。

例子如下：

 常见的html空标签

img input meta link hr br  col  colgroup

可替换标签 

指标签会被替代，例如img标签会被下载的图片替代。 

 典型的可替换元素有 img、 object、 video 和 表单元素， 如textarea、 input 。 某些元素只在一些特殊情况下表现为可替换元素， 例如 audio 和 canvas。 

常用的HTML标签

iframe

表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中

frameborder 取值为1时（默认值），告诉浏览器在当前iframe与其他iframe之间绘制边框， 取0时则无需绘制此边框。 

 name 嵌入的浏览上下文（框架）的名称。该名称可以用作a标签，form标签的target属性值， 或input 标签和 button标签的formtaget属性值 

 src 嵌套页面的URL地址。使用遵守同源策略的 'about:blank' 来嵌套空白页

 a

a元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、 电子邮件地址或任何其他URL的超链接。

download 此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件

href 包含超链接指向的URL或URL片段。

可以使用 href="#top" 或者 href="#" 链接返回到页面顶部 

 无协议链接：直接写//就是无协议的绝对路径，浏览器会根据当前协议，补全无协议链接的协议。 应该尽量不使用 file:// 协议预览网页，以免无协议链接出错。

javascript 伪协议：伪协议可以实现「点击之后没有任何动作的 a 标签」，满足一些奇葩需求。 空（""）：点击之后页面会刷新。

查询字符串：如"?name=xxx"。<br> #：页面锚点变成#，页面滚动到顶部。不发起请求，别的都会发起请求

 target该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。

以下关键字具有特殊的意义:

 _self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。 此值是默认的，如果没有指定属性的话。

_blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文

 _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。 <br> 如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。

 _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。 如果没有parent框架或者浏览上下文，此选项的行为方式相同_self 

form

form（表单）用来向web服务器提交信息。

跳转页面（HTTP POST 请求）。file协议不能post。也可以发送GET请求，一般发POST。如果form里面没有提交按钮，就无法提交form。

action：处理这个form信息的程序所在的URL

 method：指定请求动词。只可以GET和POST，一般用POST。 用GET时表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器。数据会暴露在URI里面。 而POST表单数据会包含在表单体内然后发送给服务器，也就是请求的第四部分。 target：跟a标签的一样。

input 

属性：

type：属性可参考下文。

checked：如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择。

disabled：这个布尔属性表示此表单控件不可用。

maxlength：如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）。

name：控件的名称，与表单数据一起提交。

placeholder：提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type 属性为text, search, tel, url or email时，否则会被忽略。

required：这个属性指定用户在提交表单之前必须为该元素填充值。

注意：

如果一个form里面只有一个按钮（<button>标签），它就会自动升级为提交（submit）按钮。

input标签的type必须为submit，才能够提交，如果为button就是一个普通的按钮。

如果给button标签的type属性也设置为button，那么也只是一个普通的按钮。

input type

值：

button：可点击按钮。

checkbox：复选框。必须使用 value 属性定义被提交时的值。使用 checked 属性指示控件是否被选择。

password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。

radio：单选按钮。必须使用 value 属性定义被提交时的值。使用checked 必须指示控件是否被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值。

reset：用于将表单所内容设置为默认值的按钮。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

submit：用于提交表单的按钮。

text：单行字段；换行会将自动从输入的值中移除。

value：控件的初始值. 此属性是可选的，除非type 属性是radio或checkbox。

select

select (<select>) 元素是一种表单控件，可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。

属性：

autofocus：这个属性能够让一个对象在页面加载的时候获得焦点. 在一个页面上下文中, 只有一个对象可以有这个属性，并且是布尔值(true 或者 false)。

disabled：这个布尔值的属性表明一个用户是否可以操控该表单对象. 如果这个属性没有被明确定义, 则从它的父元素继承, 例如 fieldset; 如果没有父元素设置 disabled 属性, 那么默认该表单对象 enabled.

multiple：这个布尔值的属性标记select是否可以多选. 默认是单选.

nam ：控件名称

required：规定select的值不能为空(布尔值)

size：如果控件显示为滚动列表框，则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为0

例子：

textarea

表示一个多行纯文本编辑控件。 

属性

autofocus ：页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效

cols：文本域的可视宽度。必须为正数，默认为20 (HTML5)。

rows：元素的输入文本的行数（显示的高度）。

disabled：禁用文本域。默认为false。如果未指定，也可以从父级上如<fieldset>继承而来。

required：提示用户这个元素的内容必填

readonly：不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

placeholder：向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断（换行）处理。

name：元素的名称

maxlength：允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。    

minlength ：允许用户输入的最小字符长度(Unicode)

例子：

结果：

table

简单介绍： 很少用table 布局
table的标签顺序是没有关系的，浏览器会按照头、身、脚的顺序来排列。

如果不写tbody，浏览器会自动把内容放在tbody中。会按照写的顺序来展示。

可以在style标签中用border-collapse:collapse来把表格自带的边框合并起来