关于前端:Web前端之HTML-与-CSS基础知识

HTML（HyperText Markup Language）就是超文本标记语言。” 超文本 ” 就是示意页面内能够蕴含非文字元素，如：图片、链接、音乐等等。

它是一种建设网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示进去。这种标记性语言是因特网上网页的次要语言。

HTML 网页文件能够应用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保留。将 HTML 网页文件用浏览器关上显示，若测试没有问题则能够放到服务器（Server）上，对外公布信息。

整体构造

HTML 的内容都是由一对一对的标签组成，标签不能凌乱，页面有页面的整体架构和规定，标签和标签之间有须要正确嵌套。

通常一个 HTML 网页文件蕴含 3 个局部：标记头区…、内容区…和网页区…。

<html>
<head></head>
<body></body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML 文档的根本构造 </title>
        <script></script>
        <link rel="stylesheet" type="text/css" href=""/>
    </head>
    <body>
    </body>
</html>

html

标记用于 HTML 文档的最前边，用来标识 HTML 文档的开始。而标记放在 HTML 文档的最初边，用来标识 HTML 文档的完结，两个标记必须一块应用。

head

和形成 HTML 文档的结尾局部。和标记对之间的内容是不会在浏览器的框内显示进去的，两个标记必须一块应用。

在此标记对之间能够应用、、、等标签。

：用来提供对于文档的信息，起始属性为：charset=“utf8”。示意通知浏览器页面采纳的什么编码，一般来说咱们就用 utf8。当然，文件保留的时候也是 utf8，而浏览器也设置 utf8 即可正确显示中文。

：用来引入 css 文件

title

留神：

body

个别状况下大部分浏览器上显示的内容，都放在 body 中。但也不排除其余标签能够不必 body，比方 frameset 框架集标签。

和是 HTML 文档的主体局部，在此标记对之间可蕴含

、、

…

、

…
=

、

等泛滥的标记。它们所定义的文本、图像等将会在浏览器的框内显示进去。

罕用属性

属性

值

形容

bgcolor

colorname：Red、Green…
rgb(x,x,x)：red、green、blue，x:0-255

规定文档的背景色彩，当前能够用款式取代它

text

rgb(x,x,x) #xxxxxx colorname

规定文档中所有文本的色彩，当前能够用款式取代它

DOCTYPE

Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。

因为应用的场景或者版本的更替间，HTML 应用的规范不同，所以须要浏览器依照不同的规范来解析 HTML 文本内容，这就须要告知浏览器我以后的 HTML 页面是依照那种形式进行编写的。没有该申明，将是你 HTML 噩梦的开始。

HTML 页面是由标签组成，不同的标签浏览器对其进行不同款式和内容的渲染，咱们须要记忆罕用的标签即可。大抵可分为如下几类：题目、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span 等。

题目和水平线

题目

标签可定义题目，题目顺次递加，因为 h 元素领有确切的语义，因而请谨慎地抉择失当的标签层级来构建文档的构造。请不要利用题目标签来扭转同一行中的字体大小。相同，咱们该当应用层叠样式表定义来达到丑陋的显示成果。

这样的标签不产生谬误，然而不具备题目的成果。

h1 标签能够为搜索引擎获取，便于页面在被搜寻的时候检索到，然而一个页面最好只有一个 h1 标签，否则可能进入搜索引擎的黑名单。

<h1></h1>

水平线

标签在 HTML 页面中创立一条水平线（horizontal rule）能够在视觉上将文档分隔成各个局部。在 HTML 中，

标签没有完结标签。

<hr />

罕用属性

属性

值

形容

align

CenterLeftright

规定 hr 元素的对齐形式，当前能够用款式取代它

size

pixels

规定 hr 元素的高度（厚度），后能够用款式取代它

width

Pixels%

规定 hr 元素的宽度，后能够用款式取代它

段落和换行

段落

标签定义段落。p 元素会主动在其前后创立一些空白。浏览器会主动增加这些空间，您也能够在样式表中规定。

了解：语文课本中各个段落之间会有大的空隙。

<p></p>

罕用属性

属性

值

形容

align

left、right、center、justify

规定段落中文本的对齐形式，当前能够用款式取代它

换行

br 标签为换行符号，
标签是空标签（意味着它没有完结标签，因而这是谬误的：
）。

