HTML拾遗

HTML拾遗

• 这篇博文用来记录我在写html的时候遇到的不清楚的、没有理解的、未能察觉的、反复使用搜索引擎查询的点和一些总结性的知识。方便查阅。不按期更新。
• 这篇博文内容来源为网络，包含本身的理解总结，欢迎在评论区指出错误。
• 文章引用的内容版权归原做者全部，侵权删除。

W3C 简介

万维网联盟（World Wide Web Consortium，W3C），又称 W3C理事会，是万维网的主要 国际标准组织。
万维网联盟（W3C）由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心（CERN）后成立，该组织试图经过 W3C制定的新标准来促进业界成员间的 兼容性和协议。联盟试图让全部的供应商实施一套 W3C推荐标准。

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

CSS：层叠样式表
DOM：文档对象模型
HTML：超文本标记语言
RDF：资源描述框架
SMIL：同步多媒体集成语言
SVG：可缩放向量图形
XHTML：可扩展超文本标记语言
XML：可扩展标记语言
——维基百科

MDN 简介

Mozilla 开发者社区（MDN）是一个完整的学习平台，你能够在这里深刻学习Web技术以及可以驱动Web的软件，包括：

• 网络标准（例如：CSS、HTML 和 JavaScript）
• 开发开放网络应用
• 开发 Firefox 附加组件

MDN的使命很简单：提供给开发者们更轻易构建Web项目的信息。咱们致力于记录互联网上的开源技术。

关于MDN（官网）

HTML5 全部标签列表

HTML5标签列表(MDN)

这里列出了 全部标准化的 HTML5 元素，使用起始标签描述，按照功能分组。与列出全部标准化的、非标准化的、有效的、废弃的标签的
HTML 元素索引 不一样的是，该页只列出 有效的 HTML5 元素。 新网站应当只使用**这里列出的元素。

符号 这个元素在 HTML5 中加入 表明该元素是在 HTML5
中新增的。另外注意，这里列出的其余元素可能在 HTML5 标准中获得了扩充或通过修改。

HTML5(MND)

空标签

空元素MDN

一个空元素（empty element）多是 HTML，SVG，或者 MathML
里的一个不可能存在子节点（因此闭合标签没有意义）（例如内嵌的元素或者元素内的文本）的element。

在 HTML 中有如下这些空元素：

• <area>
• <br>
• <col>
• <colgroup> when the span is present
• <command>
• <embed>
• <hr>
• <img>
• <input>
• <keygen>
• <link>
• <meta>
• <param>
• <source>
• <track>
• <wbr>

可替换元素和不可替换元素

参考

可替换元素

可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

CSS 里，可替换元素（replaced element）的展示不是由CSS来控制的。这些元素是一类
外观渲染独立于CSS的外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而若是查看(x)html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，仍是单选按钮等。
总的来讲，就是元素被替换成了其余内容。

例如<img src="xxx.png>浏览器下载src为的xxx.png的图片，而后替换这个img标签因此叫可替换标签，因此他的宽高是由原来的内容决定的。

可替换元素自带宽高（自带宽高是指默认有一个自己的宽高和属性宽高），而后利用css能够覆盖他的自带宽高。

而span不是可替换元素，自己没有自带宽高，span是由里面的文字，里面自己的内容决定的。

不可替换元素

(x)html 的大多数元素是不可替换元素，即其 内容直接表现给用户端（例如浏览器）。

例如：<p>段落的内容</p> 段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

显示元素--块级元素和行内元素

块级元素

在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域（块级元素的流体特性），并且在其左右两边没有其余元素，即块级元素默认是独占一行的。

典型的块级元素有：<div>、<p>、<h1>到<h6>、<table>，等等。
浮动元素以及display属性为block、list-item的元素都是块级元素。

Div，divide，划分，把页面划分为几块。

行内元素

行内元素不造成新内容块，即在其左右能够有其余元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。
几乎全部的可替换元素都是行内元素，例如 <img> 、 <input> 等等。

Span，在一行里面横向划分

元素的高度

块级元素的高度

块级元素具备height width属性，能够经过他们直接设置宽和高

对于可替换的元素（行内元素）

替换元素通常有内在尺寸和宽高比(auto时起做用)，因此具备width和height，能够设定。
例如你不指定img的width和height时，就按其默认内在尺寸显示，也就是图片被保存的时候的宽度和高度。
对于表单元素，浏览器也有默认的样式，包括宽度和高度。

不可替换元素（行内元素）

例如<span>这是一个span</span>，经过line-height属性来设置行高

行高

从上到下四条线分别是顶线、中线、基线、底线，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

a 标签注意点

target属性

_blank新窗口
_self本窗口
_parent父窗口
_top顶层窗口

download属性

a标签加了download属性，就会下载本html页面。
一个网页以两种方式处理页面，一个是显示，一个是下载。

若是返回的响应是

那么浏览器就如下载的方式打开这个页面，不是以展现的形式打开这个页面。

herf属性

• herf里面的属性不能写<a href="qq.com"></a>，由于它会打开当前路径下的qq.com文件，必须加上协议。<a href="http://qq.com"></a>
• 还有一种是 a标签的无协议绝对地址<a href="//qq.com"></a>，打开时所用协议为当前页面的协议。
• 尽可能不要用用file协议。
  解决方法：安装http-server

  
  在须要的有index预览的目录下面输入hs –c-1，意思就是不要有缓存，而后打开本地服务器8080 端口，就能看到你的server了。
  这时候再打开<a href="//qq.com"></a>就是默认的http协议打开腾讯的真正网站了，而不是file协议了。

  因此herf支持无协议

