一、HTML文档构成
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<---元素标签--->
</body>
</html>
<!DOCTYPE>
——声明文档类型。
常用的有:html,以支持html5的方式渲染;HTML 4.01等。
设置为html会让浏览器以标准模式渲染。否则浏览器默认用自己的怪模式渲染,造成页面渲染混乱。<html></html>
——根元素。包含了整个页面的内容。<head></head>
——包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。body></body>
——包含元素标签,页面呈现。
二、head中的标签
<title>
——必须。定义文档的标题<base>
——通常情况下,浏览器将当前文档的URL作为相对地址。使用base标签让相对地址以base里的URL为基础。
属性:
href:当前文档共用的相对地址。
target:页面所有链接都默认以此属性方式打开。<link>
——链接外部样式资源,异步下载。
属性:
href:被链接文档的地址。
midea:规定被链接文档将被显示在什么设备上。
rel:规定当前文档与被链接文档之间的关系。stylesheet表示被链接文档是样式表。 dns-prefetch可以预解析dns。
type:规定被链接文档的类型。<meta>
——元信息。
属性:
charset:声明当前文档所使用的字符编码。
name::application-name;author;description;generator;keywords。关联到content。
content:关联到name。
http-equiv:把content关联到http头部,类似name。
例如:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
定义网站的关键字,用于搜索引擎。<meta name="viewport" content="width=device-width, initial-scale=1.0">
针对移动网页优化.<script>
——脚本下载。
属性:
async:立即下载,异步。
defer:延迟到页面加载。
三、body中的元素标签
基础
<h1>-<h6>
——标题p
——段落(不能嵌套块级元素)<br>
——换行<hr>
——水平线
格式
<abbr>
——定义缩写<address>
——文档作者信息<b>
——粗体<bdo>
——文字方向<big>
——大号字体<cite>
——引用<code>
——计算机代码<em>
——强调文本<small>
——小号字体<strong>
——语气强调<sup>
——上标<sub>
——下标
表单
<form>
——表单<input>
——输入<textarea>
——文本输入<button>
——按钮<select>
——下拉列表<optgroup>
——选项区<option>
——选项<label>
——input的元素标注
列表
<ul>
——无序列表<ol>
——有序列表<li>
——列表项<dl>
——列表区<dt>
——列表标题<dd>
——列表描述
表格
<table>
——表格<caption>
——表格标题<th>
——行头<tr>
——行<td>
——列<thead>
——表头内容<tbody>
——主体内容<tfoot>
——脚注
四、最新的HTML标准——HTML5
4.1 新特性
(1)新的语义元素
<header>
——头<footer>
——底部<nav>
——导航栏<aside>
——侧边栏<section>
——节<article>
——独立包含的内容<figure>
——图片区<figcaption>
——图片描述<time>
——日期/时间<summary>
——details元素的可见标题<detail>
——隐藏的细节...
(2)新的表单控件
<datalist>
——输入控件的预定义选项<output>
——计算结果(3)强大的图像支持
<canvas>
——画布,标量图。适合图表、游戏。不支持事件处理。<svg>
——矢量图。适合地图。支持事件处理。(4)多媒体支持
<video>
,<audio>
(5)本地存储
sessionStorage,localStorage