《HTML5和CSS3快速参考》——第2章 HTML语法2.1HTML文档

简介:

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

第2章 HTML语法

2.1HTML文档

基本概念
通常情况下,HTML文档指的是一份独立的HTML文件。

  • HTML文档是一份由一定的元素和文本组成的代码文件。
  • HTML文件的基本构件是元素(element)。它们以HTML标签的形式呈现。
  • 这些元素构成了一个层次分明的嵌套结构。

元素与标签
通常情况下,元素是由一个开标签(opening tag,如本例中的

)和一个闭标签(closing tag,如)组成的,但有时候闭标签不是必须的。

元素与标签之间的不同在于,元素是HTML标签所要表述的概念,其中包括相关的属性和子节点标签。具体元素待我们介绍到第3章、第4章这两章时再做详细介绍。

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Reference </title>
<!-- This is a comment. It does not render in browser -->
</head>
    <body>
    <h1>Overview</h1>
    <p>The well-known acronym
HTML stands for HyperText Markup Language.</p>
    </body>
</html>

标签的嵌套
一个标签通常用一个小于号(<)和一个大于号(>)来表示。

被嵌套的标签一定完全存在于另一对的内部,两者不会交叉重叠。

The <b><em>wrong</b></em> nesting
The <b><em>correct</em></b> nesting

空元素
空元素(void element)通常只有一个开标签,不包含任何内容。因此,我们可以选择将它的终止斜线放在元素标签末端的大于号前面。当然,这对于非空元素(non-void element)来说是非法的。

<!--Void elements:-->
<img src=logo.gif><br />
<input type=text>

属性
在这个例子中,元素input拥有多个属性。它们分别为type、autofocus、name。

<input type=text autofocus 
name=’first name’>
  • 属性实际上就是其所在元素的成员属性。
  • 属性通常被放置在元素的开标签中。
  • 标签名与属性之间用空格符分隔。
  • 属性通常由一个类型名和一段文本值组成,之间用等号(=)分隔。
  • 在同一标签内,属性是不可重复的。
  • 在HTML5中,属性值中如果没有空格、引号和不等号的话,是可以采用无引号形式的,如type=text;否则就必须给该属性值加上单引号或双引号,如'first name'。

布尔属性
所谓布尔属性,实际上就是指那些值非false即true的属性。

  • 如果一个布尔属性在元素中未被声明,其默认值就为“false”。
<! --boolean value is false: 
the field is NOT disabled --> 
<input>
  • 如果一个布尔属性在元素中被显式声明,其默认值就为“true”。
  • 布尔属性可以引用自身为值,例如
<input disabled=disabled>。
<!--boolean value is true--> 
<input disabled=disabled> 
<input disabled=”disabled”>

在支持多种语言的HTML/XHTML文档中,在给一个值为true的布尔属性引用自身属性名赋值时,需加上一对引号,例如。

<input disabled=””> 
<input disabled>

在不支持多语言环境的HTML文档中,该值可以直接省略掉,例如< input disabled >。

相关文章
|
3天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
22 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
26天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
112 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
24天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
51 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
23天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
63 34
|
27天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
76 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
115 24
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
112 7
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
84 5
|
3月前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
3月前
|
前端开发
Foundation CSS 参考手册2
本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。

热门文章

最新文章