HTML CSS基础总结

来源：互联网发布：velocity.js官网下载编辑：程序博客网时间：2024/04/30 06:19

后端程序员怎么能不懂前端，所以...用了周日一整天加三天的零散时间吧，终于把前端入门看完啦（鸡冻\(≧▽≦)/），但是目前肯定还是不会写网站的，就像刚学完c++还不会写项目一样，慢慢来吧O(∩_∩)O，边看边学写了这么多，有官方的解释，也有自己的理解吧，以后没事可以常看看，也希望对大家有帮助，加油↖(^ω^)↗。
HTML

文档注释

标签

1.<head>

<meta>

</head>

2.<body>

1。字体斜体 <em> </em>

2。字体加粗 <strong> </strong>

3。段落 <p> </p>

4。单独样式

<style>

span{;}

</style>

span的颜色设定：

aqua 浅绿色

black 黑色

blue 蓝色

fuchsia 紫红色

gray 灰色

green 绿色

lime 绿黄色

maroon 栗色

navy 深蓝色

olive 橄榄色

purple 紫色

red 红色

silver 银白色

teal 蓝绿色

white 白色

yellow 黄色

5。短文引用 <q> </q> (不用加双引号)

6。长文本引用 <blockquote> </blockquote>(不用加引号)

7。分行显示 <br />(相当于Word中的回车)

拓展：<br />为空标签，空标签只需要写一个开始标签，空标签还有<hr />，<img />

html中忽略回车和空格，想回车换行，必须输入<br />.

