HTML & CSS 学习总结_学习css在html后的总结-CSDN博客

本文链接：https://blog.csdn.net/qq_58804208/article/details/125661898

一、HTML基础

一、HTML基础

1.什么是HTML？HTML构成结构

HTML是超文本标记语言（HyperText Markup Language）的缩写。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。它定义了网页内容的含义和结构。

HTML构成结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type=" ./XXX">
  <title>页面标题</title>
</head>
<body>
  <h1>一个Web页面</h1>
  <p>丑陋的页面</p>
</body>
</html>

2.HTML元素、标签

<html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

<head>元素。这个元素是一个容器，包含页面描述，CSS样式，字符集声明等等。

<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标

<title>: 设置页面标题，出现在浏览器标签上。

<body>元素。包含你能在页面看到的所有内容。

预设格式<pre> 保持文本特殊格式

标题元素<h1>到<h6>

段落元素<p></p> ，超链接<a href=" "></a>,

空元素（没有结束标签）：<br>空格, <hr>换行, <input>输入框, <img src=" ">图片, 等等。

文本格式控制：<mark>高亮、<del>已删除、<s>不准确、<ins>补充、<u>下划线，<small><strong><em>小字体、大字体、斜字体。

区块元素 : 在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等

内联元素:总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等

空元素（没有结束标签）：<br>空格, <hr>换行, <input>输入框, <img src=" ">图片, 等等。

3.HTML元素的属性

常用属性

class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)
type	定义类型

例子<p title=" XX" class="XX1 XX2 XXn " id="X" style=" XX" ></p> ,<input type='' password''>

4.表格、列表、表单

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data）

<table >
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
        </tr>
</table>

列表list

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

<ul type="square">
  <li>Alice</li>
  <li>Can</li>
  <li>Fail</li>
</ul>

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等

<ol type="A">
  <li>a1</li>
  <li>h8</li>
  <li>e5</li>
  <li>f6</li>
</ol>

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

二、CSS基础

1.什么是CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页上的元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等由CSS决定。

2.CSS语法和选择器

语法格式

选择器{

     属性一： 值1；
     属性二： 值2；
     ...........
}

元素选择器

如h1 ,p,body等等；

h1{
    color: blue;
    text-align: center;
}

类选择器

在CSS文件中定义类的样式，然后在html中调用。如<h1 class="blueclass">。可以重复使用

id选择器

对标签定义id：<p id="">，然后在CSS中定义该id的样式。不能重复使用。

在实际使用中更多会使用类选择器。

组合选择器：后代选择器如.box p,就是对选择box类的元素中的p元素进行样式控制；

子选择器也称为直接后代选择器，.box > p，相当于后代选择器只选他的直接后代。

3.CSS中常用的属性

颜色：一般有3种方式实现。1.颜色名称 -如Tomato。2.十六进制 - 如："#ff0000"。

3.RGB - 如："rgb(255,0,0)"。

尺寸：用wight和height实现，有相对 - 如80%和绝对 -68px 的两种写法

对齐：

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right；

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

垂直居中对齐 - 使用 padding如padding :70px 0;

盒子模型：一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，用CSS可以对他们进行控制就能实现边距控制，如

.box{
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}

定位：position，有4种方式，static 静态（系统默认）relative 相对静态位置的移动。fixed 固定位置（相对浏览器屏幕不动）absolute 相对于其最近设置了定位属性（非static）的父元素进行偏移

浮点布局：float让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。如将4个图片在一行显示flost :right; 。

不透明度：opacity对元素进行透明度设置[0.0]~[1.0],越低越透明。

总结

html是网页构成的基础，对网页的内容进行解释并展示，CSS则是对html中的属性进行美化和布局优化。