前言

为了成为一名全面的Web应用程序员，我决定开始系统的学习前端。

HTML

HTML(HyperText Markup Language)：超文本标记语言

HTML介绍

<!-- 元素=开始标记+内容+结束标记，元素可以嵌套，元素可以拥有属性 -->

<!-- 元素有块级和内联元素 -->

<!-- 特殊字符 < > " ' &  -->
&lt; &gt; &quot; &apos; &amp;

<!-- 粗体，斜体，下划线  -->
<b> <i> <u>

<!-- 超链接 -->
<a href="mailto:[email protected]" title="" target="_blank" download="test.pdf">

<!-- 跳转指定位置 -->
<h1 id="Mailing_address">test</h1> <a href="#Mailing_address">

<!-- 描述列表  -->
<dl><dt>test</dt><dd>test</dd></dl>

<!-- 引用  -->
<cite></cite> <blockquote cite="">块级引用</blockquote> <q cite="">行内引用</q>

<!-- 缩略语  -->
<abbr title="">test</attr>

<!-- 标记联系方式  -->
<address></address>

<!-- 上标和下标  -->
<sup>th</sup> <sub></sub>

<!-- 展示计算机代码  -->
<code></code> <pre></pre> <var> <kbd> <samp>

<!-- 时间  -->
<time datetime="2018-10-18"></time>

<!-- HTML布局  -->
<header></header> <nav></nav> <main></main> <article></article> <section></section> <aside></aside> <footer></footer>

<!-- 没有特定语义的装饰元素  -->
<span class="">行内</span>
<div class="">块级</div>

<!-- 换行，水平线  -->
<br> <hr>

<!-- HTML验证：<https://validator.w3.org/> -->

多媒体与嵌入

<!-- 图片 src=source alt=找不到资源 -->
<img src="" alt="" width="" height="" title="">

<!-- h5为图片提供语义容器 -->
<figure><img><figcaption>title</figcaption></figure>

<!-- css背景图片  -->
background-image: url("images/test.png")

<!-- video  -->
<video src="" controls 用户控制 width="" height="" autoplay loop muted 默认关闭声音 poster="指向图片" preload="none auto metadata" 缓冲>后备内容，当浏览器不支持video时显示</video>

<!-- audio  -->
<audio src="" controls></audio>

<!-- 音轨文件  -->
<video controls><source src="test.mp4" type="video/mp4"><track kind="subtitles" src="subtitles.vtt" srclang="en"></video>

<!-- 嵌入  -->
<iframe src="" width="" height="" frameborder="0" allowfullscreen sandbox="">test</iframe>

<!-- 沙盒 一个代码可以适当使用或用于测试的容器，但不能对其他代码库（意外或恶意）造成任何损害 -->
<embed src="">嵌入flash</embed>
<object data="" type="application/pdf">嵌入pdf</object>

<!-- 位图 使用像素网格来定义，包含每个像素的位置和色彩信息 .bmp .png .jpg .gif -->
<!-- 矢量图使用算法来定义，包含图形和路径的定义 svg是用于描述矢量图像的XML语言 -->
<svg></svg>

<!-- 自适应 分辨率切换 艺术方向 -->
<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

表格

<!-- 表格 -->
<table>
<tr table rol>
    <th table header>
    <td table data></td>
    </th>
</tr>
</table>

<!-- 表格共同的样式  -->
<table><colgroup><col><col style=""></colgroup></table>

<!-- 高级特性  -->
<table><caption>标题</caption><thead></thead><tbody></tbody><tfoot></tfoot></table>
<th scope="col"></th> <th id=""></th><td headers=""></td>

表单

<!-- 表单 -->
<form action="" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

<!-- <label> <input> <textarea>元素 -->
<label for="name"></label> <!-- for是将标签链接到表单小部件的一种正式方式，这个属性引用相应的小部件的id，好处就是用户单机标签激活相应的小部件。 -->
<input type="text" name="" value="default">
<textarea>default</textarea>

<!-- <button>元素 -->
<div class="button"><button type="submit"></button></div>

<!-- <fieldset> <legend>元素 -->
<form>
    <fieldset> <!-- 是一种方便用于创建具有相同目的的小部件组的方式 -->
        <lenged>test</lenged> <!-- 描述fieldset的用途 -->
    </fieldset>
</form>

<!-- 原生表单部件 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets -->

<!-- 表单数据 -->
Content-Type: application/x-www-form-urlencoded 由URL编码的键/值对列表组成
Content-Type: application/json

<!-- 盒子模型属性 -->
width, height, padding, margin, border

<!-- 浏览器引擎 -->
Trident IE内核
Gecko Firefox内核
Webkit Safari, Chrome内核原型(在脚本方面，chrome使用V8)