留神：
标签只是简略地开始新的一行，而当浏览器遇到

标签时，通常会在相邻的段落之间插入一些垂直的间距。请应用
来输出空行，而不是宰割段落。

<br/>

列表

无序列表

由 <ul></ul> 和 <li></li> 标签组成。

<ul>
    <li></li>
    <li></li>
    ......
</ul>

<ul>
    <li> 好好学习 </li>
    <li> 天天向上 </li>
</ul>

罕用属性

属性

值

形容

type

disc
circle
square

规定列表的我的项目符号类型。能够应用款式取代。
dise：实心圆（默认）
circle：空心圆
square：方块

有序列表

由

和

标签组成。

<ol>
    <li></li>
    <li></li>
    ......
</ol>

<ol>
    <li> 好好学习 </li>
    <li> 天天向上 </li>
</ol>

罕用属性

属性

值

形容

type

1
a
A
i
I

规定在列表中应用的标记类型。
1：用数字模式示意序号（默认）
a：用小写字母示意序号
A：用大写字母示意序号
i：用小写罗马数字示意序号
I（大写 i）：用大写罗马数字示意序号

div 和 span

div

是一个块级元素，通常与 css 配合应用，用于布局。

标签能够把文档宰割为独立的、不同的局部。它能够用作严格的组织工具，并且不应用任何格局与其关联。

是一个块级元素。这意味着它的内容主动地开始一个新行。实际上，换行是

固有的惟一格局体现。能够通过

的 class 或 id 利用额定的款式。

<div>content</div>

罕用属性

属性

值

形容

align

left、right、center

规定 div 元素中的内容的对齐形式，当前能够用款式取代它

span

标签被用来组合文档中的行内元素，span 没有固定的格局体现。当对它利用款式时，它才会产生视觉上的变动。

<span>content</span>

格式化标签

font

规定文本的字体、字体尺寸、字体色彩

pre

定义预格式化的文本。被突围在 pre 元素中的文本通常会保留空格和换行符。而文本也会出现为等宽字体

文本标签

**<b>**（粗文本）、**<i>**（斜体文本）、**<u>**（下划线文本）、

< del >（中划线文本）、（下标文本）、（上标文本）

a 标签

标签定义超链接，用于从一张页面链接到另一张页面。

元素最重要的属性是 href 属性，它批示要链接的指标地位，同时没有 href 属性 a 标签内的内容与一般文本没有区别，也就失去了超链接的性能。

若是想要跳转到以后页面，那么 href 的值为 #。被链接页面通常显示在以后浏览器窗口中，除非您规定了另一个指标（target 属性）。

<a href="http://www.baidu.com"> 百度 </a>

罕用属性

属性

值

形容

href

URL

连贯所要跳转的地位，可能是其余或以后页面。

target

_blank
_parent
self
top
Framename 作为锚点的 a 标签的 name 值

规定在何处关上链接文档。
_blank：开启新页面显示页面；
_self：以后页面显示跳转到页面，默认值。
_top：用于有 frameset 布局的页面，想要笼罩整个页面显示。
Framename：这里 framename 与上边的值不同，具体认为 frame 起了什么样的名字为准，该值批示要连贯的页面跳转后将在相应名称的框架中显示。

锚点的实现

利用 a 标签的 name 属性：

<a name="top"></a>

个别标签的 id 属性：div id=””、a id=”” 等：

<div id="top"></div>、<a id="top"></a>

锚点定位

<a href="#top"> 返回首部 </a>

图片

img 元素向网页中嵌入一幅图像。

留神：从技术上讲，标签并不会在网页中插入图像，而是从网页上链接图像。标签创立的是被援用图像的占位空间。

<img src=""alt="" >

必须属性

属性

值

形容

alt

text

规定图像的代替文本，个别在图片无奈失常显示占位的文字。

src

URL

规定显示图像的 URL。

罕用属性

属性

值

形容

align

top、bottom、middle、left、right

规定如何依据四周的文原本排列图像

border

pixels

定义图像四周的边框

height

pixels、%

定义图像的高度。

width

pixels、%

定义图像的宽度。

title

文本

当鼠标在图片上时显示的文字

表格

标签定义 HTML 表格。

