Blogger Information
Blog 10
fans 0
comment 0
visits 5981
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
学习笔记(2020-7-29)
Brain
Original
401 people have browsed it

学习笔记(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> 导航
    1. <li><a href="">index</a></li>
    2. <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> 时间

  • <sup></sup> 上标
  • <sub></sub> 下标
  • <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> 列表标题
    1. <dd> 列表内容
    常用于名词解释、友情链接、页脚等
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post