HTML
编程改变世界！
其实呢，我是个工程师！
Day
DayUP！~
include: 导入静态网页 import :导入 js、css type file
< taglib name = ‘My’ />
HTML 简介
HTML 实例
<!DOCTYPE html>
我的第一个标题
我的第一个段落。
尝试一下 »
实例解析
DOCTYPE 声明了文档类型
位于标签 与 描述了文档类型
位于标签
位于标签
与
作为一个标题使用位于标签
与
作为一个段落显示<!DOCTYPE html> 在HTML5中也是描述了文档类型。
什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
这是一个段落。
HTML版本 从初期的网络诞生后，已经出现了许多HTML版本: 版本 发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013 声明 声明有助于浏览器中正确显示网页。 网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。 doctype 声明是不区分大小写的，以下方式均可： 通用声明 HTML5 HTML 4.01 XHTML 1.0 查看完整网页声明类型 DOCTYPE 参考手册。 中文编码 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。 HTML 基础- 4个实例 标题、段落、超链接、图片这是一个链接
图像的名称和尺寸是以属性的形式提供的。
［］< img >标签 代表 图片，img标签的作用是向网页中插入一张图片，并不是将图片绘制到网页中。
src 属性：“插入”图片到网页中去。
alt 属性：值可以是一段文字，当图片由于各种原因无法显示时，alt属性的值就会被显示在网页上。
width/height 属性：设置图片的宽度／高度；不适合用于图片，可用于纯色图的拉伸；单位可以是px，也可以是％，单位为％时是指占窗体宽高的百分比大小。
推荐< img >标签中加上“/”来关闭标签。
推荐使用PNG图片格式
当图片无法正确加载时会出现图片错误的图标：
可能导致图片错误的原因：
1. 路径名写错了
2. 引用的图片被删除了
3. 网络问题
像素：显示内容基本长度单位 pixel。
位图：图片中每一个像素都由4个数字（argb）组成（0-255），原则上不能拉伸因为会导致失真。
a：透明度；r：红色；g：绿色；b：蓝色
矢量图：可以随意拉伸。
通过图片的拉伸可以将一张很小的纯色图片冒充为一张大图，节约资源的加载。
绝对路径：使用图片在硬盘上的绝对位置来访问图片，通常是从根目录开始，向下一个目录一个目录的寻找；在开发网页的过程中，一般不会使用绝对路径
相对路径：指的是相对于当前网页的路径。
相对路径的起点就是
src的值就是路径。
“..” 在路径中代表当前网页所在目录的上一级目录
“.” 在路径中代表当前网页所在目录
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素（
标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如
，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。 不要忘记结束标签 即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
这是一个段落
这是一个段落 以上实例在浏览器中也能正常显示，因为关闭标签是可选的。 但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。 HTML 提示：使用小写标签 HTML 标签对大小写不敏感：
等同于
。许多网站都使用大写的 HTML 标签。 W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。//以上注意 HTML 属性 属性实例 HTML 链接由 标签定义。链接的地址在 href 属性中指定： 实例 这是一个链接 HTML 属性常用引用属性值 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson' http://www.runoob.com/tags/ref-standardattributes.html相关在线参考手册 HTML标题 标题很重要 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 搜索引擎使用标题为您的网页的结构和内容编制索引。 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 定义 HTML 文档
定义文档的主体 - 定义 HTML 标题
定义水平线
定义注释
HTML 段落
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：
实例
定义水平线 定义注释 HTML 段落 HTML 折行 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签： 实例
这个
段落
演示了分行的效果
元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。 HTML 输出- 使用提醒 我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。 或者 HTML 文本格式化 通常标签 替换加粗标签 来使用, 替换 标签使用。 然而，这些标签的含义是不同的： 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。 Italic斜体 提示： 各种浏览器下accesskey快捷键的使用方法： IE浏览器 按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车. FireFox浏览器 按住Alt+Shift键，点击accesskey定义的快捷键. Chrome浏览器 按住Alt键，点击accesskey定义的快捷键. Opera浏览器 按住Shift键，点击esc，出现本页定义的accesskey快捷键列表可供选择. Safari浏览器 按住Alt键，点击accesskey定义的快捷键. HTML 4.01 与 HTML5之间的差异
Tip: 学习更多关于Javascript教程，请查看JavaScript 教程!
HTML
实例
尝试一下 »
JavaScript体验(来自本站javascript教程)
JavaScript实例代码:
JavaScript可以直接在HTML输出:
document.write(“
这是一个段落。
“);尝试一下 »
JavaScript事件响应:
尝试一下 »
JavaScript处理 HTML 样式:
document.getElementById(“demo”).style.color=”#ff0000”;
尝试一下 »
HTML 脚本标签
标签 描述
