校招进行时（三）---html基础

这篇文章衔接上篇，主要罗列一些前端面试中可能问到的html中最基本的问题。

(格式有点乱，内容有点水，罗列了一些基本用法，你们随便看看)

经常使用标签

容器标签

• div

  div标签自己无特殊意义，做为一个块级容器，主要用于组合其余html元素经常使用于页面的布局。

• span

  span标签与div标签相似，自己无特殊意义，但它在结合诸如class,lang,或者dir属性时，可做为行内元素的容器。它起到描述（文档内容）的做用。

文本标签

• h1-h6

  h标签用于设置网页标题或文章标题，为了符合语义化，尽可能用h1做为整个网页或网站的标题，h2做下一级标题，以此类推

• p

  p标签用于设置网页的文体，是大多数文字的主要标签，表示文章或某些文字的一个段落。

• em 与 strong

  em标签的做用是强调内容，strong标签的做用是着重内容，在浏览器中都会被渲染成加粗字体，可是在英文文章中，表示强调的文字会用斜体，例如：专有名词、术语、外来名词等；而strong则使用粗体，表示须要着重表现的文字。同时，若是使用盲人阅读设备，strong标签中的内容会被重读。

列表与表格标签

• ul、ol 与 li

  ul标签表明多项无序列表，即无数值排序的集合；而ol标签表明多项有序列表，是有数值排序的集合。当li标签嵌套在ul标签中时，是无序列表中的列表项，此时li的顺序在列表中没有意义；而当li嵌套在ol标签中时，则是有序列表中的列表项，此时第一个li标签则排序为一，以此类推。

• dl 与 dt、dd

  dl是一个定义列表，用来解释说明一些术语或特定词句。其中dt为术语部分（待解释部分），dd为dt的解释说明部分。

• table

  table标签用于定义表格，在早期因为浏览器对css技术的不支持，人们大量利用table标签进行页面布局，在现代的前端开发中已经摒弃了这种布局方式。可是也不用一棒子打死，table布局在布局表单内容时仍是要方便的多。

  在使用table标签时，tr标签订义行，th标签订义表头，td标签订义表格单元，更复杂的表格还会包含caption、col、colgroup、thead、tfoot 以及 tbody 元素。

  注意：在 HTML5 中，table标签仅支持 "border" 属性，而且只容许使用值 "1" 或 ""

表单标签

• form

  form标签在文档中定义了一个表单，表单中有各类表单控件，最后浏览器会将表单中的信息提交到服务器。其中，form标签有几个经常使用的重要属性：

  • name

  name标签可让咱们方便的用js找到某个特定的表单，从而找到此表单下的表单控件，这样就能够对表单中的各个部分进行控制了。（form表单中的表单控件也有name属性）

  • action

  action属性是当前表单所要提交到的服务器处理url，表单会被提交到action属性中的页面进行处理。

  • method

  提交表单到服务器的方法，可选GET和POST，两个方法的特色和做用可到网上查阅，从此我也会慢慢整理。

• input

  input标签用于接收用户的填写的信息，经过form表单提交到服务器，同时经过设置type属性的不一样值能够赋予input标签不一样的功能，经常使用功能以下：

  • text（默认）: 用于接收文本信息如用户名等

  • password: 用于接收密码

  • radio: 单选按钮（使用value属性标注提交值）

  • checkbox: 复选框（使用value属性标注提交值）

  • file: 文件上传

  • image: 图像上传

  • data: 输入日期控件（年月日）

• button

  将button标签归类到这里实际上是不太合适的（可是我不知道怎么归了啊=。=）button标签在表单中主要是用于提交表单，当用户填写完成后点击按钮进行表单的提交等操做。经过设置type属性也有不一样的做用：

  • submit: 此按钮提交表单数据给服务器。未指定时，此值为默认值，或者若是此属性动态变为空值或无效值

  • reset: 此按钮重置全部组件为初始值

  • button: 此按钮没有默认行为。它能够有与元素事件相关的客户端脚本，当事件出现时可触发

• select 与 option
  
  select标签为下拉菜单，须要配合option标签一块儿使用，option标签为下拉菜单中的选项。经过指定select标签中的mutiple或size属性可设置select为下拉菜单或是列表框

• textarea

  用于定义多行文本域，cols和rows属性是必需要填写的，他们用于指定文本域的宽度和高度。多行文本域比较特殊，除了普通的事件属性，他还能够指定onselect属性，用于表示文本域里面的内容被选中时候的事件。

超连接（锚点）