8。输入空格   (一个 代表一个空格

9。添加水平横线 <hr />

10。为网页添加地址信息 <address> </address>

11。加入一行代码 <code> </code> 作用：防止浏览器误认为是要执行代码，而没显示代码。加了标签浏览器就不会执行了，而是像文本一样显示出来

12。加入多行代码 <pre> </pre> <pre>中的回车和空格都会保留

其中 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"

13。添加信息列表（无序）<li>前面默认带点

<ul>

</ul>

14。添加信息列表（有序）<li>前面默认从1开始排序

<ol>

</ol>

ul：unordered list

ol：ordered list

li：list

15。分块排版

16。加id排版

17 。table标签（表格）

<table> ...</table>整个表格内容

<tbody> ...</tbody> 当表格内容非常多时，表格会下载一点显示一点，如果加上<tbody>标签后，表格要等内容全部下载完才会显示。

<tr> ... </tr> 表格的一行，即有几对<tr>表格就有几行。 table row（表格行）

<td> ... </td>表格的一个单元格，一行中包含几对<td> 就说明表格有多少列。 table data（表格数据）

<th> ... </th>表格头部的单元格，即表格表头。table head（表头）

18 。为表格加边框

table te td,th{border:1px solid #000;} border：边框粗细 solid：颜色

</style>

19。为表格加摘要

<table summary = "表格简介文本"> 摘要的内容是不会在浏览器中显示出来的

...

</table>

为表格加标题

<table>

<caption>标题文本</caption> 标题内容会显示

<tr>

</tr>

</table>

20 。超链接

<a href = "目标网址" title = "鼠标滑过显示的文本">链接显示的文本</a>(默认在当前窗口打开链接，title 可以不写） href：Hypertext Reference的缩写。意思是超文本引用

21 。在新建浏览器窗口打开链接

<a href = "目标网址" target = "_blank">链接显示的文本</a> （target：目标）

_blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接

_self -- 在当前窗体打开链接,此为默认值

_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

22。超链接邮件

23。添加图片

(src :标识图像的位置；图像可以是GIF png JPEG文件，title为鼠标停留时显示的文本）

24。表单——与用户交互

...

</form>

(表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。)

input type：

text：文本框

password：密码框

raido：单选按钮

checkbox：复选框

file：文件选择框

submit：提交按钮

reset：重置按钮

25。文本输入框，密码输入框

<form>

</form>

1、type：当type="text"时，输入框为文本输入框;当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用) value可用 placeholder替代

26。文本域，多行文本输入

<textarea rows="行数" cols="列数">文本

</textarea>

27。使用单选框和复选框，让用户选择

注：

1.当type="radio"时，控件为单选框，type="checkbox”时，控件为复选框

2.value：提交数据到服务器的值（后台程序PHP使用）

3.name：为控件命名，以备后台程序ASP，PHP使用

4.checked：当设置checked=“checked”时，该选项被默认选中

5.同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

28。使用下拉列表，节省空间

1 提交值：向服务器提交的值。

2 选项：显示的值。

3 selected：可有可无，该选项默认被选中。

4 selected = “selected”可以写成selected

29。使用下拉列表框进行多选（不常用）

...

</select>

（ctrl+单击进行多选）

30。提交按钮

1.type：只有当type值设置为submit时，按钮才有提交作用

2.value：按钮上显示的文字

31 重置按钮

1.type：只有当type值设置为reset时，按钮才有重置作用

2.value：按钮上显示的文字

32 label标签

比如：

<form>

<br />

<label for="email">输入你的邮箱地址</label>

</form>

注：

1.标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

2.不加label的话鼠标一定要点击小圆点才能激活条目,加了label可以直接点击对应的文字来激活条目，label的作用就是获得焦点，在列子中，把鼠标移动到文字上（男、女、输入你的邮箱地址），同样可以激活控件进行选择，输入。但是如果不加label的话，鼠标就必须移动到控件上面。

CSS

1，注释

在CSS中注释语句为：/* */；在HTML中注释语句为：

2，格式

标签名{

属性:值；

}

</style>

3，CSS样式代码插入形式有三种：内联式，嵌入式，外部式

内联式：<p style="color:blue;font-size:20px;"> </p>

嵌入式：

<head>

<style>

color:blue;

font-size:20px;

}

</style>

</head>

外部式：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内

比如：<link href="文件名.css" rel="stylesheet" type="text/css" />

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用

内联式适用情况:局部特殊化

嵌入式适用情况:统一标签样式格式

外联式适用情况:方便代码重用和管理

三者优先级：内联式>嵌入式>外部式（相同的权值条件下）

嵌入式>外部式的前提：嵌入式写在外部式后面。

就近原则

4，标签选择器

标签名{样式}

</style>

5，类选择器：

.类选择器{css样式代码}

例：.stress{color:red;} <span class="stress"> </span>

6， id选择器：

#id选择器{css样式代码}

例：#stress{color:green;} <span id="stress"> </span>

id选择器和类选择器的区别：

① id选择器只能用一次，class选择器可以用多次

② 可以用多个class选择器为一个元素设置多个样式，id选择器不可以

③ class可以重名，id不行

什么时候用id，什么时候用class

W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用。

形象的说，id就像身份证号码，是唯一的，该身份证号码就能代表你。一个人不能有两个身份证号码，也不能一个身份证号码表示两个人。而class就像昵称，该昵称也能代表你。一个人可以有多个昵称，也可以多个人用同个昵称。

7，子选择器

.选择器>第一代子元素{css样式代码}

形象的说：>只将样式代码作用于孩子元素，而不作用于孙子元素

比如：

.first>span{color:red}

只有a被染成红色，b不变；（b为a的孩子），如果让b变，需将<style>中改为 .first>span>span{}即可

如果想作用于其所有的后代将>号改为空格，即可

8，通用选择器

*{css样式代码}

将HTML中的所有标签都加以该样式

总结：

标签选择器，标签名{}，作用于所有此标签。

类选择器， .class{}，在标签内定义class=""，属图形结构。

ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。

9，伪类选择符：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。

比如：a:hover{ color:red;font-size:20px;} 为a标签设置鼠标滑过字体变红和变号的效果

10，分组选择符

a,b{...}

为a标签和b标签设置同样的样式

继承

11，有些样式作用于父亲可以继承的作用于孩子，但是有些不行

比如：color可以继承，border不可以

12，权值

为同一个元素设置了不同的CSS样式代码，显示哪一个取决于权值的大小，权值越高，越优先

标签的权值为1，

类选择符的权值为10，

ID选择符的权值最高为100，

继承的权值最低，可以认为是0.1

比如：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

13，层叠

同一个元素有多个CSS样式，具有相同的权值怎么办

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。即就近原则

14，重要性

！important

设置最高权值，不可被覆盖

eg：p{color:red!important;}

p{color:green;}

最终显示为红色

注意：

！important写在分号前面。

文字排版

15，字体

不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

font-family: "Microsoft Yahei/微软雅黑/宋体"; 设置字体；

font-size:20px 字体大小；

font-weight:bold：设置为粗体样式；

font-style:italic：设置为斜体样式；

text-decoration:underline：文字设置下划线；

text-decoration:line-through：删除线；

text-indent:2em：缩进；（注意：2em的意思就是文字的2倍大小。）1em=16px

line-height:2em：行高；

word-spacing:50px：单词间距；

letter-spacing:20px:字母间距；

text-align:center：水平居中对齐； left左对齐，right右对齐

16 元素分类

块状元素block，内联元素inline，内联块状元素inline-block

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

为标签设置类型

span{display：block/inline/inline-block}

17，盒子模型

①，边框一

border-style（边框样式）border-color（边框颜色）border-width（边框宽度）

border-style常见样式：dashed（虚线）| dotted（点线）| solid（实线）。

border-color：也可以用16进制表示如#888.

border-width也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。

边框二

为一个盒子的某一条边设置单独的样式

border-top：；border-bottom：；border-right：；border-left：；

②，宽度和高度

一个元素的实际宽度（盒子的宽度）=左边界（margin-left）+左边框（border-left）+左填充（padding-left）+内容宽度（width）+右填充（padding-right）+右边框（border-right）+右边界（margin-right）

③，填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)

{padding:20px 10px 20px 30px}

顺序不可以搞混，顺时针上右下左

如果四个距离都一样，可以写为：padding：20px；

如果上下一样，左右一样可以写为：padding：10px 20px；

④，边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左

{margin：20px 10px 30px 40px；}，简写与padding一样。

padding和margin的区别：padding在边框里，margin在边框外。

18，布局模型

布局模型和盒子模型一样都是CSS最基本，最核心的概念，CSS包含三种最基本的布局模型：

流动模型（Flow）

浮动模型（Float）

层模型（Layer）

①，流动模型（Flow）

流动模型是默认的网页布局模式，流动模型有两个特征：

一，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

二，内联元素都会在所处的包含元素内从左到右水平分布显示。

②，浮动模型（Float）

可以实现两个块状元素（p,table,div,img）并排显示

div{ float:left} 左对齐并排显示

div{float:right} 右对齐并排显示

#div1{float：left}

#div2{float:right} 两元素并排一左一右显示

③，层模型（Layer）

可以实现HTML元素在网页中的精确定位

层模型有三种形式：

1，绝对定位（position：absolute）

2，相对定位（position：relative）

3，固定定位（position：fixed）

绝对定位：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

position：absolute；

left：向右移，top：向下移...

相对定位：通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

left：向右移，top：向下移

固定定位：与absolute类似，但它的相对移动的坐标是网页窗口本身，它不会随浏览器的滚动条滚动二变化，因此，固定定位的元素会始终位于浏览器窗口的某个位置，（许多网页小广告就是这样哒0.0），与background-attachment：fixed属性功能相同

relative与absolute的组合使用：只是用absolute可以实现相对浏览器定位，和relative组合使用可以实现相对于某个元素定位。要求：参照定位的元素必须是相对定位元素的前辈元素

前辈元素{position:relative}

孩子元素{position:absolute}

19，盒子模型中的缩写

①颜色的缩写：1，用16进制可以表示颜色，如果每两位的值相同，可以缩写一半，如#000000=#000，#336699=#369，但是#800000！=#8000，即颜色值要么写成6位，要么（可以）写成三位。

2，用RGB表示（red green blue三种比例配色）：例如：p{color：rgb(133,45,200)},每一项为0~255的一个整数，也可以是0~100%百分数

3，用英文表示

②字体的缩写：

比如：

body{

font-style:italic; //设置字体为斜体

font-variant:small-caps; //区分大小写，浏览器会显示小型大写字母的字体

font-weight:bold; //设置粗体

font-size:12px; //字号是12像素

line-height:1.5em; //行间距（行高）1.5个行倍

font-family:"宋体",sans-serif;//设置中文字体为宋体，英文字体为sans-serif

}

可以简写为：

body{

font:italic small-caps bold 12px/1.5em "宋体",sans-serif;

}

注意： 1，至少要指定font-size和font-family属性，其他属性未指定则为默认，前三个顺序没有影响，后两个不能搞混

2，在缩写fong-size和font-height中间要加上右斜杠“/”。

20，长度单位总结

比较常用的是px（像素），em，%（百分比）

像素：像素指的是显示器上的小点，CSS规范假设90像素=1英寸。其实还和显示器的实际像素有关

em：就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。比如：p{font-size:12px;text-indent:2em},此时1em=12px，即首行缩进两个字符（24px），特殊：如果font-size单位为em，此时的计算标准以其父元素的font-size为基础，比如：p{font-size:14px} span{font-size:0.8em;}此时span字体为14*0.8=11.2px

百分比：比如 p{font-size:12px;line-height:130%}，行高为12*1.3=15.6px。

21，水平居中显示

行内元素：text-align:center;

块状元素：

定宽块状元素（块状元素的width为固定值）：margin：auto

不定宽块状元素：

方法一：加入table标签，利用table标签的长度自适应性，可以看做定宽块状元素，然后再利用margin方法 table{margin:0 auto;} div{display:table;}

方法二：改为inline类型（行内元素）display：inline 用行内元素的text-align：center

方法三：父元素{position：relative；float：left；left：50%} 子元素{position：relative；left：-50%} 官方解释太恶心，可以这样理解：父元素先浮动到左边，然后向左偏移整行的50%，即左边界与整行的正中间对齐，然后子元素再以父元素为参照，偏移自己的-50%，即再向右偏移，这样就居中了。附：父元素中加入 clear：both 可以防止子元素将父元素的内容覆盖

22，垂直居中显示

①，父元素高度确定的单行文本：将块的高度height和行间距设置的一样即可，eg：p{height：100px；line-height：100px}。缺点：当文字内容的长度大于块的宽时，就有内容脱离了块。

②父元素高度确定的多行文本

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 td标签默认情况下设置vertical-align为middle。

方法二（兼容性不好参考）：设置显示样式为table-cell {display：teble-cell；vertical-align：middle }

23，隐式改变display类型

当为元素设置以下两句之一

1，position：absolute；（层模型的绝对定位）

2，float：left（或right）；（布局模型的浮动模型）

元素的display显示类型就会变为以display：inline-block（块状元素）的方式显示，也就可以设置元素的width和height啦，并且默认宽度不占满父元素。

阅读全文

0 0