标签定义表格的行。tr 元素蕴含一个或多个 th 或 td 元素

标签定义 HTML 表格中的规范单元格。

定义表格内的表头单元格。th 元素外部的文本通常会出现为居中的粗体文本，而 td 元素内的文本通常是左对齐的一般文本。

简略的 HTML 表格由 table 元素以及一个或多个 tr、th、或 td 元素组成。

了解：table 相当于一个表格的外框，tr 为行，td 为一个一个单元格，th 为有题目作用的单元格，th 中的内容同时有加粗的成果。

罕用属性

属性

值

形容

align

right、center、left

表格对齐形式

border

规定表格边框的宽度

width

%、px

规定表格的宽度

tr 罕用属性

属性

值

形容

align

right、left、center

定义表格行的内容对齐形式。

bgcolor

rgb(x,x,x)、#xxxxxx、colorname

规定表格行的背景色彩，当前能够用款式取代它

valign

top、middle、bottom

规定表格行中内容的垂直对齐形式，当前能够用款式取代它

的 colspan 和 rowspan 别离规定单元格横跨的列数和行数

表单

form

标签用于为用户输出创立 HTML 表单。

表单可能蕴含 input 元素，比方文本字段、复选框、单选框、提交按钮等等。还能够蕴含 textarea 等元素。

表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

罕用属性

属性

值

形容

action

URL

规定当提交表单时向何处发送表单数据

method

get、post

规定用于发送 form-data 的 HTTP 办法

name

Form_name

规定表单的名称

target

blank _self parent _top framename

规定在何处关上 action URL

method：表单提交形式：get、post

get：默认，被动的获取形式，数据放在 url 上，数据的容量无限，安全性差，有缓存

post：数据放在申请实体中，数据量实践上没有限度，绝对平安，没有缓存

input

标签用于收集用户信息。

依据不同的 type 属性值，输出字段领有很多种形式。输出字段能够是文本字段、复选框、单选按钮、按钮等等。

罕用属性

属性

值

形容

alt

text

定义图像输出的代替文本。

checked

规定此 input 元素首次加载时该当被选中。

disabled

当 input 元素加载时禁用此元素。

readonly

规定输出字段为只读。

maxlength

number

规定输出字段中的字符的最大长度。

value

规定 input 元素的值。

type

button
checkbox
file
hidden
image
password
radio
reset
submit
text

规定 input 元素的类型。按钮复选框文件暗藏域图像形按钮明码单选框重置按钮提交按钮文本

若上传文件，申请形式为 post，且表单增加一个属性:enctype=”multipart/form-data”

留神：

1. 没有 name 属性的属性是无奈提交到后盾的！！！！

2. Radio 单选按钮以 name 雷同为一组。

3. Checkbox 复选按钮以 name 雷同为一组。

textarea

该标签定义多行的文本输出控件。文本区中可包容有限数量的文本，能够通过 cols 和 rows 属性来规定 textarea 的尺寸。cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。

<textarea>content</textarea>

label

标签为 input 元素定义标注（标记）。

label 元素不会出现任何的特殊效果。

label 标签的 for 属性该当与相干元素的 id 属性雷同，此时点击 label 标签会主动为元素聚焦

<label for="username"> 用户名：</label>
<input type="text" id="username" name="username"/>

button

<button> 按钮 </button>

罕用属性

属性

值

形容

disabled

禁用该按钮。

type

button、submit、reset

规定按钮的类型。

value

text

规定按钮的初始值。

name

button_name

规定按钮的名称。

select

用于定义下拉列表

<select name="color" >
    <option value="red"> 红色 </option>
    <option value="green"> 绿色 </option>
    <option value="blue"> 蓝色 </option>
</select>

select 罕用属性

属性

值

形容

disabled

禁用该下拉框。

multiple

规定可抉择多个选项。

name

规定下拉列表的名称。

size

number

规定下拉列表中可见选项的数目。

option 罕用属性

属性

值

形容

disabled

禁用该下拉框。

selected

规定选项（在首次显示在列表中时）体现为选中状态。

value

text

定义送往服务器的选项值。

罕用字符实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能应用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果心愿正确地显示预留字符，咱们必须在 HTML 源代码中应用字符实体（character entities）。

