1月16日java假期学习读书笔记

一、学习目标
掌握HTML的基本结构和常用标签。
了解CSS的基本选择器和样式规则。
通过实际代码练习，构建一个简单的网页。
二、学习内容
（一）HTML基础
HTML简介
HTML（HyperText Markup Language，超文本标记语言）是用于构建网页的标准标记语言。
它通过一系列的标签（如

、、

等）定义网页的结构和内容。
HTML文档的基本结构
HTML
复制

欢迎来到我的网页

这是一个简单的段落。

常用HTML标签 标题标签：

到

，用于定义标题，

是最高级标题。 段落标签：

，用于定义段落。 链接标签：，用于创建超链接。 HTML 复制 访问示例网站 图片标签：，用于插入图片。 HTML 复制 列表标签： 有序列表：

和
1. 。 HTML 复制
   1. 第一项
   2. 第二项
   无序列表：
   和
   • 。 HTML 复制
     • 苹果
     • 香蕉
     表格标签：、、

     和

     。 HTML 复制

     姓名	年龄
     张三	20

     （二）CSS基础 CSS简介 CSS（Cascading Style Sheets，层叠样式表）用于定义HTML元素的样式，包括颜色、字体、布局等。 CSS的基本选择器 元素选择器：通过HTML标签名选择元素。 css 复制 p { color: red; } 类选择器：通过class属性选择元素。 css 复制 .my-class { font-size: 20px; } ID选择器：通过id属性选择元素。 css 复制 #my-id { background-color: yellow; } 组合选择器：可以组合多个选择器。 css 复制 p, a { color: blue; } CSS的样式规则 颜色：可以使用颜色名称（如red）、十六进制（如#FF0000）或RGB（如rgb(255, 0, 0)）。 字体：可以设置字体大小（font-size）、字体类型（font-family）等。 边距和内边距：margin和padding用于控制元素的外边距和内边距。 布局：可以使用float、position等属性控制元素的布局。 将CSS应用于HTML 内联样式：直接在HTML标签中使用style属性。 HTML 复制

     这是一个红色的段落。

     内部样式表：在标签中使用 外部样式表：将样式定义在一个单独的.css文件中，并通过标签引入。 HTML 复制 （三）实际练习 构建一个简单的个人简介页面 HTML代码： HTML 复制

     我的个人简介

     

     你好，我是一名Java开发者，热爱编程和技术。

     我的技能

     • Java
     • HTML
     • CSS

     访问我的GitHub CSS代码（styles.css）： css 复制 body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; }

     h1 {
     color: #333;
     }

     .profile-image {
     width: 150px;
     border-radius: 50%;
     margin-bottom: 20px;
     }

     a {
     color: #007BFF;
     text-decoration: none;
     }

     a:hover {
     text-decoration: underline;
     }
     三、学习心得
     HTML和CSS的关系：
     HTML定义了网页的结构，而CSS负责样式和布局。二者相辅相成，缺一不可。
     通过CSS，可以实现丰富的视觉效果，提升用户体验。
     选择器的重要性：
     掌握CSS选择器是实现精准样式控制的关键。类选择器和ID选择器在实际开发中非常常用。
     实践的重要性：
     通过实际编写HTML和CSS代码，我更好地理解了网页的构建过程。
     实践可以帮助快速发现和解决问题，加深对知识点的理解。