学习前端系列-HTML

前言

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

HTML

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

HTML介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- 元素=开始标记+内容+结束标记,元素可以嵌套,元素可以拥有属性 -->

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

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

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

<!-- 超链接 -->
<a href="mailto:itswcg@gmail.com" 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/> -->

多媒体与嵌入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- 图片 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>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 表格 -->
<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>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- 表单 -->
<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)
----------本文完,感谢您的阅读----------