2020-03-24复习笔记

浏览器（内核）

• Chrome（Blink）
• Firefox （Gecko）
• Safari （Webkit）
• Opera （Presto）
• IE (Trident)

meta标签：

指定编码字符集，告诉浏览器用哪种字符集解析文件。

utf-8字符集：

包含世界上所有的文字。（被称为万国码）
保存文件时报存格式要和mate标签指定的字符集格式保持一致，不然还是会乱码

标签分类

• 单标签：不需要包裹内容的。
• 双标签：需要包裹内容的。

标签的作用

• 标签的作用不是给标签内的东西设置样式，设置样式其实是浏览器干的事，标签只负责让浏览器识别它是什么，浏览器会再根据它的类型设置对应的样式。

DTD文档声明

• 样式为:，大小写没限制，都行。

• 由于HTML先后有多个规范出台，不同规范可能存在语法差异，所以要搞用DTD文档告诉浏览器我这是用哪一种规范写的。

• DTD文档声明必须写在文件的第一行！！！

      #文件第一行！！！

      
              
              
      
       
      
      

• 不写DTD文档声明文件也能正常运行，但这是规范要求，所以必须要写。

Web标准规范

• Web标准有很多规范，而html5规范是向下兼容的，采用html5规范的文档可以适用于任意规范。

Webtorm操作技巧

• 快速新建文件： Ctrl + Alt +Insert

• 光标跳动到行末： End

• 光标跳动到行首： Home

• 光标多行闪烁：按住Alt，上下拖动鼠标

• 快速复制光标所在行： Ctrl + D

• 快速删除光标所在行： Ctrl + X

• 快速给内容包裹标签：选中内容，按下 Ctrl + Alt + T，再按回车输入标签名就好了。

• 设置文本超过屏幕自动换行：
  在Webpack里，进入File--Setting--Editor--General，在Soft Wraps里勾选Use soft wraps in editor，点击OK设置完成。

• 快速上下移动选中内容:
  Ctrl +Shift + ↑（方向键上）
Ctrl +Shift + ↓（方向键上）

• 快速合并/展开标签:
  选中标签，按下
  Ctrl+ -
Ctrl+ +

• 快速新启一行: Shift + Enter

• 生成标签结构

各标签作用

（这是不严谨的说法，因为标签其实只负责标记，这里应该理解成浏览器对各个标签的渲染效果）

• p标签：让元素独占一行
• hr标签：生成一条独占一行的分割线

注释

• 语法：

• 注释快捷键：Ctrl + /

img标签

• 作用：插入图片

属性

• src（设置图片路径）

• width、height（指定宽高）

不指定宽高时将是默认宽高，指定宽高中的一方，图片会等比例变化。

或

• title(鼠标悬停时，弹出图片描述框，内容就是title的值)

-alt（图片加载失败时显示的信息）

img标签不会独占一行

a标签

• 属性

href
链接

taget
链接 在当前页面打开链接（默认）
链接 在新的网页中打开链接

title
链接

列表

• 无序列表

• 有序列表

表格

表格结构：

        

            
1.1
            
1.2
            
1.3
        

        

            
2.1
            
2.2
            
2.3
        

        

            
3.1
            
3.2
            
3.3
         

效果是一个三行三列的表格,如下图

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

表格宽高默认由内容撑开，也可以通过width、height属性设置。
表格border默认是0