实体名称对大小写敏感！

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-ZjI7JwQh-1608793191431)(/1579341520148.png)]

标签的分类

HTML 中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素

元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的状况下，是它自身父容器的 100%（和父元素的宽度统一），除非设定一个宽度。

行内元素

和其余元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它蕴含的文字或图片的宽度，不可扭转。

行内块状元素

和其余元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来体现 HTML（规范通用标记语言的一个利用）或 XML（规范通用标记语言的一个子集）等文件款式的计算机语言。

CSS 目前最新版本为 CSS3，是可能真正做到网页体现与内容拆散的一种款式设计语言。绝对于传统 HTML 的体现而言，CSS 可能对网页中的对象的地位排版进行像素级的准确管制，反对简直所有的字体字号款式，领有对网页对象和模型款式编辑的能力，并可能进行初步交互设计，是目前基于文本展现最优良的体现设计语言。CSS 可能依据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS 是用来丑化网页用的，没有网页则 CSS 毫无用处，所以 CSS 须要依赖 HTML 展现其性能。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-ZjxcgngL-1608793191436)(/ 图片 1.png)]

CSS 根本语法

CSS 款式由选择器和一条或多条以分号隔开的款式申明组成。每条申明的款式蕴含着一个 CSS 属性和属性值。[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-UTWoBo4l-1608793191440)(/QQ 截图 20200205160701.png)]

选择器名 {
    属性 : 属性值;
    ......
}

div {background-color : red;}

留神：

css 申明要以分号; 完结，申明以 {} 括起来
倡议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family:“agency fb”;

正文

多行正文：

/* 这里的内容就是正文 */

CSS 的应用

1. 行内式

行内款式将款式定义在具体 html 元素的 style 属性中。以行内式写的 CSS 耦合度高，只实用于以后元素，在设定某个元素的款式时比拟罕用。

<p style="color:red;font-size:50px;"> 这是一段文本 </p>

在以后元素应用 style 属性的申明形式。

style 是行内款式属性；

color 是色彩属性；red 是色彩属性值；

font-size 是字体大小属性；50px 是字体大小属性值

2. 嵌入式

嵌入式通过在 html 页面内容开拓一段属于 css 的代码区域，通常做法为在 < head> 标签中嵌套

<style type="text/css">p {color: blue;font-size: 40px;}</style>

3. 引入外联款式文件

在理论开发当中，很多时候都应用引入外联款式文件，这种模式能够使 html 页面更加清晰，而且能够达到更好的重用成果。

style.css

p {color: green;font-size: 30px;}

test.html

<link rel="stylesheet" type="text/css" href="style.css">

rel:rel 属性规定以后文档与被链接文档之间的关系。

stylesheet: 文档的内部样式表。

很多时候，大量的 HTML 页面应用了同一个 CSS。那么就能够将这些 CSS 款式保留在一个独自的.css 文件中，而后通过元素去引入它。

留神：当有多重款式时，记住前提规定，越准确越优先。

在 CSS 中，选择器是一种模式，用于抉择须要增加款式的元素。

CSS 选择器有很多，把握罕用的即可；

根本选择器

通用选择器

抉择所有 *

* {......}

* {color: orange;}

元素选择器

抉择指定标签

元素名称 {......}

p {
    color: red;
    font-size: 20px;
}

ID 选择器

抉择设置过指定 id 属性值的元素 #

#id 属性值 {......}

#p1 {font-weight: bold;}

类选择器

抉择设置过指定 class 属性值的元素 .

.class 属性值 {......}

.hidden {display: none;}

分组选择器

当几个元素款式属性一样时，能够独特调用一个申明，元素之间用逗号分隔

选择器 1, 选择器 2,... {......}

h2 , #pre1 {
    color: orange;
    font-style: italic;
}

CSS 款式的优先级，是依据选择器的精确度 / 权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1

类选择器：10

id 选择器：100

内联款式：1000

组合选择器

CSS 组合选择器阐明了两个选择器间接的关系。CSS 组合选择符包含各种简略选择符的组合形式。

在 CSS 中蕴含了四种组合形式: 后辈选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），一般兄弟选择器（以波浪线分隔）。

后辈选择器（派生选择器）

用于抉择指定标签元素下的后辈元素，以空格分隔

选择器 1 选择器 2 {......}

