《HTML5和CSS3快速参考》——2.4 语法摘要

简介:

本节书摘来自异步社区《HTML5和CSS3快速参考》一书中的第2章,第2.4节,作者: 【美】Sergey Mavrody 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 语法摘要

一般语法规则


f71b28988d78e25b2b09187a905101fd40125518

(X)HTML5中的空标签语法

  • 空标签没有闭标签(也叫结束标签),例如< input > 图像说明文字。
  • 在HTML5中,空元素中的终止斜线不是必须的,例如< input >。
  • 在XHTML5中,空元素中的终止斜线是必须的,例如< input />。


0b53039d82c8613c455b27175f1f662ed1ec58f7

具有可选标签的HTML5元素

  • 可选标签并不适用于XHTML5元素。
  • 当可选标签满足(下表)“省略条件”列中列出的条件时:

    • 通常情况下,只要其中有一个条件被满足,该标签就可以被省略。
    • 另外,还有一些标签在本书撰写时依然没有提供限定条件。


0858d2680f5d257e2dac5dbde0dc426c9d8478f5


<a href=https://yqfile.alicdn.com/8ec44c46fa473f8e6f64510d1348c4da35e4c76d.png" >


<a href=https://yqfile.alicdn.com/6f8e38baa0d2bdc3600b04ad2c5abcc014fe1b94.png" >


a336ce711a4b8fb60c83237b76ecbc9f7265dfe3


<a href=https://yqfile.alicdn.com/8aa5d71446c163a1ac0040bf8cb1bb4856bf830a.png" >

下面我们来看一个省略了可选标签的并且仍然有效的HTML5文档示例,以及与之相对的,号称更为严谨的、通过Total Validator工具检测的XHTML5文档。

HTML5

<!DOCTYPE html>

  <title>HTML5 document</title>


<table title=Report>
 <tr>
  <td>1st cell content
  <td>2nd cell content
  <td>3rd cell content

 <tr>
  <td>4th cell content
  <td>5th cell content
  <td>6th cell content

 </table>

XHTML5

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
   <title>XHTML5 document</title>
</head>
<body>
   <table title=”Report”>
  <tr>
   <td>1st cell content</td>
   <td>2nd cell content</td>
   <td>3rd cell content</td>
  </tr>
  <tr>
   <td>4th cell content</td>
   <td>5th cell content</td>
   <td>6th cell content</td>
  </tr>
 </table>
</body>
</html>

元素的类型


0618a4a33db9ad8578b3703302a0fb8b9c3a78ea


<a href=https://yqfile.alicdn.com/41ada510dc749beb48e7d2a8bebaf15e8bf11758.png" >


59dc7896112d1069451bfc888dab03af273bb17c

浏览器中的功能性脚本
由于现实中的浏览器对HTML5的支持并不一致,因此,我们可以用JavaScript来检测浏览器对某些特定功能的兼容性,或者为其添加某些缺失的功能。

<!DOCTYPE html>
<html>
<head><title></title>
 <script src=”modernizr.min.js”></script>
</head>

Modernizr

  • 目前在检测HTML5兼容性方面,最有效的工具是Modernizr。这是一个开源的JavaScript库,通常用于检测目标环境对HTML5与CSS3的支持程度。

HTML5增强式脚本—Polyfills

  • HTML5 Modernizr库只是一个检测工具,它不会为旧版浏览器添加其缺失的HTML5功能。然而,Modernizr网站中有一个“HTML5-Cross-browser-Polyfills”页面,其中所提供的各种链接正是用于此类问题的各种解决方案。
  • Polyfills实际上就是一小段代码或插件,开发人员可以用它来提供一些浏览器缺失的技术。Polyfills填补某些旧版浏览器在HTML5和CSS3支持上的空白。
相关文章
|
23天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
107 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
21天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
48 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
20天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
61 34
|
3月前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
3月前
|
前端开发
Foundation CSS 参考手册2
本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。
|
3月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
175 6
|
3月前
|
前端开发
Foundation CSS 参考手册1
Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为&quot;Helvetica Neue&quot;,行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
|
3月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
5月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
96 19