HTML以及CSS相关知识总结(一)

近日就开始回顾html和css相关知识啦，并且会学习html5和css3的新知识，以下是我对记忆不太深刻的地方以及新知识点的总结：

Web标准：

结构：用于对网页元素进行整理和分类，即HTML

表现：用于设置网页元素的版式，颜色，大小等外观样式，即CSS

行为：指网页模型的定义及交互的编写,即Javascript

VS常用快捷键：

快速复制下一行：shift+alt+下箭头

同时选中多个相同单词：ctrl+d

添加多个光标：ctrl+alt+下箭头（上箭头）

全局替换某个单词：ctrl+h

快速定位到某一行：ctrl+g

选择某个区块：shift+alt,之后拖动鼠标

:文档类型声明标签

 ：即为当前页面采用的是HTML5版本来显示网页

  ：en表示该网页为英文网页，zh-CN表示为中文网页，fr为法文网站 

字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。在标签内，可以通过标签的charset属性规定HTML文档应该使用哪种字符编码，一般情况下，统一使用"UTF-8"编码，即万国码，基本包含了全世界所有国家需要用到的字符。

换行标签:
，单标签，不像段落标签段落与段落之间有较大空隙，换行只是移至下一行

水平线：

---

文本格式化标签：突出重要性

加粗：,

倾斜：,

删除线：,

下划线：,

均推荐使用前者：语义更加强烈

img标签相关属性：

title：鼠标移至图片上所显示的文字

alt：图像显示不出来时用该文字替换

border:图片边框粗细

相对路径：

下一级路径：/ 

 超链接（a）标签相关属性：

href：指定链接目标的url地址

target：指定链接页面的打开方式，_self：默认打开方式_blank：打开新的窗口

内部链接：XXX

空链接：XXX

下载链接：XXX,如果href里面地址是一个文件或者压缩包，会下载这个文件

锚点链接： 快速定位到链接里的某个位置，#name“>XXX，将目标标签加上属性id=”name“，例如：

id="name">XXX

,此时点击链接就会跳转到h1标签指代的位置

特殊字符(必记)：

空格： 

大于：>,great than

小于：< ,less than

 表格标签：

 

        

            

                
姓名

                
姓名

                
姓名

                
姓名

            
        
        

            

                

                    单元格内的文字
                
            
        
    

cellpadding：规定单元边沿（左边沿）与其内容之间的空白，默认1像素

cellspacing：规定单元格之间的空白，默认2像素

border：规定表格是否有边框

align：相对周围元素的对齐方式

width：规定表格宽度

合并单元格：

跨行单元格以最上方单元格为目标单元格

跨列单元格以最左侧单元格为目标单元格

以下为样例：

     

        

            

                
姓名

                
姓名

            
        
        

            

                
                

                    单元格
                
                

                    单元格
                
                

                    单元格
                
            
            

                

                    单元格
                
                

                    单元格
                
            
        
    

注意：给目标单元格加上属性之后记得删除多余的单元格，上图删去了第三列第一个单元格和第三行第一个单元格

 列表标签：

有序： 

自定义：

 表单标签：

表单域： 

注意：单选框若要实现多选一的效果，必须将同一类的选项附上相同的名字，这样才能实现多选一的效果。

value值为文本框默认带的文字

单选按钮和多选按钮：共有属性：checked，默认选中

label标签：用于绑定一个表单元素，当点击label标签内的文字时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素用来增加用户体验

例如：填写用户名信息时，选择用户名即文字就可聚焦该文本框

    用户名
    

注意：label属性里的for和input的id属性要相对应

下拉表单：

    
        XXX
        XXX
        XX
        XXX
        XXX
    

select与option搭配

文本域：

tip：若要写出两列整齐的结构，例如，用户填写信息时，姓名，文本框可使用表格进行规划姓名，文本框即两个td，整体一行为tr，以此类推。

推荐查阅信息的网站:

W3C:  http://www.w3school.com.cn/

 id选择器:

 #div {
            color: red;
        }

        CSDN博客
    

 id选择器只能调用一次！用过一次之后其他相同id名字不可再次使用

通配符选择器：将所有标签都改样式。

        * {
            color: red;
        }

字体样式：

        .em{
            font-style: italic;
        }

字体复合样式：font:font-style font-weight font-size/line-height font-family;顺序不可颠倒

text-align：center；文本水平居中

text-decoration:line-through;删除线，underline,下划线，overline,上划线 ，none，取消

text-indent：2em；文本缩进（第一行）

