html协议入门,HTML入门

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"。

#：页面锚点变成#，页面滚动到顶部。不发起请求，别的都会发起请求

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

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

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

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

_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。

如果没有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里面只有一个按钮(标签)，它就会自动升级为提交(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 () 元素是一种表单控件，可创建选项菜单。菜单内的选项为, 可以由元素分组。选项可以被用户预先选择。

属性：

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

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

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

nam ：控件名称

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

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

例子：

textarea

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

属性

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

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

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

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

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

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

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

name：元素的名称

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

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

例子：

结果：

table

简单介绍： 很少用table 布局

table的标签顺序是没有关系的，浏览器会按照头、身、脚的顺序来排列。

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

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