《HTML5+CSS3 Web开发案例教程》课件——第2章 HTML5语言基础.pptxVIP

HTML5+CSS3 2021.6HTML5andCSS3

第2章HTML5语言基础HTML5基本知识动手练习：利用VSCode快速建立基本文档文本标记HTML标记与HTML属性在网页中使用图像（img）再谈HTML5DEMO（创建一个简单地网页）

第2章HTML5语言基础

第2章HTML5语言基础HTML5基本知识——HTML文件结构最简单的一个网页!DOCTYPEhtmlhtmlheadtitletest/title/headbodyp互联网，我来了！/p/body/html

第2章HTML5语言基础HTML文件结构1.!DOCTYPE声明在整个页面文档的第1行，应该使用!DOCTYPE声明，使浏览器知道这个文档的类型2.html标记html标记放在HTML文件的开头，并没有什么实质性的功能，只是一个形式上的标记3.head标记head也称为头标记，放在html标记内部，其作用是放置关于此HTML文件的信息，如提供关于该网页的索引（meta）信息、定义CSS样式等。4.title标记title称为标题标记，包含在head标记内，它的作用是设定网页标题，可以看见在浏览器左上方的标题栏中显示这个标题5.body标记body又称为主体标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在。6.p标记p标记表示的是段落，即其间的文字显示为一个文字段落。

第2章HTML5语言基础简单的HTML案例

第2章HTML5语言基础网页源文件的获取直接查看源文件打开浏览器，这里以Chrome浏览器为例。在网页正文位置单击鼠标右键，选择菜单中的“查看网页源代码”命令即可看到该网页的源文件了，或者直接使用快捷键“Ctrl+U”,如图所示

第2章HTML5语言基础网页源文件的获取保存网页选择浏览器右键菜单中的“另存为”命令，或者直接使用快捷键“Ctrl+S”，这样就可以将所需的与该网页相关的部件全部保存下来，如图所示。

第2章HTML5语言基础动手练习：利用VSCode快速建立基本文档创建新的空白文档编写基础的HTML

第2章HTML5语言基础文本标记——段落与段内换行（p和br）浏览器会完全按照HTML标记来解释HTML代码，忽略多余的空格和换行。在HTML文件里，不管输入多少空格（按空格键）都将被视为一个空格；换行（按“Enter”键）也是无效的。段落标记：“p/p”，p是英文单词“paragraph”即“段落”的首字母，用来定义网页中的一段文本，文本在一个段落中会自动换行。换行标记：“br”，这是一个单个使用的标记，是英文单词“break”的缩写，作用是将文字在一个段内强制换行。

第2章HTML5语言基础设置标题（h1~h6）在HTML中，设定了6个标题标记，分别用于显示不同级别的标题。例如h1标记表示1级标题，h2表示2级标题，一直到h6表示6级标题，数字越小，级别越高，文字也相应越大。

第2章HTML5语言基础使文字水平居中（center）如果对文字显示在浏览器中的位置不加以限定，浏览器就会以默认的方式来显示文字的位置，即从靠左的位置开始显示文字。但在实际应用中，可能需要在窗口的正中间开始显示文字，这时可以使用另一个HTML——center和/center标记来完成。

第2章HTML5语言基础设置文字段落的缩进（blockquote）有时在文档中，需要对某段落进行缩进显示，例如显示引用的内容等，这时可以使用文本缩进标记blockquote和/blockquote。

第2章HTML5语言基础HTML标记与HTML属性在大多数HTML标记中都可以加入属性控制，属性的作用是帮助HTML标记进一步控制HTML文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。基本语法：标记名称属性名1=“属性值1”属性名2=“属性值2”……

第2章HTML5语言基础用align属性控制段落的水平位置在1级标题标记中，增加了align属性的设置。当align属性设置为“center”的时候，标题就居中对齐了。而在h2标记中也增加了align属性的设置，并设置为“right”，这时该标题就右对齐了。

第2章HTML5语言基础用bgcolor属性设置背景颜色例如：bodytext=bluebgcolor=#CCCCFF网页背景色通过bgcolor属性设置其中文字的颜色通过text属性设置

第2章HTML5语言基础用bgcolor属性设置背景颜色例如：bodytext=bluebgcolor=#CCCC