HTML

HyperText Markup Language

标签

常用标签

  • <q>引用(quote)
  • <cite> 元素定义著作的标题。
  • <blockquote> 长引用,浏览器通常会对 <blockquote> 元素进行缩进处理。
  • <abbr> 元素定义缩写或首字母缩略语。
  • 元素用于覆盖当前文本方向:
    1
    2
    <bdo dir="rtl">This text will be written from right to left</bdo>
    //使用css的direction属性也能实现
  • <pre> 可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。
  • <a> 标签定义超链接，用于从一张页面链接到另一张页面。最重要的属性是 href 属性，它指示链接的目标。

    Target 属性，你可以定义被链接的文档在何处显示。 target=”_blank” 新窗口打开文档
    当使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接
  • <caption>指定<table>的标题
  • <ruby>和<rt>为文字添加注释

    H5新标签

  • <header><main><footer>在一个网页中只能出现一次
  • <article>独立区域 <section>划分区域 <aside> 辅助区域
  • <figure> <figcaption>描述图片或视频
  • <details>和<summary>定义细节展开
  • <progress>定义进度 min max value定义值

    关于meta标签

    设置视口

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

  • width:可视区域的宽度，值可为数字或关键词device-width。
  • width=device-width ：表示宽度是设备屏幕的宽度
  • initial-scale=1.0：表示初始的缩放比例
  • intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。
  • maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
  • maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
  • user-scalable:是否可对页面进行缩放，no 禁止缩放
  • minimum-scale=0.5：表示最小的缩放比例
  • maximum-scale=2.0：表示最大的缩放比例
  • user-scalable=yes：表示用户是否可以调整缩放比例

    meta标签的name属性

    语法

    1
    <meta name="value">
    name 属性规定 content 属性的信息/值的名称。

application-name 规定页面所代表的 Web 应用程序的名称。

实例

author 规定文档的作者的名字。

1
<meta name="author" content="Hege Refsnes">

实例

description 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。

1
<meta name="description" content="Free web tutorials">

实例

generator 规定用于生成文档的一个软件包（不用于手写页面）。

1
<meta name="generator" content="FrontPage 4.0">

实例

keywords 规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。

提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）。

1
<meta name="keywords" content="HTML, meta tag, tag reference">

HTML 列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。\

<td>的colspan和rowspan可以设置单元格跨度

表单

标签

<form>标签的action提交的地址，method为提交方法

新的input控件

  • email:电子邮件输入框
  • rul：网址输入
  • number：数值输入
  • range：滑动条
  • data/month/week 日期控件
  • search：搜索框
  • color:颜色控件
  • tel：电话输入框（在移动端回默认吊起数字键盘）
  • time:时间控件

    表单属性

  • autocomplete：自动完成
  • autofocus：自动获取焦点
  • required：不能为空
  • pattern：正则验证
  • optgroup标签可以为select分组

    常见问题

    编码

    URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

    转义字符

    字符 十进制 转义字符
    “ “ &quot;
    & & &amp;
    < < &lt;
    > > &gt;
    不断开空格(non-breaking space) &nbsp;

    空白页面

    _about:blank