.food  li {border: 1px solid red;}

<h1> 食物 </h1>
<ul class="food">
    <li> 水果
        <ul>
            <li> 香蕉 </li>
            <li> 苹果 </li>
            <li> 梨 </li>
        </ul>
    </li>
    <li> 蔬菜
        <ul>
            <li> 白菜 </li>
            <li> 油菜 </li>
            <li> 卷心菜 </li>
        </ul>
    </li>
</ul>

子元素选择器

用于抉择指定标签元素的所有第一代子元素，以大于号分隔

选择器 1 + 选择器 2 {......}

#d + div {border: 1px solid red;}

html 代码同上

相邻兄弟选择器

可抉择紧接在另一元素后的元素，且二者有雷同父元素。以加号分隔

选择器 1 + 选择器 2 {......}

#d + div {border: 1px solid red;}

<div id="d">
    相邻兄弟选择器 1
    <ul>
        <li> 开心麻花 </li>
        <li> 贾玲 </li>
        <li> 宋小宝 </li>
    </ul>
</div>
<div>
    相邻兄弟选择器 2
</div>

一般兄弟选择器

抉择紧接在另一个元素后的所有元素，而且二者有雷同的父元素，以波浪线分隔

选择器 1 ~ 选择器 2 {......}

li ~ li {background-color : yellow;}

<div>
    一般兄弟选择器 1
    <ul>
        <li> 开心麻花 </li>
        <li> 贾玲 </li>
        <li> 宋小宝 </li>
        <li> 沈腾 </li>
        <li> 王宁 </li>
    </ul>
</div>

背景

CSS 背景属性用于定义 HTML 元素的背景成果

background-color

设置元素的背景色彩

body {background-color:#ff0000;}

background-image

设置元素的背景图像，默认状况下，背景图像进行平铺反复显示，以笼罩整个元素实体。

body {background-image:url('paper.gif');
}

background-repeat

设置是否及如何反复背景图像

body {background-image: url(img/logo.jpg);    
    background-repeat: no-repeat;
}

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-5sQG6dLs-1608793191444)(/QQ 截图 20200205171029.png)]

文本

color

body {color:blue;} 
h1 {color:#00ff00;} 
h2 {color:rgb(255,0,0);
}

text-align

设置文本对齐形式，center（居中），left（左对齐），right（右对齐）

body {text-align:center;}    
h1 {text-align:right;} 
h2 {text-align:right;}

text-decoration

规定增加到文本的润饰，属性值：none、underline、overline、line-through

1）underline

对文本增加下划线，与 HTML 的 u 元素雷同。

2）overline

对文本增加上划线。

3）line-through

对文本增加中划线，与 HTML 中的 s 和 strike 元素雷同。

4）none

敞开本来利用到元素上的所有装璜。

h3 {text-decoration:underline;}

text-indent

设置文本首行缩进

p.ident2 {text-indent: 2em;}

em 一个相对值，例如页面的文本大小为 17px, 则 2em 就为 17px*2

字体

font-family

文本字体，该属性设置文本的字体。

font-family 属性应该设置几个字体名称作为一种 ” 后备 ” 机制，如果浏览器不反对第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体搁置在最初，作为替补。

留神：

1）只有当字体名中含有空格或 #、$ 之类的符号时（如 New York），才须要在 font-family 申明中加引号：

body {font-family: "arial black";}

2）多个字体系列是用一个逗号分隔指明

/* 靠前的字体先失效 */
p{font-family: 微软雅黑, 黑体,"agency fb";}

font-size

文本大小

body {font-size: 50px;  /* 字体大小 50px*/}
#span1 {font-size: 25px;  /* 字体大小 25px*/}

font-style

字体格调，该属性最罕用于规定斜体文本。属性值：normal、italic、oblique

1）normal：文本失常显示；

2）italic：文本斜体显示；

3）oblique：文本歪斜显示，oblique 是将文字强制歪斜。

阐明：个别状况下，字体有粗体、斜体、下划线、删除线等诸多属性，然而不是所有字体都具备这些属性，一些不罕用字体可能只有失常体，若应用 italic 属性则没有成果，所以须要 oblique 属性强制歪斜。

font-weight

字体加粗，该属性设置文本的粗细。

bold：能够将文本设置为粗体。

100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就间接映射到预约义的级别。

100 对应最细的字体变形；

900 对应最粗的字体变形；

400 等价于 normal；

700 等价于 bold。

对齐形式

text-align

规定元素中的文本的程度对齐形式。属性值如下：[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-TXwrW9Im-1608793191446)(/QQ%E6%88%AA%E5%9B%BE20200205180655.png)]

