York's Blog

HTML

W3C简介

万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会,是万维网的主要国际标准组织.
万维网联盟(W3C)由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心(CERN)后成立,在欧盟执委会和国防高等研究计划署(DARPA)的支持下成立于麻省理工学院MIT计算机科学与人工智能实验室(MIT/LCS)[2],DARPA曾率先推出了互联网及其前身ARPANET。
该组织试图通过W3C制定的新标准来促进业界成员间的兼容性和协议。不兼容的HTML版本由不同的供应商提供,导致网页显示方式不一致。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。
为解决网络应用中不同平台、技术和开发者带来的不兼容问题,保障网络信息的顺利和完整流通,万维网联盟制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范,开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。(W3C 根据浏览器的实际情况总结文档,并不是凭空想象)
但是,W3C制定的网络标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

MDN简介

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

HTML 所有标签列表

DOCTYPE:用来选择文档类型

  1. 基本上,你知道标签对应单词的意思,就知道这个标签怎么用了(语义化)
  2. 除了 div 和 span,其他标签都有默认样式,div和span没有任何意义,div里一般加class.

只要能在微信上运行的统称为H5,和HTML5没啥关系;
img标签 alt 表示可选的文字(没有加载出图片就出现这文字) ;

iframe 标签

iframe 标签表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。(可以直接在里面显示网页)

iframe标签的常见属性:
  • frameborder:取值为1时(默认值),告诉浏览器在当前iframe与其他iframe之间绘制边框,取0时则无需绘制此边框。
  • name:嵌入的浏览上下文(框架)的名称。该名称可以用作a标签,form标签的target属性值,或input标签和 button标签的formtaget属性值。
  • sandbox:如果指定了空字符串,该属性对呈现在iframe框架中的内容启用一些额外的限制条件。属性值可以是用空格分隔的一系列指定的字符串
  • src:嵌套页面的URL地址。使用遵守同源策略的 ‘about:blank’ 来嵌套空白页
a标签 target属性:
  • target=”_self”打开当前窗口或iframe
  • target=”_blank”打开新窗口
  • target=”_parent”打开父级窗口或iframe
  • target=”_top”打开顶层窗口或iframe
a标签 href属性:
  • href=””当前页面刷新
  • href=”#”页面锚点变成#,并且滚动到顶部
  • href=”/..”浏览器发起 GET/HTTP/1.1的请求
  • href=”javascript:alert(1);”可以在用户点击a时执行一段javascript代码,href=”javascript:;”为伪协议,可以实现“点击后没有任何动作的a标签”,满足一些奇葩需求
  • href=”qq.com”浏览器会根据当前协议,补全无协议链接的协议,如果用file:// 协议浏览页面,就会访问到 file://qq.com,这是一个不存在的路径,应该尽量不适用file://协议预览网页,以免无协议链接出错
  • 点击a标签发送邮件的 href <a href="mailto:youemail@mail.com?subject=邮件标题&body=邮件内容">告诉我们</a>
  • <a href="tel:400-888-6633">拨打电话<a>
  • <a href="sms:19956321564">发送短信<a>
  • <a target=blank href="tencent://message/?uin=2858182383&Site=论坛地址&Menu=yes"><img border="0" SRC="" alt="广告专用QQ">发起QQ回话</a>
form标签:

action属性的作用:指定请求路径
method属性的作用:指定请求动词

form可以在下列情况下可以被用户提交:(input和button的区别,input没有子元素,button是有子元素的)

  • form标签里面有一个input type=submit的元素
  • form标签里面有一个button元素,button的type属性为空
form标签里面的input不加name属性,那么在表单提交时,input的值就不会出现在请求里。

input的type=checkbox 同一个name属性checkbox是多选框,radio属性是单选框,给同一个name属性,就会两个只能选一个。
label与input建立关联有两种方法:

  • input type=”checkbox” id=”xxx” label for=”xxx” 爱我 /label 点爱我两字会勾选,label for与input id是一对
  • label input /input /label也会建立关联

select 里的option里的disable就是不能选了,selected是默认选择 value=“”就是没有值的。
select里的mutiple属性就是可以多选。

总结:

  1. a和form标签的功能都是跳转页面,a标签一般是HTTP GET请求,form标签一般是HTTP POST请求
  2. textarea css 里的resize:none就是不可以用户拉框,宽高可以用css里的width,height或者属性cols,rows控制.
table标签:

用来展示数据。
thead tbody tfoot之间的顺序是无关的,浏览器会根据thead tbody tfoot顺序展示。
tr的全称是table row
td的全称是table data
td里面是个数据 th是个表头
colgrounp 里面的col width属性,控制每列的宽度,css里面的border-collapse:collapse,border没有空隙;

什么是空标签

HTML中,从开始标签(start tag)到结束标签(end tag)的所有代码,被称为HTML元素。
由于HTML元素的内容是开始标签与结束标签之间的内容。而某些 HTML 元素具有空内容。(empty content),那些含有空内容的HTML元素,就是空元素。空元素是在开始标签中关闭的。
在 HTML 中有以下这些空元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
area 
base
br
col
command
embed
hr
img
input
keygen
link
meta
param
source
track
wbr

可替换元素

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 img、 object、 video 和 表单元素,如textarea、 input 。 某些元素只在一些特殊情况下表现为可替换元素,例如 audio 和 canvas 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements)。
CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。
需要注意的是,一部分(并非全部)可替换元素,本身具有尺寸和基线(baseline),会被像vertical-align之类的一些 CSS 属性用到。

Proudly published with Hexo