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 元素。新网站应当只使用**这里列出的元素。

符号 clipboard.png

这个元素在 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页面。
一个网页以两种方式处理页面，一个是显示，一个是下载。

如果返回的响应是

clipboard.png

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

herf属性

• herf里面的属性不能写<a href="qq.com"></a>，因为它会打开当前路径下的qq.com文件，必须加上协议。<a href="http://qq.com"></a>

• 还有一种是 a标签的无协议绝对地址<a href="//qq.com"></a>，打开时所用协议为当前页面的协议。

• 尽量不要用用file协议。
  解决方法：安装http-server

  clipboard.png
  在需要的有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>

  clipboard.png 锚点

• <a href="?name=mataotao"></a>添加查询字符串会发起一个get请求，而写#的时候是不发请求的，因为#锚点只是页面内的跳转。

  clipboard.png

• <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

1
-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使用方法：

  clipboard.png clipboard.png 提交时name=value。（此处使用get方法是为了方便在浏览器地址栏中查看查询字符串）

• 单选radio使用方法

  clipboard.png clipboard.png 使用方法也是name=value，但是name相同时只能选择一个。

• select使用方法

  clipboard.png clipboard.png
  • 注意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的值 clipboard.png

• form的action属性作用是指定请求路径。

• form的method属性作用是指定请求动词。

table 标签注意事项

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

用法

clipboard.png

去掉border之间空隙

clipboard.png

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值（所以不需要写属性值）。例如 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页面可以显示任意的语言。

杂乱的小点

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

clipboard.png

noscript

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

小点记录

• <em>表示语气重，<strong>表示地位重
• <textarea>多行文本
• button可以有子元素，input不可以有子元素 clipboard.png
• Css目前只支持横向布局，纵向布局，这样写css最方便，因为所有布局，不管是有误内嵌，最终全都转化为这两种布局

英文释义

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