关于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 //定义视频,比如电影片段或其他视频流