HTML&&CSS第一周学习

HTML

HTML标签类别

HTML标签按功能可分为结构标签、文本标签、列表标签、媒体标签、表格标签、表单标签和语义化标签。结构标签定义文档框架，包括html、head和body。文本标签处理文本内容，如标题标签h1到h6、段落标签p和文本格式化标签strong、em、span等。列表标签创建各种列表，包括ul、ol、li和定义列表dl、dt、dd。媒体标签嵌入图像、音频和视频内容。表格标签构建数据表格，包括table、tr、td和th。表单标签制作交互表单，如form、input、textarea、select和button。语义化标签是HTML5新增的header、nav、section、article、aside和footer等，用于更好地描述内容结构。

HTML标签关系

HTML标签之间存在嵌套关系和并列关系。嵌套关系形成父子结构，一个标签包含另一个标签。并列关系指同一层级的标签互为兄弟关系，共享同一个父元素但彼此独立。

HTML标签用法

HTML标签通常成对出现，由开始标签和结束标签组成，内容放置其间。自闭合标签无需结束标签，如img、br和input。标签通过属性提供额外信息，属性以名称/值对形式出现。正确使用标签需遵循语义化原则，选择最符合内容意义的标签。

CSS

基础用法

CSS有三种引入方式：内联样式直接写在标签style属性中，内部样式表置于head区的style标签内，外部样式表通过link标签引入独立CSS文件。

CSS选择器用于定位元素，包括元素选择器、类选择器、ID选择器、后代选择器和伪类选择器。元素选择器通过标签名选择，类选择器通过class属性选择，ID选择器通过id属性选择，后代选择器选择嵌套元素，伪类选择器定义元素特殊状态。

常用CSS属性涵盖文本样式、盒模型、背景和布局。文本属性控制颜色、大小、字体、对齐和行高。盒模型属性管理尺寸、内边距、边框和外边距，box-sizing属性决定尺寸计算方式。背景属性设置颜色、图片、重复和位置。布局属性包括display、position、float和clear，控制元素显示方式、定位、浮动和清除。

CSS布局技术主要有浮动布局、Flexbox布局和Grid布局。浮动布局是传统方式，Flexbox适合一维布局，Grid擅长二维布局。响应式设计使用媒体查询适配不同设备，根据屏幕特性调整样式。