概要
根据禅意花园中的一个实例,学习前端的基础知识
内容
1.HTML <!DOCTYPE> 标签
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
提示和注释
注释:<!DOCTYPE> 声明没有结束标签。
提示:<!DOCTYPE> 声明对大小写不敏感
HTML 5 <!DOCTYPE html>
2.HTML 语言代码
通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明
Chinese (Simplified) zh
English en
3.HTML <meta> 标签
定义和用法:
<meta> 元素可提供有关页面的元信息(meta-information)
比如针对搜索引擎和更新频度的描述和关键词
<meta> 标签位于文档的头部,不包含任何内容
<meta> 标签的属性定义了与文档相关联的名称/值对
提示和注释:
<meta> 标签永远位于 head 元素内部
元数据总是以名称/值的形式被成对传递的
name 属性
name 属性提供了名称/值对中的名称。
HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。
通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。
某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类
4.<link> 标签的 rel 属性
rel 属性规定当前文档与被链接文档之间的关系
只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持
stylesheet 文档的外部样式表
alternate 文档的替代版本(比如打印页、翻译或镜像)
5.<link> 标签的 media 属性
media 属性规定被链接文档将显示在什么设备上
media 属性用于为不同的媒介类型规定不同的样式
所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性
screen 计算机屏幕(默认)
6.<link> 标签的 href 属性
href 属性规定被链接文档的位置(URL)
注释:如果需要,应该对所有的 URL 进行 URL 编码
7.<link> 标签的 type 属性
type 属性规定被链接文档的 MIME 类型
该属性最常见的 MIME 类型是 "text/css",该类型描述样式表
8.<head> 标签
用于定义文档的头部,它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
9.HTML class 属性
定义和用法:
class 属性规定元素的类名(classname)
class 属性大多数时候用于指向样式表中的类(class)。
不过,也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素
提示和注释:
class 属性不能在以下 HTML 元素中使用:base, head, html, meta, param, script, style 以及 title
可以给 HTML 元素赋予多个 class,例如:<span class="left_menu important">。
这么做可以把若干个 CSS 类合并到一个 HTML 元素
类名不能以数字开头!只有 Internet Explorer 支持这种做法
10.HTML id 属性
定义和用法:
id 属性规定 HTML 元素的唯一的 id
id 在 HTML 文档中必须是唯一的
id 属性可用作链接锚(link anchor),
通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式