学习笔记（2020-7-29）

学习笔记（7-29）

• 学习环境准备

  1、vscode

  2、插件

• Chinese
• html css
• Auto Rename Tag
• Auto Close Tag
• Markdown Preview
• Markdown lint
• Prettier
• vscode-icons
• Live Server
• Code Runner

  3、Chrome

  4、扩展

• iguge
• jsonview
• page ruler
• vue devtools
• Quick QR -划词翻译
• HTML 基础

  html5、文档结构

• html 根标签
• head 头标签
• body 体标签

  6、属性

• window
• window.document
• document.doctype
• document.head
• document.body
• document.title
• document.getElementById

  7、浏览器工具

• Elements html 元素
• Console 控制台
• Sources 源代码，可设置断点
• Network 请求
  — header 请求头
  — Preview 预览
  — Response 服务器响应

  8、默认样式

• display: block 块元素，独占一行
• style: 样式，1em = 16px,默认
• style =”font-size:12px”,修改 1em=12px;
• 三大通用属性 style id class

  9、元素的层级关系

• 树型结构
• 传统结构
  <div id="header"></div> 头部
  <div id="main"></div> 主体
  <div id="footer"></div> 页脚
  <ul> 导航

  <li><a href="">index</a></li>
  <li><a href="">home</a></li>

  <ul>

• html5结构
  <header></header> 头部
  <main></main> 主体
  <footer></footer> 页脚
  <nav></nav> 导航
  <section></section> 块
  <article></article> 文章

  10、块元素、内联元素

• 块 block: p/div

• 内联 inline: span/a

  11、语意化标签

• <time></time> 时间

•  上标
•  下标
• <address></address> 地址
• <del></del> 删除
• <strong></strong> 增强
• <code></code> 代码

• <progress value="80" max="100"></progress>

  12、标签学习

• <a> 属性 href:跳转目标 url
  —标记为电话 tel:13900001234；
  —标记为邮箱地址 mailto:1234@qq.com;
  —标记为锚点：#id 名）
  target:打开方式（_blank 新窗口，_self 本窗口，iframename iframe 框架内）
  download:下载文件

• id 属性尽量不用，一般只用于标记锚点或表单控件

• <ul> 普通列表
  <li>无序列表
  <ol>有序列表 start=”5” 起始序号
  </ul>

• <dl> 自定义列表
  <dt> 列表标题

  <dd> 列表内容

  常用于名词解释、友情链接、页脚等