• 下面两个打开的都是本目录下面的xxx.html

  <a href="xxx.html">qq1</a>
  <a href="./xxx.html">qq2</a>

• <a href="#mataotao">qq3</a> 锚点
• <a href="?name=mataotao"></a>添加查询字符串会发起一个get请求，而写#的时候是不发请求的，由于#锚点只是页面内的跳转。
• <a href="javascrip: alert(1);">"javascrip: alert(1);"</a>直接执行js代码，javascript：假装协议。

• <a href="javascrip:;">"javascrip:;"</a>做用：若是想写一个a标签，可是但愿这个a标签不要跳转，就用这段话。缘由以下：

  • 若是直接写的<a href="#">#</a>会出现问题，页面会调回最顶部。
  • 若是不谢herf属性，a标签就和span没有区别。不会有跳转。
  • <a href="">#</a>会刷新页面，也不行。
  • 因此最终伪协议<a href="javascrip:;">"javascrip:;"</a>不能不加分号，不加分号就会出现错误，由于herf会认为javascrip:是一个协议，而协议后面若是没有内容，就会出现错误，因此加了分号意思就是协议结束，且什么都不作。

安装http-server

-g的意思是全局安装

目录已经加入到path里面了，因此能够直接用hs或者http-server这个命令。

http-server做用就是当时写的那个nodejs简易服务器同样，能够不用写代码，直接将本地的8080端口做为服务器端口，接受请求。

form 标签注意事项

get请求是请求获得页面，post请求是请求提交数据

• a标签发起的是get请求，form通常发起的是post请求，发get请求没有意义。

• 除了post方法以外没有别的方法能够上传第四部分的请求。

  请求四个部分：请求头，keyvalue，回车，内容

• http协议，提交的内容都是明文的。加入中间有人截取内容，那么就能被截取到。
• 全部不是英文的字符，在提交表单中，都会被转义，每一个字节都会转换为UTF-8，且前面会加%号。
• 若是form表单使用的是get方法，那么会把提交的内容放到查询参数里面，而post会把提交的内容放到第四部分。
• 也可让post出现查询参数，直接在action里写就会出现。
• 在form中，若是<button>没有指定type，且只有一个button，那么他会升级为提交按钮。
• label for id 获取焦点，便可以跟input关联起来。简易写法用label把input包起来。
• 多选checkbox使用方法：提交时name=value。（此处使用get方法是为了方便在浏览器地址栏中查看查询字符串）
• 单选radio使用方法使用方法也是name=value，可是name相同时只能选择一个。

• select使用方法

  • 注意select的属性multiple，意思是可多选多选。
  • 注意option两个属性，disabled，selected，不可选择和默认选择。

• 单行文本框和多行文本框必定要加上name。

  <form action="" method="get">
      <input type="text" name="inputTextTest">
      
      <textarea name="textareaTest" id="" cols="30" rows="10"></textarea>
      <input type="submit">
  </form>

  结果：文本框里填写的内容就是value的值

• form的action属性做用是指定请求路径。
• form的method属性做用是指定请求动词。

table 标签注意事项

tr是“table row（表格行）”的缩写，用于表示 一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个 单元格（cell）的开始和结束。

用法

去掉border之间空隙

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名同样的属性值（因此不须要写属性值）。例如 disabled 属性，他们能够标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled">

采用以下简写更佳(下面一句为可用可输入数据的文本框，以做为对比)：

<input type="text" disabled>

<input type="text">

转义符（实体引用）

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 好比说若是你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
咱们必须使用字符引用 —— 表示字符的特殊编码, 它们能够在那些状况下使用. 每一个字符引用以符号&开始, 以分号;结束

<    &lt;
>    &gt;
"    &quot;
'    &apos;
&    &amp;

HTML中的空白

在HTML代码中包含了不少的空格——这是没有必要的；下面的两个代码片断是等价的：

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

不管你用了多少空白(包括空白字符，包括换行), 当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减小为一个单独的空格符.
那么多的空白就是为了代码的可读性。

元数据：<meta>元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据，—— <meta> 元素。

有不少不一样种类的 <meta> 元素能够被包含进你的页面的<head>元素，例如指定你的文档中字符的编码<meta charset="utf-8">。这个元素简单的指定了文档的字符编码 —— 在这个文档中被容许使用的字符集。 utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。 这意味着你的web页面能够显示任意的语言。

utf-8是unicode字符集的一种编码方式,unicode字符集可收录的字符个数为65536-2 1024+10241024=1112064.一百多万个，但目前世界上全部文字符号加起来也没这么多，因此unicode字符集还有不少位置是没有用上的。

杂乱的小点

HTML5标签

• nav footer main
• 搜索框<input type="search">
• 滑动条<input type="range">
• 章节<section></section>

• dl dt dd 用法：
  描述， 描述标题，描述数据

  <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
      </dl>

iframe

noscript

若是用户浏览器不支持script中的内容，则会显示noscript中的内容。

小点记录

• <em>表示语气重，<strong>表示地位重
• <textarea>多行文本
• button能够有子元素，input不能够有子元素
• Css目前只支持横向布局，纵向布局，这样写css最方便，由于全部布局，不论是有误内嵌，最终全都转化为这两种布局

英文释义

display：展现
specifies指定
alternate备用audio音频