元素html的使用

视频讲解第3章HTML5中的重要元素本章学习目标  熟练掌握文档元素的使用方法。  了解脚本和文本层次元素的使用方法。  理解元素公共属性的使用方法。 3.1html根元素在HTML文档中，元素html代表了文档的根，其他所有元素都是在该元素的基础上进行延伸或拓展的，该元素也是HTML文档的最外层元素，因此也称该元素为根元素。 3.1.1定义 html元素可以在浏览器执行页面时，告知它执行的是一个HTML 文档，在HTML5与HTML4.0.1中，该元素的差异不大，主要区别在于xmlns属性。在HTML 4.0.1中，该属性是必需的，因为它将在HTML转换成xmlns的过程中发挥作用；而在HTML5中，可以不必增加这个属性。另外，在HTML5中新增加了一个属性manifest，用于指向文档缓存信息URL。 3.1.2属性在html元素中有两个非常重要的属性，详细说明如表31所示。表31html元素的属性属性值描述 manifestURL该URL指向描述文档缓存信息的地址 xmlnshttp://www.w3.org/1999/xhtml设置XML namespace的属性实例31元素html的使用 1. 功能描述在新建的页面中，显示“内容部分…”几个字符。 2. 实现代码在WebStorm中新建一个HTML页面31.html，加入代码如代码清单31所示。代码清单31元素html的使用元素html的使用内容部分 ... 3. 页面效果该页面在Chrome浏览器中执行的页面效果如图31所示。图31元素html的使用效果 4. 源码分析在实例31中，html元素是最外层元素，它包括两个主要的部分：头部head与主体body。其结构如图32所示。图32html元素所包含的结构 3.2文档元素在一个HTML文档中包含两个部分：一个是头部分，由head元素包含；另一个部分是主体部分，由body元素包含。下面分别介绍它们在HTML5中的使用方法。 3.2.1定义由于head、title、base、link、meta、style元素常用于说明文档的相关信息，因此，这些元素也称为文档元素。 3.2.2包含标签 head元素是所有头部元素的载体，其中的元素可以包含JavaScript脚本或文件、CSS样式或文件、或者其他说明文档、说明信息。head元素包含的标签如表32所示。表32head元素中的标签及说明标签名称说明标签名称说明 base定义页面中所有超链接的默认地址或目标 link导入页面中的样式文件 meta定义页面中的相关信息 script定义客户端脚本代码或文件 style定义HTML文档中的样式信息 title设置文档的标题内容 base元素可以设置页面中URL为空时的值，该元素有两个属性，一个是href，表示当页面的URL为空时的超链接地址；另一个是target，表示打开页面超链接的方式，如_blank等。 ...省略部分代码 testPage ...省略部分代码上述代码中，单击testPage文字超链接时，将以新窗口的方式，打开http://www.html5.com/ index.html地址。 meta元素可以设置页面的文档信息，如针对搜索引擎的关键字等，在HTML5中，该元素不再支持scheme属性，同时新增了一个charset属性，使页面字符集的定义更加方便。 ...省略部分代码 ...省略部分代码上面的代码中，通过meta元素定义了针对搜索引擎的关键字，值为 “HTML5,UI,Web前端开发”，便于搜索引擎对该页面的检索。实例32文档元素的使用 1. 功能描述在新建的页面元素中，加入该元素所包含的各类标签，并定义超级链接的样式，单击“请单击我”时，将展示相应样式效果并进入base元素设置的默认地址。 2. 实现代码在WebStorm中新建一个HTML页面32.html，加入代码如代码清单32所示。代码清单32文档元素的使用文档元素的使用请单击我 3. 页面效果该页面在Chrome浏览器中执行的页面效果如图33所示。图33文档元素的使用效果 4. 源码分析在head元素所包含的文档元素中，许多元素增加了用于HTML5中执行的新属性，同时，也有属性在HTML5中不再被支持。link元素在HTML5中不再支持的属性有charset、rev、target，其他属性同样可以在HTML5中执行。需要说明：在一个页面文档中，base与title元素只能使用一次，并且必须包含在head元素中。同时，base元素应排在其他元素之前，以便于其他元素能调用base元素的属性；而其他元素可以重复使用多次。 3.3脚本为了增加页面的互动性，需要对文档编写客户端脚本，最为常用的语言是JavaScript，通过编写客户端的脚本语言，可以实现对页面文档进行验证表单、变更内容等操作。 3.3.1定义在页面文档中，用于标识脚本的标签有两个：一个是script，该元素既可以包含脚本语言，也可以通过src属性导入一个脚本文件，通过元素必选属性type，选择脚本的mime类型；另外一个是noscript元素，它是一个检测工具，用于script中的脚本内容未被执行时显示的内容，即浏览器如果支持script中的脚本，则不会显示noscript中的内容。 3.3.2属性在脚本元素script中，使用属性设置脚本格式和类型，详细说明如表33所示。表33script元素的属性属性名称值描述 asynctrue或false定义是否异步执行脚本，此属性为HTML5新增 charsetcharset设置脚本中使用的字符编码，此属性HTML5不再支持 languageJavaScript等定义脚本的语言类型，此属性HTML5不再支持 xml:spacepreserve此属性HTML5不再支持 script元素中的async属性为HTML5新增，该属性有两个取值true或false，当取值为true时，脚本在页面中执行的方式是异步的，即在页面解析的过程中执行；当取值为false时，脚本将立即执行，页面也会等脚本执行完成后继承解析。实例33脚本元素的使用 1. 功能描述在新建的页面中，增加一个id值为txtContent的文本框，一个按钮，当单击按钮时，通过页面中加入的JavaScript脚本代码，获取文本框中的内容，显示在页面中。 2. 实现代码在WebStorm中新建一个HTML页面33.html，加入代码如代码清单331所示。代码清单331脚本元素的使用脚本元素的使用

