一、基础

  1. 标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。
  2. 标签属性是对标签的一种描述方式。

  3. 标签属性分通用属性、自有属性和自定义属性。

  4. 通用属性: 所有标签都具有的属性（除
    标签外）。常见的通用属性有：

  • id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。
  • class：用来给标签取一个类名。
  • style：用来设置该标签的行内样式。
  • title：当鼠标移到该标签，所显示的提示内容。
  1. 自定义标签属性：通常用来传值或用于图片懒加载等方面。
  • 格式：data-*
  • <img data-src="图片名" alt="提示文本"/>
  • <p data-id="goodsid">...</p>
  1. 标签分块级和行级（内联）标签两种。
  • 块级标签独占一行，能设置宽高属性；如果不设置，则宽度默认为浏览器窗口的100%，高度由内容决定。
  • 行级标签不独占一行，不识别宽高属性，其宽高分别为内容实际的宽高。多个行级标签能并排在一行上。
  1. 可通过设置样式：
  • dispaly:inline; 使块级标签转换为行级标签。
  • display:block; 使行级标签转换为块级标签。
  • display:inline-block; 使任意标签转换为行内块标签（不独占一行，能设置宽高属性）。
  1. 标签分类：
  • 常见块级标签：div, p, h1~h6, ul, ol, dl (标题列表，dt内放列表标题，dd内放列表内容) , pre(预格式化标签), table, address ,tr等；
  • 常见行级标签：a, b, strong, i, em, span, sub(下标), sup(上标),th 等；
  • 常见行内块标签：img, input, textarea 等。
  1. 标签的嵌套规范：
  • 块级标签可以包含行级标签或块级标签，但行级标签不能包含块级标签；
  • p, h1~h6, dt标签中只能包含行级标签，不能再包含块级标签；
  • 块级标签只能与块级标签并列，行级标签只能与行级标签并列。
  1. 开发过程中，尽量使用语义化标签，便于SEO识别网页内容。

    二、常用标签

  1. table主要用于呈现格式化数据。表格是由行和列组成。

    1. <table>
    2. <!-- 第一行 -->
    3.  <tr>
    4.  <!-- th标签的内容会自动加粗居中 -->
    5.      <th></th>
    6.      <th></th>
    7.      ...
    8.  </tr>
    9. <!-- 第二行 -->
    10.  <tr>
    11.  <!-- 一个td标签代表一列 -->
    12.      <td></td>
    13.      <td></td>
    14.      ...
    15.   </tr>
    16.  ...
    17. </table>

  2. table属性

  • border: 表格边框，默认单位是像素
  • width: 表格宽度，默认单位是像素
  • align: 表格对齐方式（left（默认）/center/right）
  • cellpadding: 单元格文本与边框的距离
  • cellspacing: 单元格边框间距
  • rowspan: 跨行
  • colspan: 跨列

  1. 完整表格组成：caption（标题)、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。

  2. form 表单标签是所有标签最核心标签之一，它是用来实现前后端交互的一个重要标签。

    常见属性：

  • name: 表单名称；
  • action: 表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下；
  • method: 前端提交数据到后端的方法，主要有：get和post，默认的是get。

表单元素：

  • input 类：主用用来输入，选择或发出指令。type: text / password / radio / checkbox / file / button / image / submit / reset

① text: 单行文本输入框 type=”text”可以不写，默认值。
属性：placeholder(提示) / name(命名) / minlength 和 maxlength(最少/多输入的字符个数) / disabled(失效) / readonly(只读) / value(默认值) / pattern(正则匹配)
② password: 密码框。
属性：与text一样。
③ radio: 单选钮，通常是两项以上。
常用属性：name(必须要有) / value / checked(默认选中) / disabled(失效) / readonly(只读)
④ checkbox: 复选框，可以用来选择0项、1项或多项。
常用属性：name(必须要有) / value / checked(默认选中) / disabled(失效) / readonly(只读)
⑤ file: 文件上传按钮
⑥ button: 普通按钮，通常用它去调用脚本代码。
常用属性：value(按钮的标题) / disabled(失效)
⑦ image: 图片按钮，用法与button一样。
特殊属性：src (用来加载提示图片，用它替换了value)，它有提交功能，与submit功能一样。
⑧ submit: 提交按钮，用来将表单数据提交到后台。
常用属性：value(按钮的标题) / disabled(失效)
⑨ reset: 重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。
常用属性：value(按钮的标题) / disabled(失效)

  • textarea 类