留神：

值 justify 能够使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。而后，调整单词和字母间的距离，使各行的长度恰好相等。对最初一行不失效。

display 属性

display 属性规定元素应该生成的框的类型。这个属性用于定义建设布局时元素生成的显示框类型。[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-xGEB8KJH-1608793191448)(/QQ%E6%88%AA%E5%9B%BE20200205181007.png)]

浮动

float 的属性值有 none、left、right。

1. 只有横向浮动，并没有纵向浮动。2. 会将元素的 display 属性变更为 block。3. 浮动元素的后一个元素会围绕着浮动元素（典型使用是文字围绕图片）4. 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都利用 float）。

盒子模型

border、padding、margin 三个属性形成了盒子模型。[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-gBCwXoLq-1608793191450)(/QQ 截图 20200205174125.png)]

border

设置所有的边框属性。

1）可同时设置边框的宽度、款式、色彩

table, th, td {border: 1px solid black;}
table {width:100%; height:50px;}

2）应用 border-width、border-style、border-color 独自设置

table,td {
   border-width: 1px;
   border-style: dotted;
   border-color: green;
}

3）border-style 的属性

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-hjrQg4ym-1608793191452)(/QQ 截图 20200205174509.png)]

4）border-collapse

设置是否将表格边框折叠为繁多边框。

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

table {border-collapse : collapse;}

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中管制文本到边框的内边距，应用 td 和 th 元素的填充属性：

td {padding:15px;}

独自设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认依照上右下左的程序设定

td .test1 {padding: 1.5cm}        
td .test2 {padding: 0.5cm 2.5cm}

<table border="1">
    <tr>
        <td class="test1">
            这个表格单元的每个边领有相等的内边距。</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
        这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。</td>
    </tr>
</table>

留神：通过 padding 属性设置元素内边距时，会使元素变形。若不想影响格局成果，能够用 margin 属性设置元素外边距。

margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {margin: 2px 4px 3px 4px;}

独自设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{
    margin-top:100px; 
    margin-bottom:100px;
    margin-right:50px; 
    margin-left:50px; 
} 
*{margin: auto auto;} 
*{margin: 100px auto;}

阐明：

auto：主动，能够了解为居中的意思。浏览器主动计算外边距。

margin: auto auto：第一个 auto 示意高低外边距主动计算，第二个 auto 示意左右外边距主动计算。

然而高低外边距在主动计算时不会失效，而左右外边距会失效，体现为居中状态，成果如下：[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-bBvubebw-1608793191454)(/ 图片 3.png)]

若要设置为上下左右居中状态，则要计算好自行设置高低的外边距，成果如下：[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-spby6Ywv-1608793191455)(/ 图片 4.png)]

留神：此时应用 margin-top 不失效。理解

关于前端:Web前端之HTML-与-CSS基础知识

根底语法

标签

单标签

单标签属性

双标签

双标签属性

整体构造

html

head

title

body

xxxxxx：十六进制的数字，00-ff

DOCTYPE

罕用标签

题目和水平线

题目

–

水平线

段落和换行

段落

换行

列表

无序列表

有序列表

div 和 span

div

span

格式化标签

font

pre

文本标签

a 标签

图片

表格

表单

form

input

textarea

label

button

select

罕用字符实体

标签的分类

块级元素

行内元素

行内块状元素

CSS

CSS 的根本应用

CSS 根本语法

正文

CSS 的应用

CSS 选择器

根本选择器

通用选择器

元素选择器

ID 选择器

类选择器

分组选择器

组合选择器

后辈选择器（派生选择器）

子元素选择器

相邻兄弟选择器

一般兄弟选择器

CSS 罕用属性设置

背景

background-color

background-image

background-repeat

文本

color

text-align

text-decoration

text-indent

字体

font-family

font-size

font-style

font-weight

对齐形式

Just My Socks（注册教程内含优惠码）