html基础知识整理

by Teobler on 13 / 07 / 2017

views

这篇文章衔接上篇，主要罗列一些前端面试中可能问到的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，这个属性对 元素来说是必需的

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

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

html5新增常用标签

3D效果与动画

  • canvas

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

音频视频

  • audio

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

  • video

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

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

特殊标签

  • 准确的说，!DOCTYPE不应该算是一个html标签。 告知浏览器当前的 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" />