html 入门书,html 入门-优快云博客

一.W3C简介

万维网联盟 (World Wide Web Consortium)，简称W3C，是万维网的主要国际标准组织。

该组织试图透过W3C制定的新标准来促进业界成员间的兼容性和协议。不兼容的HTML版本由不同的供应商提供，导致网页显示方式不一致。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

为解决网络应用中不同平台、技术和开发者带来的不兼容问题，保障网络信息的顺利和完整流通，万维网联盟制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括[XML]和[CSS]等的众多影响深远的标准规范。

但是，W3C制定的网络标准似乎并非强制，而只是推荐标准。因此部分网站仍然不能完全实现这些标准，特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

[W3C推荐标准]

[CSS](Cascading Style Sheets)：层叠样式表

[DOM](Document Object Model)：文档对象模型

[HTML](HyperText Markup Language)：超文本标记语言

[RDF](Resource Description Framework)：资源描述框架

[SMIL](Synchronized Multimedia Integration Language)：同步多媒体集成语言

[SVG](Scalable Vector Graphics)：可缩放矢量图形

[XHTML](eXtensible HyperText Markup Language)：可扩展超文本标记语言

[XML](Extensible Markup Language)：可扩展标记语言

PICS：网络内容筛选平台

以上那些标准也是由W3C这个组织编制和维护的

二.MDN简介

MDN Web Docs(旧称Mozilla Developer Network、Mozilla Developer Center，简称MDN)是一个汇集众多[Mozilla基金会]产品和网络技术开发文档的免费网站.

MDN链接：https://developer.mozilla.org/

三.HTML 标签总结

1.常见标签

1.1 标签

全称 inner frame 内部的框架嵌套页面,有效的将一个html页面嵌入到当前页面中

1.1.1 src 属性:

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

1.1.2 name属性:

嵌入页面的名称，需要与标签标签的 target 属性值或标签和标签的 formtaget 属性值结合使用才有意义

例：

百度

那么百度这个网页就会在名字为xxx的iframe页面中显示

cb7f67e4fee2

image.png

1.2 标签 (HTTP GET 请求)

全称 anchor 锚点

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

1.2.1 target 属性

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

有几个关键词：

_blank:新窗口打开页面

_self：当前窗口打开页面

_parent:在父级窗口打开页面

_top:在顶级窗口打开页面

1.2.2 download 属性

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

下载

content-type: application/octet-stream (http响应写成这样)

以上两种方式都是可以下载的

1.2.3 href 属性

这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号(＃)，它指定一个内部目标在当前文档中的位置 [ID] 开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。

几种情况：

打开网址要加上协议，才能打开

只能打开名叫 qq.com 的这个文件

当前是什么协议，就以什么协议打开

这个路径只以目录为参考，跟文件名无关

link 这个链接返回到页面顶部

link 点击链接，只会在当前页面地址后加上锚点，不会发出get请求，因为锚点只是页面内的跳转

link 点击链接，会在当前地址后加上查询参数，发出get请求。

link 伪协议作用：当你需要一个链接，点击时不会发生任何跳转使用此伪协议

一条规则：

我们在写代码时，不准用 file 协议进行预览

那么，我们怎么预览我们的html的代码效果呢？方法：

(1)上传到githup上预览

(2)在git bash所在文件目录上安装npm i -g http-server, 然后运行http-server -c-1，得到一个http地址，然后在地址后加上要打开的文件，就能以http协议打开文件啦

cb7f67e4fee2

image.png

cb7f67e4fee2

image.png

1.3

标签 (HTTP POST 请求)

表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息

1.3.1 action 属性

一个处理这个form信息的程序所在的URL。这个值可以被或者元素中的 [formaction]属性重载(覆盖)

1.3.2 method 属性

浏览器使用这种 HTTP 方式来提交 form. 可能的值有:

post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.

get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。

这个值可以被或者元素中的 formmethod 属性重载(覆盖)

1.4 标签和标签

用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

1.4.1 type 属性

属性值 submit=提交按钮

属性值 checkbox=复选框

属性值 radio= 单选框 (所有的单选按钮都要有相同的name属性值,才能起到单选框的作用)

属性值 text= 普通文本框

属性值 password= 密码

1.4.2 button 标签

注意: 若是

标签只有一个标签,则自动升级为提交按钮

不会转变

cb7f67e4fee2

image.png

1.5

表示表格数据 — 即通过二维数据表表示的信息,

---table head---表格顶---table row---表格中的行---table header---表格中的表头单元格---table data---表格中普通单元格中的内容

---table body---表格主体---table foot---表格底部---column group---定义表格中的一组列---column---列

cb7f67e4fee2

image.png