关于HTML在此就不进行过多的介绍了，暂时只介绍一些易混淆或概念不清楚的内容。
介绍几个网站：
- 在dribbble.com 搜索cv或者resume
- 在五百丁直接花钱购买Word模板
- 如果还找不到好看的，可以去在 Google 搜索「frontend resume template」或者「frontend cv template」碰碰运气，找找灵感。
1、空元素
官方定义：一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。
HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 <audio> 元素嵌套在一个 <hr> 元素里。
个人理解为，如p标签中是需要放入文本内容的，所以p不是空元素，但是link标签中是不能够放入内容的，就算加入内容也无效，link只能引入文件，所以link为空元素。
在HTML中有一下空元素：
<area>
<base>
<br>
<col>
<colgroup>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
2、可放在head元素内的标签
有效的<head> 元素包括 meta, link, title, style, script, noscript, and base。使用方法如下：
<!--
Set the character encoding for this document, so that
all characters within the UTF-8 space (such as emoji)
are rendered correctly.
-->
<meta charset="utf-8">
<!-- Set the document's title -->
<title>Page Title</title>
<!-- Set the base URL for all relative URLs within the document -->
<base href="http://example.com/page.html">
<!-- Link to an external CSS file -->
<link rel="stylesheet" href="styles.css">
<!-- Used for adding in-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
// function(s) go here
</script>
<noscript>
<!-- No JS alternative -->
如果用户的浏览器不支持script，则会显示noscript中的内容
</noscript>
3、关于iframe
- iframe 可以拥有一个 name，a 标签的 target 可以通过 name 指向这个 iframe
- 现代前端开发中，iframe 很少用
- iframe 用于在当前页面里嵌入一个页面
4、声明meta
声明meta有两种方式：
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
5、可替换元素
CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有:
<img>
<object>
<video>
<textarea>
<input>
//某些元素只在一些特殊情况下表现为可替换元素，例如
<audio>
<canvas>
和 表单元素，如 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。
CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。
拿图片来举例，在页面加载到img标签的时候，并不知道img的宽高，此时会去请求img的src，请求回图片的宽高如位进行css样式定义，则默认为图片宽高
6、iframe页面与a标签
1）eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe</title>
<style>
iframe{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<iframe src="#" frameborder="0" name="test"></iframe>
<a href="https://cn.vuejs.org/" target="test">Vue</a>
<a href="http://www.baidu.com" target="test">百度</a>
</body>
</html>
其中，两个a标签都指向iframe，点击a标签则会在iframe中打开对应的页面
2）a标签属性
- target="_blank" 在空白页打开
- target="_self" 在当前页面打开
- target="_parent" 在父页面打开
- target="_top" 在顶级页面打开，即一直找父页面直到找不到，然后在此页面打开
- download a标签内加download后会直接执行下载
3）href属性
a标签的无协议地址：
1）中的代码，在a标签的href属性中，如何我们不添加协议https的话，即：
<a href="//cn.vuejs.org/" target="test">Vue</a>
那么在访问此链接时，当前使用的是什么协议，此链接用的就是什么协议。如我们在本地打开页面，浏览器地址栏中开头显示是file://，所以此种情况下使用的协议为file。
1）中的代码，如果a标签内容如下：
<a href="cn.vuejs.org" target="test">Vue</a>
那么在点击a标签的时候，会认为href指向的是相对于当前文件路径的文件。
那么如果我们不使用file协议的话，如何使用//cn.vuejs.org来访问vue的官网呢？我们需要使用http协议，解决方法一是将代码上传到Github上，另外的方法是安装http-server。
sudo cnpm install -g http-server
安装完成后，在终端输入http-server -c-1，这个会直接帮助我们搭建一个服务器，并且可通过http://127.0.0.1:8080或者http://192.168.1.20:8080直接访问桌面文件，其中-c-1表示不添加缓存。此为a标签的无协议地址。
javascript伪协议，写法为：
href="javascript: alert(1)" //则在点击a标签的时候会执行js代码
总的来说，a标签的href中可以写的内容为：
- //cn.vuejs.org
- #xxx ?name=123 ./xxx.html
- javascript:;
7、form表单
1）form表单默认是发起get请求，但是我们常用form表单做post请求，所以在form标签中我们可以直接声明请求方式，即：
<form action="xxx" method="post"></form> //表单中只支持Get和Post方式
2)button
在form表单中，如果没有提交按钮，且只有一个未定义type值的button，那么button会被提升为提交按钮，默认type为submit
3）input标签
input的type比较多，常用的有：button、submit、text、password、checkbox、radio
8、HTML5常用的语义化标签
很多标签在工作中都有涉及，不打算在进行介绍。但是对于HTML5中的语义化用的较少，打算在此处进行些介绍。
nav //定义导航，可将导航内容放在此标签内
article //定义独立的内容，可能的 article 实例为论坛帖子、报纸文章等。
//eg:<article><a href="http://www.apple.com">Safari 5 //released</a><br />7 Jun 2010. Just after the announcement //of the new iPhone 4 at WWDC, Apple announced the release //of Safari 5 for Windows and Mac......</article>
audio //标签定义声音，比如音乐或其他音频流。
aside //定义其所处内容之外的内容
//eg:<p>Me and my family visited The Epcot center this //summer.</p><aside>
//<h4>Epcot Center</h4>The Epcot Center is a theme park in //Disney World, Florida.</aside>
canvas //定义图形，比如图表和其他图像
datalist //定义选项列表
footer //定义 section 或 document 的页脚。
header //定义文档的页眉（介绍信息）
hgroup //用于对网页或区段（section）的标题进行组合
section //定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
video //定义视频，比如电影片段或其他视频流
网友评论