为了增加页面的浏览效果，在实例33中，导入了一个CSS样式文件css3.css，其代码如下列代码清单332所示。代码清单332实例33的样式文件 @charset "utf-8"; /* CSS Document */ body{ font-size:12px } .inputbtn { border:solid 1px #ccc; background-color:#eee; line-height:18px; font-size:12px } .inputtxt { border:solid 1px #ccc; line-height:18px; font-size:12px } .divShow{ border:solid 1px #666; background-color:#eee; margin-top:5px; padding:5px; width:196px; display:none } 3. 页面效果该页面在Chrome浏览器中执行的页面效果如图34所示。图34脚本元素的使用效果 4. 源码分析在本实例的script元素中，设置async属性的值为true，即允许脚本在页面解析时异步执行，HTML5中新增的这个属性，可以在很大程度上缓解页面解析的压力，加速页面加载的速度，同时又不会阻碍script元素中脚本的执行，如果是执行大量的JavaScript代码，其效果将更加明显。 3.4文本层次语义页面中常常需要显示一段文章或文字，我们称之为文本内容。为了使内容更加形象、生动，需要增加一些特殊功能的元素，用于突出文本间的层次关系或标为重点，这样的元素被称为文本层次语义标记。在HTML5中，mark和cite就是常用文本层次语义元素。下面分别进行详细说明。 3.4.1mark元素 mark元素是HTML5中新增的元素，主要功能是在文本中，用于突出高亮显示某一个或几个字符，旨在引起用户的特别注意。其使用方法与em或strong元素有相似之处，但相比而言，HTML5中新增的mark元素在突出显示时，更加随意与灵活。实例34mark元素的使用 1. 功能描述在页面中，使用h5元素创建一个标题，然后通过p元素对标题进行阐述，阐述中，为了引起用户的注意，使用mark元素高亮处理了某些字符。 2. 实现代码在WebStorm中新建一个HTML页面34.html，加入代码如代码清单34所示。代码清单34mark元素的使用 mark元素的使用

优秀开发人员的素质

一个优秀的Web页面开发人员，必须具有过硬的技术与务实的专业精神

3. 页面效果该页面在Chrome浏览器中执行的页面效果如图35所示。图35mark元素的使用效果 4. 源码分析 mark元素的这种高亮显示的特征，除用于文档中突出显示外，还常用于查看搜索结果页中关键字的高亮显示，其目的主要是用于引起用户的注意，突出显示关键字的所在位置。虽然mark元素在使用效果上与em或strong元素有相似之处，但三者的出发点是不一样的。strong元素是作者对文档中某段文字的重要性进行强调； em元素是作者为了突出文章的重点而进行的设置； mark元素是数据显示时，以高亮的形式显示某些字符，与原作者本意无关。 3.4.2cite元素 cite元素创建一个引用标记，用于文档中参考文献的引用说明，如书名或文章名称。一旦在文档中使用了该标记，将以斜体的样式展示在页面中，区别于段落中的其他字符。实例35cite元素的使用 1. 功能描述在页面中，通过p元素显示一段文档，然后，在文档的下面使用cite元素标识这段文档所引用的书名。 2. 实现代码在WebStorm中新建一个HTML页面35.html，加入代码如代码清单35所示。代码清单35cite元素的使用 cite元素的使用

jQuery

jQuery是继Prototype之后的一个优秀的JavaScript框架，深受全球开发者的欢迎...

---引自 << jQuery 权威指南 >> ---

3. 页面效果该页面在Chrome浏览器中执行的页面效果如图36所示。图36cite元素的使用效果 4. 源码分析在HTML5中，cite元素基本兼容了在HTML4中的全部功能，但定义时更加严格。在使用该元素时，除包含标题或书名外，不允许包含更多的其他引用信息，如作者姓名、出版日期等。 3.5公共属性在HTML5完成替换HTML4的过程中，无论是新增或是改良的元素，都有一些共同的属性，我们称之为公共属性。为了进一步了解这些公共属性，下面选择几个常用的公共属性逐一进行介绍。 3.5.1draggable属性 draggable属性的功能是设置用户是否允许拖动元素，该属性有三个值，分别为true、false、auto。如果设置为true，则可以用鼠标选中元素后，进行拖动的操作。实例36draggable属性的使用 1. 功能描述在页面中，使用article元素显示一段文字，并设置article元素的属性draggable值为true，当用户选中这段文字移动鼠标指针时，可以实现拖动的效果。 2. 实现代码在WebStorm中新建一个HTML页面36.html，加入代码如代码清单36所示。代码清单36draggable属性的使用 draggable属性的使用

元素的拖动属性

这是一段可以拖动的文字,选中后进行拖动。

3. 页面效果该页面在Chrome浏览器中执行的页面效果如图37所示。图37draggable属性的使用效果 4. 源码分析在HTML5中，当某个元素的draggable属性值为true时，则表示该元素可以被拖动，在拖动的过程中，元素的内容和样式与拖动前是相同的，也不允许修改。 3.5.2hidden属性在HTML5中，绝大部分的元素都支持hidden属性，该属性只有两个取值： true和false。当hidden的取值为true时，元素不在页面中显示，但还存在于页面中；反之，则显示于页面中，该属性的默认值为false，即元素创建时便显示出来。实例37hidden属性的使用 1. 功能描述在页面的nav元素中设置两个相互排斥的单选按钮，一个用于显示article元素，另一个用于隐藏article元素，通过编写相应的JavaScript代码实现上述功能。 2. 实现代码在WebStorm中新建一个HTML页面37.html，加入代码如代码清单37所示。代码清单37hidden属性的使用 hidden属性的使用

元素的隐藏属性

今天是一个好天气啊，蓝蓝的天空，飘着朵朵白云。

3. 页面效果该页面在Chrome浏览器中执行的页面效果如图38所示。图38hidden属性的使用效果 4. 源码分析在页面的JavaScript代码中，根据单击单选按钮时传来的不同值，向article元素添加或删除hidden属性，从而实现该元素显示或隐藏的页面效果。 3.5.3spellcheck属性 spellcheck属性用于检测文本框或输入框中的拼音或语法是否正确，该属性的值为布尔值，即true或false。如果为true，则要检测对应输入框中的语法；反之，则不检测。实例38spellcheck属性的使用 1. 功能描述在页面中分别创建两个textarea输入框元素，第一个元素将spellcheck属性设置为true，即需要语法检测；另外一个元素的spellcheck属性设置为false，即不要语法检测，并分别在两个输入框中输入文字，对比不同的检测效果。 2. 实现代码在WebStorm中新建一个HTML页面38.html，加入代码如代码清单38所示。代码清单38spellcheck属性的使用 spellcheck属性的使用

输入框中语法检测属性

需要检测

不需要检测

3. 页面效果该页面在Chrome浏览器中执行的页面效果如图39所示。图39spellcheck属性的使用效果 4. 页面效果在HTML5中，虽然各浏览器对spellcheck属性进行了很好的支持，但在Chrome浏览器中支持的元素是有差异的，即在该浏览器中，支持textarea输入框元素，而不支持input元素中的文本框，Firefox和Opera浏览器需在“选项”菜单中手动设置，才能显示效果。 3.5.4contenteditable属性在HTML5中，有一个非常便捷的属性，它可以直接对显示在页面中的文字进行编辑，该属性就是公共属性contenteditable，该属性的取值为布尔型，即true或false。如果在元素中将该属性的值设置为true，那么，就可以对该元素显示的文本内容直接进行编辑了。实例39contenteditable属性的使用 1. 功能描述在页面中分别创建两个article内容元素，第一个元素将contenteditable属性设置为true，用于直接内容的编辑；第二个article元素保存编辑后的内容，当用户编辑完成后，单击“保存”按钮，则将编辑后的内容显示在第二个article内容元素中。 2. 实现代码在WebStorm中新建一个HTML页面39.html，加入代码如代码清单39所示。代码清单39contenteditable属性的使用 contenteditable属性的使用

元素的内容编辑属性

一段可编辑的文字