买个域名先,为后期做准备
- namesilo国外网站买一个,可以google搜索优惠券。
- 购买时先输入邮箱,再选用支付宝
挑选简历模板
- 用什么学什么,这是初级前端学习HTML和CSS的学习方法
- 简历模板
- 这个在线简历需要用到的技术
- HTML
- CSS
- JS
- SVG
- AJAX
HTML入门知识
HTML(HyperText Markup Language)有四个版本
- HMTL 4.0
- XHTML
- HTML 5 重点学习掌握的
- 未来的HTML 5.1
以上的版本有W3C
负责维护
万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会,是万维网的主要国际标准组织
HTML开头必须规范文档类型 DOCTYPE
- HTML 5 规范使用 <!DOCTYPE html>
- 基本标签
<!DOCTYPE html >
<html>
<head></head>
<body></body>
</html>
- 常见标签
a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg
标签名字 | 英文名字 |
---|---|
锚点标签 | a |
表单标签 | form |
输入框 | input |
按钮 | button |
一级标题 | h1 |
段落标签 | p paragraph的意思 |
无序列表 | ul un-ordered list |
有序列表 | ol ordered list |
块级元素 | div divide |
和div 作用基本一样 | span |
定义的一组列表 | dl defination list |
定义的一组列表的单词 | dt defination term |
定义的一组列表的单词的描述 | dd defination description |
除了 div 和 span,其他标签都有默认样式
其他标签的样式,其实还是浏览器给渲染的,记住:以后所有的样式CSS负责,html只负责告诉浏览器这是什么而已HTML中的空标签
<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
- HTML标签中的 可替换元素的概念
CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有<img>、 <object>、 <video>
和 表单元素,如<textarea>、 <input>
。 某些元素只在一些特殊情况下表现为可替换元素,例如<audio>
和<canvas>
。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements)。
CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。
需要注意的是,一部分(并非全部)可替换元素,本身具有尺寸和基线(baseline),会被像vertical-align之类的一些 CSS 属性用到。
对于标签要经常查看MDN文档
标签很多,勤查MDN
Mozilla Developer Network(简称MDN)是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网
-
W3Schools的总结题 测试题
Valid <head> elements include meta, link, title, style, script, noscript, and base The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list. <body style="background-image:url(background.gif)">
个人简历的头部代码如下
<!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>sholin-wu</title>
</head>
<body>
<div class="topNavBar">
<img src="#" alt="LOGO">
<nav>
<ul>
<li>about</li>
<li>skills</li>
<li>EXPERIENCE</li>
<li>PRICING</li>
<li>BLOG</li>
<li>CALENDAR</li>
<li>CONTACT</li>
<li>OTHER</li>
<li>ALL DEMOS</li>
</ul>
</nav>
</div>
<div class="banner" style="background-image: url(#)"></div>
<main>
<div class="card">
<div class="picture">
<img src="#" alt="头像">
</div>
<div class="text">
<div class="profile">
<span class="welcome">Hello</span>
<h1>shaolin-wu</h1>
<p>q前端开发工程师</p>
<hr>
<dl>
<dt>年龄</dt>
<dd>27</dd>
<dt>年所在城市龄</dt>
<dd>北京</dd>
<dt>邮箱</dt>
<dd>15265249516@163.com</dd>
<dt>手机</dt>
<dd>15265249516</dd>
</dl>
</div>
<footer class="media">
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
<a href="#"><img src="#" alt="#"></a>
</footer>
</div>
</div>
<a href="#" class="button">下载 PDF 简历</a>
<p>
吴少林,初级前端工程师,一直自学不停息<br>
技能:前端开发,java,node.js开发
</p>
</main>
</body>
</html>