html4

  • 基本文档: html、head、body…
  • 基本标签: h1-h6、p、br、hr、
  • 文本格式化: strong、b、em、i、small、strong、del、sub、sup…
  • 链接: a、link
  • 图片: img、map、area
  • 区块: div、span
  • 三大列表: ul li、ol li、dl dt dd
  • 表格: table、caption、th、tr、td、thead、tbody、tfoot
  • 框架: iframe
  • 表格: form、input、select、option、textarea、button、label

  • 实体: &It、&gt、&copy、&nbsp…

    什么叫语义化

    指对文本内容的结构化(内容语义化)，选择合乎语义的标签(代码语义化)，便于开发者阅读，维护和写出更优雅的代码和同时，让浏览器和爬虫和辅助技术更好解析。
    通俗理解: 用正确的标签做正确的事

    语义化的好处

  • 利于seo优化(也就是搜索引擎和抓取，搜索引擎的爬虫也依赖于标记来确定 上下文和各大关键字的权重)

  • 在样式丢失的时候，还是可以比较好的呈现结构
  • 更好的支持各种终端，例如无障碍阅读和有声小说等;

  • 利于团队开发和维护，W3C给我们定了一个标准，那么团队中遵循这个标准，那么代码的差异就会搜小，在开发和维护的时候就可以提高效率

    学会如何写出更优的html

  • 结构搭建上

  • 代码校验
  • 良好的代码排版
  • 语义化设计
  • 布局规范
  • 标签嵌套规范

  • 网站代码优化

    结构搭建上

  • 采用HTML5标准时开头应该加上<!DOCTYPE html>

  • 应在head标签中引入css文件，这样浏览器就可以在输出HTML之前获取CSS信息
  • 在body标签的末尾引入js文件，这样可以在页面显示之后再编译js文件，以加快页面读取速度，同时有助于hs对页面中的元素进行操作

  • 对元素的操作应添加在js代码中，而不是在html添加，后期难以维护

    代码校验

  • 在项目中加入校验过程: 可以在代码编辑器中使用HTMLHint，SublimeLinter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3C HTML validato等网站在线检测代码

  • 尽量采用HTML5标准
  • 确保正确的HTML层级: 嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候；
  • 在所有不能自动化结束的元素末尾添加结束标签
  • li结束标签不是必须的，所以有些人认为可以不写li，这可以接受，但是ul和ol标签一定要加

  • video和audio元素必须要有结束标签

    良好的代码排版

  • 在项目中保持统一的HTML代码风格

  • 使用代码编辑器来帮助你自动排版，比如Sublime Text中使用自带Reindent，也可以找一些排版工具来帮助你。同样的可以使用一些在线工具；比如 Beautifier和JS Beautifier
  • 在HTML中缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能可以自行修改相应设置。当你发现HTML层级更深的时候，那就表示你需要重构一下你的HTML了
  • 用更直接易读的方式写HTML代码，注意标签的相互嵌套关系

  • 元素要按照常规放置，比如footer元素最好是放在html页面底部，虽然理论上它放在任何位置都可以正常运行

    语义化设计

  • 标签使用h1-h6，列表使用ul或者ol

  • 在适当的地方使用html5的新元素，比如header、footer、nav、aside
  • 正文中的文本内容要用p标签，内容的结构化可以使用html的新元素（或div）
  • 修改文本样式时，em和strong要比i和b更好些，因为前者语义化明显
  • form中包含label元素，input要有type，placeholder以及其他必要的属性，即使值为空都可以
  • 尽量减少无意义标签，例如span和div
  • 尽量减少使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式、那么使用css样式进行添加。
  • 在需要强调的部门，使用strong、em，但是样式尽量使用css样式来描述
  • 使用表格时，标题用caption，表头用th，单元格用td。
  • 列表搭建时，使用
      无序列表
          有序列表
            自定义列表

          1. 每个input标签对应的说明文本都需要使用label标签，并且通过input设置id属性，在lable标签中设置for = id来说明文本和相对应的input关联起来，或者直接在label中内嵌控件。

            布局规范

          2. p元素来放大文字，而不是用来布局。在浏览器自身样式中默认p有margin和其它样式

          3. 想实现换行可以使用block元素或者css的display属性，尽量避免使用br来换行。文字内容中的换行可以用br，但是通常很少这样用。
          4. 不要滥用div，w3c对div的描述是这样的: 当没有其他元素可用时才能使用div，如果想让link和img这类元素能够在结尾换行，可以在样式中添加display:block,这样要比把他们放进div或者使用br换行要好很多

          5. 必须知道哪些是块级元素，这样就可以避免把块级元素放在div里面，比如列表就不需要放在div里面

            布局规范

          6. table是用来放在表格数据中，不是用来布局的

          7. flex box现在越来越流行，学一学没有坏处
          8. 盒模型一定要掌握，必须知道什么时候用padding，什么时候该用margin；是top和left

          9. 使用margin的规则：通常情况下，margin都是添加元素的bottom和right，有时，也可以是top或者left。无论如何，尽量避免同时在bottom和top或者right和left添加margin，可以用last-of-type选择器来去掉最后一个子元素的margin

            标签嵌套规范

          10. 块元素可以包含内联元素或某些块元素，但是内联元素却不能包含元素，它只能包含其它的内联元素

            • ✅
            • ✅
            •  ❌
          11. 块级元素不能放在p里面

              ❎

            • ❎
          12. 有几个特殊的块级元素只能包含内嵌元素，不能包含块级元素
          13. 这几个特殊的标签是: h1-h6 p dt
          14. ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol一下只能更li,dl下只能跟dt,dd

          15. a里面不能嵌套a标签

            网站代码优化

            要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验

          16. 网页的title，keyword，descrption一定要写，要精简全面

          17. 网页使用语义化代码
          18. a标签设置title属性；外部链接还要设置rel属性—rel=’nofollow’,nofollow值会使得网络爬虫不顺着链接爬出
          19. 所有的标题使用h1标签，样式可以使用css设置
          20. br标签只能用于文本换行
          21. table一定要使用caption设置表格题目
          22. strong用来设置重标，em设置斜体

          23. img标签一定要设置其alt属性

            html及拓展

            DOCTYPE

          24. 文档声明

          25. 声明帮助浏览器正确地显示网页
          26. 定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档
          27. HTML也要多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全地显示HTML页面
          28. 一般高版本兼容低版本，所以工作中默认写高版本就可以了(HTML5文档声明)
          29. 文档声明不区分大小写
          30. 文档声明必须放在第一行(因为浏览器是从上到下解析的)
          31. 必须写文档声明，如果不写就会发生怪异事件
          32. 文档声明不是一个标签，它只是一个申明

      meta
      meta:元信息，该标签提供关于HTML文档的元数据。元数不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎(关键词)，或其他web服务。

      1. <meta charset='UTF-8'/> 申明编码
      2. <meta name="keword" content=""/> 页面关键词
      3. <meta name="decrption" content=""/> 页面描述
      4. <meta charset='viewport' content="width=devie-width,intial-scale==1"/> 视口-移动设备
      5. <meta name="author" content="author name"/> 定义作者
      6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 使用ie最新版本

      HTML Entity
      在编写HTML页面时，需要用到”<”、”>”、”空格”等符号，直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。那么需要把这些字符进行转义，以另一种方式书写，以及相同的形式展现。

      • 在HTML中，这些字符可称为HTML Entity,即HTML字符实体。
      • 一个HTML Entity 都含有2种转义格式: Entity Name 和Entity Number

      作用:

      • 显示HTML保留字符，如<、>、&、”等(联想到防御XSS攻击)
      • 表示难以用常规输入设备输入的字符，如©、®、±等
      • 表示给定的字符编号可能无法表示文档集的其他字符，如ASCII编码想显示中文，使用水表示“水”

      Entity Name
      格式: &entityName

      • 说明: “&”开头，”;”结尾以语义的形式描述字符。如字符”<”,英文名称为”less than”,Entity Name为”&It”,取自”less than”2个字母的首字母

      Entity Number
      格式化: &#entityNumber;

      • 说明:”&#开头”，”;”结尾，以编号的形式描述字符。此编号可以为十进制或者十六进制,以(&#x)开头数字格式

      SVG矢量图形

      • SVG指可伸缩矢量图
      • SVG用来定义网格的基于矢量的图形
      • SVG使用XML格式定义图形
      • SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
      • SVG是万维网联盟的标准
      • SVG与诸如DOM何XSL之类的W3C是一整体

      SVG优势
      与其他图像格式想必（比如JPEG和GIF），使用SVG的优势在于:

      • SVG图像可通过文本编辑器来创建和修改
      • SVG图像可被搜索，索引，脚本化或压缩
      • SVG是可伸缩的
      • SVG图像可在任何的分辨率下被高质量地打印
      • SVG可在图像质量不下降 的情况下放大

      浏览器支持

      • ie9+ ,firefox,opera,chrome,safari支持内联svg

      svg使用
      把svg直接嵌入HTML页面

      svg代码以svg元素开发，包括svg和关闭。这是根元素。
      width和height属性可设置此svg文档的宽度和高度。
      version属性可定义所使用的svg版本，xmIns属性可定义SVG命名空间
      stroke和stroke-width属性控制如何显示形状的轮廓。我们把圆的轮廓设置为5px，黑边框
      fill填充的颜色