前端新手入门:HTML5与CSS基础教程

需积分: 32 0 下载量 57 浏览量 更新于2024-08-04 收藏 56KB TXT 举报
"html+css学习笔记 前端 CSS html" 在前端开发中,HTML (HyperText Markup Language) 和CSS (Cascading Style Sheets) 是构建网页内容和样式的基础。以下是对HTML5和CSS的一些核心知识点的详细说明: 1. HTML5基本架构 HTML5的文档声明`<!DOCTYPE html>`定义了文档类型,确保浏览器按照HTML5的标准解析页面。`<html>`标签是整个文档的根元素,而`<head>`和`<body>`分别用于存放元数据和网页的可见内容。`<head>`中的`<meta charset="utf-8">`定义了文档的字符编码为UTF-8,确保文本的正确显示。 2. HTML标签 - 单标签:如`<br/>`用于换行,`<input/>`用于创建输入字段。 - 双标签:如`<html>`、`<head>`、`<body>`等,它们通常包含一些内容或子标签。 - 标题标签`<h1>`至`<h6>`用于设置不同级别的标题,`<h1>`最大,`<h6>`最小。 - 段落标签`<p>`用于组织文本,`<br/>`用于强制换行。 - 水平线标签`<hr/>`用于在页面中添加一条水平分割线。 - 强调标签`<strong>`用于加粗文本,`<em>`用于斜体显示。 3. HTML特殊字符实体 - `&nbsp;`表示非破坏性空格,不会被浏览器自动压缩。 - `&ensp;`代表半角空格,等于一个英文字符的宽度。 - `&gt;`代表大于符号`>`,`&lt;`代表小于符号`<`,用于在文本中插入这些特殊符号而不触发HTML解析。 - `&quot;`用于插入双引号,避免与HTML属性中的引号冲突。 - `&copy;`代表版权符号,常用于显示版权信息。 4. CSS基础 CSS用于控制HTML元素的外观和布局。通过将CSS规则应用到HTML标签,可以改变字体、颜色、大小、位置等样式。例如,可以使用`<style>`标签在`<head>`部分内定义CSS规则,或者在`<link>`标签中链接外部CSS文件。 5. CSS选择器 - 类选择器(`.class-name`):选择具有特定类名的元素。 - ID选择器(`#id-name`):选择具有唯一ID的元素。 - 标签选择器(`element-name`):选择所有特定类型的元素。 6. CSS属性 - `color`:定义文本颜色。 - `font-size`:设定字体大小。 - `font-weight`:控制字体的粗细(如`bold`或`normal`)。 - `text-decoration`:设置文本的下划线、删除线等装饰。 - `margin`和`padding`:控制元素的外边距和内填充。 - `display`:决定元素如何显示,如`block`、`inline`或`flex`。 学习HTML5和CSS是成为前端开发者的关键步骤。通过熟练掌握这些基础知识,可以创建出功能丰富、设计美观的网页。同时,随着技术的发展,了解CSS3的新特性,如动画、过渡、响应式设计等,也是提升前端开发技能的重要途径。