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):可缩放矢量图形
  • WAI
  • Widgets
  • [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 <iframe> 标签

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

1.1.1 src 属性:

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

1.1.2 name属性:

嵌入页面的名称,需要与 <a> 标签 <form> 标签的 target 属性值 或 <input> 标签和<button> 标签的 formtaget 属性值 结合使用才有意义

例:<iframe src="#" name="xxx" ></iframe>
<a href=http://www.baidu.com target="xxx">百度</a>
那么百度这个网页就会在名字为xxx的iframe页面中显示

image.png

1.2 <a> 标签 (HTTP GET 请求)

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

1.2.1 target 属性

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

有几个关键词:
_blank:新窗口打开页面
_self:当前窗口打开页面
_parent:在父级窗口打开页面
_top:在顶级窗口打开页面

1.2.2 download 属性

此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
<a href="http://www.qq.com" download>下载</a>
content-type: application/octet-stream (http响应写成这样)
以上两种方式都是可以下载的

1.2.3 href 属性

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

几种情况:
<a href="http(s)://qq.com"></a> 打开网址要加上协议,才能打开
<a href="qq.com"></a> 只能打开名叫 qq.com 的这个文件
<a href="//qq.com"></a> 当前是什么协议,就以什么协议打开
<a href="xxx.html"></a> 这个路径只以目录为参考,跟文件名无关
<a href="#(top)">link</a> 这个链接返回到页面顶部
<a href="#xxx">link</a> 点击链接,只会在当前页面地址后加上锚点,不会发出get请求,因为锚点只是页面内的跳转
<a href="?name=wangwang">link</a> 点击链接,会在当前地址后加上查询参数,发出get请求。
<a href="javascript:;">link</a> 伪协议 作用:当你需要一个<a>链接,点击时不会发生任何跳转使用此伪协议

一条规则:
我们在写代码时,不准用 file 协议 进行预览
那么,我们怎么预览我们的html的代码效果呢?方法:
(1)上传到githup上预览
(2)在git bash所在文件目录上安装npm i -g http-server, 然后运行http-server -c-1,得到一个http地址,然后在地址后加上要打开的文件,就能以http协议打开文件啦


image.png
image.png

1.3 <form> 标签 (HTTP POST 请求)

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

1.3.1 action 属性

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

1.3.2 method 属性

浏览器使用这种 HTTP 方式来提交 form. 可能的值有:
post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。
这个值可以被 <button> 或者 <input> 元素中的 formmethod 属性重载(覆盖)

1.4 <input> 标签 和 <button> 标签

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

1.4.1 type 属性

属性值 submit=提交按钮
属性值 checkbox=复选框
属性值 radio= 单选框 (所有的单选按钮都要有相同的name属性值,才能起到单选框的作用)
属性值 text= 普通文本框
属性值 password= 密码

1.4.2 button 标签

注意: 若是<form>标签只有一个<button>标签,则自动升级为提交按钮 <button></button>
<button type="button"></button> 不会转变
<input type="button"></button> 不会转变

image.png

1.5 <table> 标签

表示表格数据 — 即通过二维数据表表示的信息,<table> 标签的属性几乎都被废弃,不推荐使用,table的样式由css来修改

<table> 标签要与以下标签结合使用,才能构成一个完整的表格
<table>
<thead>---table head---表格顶
<tr>---table row---表格中的行
<th>---table header---表格中的表头单元格
<td>---table data---表格中普通单元格中的内容
<tbody>---table body---表格主体
<tfoot>---table foot---表格底部
<colgroup>---column group---定义表格中的一组列
<col>---column---列


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,450评论 1 45
  • 简介 HTML全称HyperText Markup Language属于超文本标记语言。超文本指页面内可以包含图片...
    千里重阅读 330评论 0 0
  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 10,989评论 46 548
  • 查看作者原文 一、前端开发做什么 传统前端:html+css+js HTML5大前端:各种端的兼容开发、Ajax+...
    秋风喵阅读 593评论 0 2