HTML知识点
HTML规范由W3C组织制定的。
W3C的创始人是Sir Timothy John Bermers-Lee (李爵士)
命令行whois用来查看某个域名拥有者的身份
Dribbble.com (追波网)设计师的社交网络，查看优秀的设计作品，可以仿项目提升css水平。
<b>表示加粗，<strong>表示内容重要。
p标签的英文全称是paragraph
a标签的英文全称是anchor
不能有内容的标签[空元素]：img、input、meta、link、hr、br、col、colgroup
HTML5不推荐使用闭合的标签，推荐:<input type = " text ">
可以出现在<head>内的元素：base title meta link script noscript
iframe: iframe可以拥有一个name，a标签的target可以通过name指向这个iframe;现代前端开发中，iframe很少用；iframe用于在当前页面里嵌入一个页面。
meta声明当前页面的charset:
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
body标签的默认margin是8像素。
div,ul,h1默认display为block。
img input video 是可替换元素，宽高由自己决定，也可以通过属性和样式改变大小。
HTML代表什么意思：Hyper Text Markup Language
谁在制定Web标准：The World Wide Web Consortium(W3C)
李爵士发明了HTML，他的同事后来发明了CSS
<em>标签表示语气重，<strong>标签表示地位重。
在新窗口打开链接：<a href="url" target="_blank">
内联元素展示的时候不需要另起一行。
有序列表<ol>
子弹列表<ul>
CheckBox：<input type = "checkbox">
text input: <input type="text">
drop-down list: <select>
text area: <textarea>
插入一个标签：<img src="image.gif" alt="MyImage">
插入背景图片：<body style = "background-image:url(background.gif)">
HTML注释：
块级元素是另起一行的。
<title>定义了文档的title。
HTML5的doctype: <!DOCTYPE html>
<footer>定义了HTML页脚。
可以嵌入一个svg直接到页面里。
正确的播放video： <video>
正确的播放audio：<audio>
内容可编辑contenteditable属性：<div contenteditable>你好</div>
svg是XML形式。
<canvas>元素用来画图。
在HTML中，required属性被用来input必须被填充。
<input type="search"> 搜索框，圆角边框，多出一个清空按钮。
<input type="range"> 滑动块。
<nav>定义了一个导航链接。
<aside>定义了和文章不相关的内容。
<header>定义了header。
<a>标签和<button>的区别：到一个新页面用a标签，打开一个弹框，用button。
<section>表示一个章节。
&要写成&
常见标签
-
iframe 标签
iframe也是一个可替换标签，默认高度50，宽度100
点击标签时，iframe变换为相应页面
frameborder消除边框
name要结合a标签才有用
嵌套页面
<iframe src="https://www.baidu.com" name="xxx"></iframe>
- a 标签
跳转页面（HTTP GET 请求）
<a href="http://qq.com" target = "_blank">QQ</a> //新窗口打开
<a href="http://qq.com" target = "_self">QQ</a> //本窗口打开
<a href="http://qq.com" target = "_parent">QQ</a> //在父页面打开
<a href="http://qq.com" target = "_top">QQ</a> //在顶层窗口打开
download属性
<a href = "http://qq.com" download>下载</a>
content-type: application/octet-stream 浏览器就会以下载的形式接受请求,而不是在页面上展示。
如果没有写，就content-type: text/html,就在a标签上写 download 强制下载。
href
<a href = "qq.com" >QQ</a> //相对地址，当做当前子页面
<a href = "http://qq.com" >QQ</a> //跳转到QQ网站
<a href = "//qq.com" >QQ</a> //使用当前网站协议，并跳转
<a href = "xxx.com" >QQ</a> //跳转到/xxx.html
<a href = "#xxx" ></a> //锚点不发请求，页面内的跳转
<a href = "?name=xxx" ></a> //跳转到...?name=xxx 发起一个get请求
<a href = "javascript: alert(1);" ></a> //伪协议，弹出1
<a href = "javascript: ;" ></a> //和#相比，#会刷新页面，并跳转到页首，javascript: ;不变化
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
- form 标签
跳转页面（HTTP POST 请求）
如果form表单里面没有提交按钮，就无法提交表单。
get和post区别：get获取内容，post上传内容。
form也有target属性。
密码在http中是明文传输的，只要有人在这中间做监听，就能获取到密码。
传输过程中，一个英文占一个UTF-8字节，一个汉字占3个UTF-8字节，汉字会转义，%加编码x3个。
file协议不支持post
get没有第四部分，post可以有第一部分
没有method就是get请求
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
-
input / button
区别：是否为「空标签」
input按钮，type=button，不会成为提交按钮。type=submit，才会成为提交按钮。
checkbox,点击文字，选中多选框，label的for和input的id是一对，要一起出现
不使用for和id也能点击文字选中input的方法
老司机写法
完整表单
预览图
提交结果
下拉分组
multiple设置可以多选；disabled设置不能选中；selected设置默认选中
多行文本
resize:none设置不能拖拽，rous设置行数，但不准，推荐写宽高
input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
一个form表单中，只有一个button按钮，会自动提升为提交按钮。如果写了type="button"，就是一个按钮，没有提交按钮。
button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
-
table 标签示例
用于展示数据
border-collapse:collapse边框合并
属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
知识点：
- 空标签
- 可替换标签
- 全局属性
- display 不止 3 种
网站HTML
布局划分
明年会出Grid布局，可以复杂布局。
我的技能
HTML代码
作品集
HTML代码
全部代码
<!DOCTYPE html>
<html>
<head>
<title>个人简历</title>
<link rel="stylesheet" href="./a.css">
</head>
<body>
<div class="topNavBar clearfix">
<a class="logo" href="#" alt="logo" style="float: left; ">
<span class="rs">RS</span><span class="card">card</span>
</a>
<nav style="float: right;">
<ul class="clearfix">
<li><a href="#">关于</a></li>
<li><a href="#">技能</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">日历</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">其他</a></li>
</ul>
</nav>
</div>
<div class="banner" style="background-image: url(#)"></div>
<main>
<div class="card">
<div class="pictureAndText">
<div class="picture">
<img src="" alt="头像">
</div>
<div class="text">
<div class="profile">
<span class="welcome">Hello</span>
<h1>XXX</h1>
<p>前端开发工程师</p>
<hr>
<dl>
<dt>年龄</dt>
<dd>18</dd>
<dt>所在城市</dt>
<dd>北京</dd>
<dt>邮箱</dt>
<dd>fangyinghang@foxmail.com</dd>
<dt>手机</dt>
<dd>13812345678</dd>
</dl>
</div>
</div>
</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>
<a class="button" href="#">下载 PDF 简历</a>
<p>
资深前端工程师，资深前端讲师，现在在 饥人谷 教前端课程。<br>
技能：前端开发，Rails 开发，Node.js 开发
</p>
</main>
<section>
<h2>技能</h2>
<ol>
<li>HTML 5 & CSS 3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue</li>
<li>React</li>
<li>HTTP</li>
</ol>
</section>
<section>
<h2>作品集</h2>
<nav>
<ol>
<li>所有</li>
<li>框架</li>
<li>原生JS&CSS</li>
</ol>
</nav>
<div class="jobs">
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</section>
</body>
</html>
网友评论