8、HTML的入门小知识
2017-12-12 本文已影响45人
吴少在coding
买个域名先，为后期做准备
- 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>
