HTML入门

HTML入门

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

解析一个HTML结构

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

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

 内容(Content):这是元素的内容,在这种情况下只是文本。 

 元素(Element):开始标记,加结束标记,加内容,等于元素。 


HTML入门_第1张图片

空元素

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

 例如:元素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里面只有一个按钮(