Shaw007
Shaw007

HTML 实战

前言：

HTML介绍分为3部分，第一部分是HTML简介及历史，第二部分是HTML元素，第三部分是实战及学习笔记。

以下是第三部分，主要介绍工具的使用，如Vscode, Chrome的使用以及针对部分重要元素进行实战。
参考emmet

工具使用

推荐使用带Emmet功能的编辑器，如Vscode，其能极大地提高前端开发的效率。

以下是emmet的实例


HTML 实战_第1张图片
emmet

Emmet是MIT License开源的plug-ins，其独立于编辑器，尽管很多编辑器都支持，主要用缩写来高速对HTML,CSS,XML等文件进行编辑。

简要介绍下其语法：

  1. >: Child, 用于nest elements
    示例--div>ul>li
  2. +: Sibling, 将元素同级放置
  3. ^: Climb-up, climb one level up the tree
    示例--div+div>p>span+em^^^bq
    HTML 实战_第2张图片
    climb
  4. *: Multiplication
    示例: ul>li*5
  5. (): Grouping
    示例：(div>dl>(dt+dd)*3)+footer>>p
    HTML 实战_第3张图片
    group
  6. Attribute 操作符
    ID和类：
    div#header+div.page+div#footer.class1.class2.class3
    Attribute

    Item numbering: $
    ul>li.item$$$*5
    HTML 实战_第4张图片
    item numbering

    此外，还可以通过@操作符来改变计数的方向以及开始的基。
    示例: @-*5将从5到1
    HTML 实战_第5张图片
    @

    Text: { }可用作添加Text到元素中
    示例：a{Click me}等于
    Click me
    注意p>{Click }+a{here}+{ to continue}与p{Click }+a{here}+{ to continue}的区别，第一个所有的都会是p的child

*缩写并不是一个模板语言，他们不必可读，但他们需要快速拓展和可移除。
*有时不必写一个很复杂的缩写，快和少出错才是重要的
*文件开头输入!或html:5，回车或TAB键，将自动生成HTML文档初始结构
*仿页面首先观察可能使用了哪些元素，列表/段落/标题/导航/标签等，分为哪些横向及纵向区块，这些区块是如何组合在一起的

元素

  1. 可以组成描述列表
    其中在dl中可以添加div
  2. 作为离它最近的section或根section的页脚，主要用来包含作者信息，copyright,相关链接等
  4. 作为可替换元素，默认是inline属性，其长宽是由图像原始尺寸决定，若是没有在img属性指定其height, width；另外可通过css设置其border, border-radius, padding/margin, display(block)等属性。img可嵌套在a里，作为图像链接。

  Visit the MDN site

*自带宽高的是可替换元素，如img, input, video等

  1. 表示语气上的强烈，表示内容的重要

  2. 基本都是要带class使用的

  3. 以下是对a的属性进行详细介绍：
    Test.html
    download表示点击会默认下载，其值为下载文件名。
    href包含一个URL，网址#前的即为URL片段，设置href="#top"或"#"将是页面跳转到页面开头,将href设置为#, href="javascript:;"或href="javascript:void(0);"可以用来防止点击页面刷新，但通常更建议使用button;此外其值还可以是http/https, ftp,文件, tel, mailto等地址以及#id(当前页面另一个section)。
    target指定在哪里显示链接的URL, 可以是一个浏览器标签, 窗口或