HTML&CSS基础教程：从结构到样式全面解析

5星 · 超过95%的资源需积分: 19 195 浏览量更新于2024-08-31 1 收藏 155KB PDF 举报

"该资源是HTML和CSS的基础知识总结，主要参考了《HTML&CSS设计与构建网站》一书，涵盖了HTML的结构、文本、列表、链接等多个方面，以及CSS的相关概念，如颜色、文本样式、布局等。此外，还涉及了建站过程和设计方法的实用信息。" 在HTML部分，我们首先了解到HTML（HyperText Markup Language）是网页内容的结构标准，用于定义网页的各个部分。结构包括元素，如 `<h1>` 用于创建标题，而 `<html>` 和 `<body>` 分别定义整个文档和可见内容的边界。特性用于提供元素内容的附加信息。文本处理方面，HTML提供了多种标签来控制文本样式。例如，`<b>` 和 `<strong>` 用于粗体，尽管 `<strong>` 更强调语义；`<i>` 和 `<em>` 用于斜体和强调，其中 `<em>` 同样带有语义；`<sup>` 和 `<sub>` 用于上标和下标；`<blockquote>` 和 `<q>` 用于引用，而 `<abbr>` 用于缩写词，`<cite>` 用于引文，`<dfn>` 用于定义。内容修改标签如 `<ins>`、`<del>`、`<s>` 和 `<u>` 分别表示插入、删除、删除线和下划线，但 `<u>` 标签逐渐被淘汰。列表在HTML中通过 `<ol>`（有序列表）、`<ul>`（无序列表）和 `<dl>`（定义列表）来创建，可以进行嵌套以组织复杂的内容。链接是HTML中的重要组成部分，使用 `<a>` 标签定义，其 `href` 属性指定链接地址。链接可以有多种类型，如内部链接、外部链接和锚点链接。在CSS部分，我们学习了CSS（Cascading Style Sheets）用于控制网页的外观和布局。颜色可以通过颜色名称、十六进制、RGB或HSL等方式定义。文本样式包括字体、大小、颜色、对齐方式等，`<p>`、`<span>` 等元素结合 CSS 可以实现丰富的文本格式化。CSS的盒模型是理解布局的关键，它包括内容、内边距、边框和外边距。列表、表格和表单的样式可以通过 CSS 进行定制，以符合设计需求。布局方面，CSS 提供了浮动、定位、弹性布局（Flexbox）和网格布局（Grid）等多种方法。图像可以通过 `background-image`、`content` 等属性控制，HTML5引入的新布局如 `header`、`footer`、`section` 等元素与CSS配合，使得页面布局更加灵活和语义化。最后，建站过程和设计方法中涵盖了一些实用信息，如响应式设计、无障碍访问和跨浏览器兼容性，这些都是现代Web开发的重要考虑因素。这个总结提供了一个全面的起点，帮助初学者理解和掌握HTML和CSS的基础知识。

HTML&CSS设计与构建网站

2020年10月27日

HTML

1. 结构

2. 文本

3. 列表

4. 链接

5. 图像

6. 表格

7. 表单

8. 其他标记

9. Flash、视频和音频

CSS

1. CSS简介

2. 颜色

3. 文本

4. 盒子

5. 列表、表格和表单

6. 布局

7. 图像

8. HTML5布局

建站过程和设计方法

实用信息

其他

HTML

1. 结构

元素：<h1>A Heading</h1>

标签：<h1>、</h1>

HTML代码：位于<html>与</html>之间的所有内容都是HTML代码

页面信息：<head>与</head>之间包含了有关这个页面的一些信息

主窗口：<body>与</body>之间的所有内容都会显示在浏览器主窗口中

特性：提供有关元素中内容的附加信息

2. 文本

标记：分为结构化标记和语义化标记

粗体和加粗：<b>、<strong>两者均显示为粗体，<strong>常用于加重

语气

斜体和强调：<i>、<em>两者均显示斜体，<em>元素起强调作用

上标和下标：4<sup>th</sup>表示4

，CO<sub>2</sub>表示CO2

空格： 

引用：

<blockquote>：较长的引用

<q>：较短引用，IE浏览器不会在引用两旁添加引号，回避

使用

两者都可以用cite特性表明引用的来源

缩写词：HTML5中，不论缩写词还是首字母缩写词都只使用<abbr>元

素，title特性用来指定相应词汇的完整形式

引文和定义：表明引文<cite>一部电影</cite>，表明定义<dfn>新术语

</dfn>，这两个元素通常显示为斜体

设计者信息：<adress>用于包含设计者信息，通常显示为斜体

内容修改：

<ins>：已插入，显示为下划线

<del>：已删除，显示为删除线

<s>：应删除，显示为删除线

<u>：下划线，逐渐淘汰

3. 列表

有序列表：<ol> <li>first</li> <li>second</li> </ol>

无序列表：<ul> <li>first</li> <li>second</li> </ul>

定义列表：<dl> <dt>first</dt> <dd>the no.1</dd> </dl>

嵌套列表：可在<li>元素中放入嵌套列表

4. 链接

表示：<a href="http://www.">IMDB</a>

分类：

指向其他网站：使用绝对URL

指向同一网站的其他页面：使用相对URL

相对URL：相对于当前文件的位置

相同文件夹：reviews.html

子文件夹：music/listings.html

孙子文件夹：movies/dvd/reviews.html

父文件夹：../index.html

祖父文件夹：../../index.html

email链接：<a href="mailto:12345678@qq.com">A Email</a>

在新窗口中打开链接：特性target="_blank"

链接到当前页面的某个特定位置：<h1 id="top">Terms</h1> <a

下载后可阅读完整内容，剩余6页未读，立即下载

Yolo阿

粉丝: 85
资源: 20

HTML&CSS基础教程：从结构到样式全面解析

HTML和CSS HTML&CSS

尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】

HTML&CSS3大总结.xmind

html&css&js

HTML&CSS3.md

Prentice Hall Brilliant HTML & CSS

clon-netflix-html-css：Clon de Netflix creado con HTML＆CSS

HTML&CSS&JS入门基础(Bootstrap）.xmind

w3school html & css教程 飞龙整理 20141002

pogate-project:使用html＆css的项目

最新资源

w3school html & css教程飞龙整理 20141002