《HTML5与CSS3权威指南》学习笔记1

原创 2012年09月29日 16:43:43

第1章 Web时代的变迁

不管怎么样,就是变迁了……


第2章

2.1.2 变化的标记方法

DOCTYPE声明:HTML5中刻意不使用版本声明

<!DOCTYPE html>
指定字符编码,可以且只可以使用原来的声明方法或者新的声明方法中的一种

<meta charset="UTF-8">

2.1.3 HTML5确保了与之前HTML版本的兼容性

元素一览

标签 描述
<!--...--> 定义注释。
<!DOCTYPE>  定义文档类型。
<a> 定义超链接。
<abbr> 定义缩写。
<acronym> HTML 5 中不支持。定义首字母缩写。
<address> 定义地址元素。
<applet> HTML 5 中不支持。定义 applet。
<area> 定义图像映射中的区域。
<article> 定义 article。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体文本。
<base> 定义页面中所有链接的基准 URL。
<basefont> HTML 5 中不支持。请使用 CSS 代替。
<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。
<bdo> 定义文本显示的方向。
<big> HTML 5 中不支持。定义大号文本。
<blockquote> 定义长的引用。
<body> 定义 body 元素。
<br> 插入换行符。
<button> 定义按钮。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> HTML 5 中不支持。定义居中的文本。
<cite> 定义引用。
<code> 定义计算机代码文本。
<col> 定义表格列的属性。
<colgroup> 定义表格列的分组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义的描述。
<del> 定义删除文本。
<details> 定义元素的细节。
<dfn> 定义定义项目。
<dir> HTML 5 中不支持。定义目录列表。
<div> 定义文档中的一个部分。
<dl> 定义定义列表。
<dt> 定义定义的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义 fieldset。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组,以及它们的标题。
<font> HTML 5 中不支持。
<footer> 定义 section 或 page 的页脚。
<form> 定义表单。
<frame> HTML 5 中不支持。定义子窗口(框架)。
<frameset> HTML 5 中不支持。定义框架的集。
<h1> to <h6> 定义标题 1 到标题 6。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hgroup> 定义有关文档中的 section 的信息。
<hr> 定义水平线。
<html> 定义 html 文档。
<i> 定义斜体文本。
<iframe> 定义行内的子窗口(框架)。
<img> 定义图像。
<input> 定义输入域。
<ins> 定义插入文本。
<keygen> 定义生成密钥。
<isindex> HTML 5 中不支持。定义单行的输入域。
<kbd> 定义键盘文本。
<label> 定义表单控件的标注。
<legend> 定义 fieldset 中的标题。
<li> 定义列表的项目。
<link> 定义资源引用。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义菜单列表。
<meta> 定义元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> HTML 5 中不支持。定义 noframe 部分。
<noscript> 定义 noscript 部分。
<object> 定义嵌入对象。
<ol> 定义有序列表。
<optgroup> 定义选项组。
<option> 定义下拉列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 为对象定义参数。
<pre> 定义预格式化文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> HTML 5 中不支持。定义加删除线的文本。
<samp> 定义样本计算机代码。
<script> 定义脚本。
<section> 定义 section。
<select> 定义可选列表。
<small> 将旁注 (side comments) 呈现为小型文本。
<source> 定义媒介源。
<span> 定义文档中的 section。
<strike> HTML 5 中不支持。定义加删除线的文本。
<strong> 定义强调文本。
<style> 定义样式定义。
<sub> 定义下标文本。
<summary> 定义 details 元素的标题。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格的主体。
<td> 定义表格单元。
<textarea> 定义 textarea。
<tfoot> 定义表格的脚注。
<th> 定义表头。
<thead> 定义表头。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> HTML 5 中不支持。定义打字机文本。
<u> HTML 5 中不支持。定义下划线文本。
<ul> 定义无序列表。
<var> 定义变量。
<video> 定义视频。
<xmp> HTML 5 中不支持。定义预格式文本。


属性一览