内联样式：在html文件中的style中的样式

行内样式：在标签属性中写的样式

外部样式表：专门写一个css文件写样式

•  文字内的元素不能使用块级元素：p标签里不可存放块级元素，h1-h6里均不能存放块级元素
• 常见行内块元素：img，表单元素，单元格td等

• background-color：transparent；设置背景透明效果 
• background-position：x，y；如果只写一个，另一个默认居中
• 混合单位：background-position：20px center；x为20px，y为center（有顺序关系）
• background-attachment：fixed/scroll;背景图像固定/背景图像随内容滚动
• 背景复合写法：background:背景颜色 背景图片地址 背景平铺（重复） 背景图像滚动 背景图片位置; 例： background:transparent url(image.jpg) repeat-x fixed top;

行高为1.5，即为行高为当前文字的1.5倍 

选择器的权重：

选择器	选择器权重
继承或*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=”“	1，0，0，0
！important 重要的	=无穷大

注意： 继承的权重为0

    
    

        
猜猜我是什么颜色
    

由以上代码可知，尽管ID选择器的权重比元素选择器的权重大，但p元素仍然使用了元素选择器的样式，因为ID选择器为父元素的样式，而p元素对于父元素的样式为继承，权重为0，故元素选择器的样式占上方。

• 表格细线边框 ：border-collapse:collapse;  合并相邻的边框
• padding:

值的个数	表达意思
padding:5px	上下左右全为5
padding:5px 10px	上下5，左右10
padding:5px 10px 20px	上5  左右10 下20
padding:5px 10px 20px 30px	上右下左，顺时针依次对应

注：若一个盒模型未设定宽度或高度，则设置padding之后不会撑大盒子。

• 块级元素水平居中：设定宽度，margin:0 auto;
• 行内元素或者行内块元素水平居中给父元素添加text-align:center;

外边距合并问题(当父元素和子元素均设置margin-top时，子元素与父元素的外边距合并问题，最终表现为父元素和子元素离上方元素距离为二者margin-top的最大值)解决方案 ：

• 为父元素加上边框（将边框设置为透明）
• 给父元素设置内边距
• 为父元素添加overflow:hidden

清除内外边距：

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先清除·网页元素的内外边距。 

        * {
            padding: 0;
            margin: 0;
        }

行内元素设置内外边距时，只可设置左右内外边距，设置上下无效，除非将其改为块级元素或行内块元素。

 ps相关操作快捷键：

• ctrl+r：打开标尺，或者视图->标尺，右击标尺，改变单位为像素
• ctrl+加号：放大试图，缩小同理
• 按住空格键，鼠标变成小手，拖动图片至任意位置
• 用选区拖动可以直接测量大小
• ctrl+d：取消选区，也可直接在旁边空白处点击一下

去掉无序列表前面的圆点：在li样式里加入list-style:none;

border-radius:

若想制作成如上样式，只需将border-radius设置为矩形高度的一半即可。

•  border-radius也可写成四个值，从左上开始顺时针对应圆的半径
• 若为两个值，则分别对应两组对角线，第一个值为左上角对应的对角线，以此类推

盒子阴影 ：

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离（影子的虚实）
spread	可选，阴影的尺寸（大小）
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

• 阴影默认为外部阴影，但不可写出来，写出来之后阴影就无效，但如果要改为内部阴影，内部阴影（inset）就必须得写出来
• 盒子阴影不占用空间，不会影响其他元素的排列

box-shadow: 10px 10px 10px rgba(0,0,0,.3);

 文字阴影：

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

格式和盒子阴影基本相同 

• 浮动元素具有行内块的特性，如果行内元素有了浮动，则不需要转换为行内块或者块级元素，就能直接设置宽高
• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但若是添加浮动元素，他的大小根据内容决定
• 浮动盒子会避开标准流盒子，标准流盒子不会避开浮动盒子

浮动元素不再占有原文档流的位置，导致外部元素无法感知浮动盒子而造成高度坍塌

解决高度坍塌的方法：

1.在最后一个浮动元素后面加上一个

，新增的盒子必须是块级元素

 2.给父元素加上overflow属性，将其属性设置为hidden或auto或scroll

3.给父元素添加伪元素使其撑开父元素

        .clearfix:after{
            content: "";
            display: block;
            height:0;
            clear: both;
            visibility: hidden;
        }

给父元素加上类名clearfix之后会产生同样效果

4.给父元素添加双伪元素，还是要给父元素添加类名clearfix

        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }