目录
前言 致谢 第1章 网页的构造块 1.1 基本HTML页面 1.2 语义化HTML:有含义的标记 1.3 标记:元素、属性和值 1.4 网页的文本内容 1.5 链接、图像和其他非文本内容 1.6 文件名 1.7 URL 1.8 要点回顾 第2章 处理网页文件 2.1 规划网站 2.2 创建新的网页 2.3 保存网页 2.4 指定默认页面或主页 2.5 编辑网页 2.6 组织文件 2.7 在浏览器中查看网页 2.8 借鉴他人灵感 第3章 基本HTML结构 3.1 开始编写网页 3.2 创建页面标题 3.3 创建分级标题 3.4 理解HTML5的文档大纲 3.5 对分级标题进行分组 3.6 普通页面构成 3.7 创建页眉 3.8 标记导航 3.9 创建文章 3.10 定义区块 3.11 指定侧栏 3.12 创建页脚 3.13 创建通用容器 3.14 使用ARIA提升可访问性 3.15 为元素指定类或ID名称 3.16 为元素添加title属性 3.17 添加注释 第4章 文本 4.1 开始新的段落 4.2 添加作者联系信息 4.3 创建图 4.4 指定时间 4.5 标记重要或强调的文本 4.6 指明引用或参考 4.7 引述文本 4.8 突出显示文本 4.9 解释缩写词 4.10 定义术语 4.11 创建上标和下标 4.12 标注编辑和不再准确的文本 4.13 标记代码 4.14 使用预格式化的文本 4.15 指定细则 4.16 创建换行 4.17 创建span 4.18 其他元素 第5章 图像 5.1 关于Web图像 5.2 获取图像 5.3 选择图像编辑器 5.4 保存图像 5.5 在页面中插入图像 5.6 提供替代文本 5.7 指定图像尺寸 5.8 在浏览器中改变图像的尺寸 5.9 在图像编辑器中改变图像的尺寸 5.10 为网站添加图标 第6章 链接 6.1 链接剖析 6.2 创建指向另一个网页的链接 6.3 创建锚 6.4 链接到特定的锚 6.5 创建其他类型的链接 第7章 CSS构造块 7.1 构造样式规则 7.2 为样式规则添加注释 7.3 层叠:当规则发生冲突时 7.4 属性的值 第8章 操作样式表文件 8.1 创建外部样式表 8.2 链接到外部样式表 8.3 创建嵌入样式表 8.4 应用内联样式 8.5 位置的重要性 8.6 使用与媒体相关的样式表 8.7 提供替代的样式表 8.8 借鉴他人灵感:CSS 第9章 定义选择器 9.1 构造选择器 9.2 按名称选择元素 9.3 按类或ID选择元素 9.4 按上下文选择元素 9.5 选择元素的一部分 9.6 按状态选择链接元素 9.7 按属性选择元素 9.8 指定元素组 9.9 组合使用选择器 9.10 选择器回顾 第10章 文本的格式化 10.1 选择字体系列 10.2 指定替代字体 10.3 创建斜体 10.4 应用粗体格式 10.5 设置字体大小 10.6 设置行高 10.7 同时设置所有字体值 10.8 设置颜色 10.9 修改文本的背景 10.10 控制间距 10.11 增加缩进 10.12 设置空白属性 10.13 对齐文本 10.14 修改文本的大小写 10.15 使用小型大写字母 10.16 装饰文本 第11章 用CSS进行布局 11.1 开始布局注意事项 11.2 建立页面结构 11.3 在旧版浏览器中为HTML5元素添加样式 11.4 对默认样式进行重置或标准化 11.5 盒模型 11.6 修改背景 11.7 设置元素的高度和宽度 11.8 设置元素周围的外边距 11.9 在元素周围添加内边距 11.10 使元素浮动 11.11 控制元素浮动的位置 11.12 设置边框 11.13 偏移自然流中的元素 11.14 对元素进行绝对定位 11.15 指定元素的三维位置 11.16 决定溢出的位置 11.17 垂直对齐元素 11.18 修改鼠标指针 11.19 显示和隐藏元素 第12章 样式表——从移动设备到台式机 12.1 移动战略和注意事项 12.2 理解和实现媒体查询 12.3 构建适用于媒体查询的页面 第13章 使用Web字体 13.1 什么是Web字体 13.2 在哪里能找到Web字体 13.3 下载第一个Web字体 13.4 使用@font-face 13.5 对Web字体添加样式及管理文件大小 第14章 使用CSS3进行增强 14.1 理解厂商前缀 14.2 浏览器兼容性速览 14.3 使用polyfill实现渐进增强 14.4 为元素创建圆角 14.5 为文本添加阴影 14.6 为其他元素添加阴影 14.7 应用多重背景 14.8 使用渐变背景 14.9 为元素设置不透明度 第15章 列表 15.1 创建有序列表和无序列表 15.2 选择标识 15.3 选择列表的起始编号 15.4 使用定制的标识 15.5 控制标识的位置 15.6 同时设置所有的列表样式属性 15.7 设置嵌套列表的样式 15.8 创建描述列表 第16章 表单 16.1 创建表单 16.2 处理表单 16.3 通过电子邮件发送表单数据 16.4 对表单元素进行组织 16.5 创建文本框 16.6 创建密码框 16.7 创建电子邮件框、电话框和URL框 16.8 为表单组件添加标签 16.9 创建单选按钮 16.10 创建选择框 16.11 创建复选框 16.12 创建文本区域 16.13 让访问者上传文件 16.14 创建隐藏字段 16.15 创建提交按钮 16.16 使用图像提交表单 16.17 禁用表单元素 16.18 HTML5的新特性和浏览器支持情况 第17章 视频、音频和其他多媒体 17.1 第三方插件及步入原生 17.2 视频文件格式 17.3 在网页中添加单个视频 17.4 视频属性一览 17.5 为视频添加控件和自动播放 17.6 为视频指定循环播放和海报图像 17.7 阻止预加载视频 17.8 使用多个来源的视频 17.9 多个媒体源和source元素 17.10 添加具有备用超链接的视频 17.11 添加具有备用Flash的视频 17.12 提供可访问性 17.13 添加音频文件格式 17.14 在网页中添加单个音频文件 17.15 在网页中添加带控件的单个音频文件 17.16 音频属性一览 17.17 为音频添加控件、自动播放并设置循环播放 17.18 预加载音频文件 17.19 提供多个音频源 17.20 添加具有备用超链接的音频 17.21 添加具有备用Flash的音频 17.22 添加同时具有备用Flash和超链接的音频 17.23 获取多媒体文件 17.24 考虑数字版权管理(DRM) 17.25 嵌入Flash动画 17.26 嵌入YouTube视频 17.27 通过canvas操作视频 17.28 联合使用SVG和视频 17.29 更多资源 第18章 表格 18.1 结构化表格 18.2 让单元格跨越多列或多行 第19章 处理脚本 19.1 加载外部脚本 19.2 添加嵌入脚本 19.3 JavaScript事件 第20章 测试和调试网页 20.1 尝试一些调试技巧 20.2 检查常见错误:一般问题 20.3 检查常见错误:HTML 20.4 检查常见错误:CSS 20.5 验证代码 20.6 测试页面 20.7 当图像不出现时 20.8 仍然有错误 第21章 发布网站 21.1 获得域名 21.2 为网站寻找主机 21.3 将文件传送至服务器 附录A HTML参考 A.1 HTML全局属性 A.2 HTML元素和属性 附录B CSS引用 B.1 CSS属性和值 B.2 CSS选择器和结合符 B.3 CSS3颜色值 B.4 CSS3渐变 B.5 媒体查询 B.6 CSS字体嵌入 目录

HTML5与CSS3教程

HTML5与CSS3教程,HTML5是最新的最基础的WEB标准,CSS3很多特性让网页更美观

比主体文本稍高或稍低的字母或数字分别称为上标和下标,其表示参见图4.11.1。HTML包含用来定义这两种文本的元素。常见的上标包括商标符号、指数和脚注编号等,参见图4.11.2。常见的下标包括化学符号等。

创建上标和下标的步骤

  1. 输入<sub>创建下标,或输入<sup>创建上标。

  2. 输入要出现在下标或上标里的字符或符号。

  3. 根据第1步中使用的元素,输入

</sub></sup>结束该元素。

...
<body>

<article>
     <h1>Famous Catalans</h1>
     <p>When I was in the sixth grade, I played the cello. There was a teacher at school who always used to ask me if I knew who "Pablo Casals" was. I didn't at the time (although I had met Rostropovich once at a concert). Actually, Pablo Casals' real name was <i>Pau</i> Casals, Pau being the Catalan equivalent of Pablo <a href="#footnote-1" title="Read footnote"><sup>1</sup></a>.</p>

     <p>In addition to being an amazing cellist, Pau Casals is remembered in this country for his empassioned speech against nuclear proliferation at the United Nations <a href= "#footnote-2" title="Read footnote"><sup>2</sup></a> which he began by saying "I am a Catalan. Catalonia is an oppressed nation."</p>

     <footer>
        <p><sup>1</sup>It means Paul in English.</p>
        <p><sup>2</sup>In 1963, I believe.</p>
     </footer>
</article>

</body>
</html>

图4.11.1 sup元素的一种用法就是表示脚注编号。根据从属关系,我将脚注放在articlefooter里,而不是整个页面的footer里。我还为文章中每个脚注编号创建了链接,指向footer里对应的脚注,从而让访问者更容易找到它们。同时,注意链接里的title属性也提供了一些提示

图4.11.2 不幸的是,subsup元素会扰乱行间距。注意第一段第4行和第5行之间的距离以及第二段第2行和第3行之间的距离比其他行间距要大一些。不过,可以使用一些CSS解决这个问题。关于解决的办法,参见本节末尾的“修复使用subsup时的行间距问题”。还可以对带链接的上标进行适当的处理,让下划线不至于离上标文字太远

提示 大多数浏览器会自动将上标或下标文字的字号减少几磅。

 

提示 上标是对某些外语缩写词进行格式化的理想方式,例如,法语中用Mlle表示Mademoiselle(小姐),西班牙语中用3a表示tercera(第三)。此外,一些数字形式也要用到上标,如2nd、5th

 

提示 下标适用于化学分子式(如H2>O)。例如,<p>I'm parched. Could I please have a glass of H<sub>2</sub>O?</p>

 

提示 上标和下标字符会轻微地扰乱行与行之间均匀的间距,参见图4.11.2。解决的办法参见“修复使用subsup时的行间距问题”。

 

修复使用subsup时的行间距问题

subsup元素会轻微地增大行高,参见图4.11.2。幸好,用一点CSS就可以修复这个问题。

下面的代码来自Nicolas Gallagher和Jonathan Neal出色的normalize.csshttp://necolas.github.com/normalize.css/)。下面的方法并不是他们发明的,他们借用了https://gist.github.com/413930里的代码并去掉了注释。上面这个GitHub的链接里包含了对这一段CSS的详细解释,建议你去看一看。同时,你可以在自己的项目里使用normalize.css,推荐你下载这个文件。该文件可以帮你建立一个跨浏览器的统一基准样式表,其文档也很详尽(参见11.4节)。

/*
* 在所有浏览器中防止sub 和sup 影响line-height
* gist.github.com/413930
*/

sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}

sup {
   top: -0.5em;
}

sub {
   bottom: -0.25em;
}

你可能还需要根据内容的字号对这个CSS做一些调整,使各行行高保持一致,但上面的代码至少已经为你建立了很好的起点。关于如何创建样式表并将CSS添加到站点里,参见第8章。

没有精选讨论主题。

全部讨论主题 查看精选主题

没有讨论主题。
😃 😅 😆 😁 😂 😊 😄 😠 😩 😲 😞 😵 😰 😒 😍 😤 😜 😝 😋 😘 😚 😷 😳 😢 😭 😨 😣 😡 😌 😖 😔 😱 😪 😏 😓 😥 😫 😉 👊 👍 👆 👇 👈 👉 👋 👏 👌 👎 👐 💓 💔 💕 💖 💗 💘 💙 💚 💛 💜 💝 💞 💟