• 文档结构
• <!doctype html>
<!DOCTYPE>：定义文档类型（HTML 5）
• <html>
<html> 与 </html> 标签限定了文档的开始点和结束点
• <head>
<head> 标签用于定义文档的头部，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
• <meta>
• content:定义与 http-equiv 或 name 属性相关的元信息(text)
• http-equiv:把 content 属性关联到 HTTP 头部(content-type,default-style,refresh)
• refresh:定义文档自动刷新的时间间隔
<meta http-equiv="refresh" content="5"> // 每30秒刷新页面
<meta http-equiv="refresh" content="5:网址"> // 网页跳转
• name:把 content 属性关联到一个名称。(application-name,author,description,generator,keywords)
<meta name="description" content="网页描述">
<meta name="keywords" content="关键词">
<meta name="author" content="作者">
• charset:定义文档的字符编码
<meta charset="UTF-8">
• <title>无标题文档</title>
1、定义浏览器工具栏中的标题
2、提供页面被添加到收藏夹时的标题
3、显示在搜索引擎结果中的页面标题
• <link>
• 标签定义文档与外部资源的关系(链接样式表)
• href(url)定义被链接文档的位置
• 绝对 URL - 指向另一个网站
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css">
• 相对 URL - 指向网站内的一个文件
<link rel="stylesheet" type="text/css" href="style.css">
• 锚 URL - 指向页面中的锚（href="#top"）
• hreflang(language_code)定义被链接文档中文本的语言
<link hreflang="en>
• media规定被链接文档将显示在什么设备上
• <link media="value">:<link media="print">
• 设备
all默认。适用于所有设备。
aural语音合成器。
braille盲文反馈装置。
handheld手持设备（小屏幕、有限带宽）。
projection投影仪。
print打印预览模式/打印页面。
screen计算机屏幕。
tty电传打字机以及类似的使用等宽字符网格的媒介。
v电视机类型设备（低分辨率、有限的滚屏能力）。
• 值
width规定目标显示区域的宽度。例子：media="screen and (min-width:500px)"
height规定目标显示区域的高度。例子：media="screen and (max-height:700px)"
device-width规定目标显示器/纸张的宽度。例子：media="screen and (device-width:500px)"
device-height规定目标显示器/纸张的高度。例子：media="screen and (device-height:500px)"
orientation规定目标显示器/纸张的方向。可能的值："portrait" 或 "landscape"。例子：media="all and (orientation: landscape)"
aspect-ratio规定目标显示区域的宽度/高度比。例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio规定目标显示器/纸张的 device-width/device-height 比率。例子：media="screen and (aspect-ratio:16/9)"
color规定目标显示器的 bits/color。例子：media="screen and (color:3)"
color-index规定目标显示器可以处理的颜色数。例子：media="screen and (min-color-index:256)"
monochrome规定单色帧缓冲中的 bits/pixel。例子：media="screen and (monochrome:2)"
resolution规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。例子： media="print and (resolution:300dpi)"
scan规定 tv 显示器的扫描方式。可能的值："progressive" 和 "interlace"。例子：media="tv and (scan:interlace)"
grid规定输出设备是否是网格或位图。可能的值："1" 为网格，否则为 "0"。例子：media="handheld and (grid:1)"
• rel义当前文档与被链接文档之间的关系
• <link rel="value">
• alternate 链接到该文档的替代版本（比如打印页、翻译或镜像）。
• author 链接到该文档的作者。
• help 链接到帮助文档。
• icon 导入表示该文档的图标。
• license 链接到该文档的版权信息。
• next 表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。
• prefetch 规定应该对目标资源进行缓存。
• prev 表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。
• search 链接到针对文档的搜索工具。
• stylesheet 要导入的样式表的 URL。
• sizes定义了链接属性大小，只对属性 rel="icon" 起作用
• <link sizes="HeightxWidth">
为被链接的图标规定一个或多个尺寸。
高度和宽度之间由一个 "x" 或 "X" 分隔
<link rel="icon" href="favicon.ico" sizes="16x16" type="image/ico"> （1 个尺寸）
<link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/ico"> （2 个尺寸）
• <link sizes="any">规定图标是可伸缩的
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml"> （任何尺寸）
• type规定被链接文档的 MIME 类型
<link rel="stylesheet" type="text/css" href="theme.css">
• <link type="MIME_type">
• 只有当设置了 href 属性时，才能使用该属性
• <link> 标签常用的 MIME 类型是 "text/css"，它规定样式表。
• <base>
• 规定页面上所有链接的默认 URL 和默认目标
<base href="url" target="_blank">
• target规定页面中所有的超链接和表单在何处打开
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
• <script>
<script>document.write("Hello World!")</script>
• 标签用于定义客户端脚本，比如 JavaScript。
• JavaScript 通常用于图像操作、表单验证以及动态内容更改。
• 脚本执行方法
• async规定异步执行脚本（仅适用于外部脚本）。<script async>
<script src="demo_async.js" async></script>
• charset规定在脚本中使用的字符编码（仅适用于外部脚本）。<script charset="charset">
<script src="myscripts.js" charset="UTF-8"></script>
• defer规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。<script defer>
<script src="demo_defer.js" defer></script>
• src规定外部脚本的 URL。如果使用 "src" 属性，则 <script> 元素必须是空的。<script src="URL">
<script src="myscripts.js"></script>
• type规定脚本的 MIME 类型。<script type="MIME_type">
一些常用的值：
text/javascript （默认）
text/ecmascript
application/ecmascript
application/javascript
text/vbscript
• <style>
• 标签定义 HTML 文档的样式信息(如需链接外部样式表，使用 <link> 标签)
• media为样式表规定不同的媒体类型。
• scoped布尔属性如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。<style scoped="scoped" />。
使用 scope 属性描述 <div> 元素的样式：
<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>这个标题是红色的</h1>
<p>这个段落是蓝色的。</p>
</div>
• type规定样式表的 MIME 类型。
• </head>
• <body>
标签定义文档的主体
标签包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
• <div>
定义 HTML 文档中的一个分隔区块或者一个区域部分
<div> 元素经常与 CSS 一起使用，用来布局网页
• <header>
• 标签定义文档或者文档的一部分区域的页眉
• <header> 元素应该作为介绍内容或者导航链接栏的容器
• <header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部
• <a href="">
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
• 标签定义超链接，用于从一个页面链接到另一个页面
• <a> 元素最重要的属性是 href 属性，它指定链接的目标
• download 属性定义了下载链接的地址.<a download="定文件名称">
<a href="/images/logo.png" download="download">
• <h4 class="logo">LIGHT</h4>
• <h1> - <h6> 标签被用来定义 HTML 标题。
• <h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题
• <nav>
• <nav> 标签定义导航链接的部分
• <ul>
<ul>
<li><a href="#hero">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li> <a href="#contact">CONTACT</a></li>
</ul>
• <ul> 标签与 <li> 标签一起使用，创建无序列表
• <ul> 标签与 <ol> 标签一起使用，创建有序列表
• <li>
• </li>
• </ul>
• </nav>
• </header>
• <section>
标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域
• </section>
• </div>
• <footer>
• 标签定义文档或者文档的一部分区域的页脚
• 在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等
• <article>
• 标签定义独立的内容
• 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分
• </article>
• </footer>
• </body>
• </html>
网友评论