• a

  a标签用于建立一个到其余网页，文件，或同一页面内的位置，固然也能够是电子邮件地址或任何其余URL的超连接。下面是几个经常使用的属性：

  • href

  这是一个必需属性为锚定义一个超文本连接来源。这表示连接目标的URL或URL片断

  • download

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

  若是属性有一个值，它将在保存提示中用做预先填写的文件名 (用户仍然能够根据须要更改文件名)。对容许的值没有限制，可是 / 和 被转换为下划线。大多数文件系统限制文件名中的一些标点符号，浏览器会相应地调整建议的名称。

  • target

  该属性指定在何处显示连接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其余关键词。如下关键字具备特殊的意义:

  • _self: 当前页面加载，会覆盖掉当前页面。此值是默认的，若是没有指定属性的话

  • _blank: 新窗口打开，根据浏览器的不一样设置，会在新标签页或新的浏览器窗口中打开页面

  • _parent: 加载响应到当前框架的父框架或当前的HTML5浏览上下文的父浏览上下文。若是没有parent框架或者浏览上下文，此选项的行为方式相同_self。

  • _top: IHTML4中：加载的响应成完整的，原来的窗口，取消全部其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，而且没有parent）。若是没有parent框架或者浏览上下文，此选项的行为方式相同_self

图片标签

• img

  用来设置文档中的图像内容，主要属性以下：

  • src: 图像的 URL，这个属性对 <img> 元素来讲是必需的

  • alt: 这个属性定义了描述图像的替换文本。若是图像的URL是错误的，该图像不在支持的格式列表中，或者若是图像尚未被下载,用户将看到这个显示。

  注意：在标准规范中，省略这个属性代表该图像是内容的关键部分，但没有等效的文本可用。把这个属性设置为空字符串，代表该图像不是内容的关键部分，非可视化浏览器在渲染的时候可能会忽略它。

html5新增经常使用标签

3D效果与动画

• canvas

canvas 标签订义图形，好比图表和其余图像。这个 HTML 元素是为了客户端矢量图形而设计的。它本身没有行为，但却把一个绘图 API 展示给客户端 JavaScript 以使脚本可以把想绘制的东西都绘制到一块画布上。

音频视频

• audio

audio 标签用于在文档中表示音频内容。它能够包含多个音频资源， 这些音频资源可使用 src 属性或者source 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持 audio 元素的浏览器，audio 元素也能够做为浏览器不识别的内容加入到文档中。

• video

用于在文档中嵌入视频内容。

ps.对于html5来讲，经常使用的标签大概就这么多，缘由仍是浏览器的兼容问题，大多数标签使用起来不方便。主要使用仍是特定场景下的api调用，如摄像头，gps定位等。html5的具体特性可查阅MDN:HTML5

特殊标签

• <!DOCTYPE>

准确的说，!DOCTYPE不该该算是一个html标签。<!DOCTYPE> 告知浏览器当前的 HTML (或 XML)文档是哪个版本,应该用那种规范来解析当前文档. Doctype 是一条声明,而不是一个标签; 也能够把它叫作 "文档类型声明", 或 简称为 "DTD".

• meta

meta标签位于html文档头部中的head标签中。meta标签用来描述一个HTML网页文档的属性，例如做者、日期和时间、网页描述、关键词、页面刷新等元数据。这些数据将用于服务搜索引擎和其余网络服务.

因为meta标签的属性实在太多，这里列举几个经常使用属性：

• name

  name属性主要用于描述网页，好比网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述。其中name属性有三个经常使用的取值，分别是：

  • keyword: 告诉搜索引擎你网站的关键词

  • description: 用于告诉搜索网站你网站的主要内容

  • viewport: 移动设备窗口设置

  其中重点说下viewport的设置：

  width: 控制 viewport 的大小，能够指定的一个值，例如 600 或 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

  height: 和 width 相对应，指定高度

  initial-scale: 初始缩放比例，也便是当页面第一次 load 的时候缩放比例

  maximum-scale: 容许用户缩放到的最大比例

  minimum-scale: 容许用户缩放到的最小比例

  user-scalable: 用户是否能够手动缩放

  <meta name="viewport" content="width=device-width, initial-scale=1">

  • http-equiv
    
    这个属性用于设置http请求相关参数。使用方法与name同样，须要配合content使用，先使用http-equiv定义，再使用content进行相关设置。

    • content-Type: 设置字符集，在html5中已经修改成 charset，通常推荐设置成 utf-8 字符集

      <meta charset="utf-8">

    • X-UA-Compatible: 设置浏览器采用何种版本渲染当前页面，通常选择最新版本

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    • cache-control: 指定请求和响应遵循的缓存机制

    no-cache: 先发送请求，与服务器确认该资源是否被更改，若是未被更改，则使用缓存。
    

    no-store: 不容许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
    

    public : 缓存全部响应，但并不是必须。由于max-age也能够作到相同效果
    

    private : 只为单个用户缓存，所以不容许任何中继进行缓存。（好比说CDN就不容许缓存private的响应）
    

    maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器从新请求。例如：max-age=60表示响应能够再缓存和重用 60 秒。

    no-siteapp: 禁止自动转码。假设某网页没有进行移动端适配，在移动端进行浏览时，从某个入口（例如百度）进入该网页，能够防止该入口对网页进行移动设备转码。虽然转码的意图是好的，可是有的时候转码以后效果不尽人意，就能够设置这个属性。

    <meta http-equiv="Cache-Control" content="no-siteapp" />