属性 描述
accesskey character 规定访问元素的键盘快捷键
class classname 规定元素的类名(用于规定样式表中的类)。
contenteditable
  • true
  • false
规定是否允许用户编辑内容。
contextmenu menu_id 规定元素的上下文菜单。
data-yourvalue value

创作者定义的属性。

HTML 文档的创作者可以定义他们自己的属性。

必须以 "data-" 开头。

dir
  • ltr
  • rtl
规定元素中内容的文本方向。
draggable
  • true
  • false
  • auto
规定是否允许用户拖动元素。
hidden hidden 规定该元素是无关的。被隐藏的元素不会显示。
id id 规定元素的唯一 ID。
item
  • empty
  • url
用于组合元素。
itemprop
  • url
  • group value
用于组合项目。
lang language_code 规定元素中内容的语言代码。语言代码参考手册
spellcheck
  • true
  • false
规定是否必须对元素进行拼写或语法检查。
style style_definition 规定元素的行内样式。
subject id 规定元素对应的项目。
tabindex number 规定元素的 tab 键控制次序。
title text 规定有关元素的额外信息。


2.4 全局属性:可以对任何元素都使用的属性。这里介绍几种

contentEditable属性

designMode属性

hidden属性

spellcheck属性

tabindex属性


3 HTML5的结构

3.1 新增的主题结构元素:article,section,nav,aside,time,pubdate

3.2 新增的非主体结构元素:header,hgroup,footer,address

3.3 HTML5结构

1 显式编排:明确使用secetion等元素创建文档结构,在每个内容区块内使用标题。(推荐!)

2 隐式编排:不明确使用section等元素,而是根据页面中所书写的各级标题等把呢荣区块自动创建出来。

3 标题分级:h1>>h6

新<旧 生成下级区块

新≥旧 生成新区块

3.3.2 对新的结构元素使用样式

追加CSS声明

//追加block声明
article,aside,dialog,figure,footer,header,legend,nav,section{display:block}
//正常使用样式
nav{float:left;width:20%}
Javascript脚步创建元素

//在脚本中创建元素
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>



相关文章推荐

HTML5+CSS3权威指南学习笔记(2-4章)

HTML5+CSS3权威指南  第一章 一、html5要解决的问题 1.Web浏览器兼容性很低 2.文档结构不够明确 3.web应用程序的功能受到了限制 第二章  HTML5与HTML4的区别 一、可...

HTML5和CSS3权威指南-读书笔记(H5部分)

接到了银联的面试通知,在慌忙准备面试的过程中感觉到,H5和CSS3是前端面试的重点考察对象,这段时间一直在恶补前端基础知识,css.html方面的书也看了好几本,这本书看完有段时间了,今天来总结一下,...

HTML5+css3权威指南学习重点整理

  • 2013年04月22日 14:39
  • 442KB
  • 下载

HTML5与CSS3权威指南

第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行; 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能; ...

HTML5与CSS3权威指南(未完待整理)

HTML5与CSS3权威指南   1.      自动获得焦点: 2.      结构: 3.      标记 3.1  不允许写结束标记的: area , base, ...

HTML5和CSS3权威指南-读书笔记(CSS3部分)

这本书的h5部分的总结写了很久,原因是对H5某些新的东西用得少,这次把以前不熟悉的地方好好的敲了一下代码,总结了一下,也有了很大的收货,现在来总CSS3篇一.CSS3选择器1.CSS3中的属性选择器1...

Html5与css3权威指南 源码

  • 2017年06月29日 00:12
  • 86B
  • 下载

HTML5与CSS3权威指南

  • 2012年12月15日 14:43
  • 721KB
  • 下载

HTML5与CSS3学习笔记(一)

1.HTML开发历程 1.1   XML的错误处理模型:如果解析器遇到错误,停止解析。          如果把XHTML1.1标记为XML文档类型,假设用Firefox打开这个文档,而文档中有一个符...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:《HTML5与CSS3权威指南》学习笔记1
举报原因:
原因补充:

(最多只允许输入30个字)