html&css入门基础知识点
时间：2025-05-01
网页入门所需掌握的html和css基础知识点汇总
开始学习用 HTML 做网页吧什么是 HTML？HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页<h1> - <h6>标题 <p>段落 <a>链接 <img>图像 <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <span> 元素是内联元素（默认不换行） ，可用作文本的容器，用来组合文档中的行内元素列表标签标签 描述<ol>定义有序列表。<ul>定义无序列表。<li>定义列表项。<dl>定义定义列表。<dt>定义定义项目。<dd>定义定义的描述。表格表格由 <table> 标签来定义。 每个表格均有若干行 （由 <tr> 标签定义） 每行被分割为若干单元格 ， （由 <td> 标签定义） 。 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、 表格等等。<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
网页入门所需掌握的html和css基础知识点汇总
<tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>在浏览器显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2动手做一个最简单的网页吧！步骤一：启动记事本如何启动记事本： 开始 所有程序 附件 记事本步骤二：用记事本来编辑 HTML在记事本中键入 HTML 代码：步骤三：保存 HTML在记事本的文件菜单选择“另存为”。 当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
网页入门所需掌握的html和css基础知识点汇总
在一个容易记忆的文件夹中保存这个文件，比如 w3school。步骤四：在浏览器中运行这个 HTML 文件启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。 结果应该类似这样：要使网页的样式更丰富，插入 CSS 吧什么是 css？CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率如何使用样式当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个 站点的外观。<head><link rel="stylesheet" type="text/css" href="mystyle.css">
网页入门所需掌握的html和css基础知识点汇总
</head>内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。<head><style type="text/css"> body {background-color: red} p {margin-left: 20px} </style></head>内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性 可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。<pstyle="color: red; margin-left: 20px">This is a paragraph </p> 推荐使用外链的方法CSS 类选择器在 CSS 中，类选择器以一个点号显示：.center{text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。<h1class="center">This heading will be center-aligned </h1><pclass="center">
网页入门所需掌握的html和css基础知识点汇总
This paragraph will also be center-aligned. </p>注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。CSS id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red{color:red;} {color:green;}#green下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。<p <pid="red">这个段落是红色。</p> id="green">这个段落是绿色。</p>派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。规范格式：多个声明最好分行写，便于修改和浏览！body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif;}CSS 框模型概述CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。CSS 框模型概述
网页入门所需掌握的html和css基础知识点汇总
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外 边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 提示：背景应用于由内容和 …… 此处隐藏：2017字，全部文档内容请下载后查看。喜欢就下载吧 ……
html&css入门基础知识点.doc
将本文的Word文档下载到电脑
上一篇：常见的天气系统练习题