文本域（也可以叫多行文本框），主要用于输入大批量的文本内容。
常用属性：name / id / cols(列数) / rows(行数) / placeholder / minlength / maxlength / required(必须输入) / value

  • select 类

下拉列表框，默认用于单项选择。用option呈现每个选项。
multiple：表示可以多选，这时的下拉列表框变成了列表框
size: 最多显示的行数

  • button 类

普通按钮，具有提交功能。可以单独使用，不写在form元素中；如果写在form中，有提交功能。

  1. iframe:框架集，是用来将多个网页文件组合成一个文件。常用属性：
  • name: 框架名
  • src: 引入的外部html文件
  • scrolling: 滚动条(yes/no/auto)
  • width: 宽度(%/px)
  • height: 高度(%/px)
  • frameborder: 是否有边框(1/0)
  • marginheight: 框架离顶部和底端的距离(%/px)
  • marginwidth: 框架离左右的距离(%/px)

【注意】在实际开发，尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO。

三、HTML5新增内容（IE9+）

  1. 语义化标签【在IE9中需要把下列标签转换为块级】
  • ：头部标签
  • ：内容标签
  • ：定义文档某个区域
  • ：尾部标签
  1. 多媒体标签【使用它们可以很方便地在页面中嵌入音频和视频，而不需使用flash或其他插件】
    ：视频

    ① 特性：支持三种视频格式MP4、WebM、Ogg，推荐MP4
    ② 语法：<video src="文件地址"></video>
    ③ 常用属性：
  • autopaly：视频自动播放（Chrome需要添加muted来解决自动播放的问题）
  • muted：静音播放
  • controls：向用户显示播放控件
  • width / height：设置播放器的宽度 / 高度
  • loop：循环播放视频
  • preload：auto预先加载视频、none不会预先加载；若存在autoplay属性则该属性无效
  • poster：等待加载时的画面图片


① 特性：支持三种音频格式MP3、Wav、Ogg，推荐MP3
② 语法：<audio src="文件地址"></audio>
③ 常用属性：

  • autopaly：音频自动播放（Chrome无法自动播放音频，需要用JS解决）
  • controls：向用户显示播放控件
  • loop：循环播放音频

  1. 新 type：email、url、date、time、month、week、number、tel、search、color

  2. 新的表单属性

  • required：表单拥有该属性表示其内容不能为空，必填
  • placeholder：表单的提示信息，若存在默认值将不显示
  • autofocus：自动聚焦，页面加载完成后自动聚焦到指定表单
  • autocomplete：默认on，表单会提示之前输入过的值；off则不提示
  • multiple：用于文件上传，可选择多个文件同时上传

    四、网站TDK三大标签SEO优化

  1. title：网站标题
    ① title 具有不可替代性，是我们网页的第一个重要标签，也是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
    ② 语法格式：<title>内容</title>
    ③ 建议内容：网站名 - 网站介绍（尽量不要超过30个汉字）
    【例1】京东JD.COM - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！
    【例2】小米商城 - 小米10 Pro、Redmi Note 9、小米MIX Alpha，小米电视官方网站

  2. description：网站说明
    ① description 用于简单说明网站主要是做什么的。
    ② 语法格式：<meta name="description" content="内容" />
    ③ 建议内容：网站名 - 网站总体业务和主题的概括，多采用“我们是…”、“我们提供…”之类的语句。
    【例1】<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    【例2】<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />

  3. keywords：关键字
    ① keywords 是页面的关键字，是搜索引擎的关注点之一。
    ② 语法格式：<meta name="keywords" content="内容" />
    ③ 建议内容：6 ~ 8个关键词，关键词之间使用英文逗号隔开，即 关键词,关键词,… 的形式，关键词越靠前权重越大。
    【例1】<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
    【例2】<meta name="keywords" content="小米,redmi,小米10,Redmi Note 9,小米MIX Alpha,小米商城" />