HTML+CSS总结_c.html决定页面的结构,css决定页面的样式,js决定页面的行为-CSDN博客

本文链接：https://blog.csdn.net/weixin_39580806/article/details/97688805

Html总结

开发工具

JetBrains WebStorm、Sublime、Adobe Dreamweaver、HBuilder等

浏览器

谷歌浏览器、IE浏览器

其它工具

Adobe Photoshop

网页三大结构

html决定页面的结构、css决定页面的样式，js决定页面的行为语法结构

行内标签

<a>标签可定义锚	<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写	<b>字体加粗
<bdo>可覆盖默认的文本方向	<big>大号字体加粗
<br>换行	<cite>引用进行定义
<code>定义计算机代码文本	<dfn>定义一个定义项目
<em>定义为强调的内容	<i>斜体文本效果
<img>向网页中嵌入一幅图像	<kbd>定义键盘文本
<label>标签为	<input> 元素定义标注（标记）
<q>定义短的引用	<samp>定义样本文本
<select>创建单选或多选菜单<small>呈现小号字体效果	<span>组合文档中的行内元素
<strong>语气更强的强调的内容	<sub>定义下标文本
<sup>定义上标文本	<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果	<var>定义变量

块级标签

<address>定义地址	<caption>定义表格标题
<dd>定义列表中定义条目	<div>定义文档中的分区或节
<dl>定义列表	<dt>定义列表中的项目
<fieldset>定义一个框架集	<form>创建 HTML 表单
<h1>定义最大的标题	<h2>定义副标题
<h3>定义标题	<h4>定义标题
<h5>定义标题	<h6>定义最小的标题
<hr>创建一条水平线	<legend>元素为
<fieldset>元素定义标题	<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部	<noscript>定义在脚本未被执行时的
<ol>定义有序列表	<ul>定义无序列表
<p>标签定义段落	<pre>定义预格式化的文本
<table>标签定义 HTML 表格	<tbody>标签表格主体（正文）
<td>表格中的标准单元格	<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格	<thead>标签定义表格的表头
<tr>定义表格中的行

网页结构

HTML标签：

作用所有HTML中标签的一个根节点。最大的标签根标签

head标签：文档的头部

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

title标签：文档的标题

作用：让页面拥有一个属于自己的标题。

body标签：文档的主体以后我们的页面内容基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTML标签关系

嵌套关系
并列关系

文档类型<!DOCTYPE>

html版本，使用的是 html 5 的版本

文档类型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

链接标签

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

锚点定位

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）

2.使用相应的id名标注跳转目标的位置。

以上两种都属链接，区别是链接标签是从一个页面跳转到另一个页面，而锚点链接是在一个页面定位到另一个位置

input 控件(重点)

属性	属性值	描述
text	单行文本输入框	password
密码输入框	radio	单选按钮
checkbox	复选框	type
button	普通按钮	submit
提交按钮	reset	重置按钮
image	图像形式的提交按钮	file
文件域	name	由用户自定义
控件的名称	value	由用户自定义
input控件中的默认文本值	size	正整数
input控件在页面中的显示宽度	checked	checked
定义选择控件默认被选中的项	maxlength	正整数
控件允许输入的最多字符数

性别：<input type="radio" name="sex" value="male" checked />男

<input type="radio" name="sex" value="female" />女

上述代码中，value="male" 的选项定义了 checked 属性，当页面打开时，它默认被选中。当然，它只是默认被选中而已，用户可以通过点击来自由选择其他选项。提交表单时，单选框的名称和被选中的单选框对应的值，将会被提交到服务器端。

原则上，只能有一个选项定义 checked 属性，但如果多个选项同时定义了 checked 属性，则是最后一个选项被默认选中。

css

网页的美容师

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

Fon字体样式

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

font-family属性用于设置字体。

font-weight:字体粗细

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

Font语法：选择器{font: font-style font-weight font-size/line-height font-family;}

color:文本颜色

line-height:行间距

text-align:水平对齐方式

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-decoration 文本的装饰

none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

Css复合选择器

交集选择器

交集选择器是并且的意思。即...又...的意思

并集选择器

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

子元素选择器

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

伪类选择器

:link /* 未访问的链接 */

:visited /* 已访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 */

标签显示模式（display）

块级元素(block-level)

略，见html总结

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素(inline-level)

略，见html总结

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

行内块元素（inline-block）

行内块状元素特征：

(1)不自动换行

(2)能够识别宽高

(3)默认排列方式为从左到右

块、行内元素转换为行内块： display: inline-block;

CSS 背景(backgroun

background-color	背景颜色

background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片(image)

参数：

none : 无背景图（默认的）

url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

语法：background-image : none | url (url)

背景平铺：语法background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x : 　背景图像在横向上平铺

背景位置(position)

语法：background-position : length || length；background-position : position || position

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

背景附着

语法：background-attachment : scroll | fixed

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

background属性的值的书写顺序官方并没有强制标准的。为了可读性，如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

语法：

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

盒子模型（CSS重点）

CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型（Box Model）

边框属性—设置边框样式（border-style）

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度样式颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

必须是块级元素。
盒子必须指定了宽度（width）
文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto
插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

浮动(float)

普通流(normal flow)

这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

为什么要清除浮动

并不是清除浮动，而是清除浮动后造成的影响

如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

清除浮动的方法

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

父级添加overflow属性方法

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用before和after双伪元素清除浮动……

定位

如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。

边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

相对定位relative

绝对定位absolute

固定定位fixed

叠放次序（z-index）

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）