2020年4月27日总结(一)

一、网页的基本元素

1.1.文档说明

• !DOCTYPE html 表示当前页面是HTML5页面，放在页面的最前面
• 不能省略，否则出现兼容性问题

1.2.html元素

• html元素是HTML文档的根元素，一个文档只有一个，其他元素都是它的后代元素
• W3C建议设置lang属性
  • lang=“en”告诉浏览器是英文
  • lang=“zh-CN”告诉浏览器是中文

1.3.head元素

• 元数据

  • title：网页的标题
  • meta：charset设置整个网页的字符编码
  • style：设置网站的样式
  • link：
    • 引入外部的css样式
    • 设置网站图标

二、h元素/p元素/a元素/img元素/strong元素

2.1.body元素：浏览器看到的东西

• h元素 -> h1-h6 -> 标题

• p元素 -> 段落

• strong元素 -> 字体加粗

• img元素

  • 专门用来显示图片

  • src：source

    • 远程图片地址

    • 本地图片地址(路径)

      • 绝对路径

        • 特点：从根路径开始找
        • 缺点：一旦位置发生改变，那么有可能出现文件找不到的情况

      • 相对路径

        • .当前路径(目录)
        • ..上一层路径(目录)

  • 常用的图片格式

    • png：静态图片，支持透明
    • jpg/jpeg：静态图片，不支持透明
    • gif：动态图片、静态图片，支持透明

  • px -> plxel

    • 像素(px)是图像显示的最小单位
    • 每个像素都能表示一种颜色
    • 计算机显示出来的图像都是由一堆像素组成的
    • 组成图片的像素越多，显示越清晰
    • 屏幕分辨率，一般都用像素作为单位

• div元素

  • 分块

• span元素

  • span主要的作用是对普通的文本进行归类

• a元素

  • 定义超链接，打开一个新的url

  • href：超链接

  • target：

    • _self(默认)：自己

    • _blank：空白

      和iframe一起使用

    • _parent：在上一层打开网页

    • _top：在最顶层打开网页

    • _具体的name：在name那一层打开网页

三、br/hr/code

3.1.code

• 将字体设为等参字体

3.2.br

• 换行

3.3.hr

• 分割线

四、URL/SEO优化

4.1.SEO优化

SEO：搜索引擎优化，可促进关键词排名

• 百度/搜狗/360/Google
• 一个网页最多只有一个h1标签
• 乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站

五、字符编码

• 作用：将文字存储到计算机中，之后解析出来显示
• 应用：所有的网页目前都需要采用UTF-8编码，所以浏览器在解析时我们也需要告诉浏览器当前我们使用的时UTF-8，浏览器才能正常的解析出来文字

六、快捷键

• Ctrl+enter 光标换到行头
• alt+Ctrl+向下 复制当前行
• Ctrl+F 查找

七、字符实体

• 空格/&nbsp；
• 小于/&lt；
• 大于/&gt；