"Web前置课笔记,涵盖了HTML5的基础知识,包括常见元素与属性,如html、head、body、title、meta、style、h1到h6、p、span、font、hr、div等,以及如何使用这些元素进行网页布局和样式设定。"
在Web开发中,HTML(超文本标记语言)是构建网页内容的基础,而HTML5是其最新的版本,它增强了网页的功能性和互操作性。HTML5的主要目标是改善用户在不同设备上的体验,包括桌面电脑、移动设备和平板电脑。
HTML文档通常由以下几部分组成:
1. `<!DOCTYPE html>`: 这是一个文档类型声明,告诉浏览器这是一个HTML5文档。
2. `<html>`: 是HTML文档的根元素,包含了整个网页的代码。
3. `<head>`: 包含了元信息,如文档标题、字符编码设置(如`<meta http-equiv="Content-Type" content="text/html;charset=gbk">`)以及CSS样式(通过`<style>`标签)。
4. `<title>`: 定义了网页的标题,显示在浏览器的标签页上。
5. `<meta>`: 用来设置网页的各种元信息,如字符集、视口设置等。
6. `<body>`: 包含网页的可见内容,如文字、图片、链接等。
HTML中的元素分为块级元素和内联元素:
- 块级元素(如`<h1>`-`<h6>`、`<p>`、`<div>`):它们各自占据一整行,可以设置宽度、高度等属性,常用于布局。
- 内联元素(如`<span>`、`<font>`):它们不会独占一行,常用于文本修饰,如改变颜色、大小。
在示例代码中,可以看到如何使用`<font>`标签来改变文字颜色,使用`<p>`标签定义段落,并用`align`属性来调整文本对齐方式(如`align="center"`居中,`align="right"`右对齐)。`<hr>`标签创建水平分隔线,而`<div>`作为容器元素,可以容纳其他元素并进行复杂的布局。
此外,CSS(层叠样式表)被引入到`<style>`标签中,用于定义元素的样式,如背景色、宽度、高度等。在HTML5中,可以直接在元素内使用内联样式,也可以通过外部样式表引用更复杂的CSS规则,提高代码的可维护性和复用性。
学习HTML5的基础知识是成为Web前端开发者的第一步,理解并熟练运用HTML5的各种元素和属性,能够有效地构建出结构清晰、功能完善的网页。进一步学习CSS和JavaScript,可以实现更丰富的交互效果和动态功能。