Appearance
HTML 基础
html标准
https://whatwg-cn.github.io/html/
html5-cheat-sheet
https://meiert.com/en/indices/html-elements/
HTML 基础知识
网页
什么是网页
- 网页是由HTML、CSS、JavaScript组成的
- 网页：构成网站的基本元素，通常是HTML格式文件，必须通过浏览器来阅读
- 网站：利用前端技术制作的网页集合
什么是HTML
- HTML：超文本标记语言
- 超文本：由图片、声音、语言、动画、视频等构成可以相互链接的文本
- 标记语言：用标记标记文本，标记语言是一种机器可以理解的语言
网页的形成
- 前端代码开发 → 浏览器解析、渲染代码 → 呈现web页面
Web标准
概念
- W3C 组织和其他标准化组织为 Web 开发制定的一系列标准的集合
目的
- 保证网页的兼容性,可访问性以及可维护性
- 浏览器不同，解析渲染显示的页面效果就有些许差异，通过 Web 标准可以统一浏览器解析显示效果，同时大大减少开发者的工作量，一套代码兼容多平台
组成
- 结构：用于对网页元素进行整理和分类，主要指的是 HTML
- 表现：用于设置网页元素的版式、大小、颜色等外观样式，主要指 CSS
- 行为：网页模型的定义及交互方式的编写，主要指的是 JavaScript
HTML标签
基础结构标签
- 双标签：由开始标签和结束标签组成，中间包含内容,如：
<div></div> - 单标签：由开始标签组成，没有结束标签，如：
<img/>、<br/>、<hr/>
- 双标签：由开始标签和结束标签组成，中间包含内容,如：
文档类型标签
- 文档类型声明标签：用于声明文档类型，告诉浏览器使用什么版本的HTML解析渲染页面，如：
<!DOCTYPE html> - lang语言种类：用于设置页面语言种类，如：
<html lang="zh-CN"> - 字符集：用于设置页面字符集，如：
<meta charset="UTF-8">
- 文档类型声明标签：用于声明文档类型，告诉浏览器使用什么版本的HTML解析渲染页面，如：
HTML常用标签
- 标题标签：h1-h6：用于设置标题，h1最大，h6最小，如：
<h1>标题</h1> - 段落标签：p：用于设置段落，如：
<p>段落</p> - 换行标签：br：用于换行，如：
<br> - 水平线标签：hr：用于设置水平线，如：
<hr> - 图片标签：img：用于设置图片，如：
<img src="http://www.baidu.com/img/bd_logo1.png" alt="百度"> - div标签：div：用于设置div，如：
<div>div</div> - span标签：span：用于设置span，如：
<span>span</span> - 注释标签：注释：用于设置注释，如：
<!--注释--> - 超文本标签：超链接标签：用于设置超文本，如：
<a href="http://www.baidu.com">百度</a>
- 标题标签：h1-h6：用于设置标题，h1最大，h6最小，如：
列表标签
- ul：用于设置无序列表，如：
<ul><li>列表</li></ul> - ol：用于设置有序列表，如：
<ol><li>列表</li></ol> - dl：用于设置自定义列表，
<dl><dt></dt><dd></dd></dt>,里面只能包含dt和dd，dt和dd里面可以放任何标签，dd一般作为对dt的细分描述
- ul：用于设置无序列表，如：
表单标签
- form：用于设置表单，如：
<form><input type="text"></form> - input：用于设置输入框，如：
<input type="text"> - textarea：用于设置文本域，如：
<textarea></textarea> - select：用于设置下拉框，如：
<select><option>下拉框</option></select> - button：用于设置按钮，如：
<button>按钮</button> - label：用于设置标签，如：
<label>标签</label>
- form：用于设置表单，如：
表格标签
- table：用于设置表格，如：
<table><tr><td>表格</td></tr></table> - tr：用于设置表格行，如：
<table><tr><td>表格</td></tr></table> - td：用于设置表格列，如：
<table><tr><td>表格</td></tr></table> - th：用于设置表格列标题，如：
<table><tr><th>表格</th></tr></table>
- table：用于设置表格，如：
HTML5新特性
新增语义化标签
- header：用于设置头部，如：
<header>头部</header> - footer：用于设置尾部，如：
<footer>尾部</footer> - nav：用于设置导航，如：
<nav>导航</nav> - section：用于设置区域，如：
<section>区域</section> - article：用于设置文章，如：
<article>文章</article> - aside：用于设置侧边栏，如：
<aside>侧边栏</aside>
- header：用于设置头部，如：
新增媒体标签
- video视频：
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video> - audio音频：
<audio src="media/mi.mp3" autoplay="autoplay" muted="muted" loop="loop"></audio>
- video视频：
绘图
- canvas画布：
<canvas id="canvas" width="400" height="400"></canvas>使用JavaScript程序绘图,逐像素进行渲染 - SVG绘图：SVG是一种基于XML的图形格式，它可以用来描述二维图形和三维图形，是一种DOM结构,也是是一种文件格式
- canvas画布：
拖放API
- HTML5提供了拖放API，可以方便地实现拖放功能
新增input类型
- email、url、number、range、Date pickers、search、color、tel等
新增表单属性
- placeholder、required、pattern、min、max、step、autocomplete、autofocus、list、multiple、novalidate、formnovalidate、formaction、formenctype、formmethod、formtarget、height、width等
其他新技术
- Web Storage(localStorage,sessionStorage)、Web Workers、geolocation(地理位置)