HTML＆CSS学习总结-CSDN博客

本文链接：https://blog.csdn.net/qq_62810183/article/details/131403456

文章目录

前言
- 0.1html＆css简介
- 0.2html＆css关系区别
一、html是什么？
- 1.1html定义
- 1.2html实例解析
- 1.3html标题
- 1.4html标签
二、html基础语法
- 2.1图像
- 2.2链接
- 2.3颜色
- 2.4表格
三、css是什么？
- 3.1css定义
- 3.2实例解析
- 3.3特点与使用
四、css基础语法
- 4.1链接与选择器
- 4.2表格
- 4.3表单
- 4.4网页布局
总结

前言

0.1html＆css简介：

HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行。

CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中。

0.2html＆css联系与区别：

在 html 文件的 head 标签中使用link可以引用css文件对html修饰，css可以说是html的化妆师。

一、html是什么？

1.1html定义：HTML 不是一种编程语言，而是一种标记语言。HTML（Hypertext Markup Language ) 超文本标记语言。HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。
可以使用任意文本编辑器编辑，需要使用浏览器执行。

1.2实例解析：

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

1.3html标题：标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习总结</title>
</head>
<body>
 
<h1>这是标题 1</h1>
<h6>这是标题 6</h6>
 
</body>
</html>

1.4html标签：HTML 标签是由尖括号包围的关键词，比如 <html>；通常是成对出现的，比如 <b> 和 </b>；第一个标签是开始标签，第二个标签是结束标签；

script标签：编写JavaScript代码或引入外部的script程序。

link标签：引入外部的css文件。

style标签：在html文件中编写css样式。

核心标签如下：

<html>			 		<!-- HTML根标签 -->
 <head> </head>         <!-- head标签，用来描述网页的相关信息（编码、标题等等），里面的内 容不会显示在网页中 --> 
<body> </body> 			<!-- body标签，所有需要显示在网页中的内容定义在body标签中 --> 
</html> 				<!-- HTML结束标签 -->

二、html基础语法

2.1图像：

在 HTML 中，图像由<img> 标签定义。

<img src="图片地址" alt="图片名称" width="200" height="200">

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径

绝对路径：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件；相对路径：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件

2.2链接：HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。例如：<a href="url">链接文本</a>

2.3颜色：HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）设置网页背景颜色：

<style>
  body
  {
    background-color: #bbded6;
  }
</style>

2.4表格：表格是由<table>标签来定义的；

创建表格：**<table></table>；创建行：**<tr></tr>；创建列：**<td></td>

border 边框 width/height 宽/高；align 对齐方式；padding 边框与文字之间的距离，内边距

cellspacing：单元格之间的距离。

示例如下：

<table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>出生日期</th>
      <th>别名</th>
    </tr>
  </table>

2.5html表单：用于收集用户的输入信息，表单元素是允许用户在表单中输入内容；

多数情况下被用到的表单标签是输入标签 <input>，输入类型是由 type 属性定义；

1.table标签常见属性。
1border: 边框大小px.
2bordercolor: 边框的颜色。
3cellspacing：各单元格之间的间隙。
4align ：水平对齐方式。
5width：表格宽度，可以是像素px ，可以是百分比。
2. tr标签常见属性。
1align：水平对齐方式。
2valign：垂直对齐方式。
3bgcolor:设置背景颜色。
4height：高度px。
3. td标签常见属性。
1align：水平对齐方式。
2valign：垂直对齐方式。
3bgcolor:设置背景颜色。
4width | height：设置宽度|设置高度。

2.6html url：URL 是一个网页地址，URL可以由字母组成；互联网协议（IP）地址：http://127.0.0.1:5500/。URL=网站域名=IP+端口；

三、css是什么？

3.1css定义：是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3.2实例解析：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。CSS注释以 /* 开始, 以 */ 结束。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css实例解析</title> 
<style>
body
{
	background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>我的网页!</h1>
<p>hello，world！css实例。</p>
/*这是个注释*/
</body>
</html>

3.3css特点与使用：多页面应用；丰富的样式定义；易于使用和修改；

内联样式：定义在单个HTML元素中；

<div style="background-color: blue;">我是一个div</div>

内部样式表：定义在HTML的头元素中；

外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件。

一个css文档一般是有一个或者是多个选择器以及声明组成，选择器是需要改变样式的HTML元素，每一个声明由一个属性和一个值组成。在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。

四、css基础语法

4.1css链接与选择器：

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

a:link - 正常，未访问过的链接；a:visited - 用户已访问过的链接；a:hover - 当用户鼠标放在链接上时；a:active - 链接被点击的那一刻。

css的选择器一般为id和class选择器：根据指定的id名称找到对应的标签, 然后设置属性

格式: #id名称{ 属性:值; } ；根据指定的类名称找到对应的标签, 然后设置属性；

格式: .类名{ 属性:值; }；

4.2css表格：使用 CSS 可以使 HTML 表格更美观。

1.表格边框：指定CSS表格边框，使用border属性。

示例如下：指定了一个表格的Th和TD元素的黑色边框；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css示例</title>
<style>
table,th,td
{
	border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>lili</td>
<td>fx</td>
</tr>
<tr>
<td>女</td>
<td>女</td>
</tr>
</table>
</body>
</html>

2.Width和height属性定义表格的宽度和高度；text-align属性设置水平对齐方式，向左，右，或中心。background-color 属性定义了元素的背景颜色。

body {background-color:#b0c4de;}

4.3css表单：

使用 CSS 来渲染 HTML 的表单元素。

1输入框(input) 样式：input[type=text] - 选取文本输入框。input[type=password] - 选择密码的输入框。input[type=number] - 选择数字的输入框。

2输入框：使用 padding 属性可以在输入框中添加内边距。

3transition 属性：设置了输入框在获取焦点时会向右延展。使用 background-image 属性和用于定位的background-position 属性用于输入框中添加图标。

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

4.4css网页布局：

1一般情况下，网页布局分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo；

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

菜单导航条包含了一些链接，可以引导用户浏览其他页面；

.topnav {
  overflow: hidden;
  background-color: #333;
}

2在进行页面布局时主要考虑以下几方面：要有整体意识；从外向内，层层递进；模块化；命名规则。

总结

在 html 文件的 head 标签中使用link可以引用css文件对html修饰，css可以说是html的化妆师。通过学习已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。同时掌握了如何定位元素、控制元素的可见性和尺寸、设置元素的形状。