HTMLl和CSS基本知识点

1.HTTP:超文本传输协议
  HTTP请求(HTTP request)部分:

    •     请求行【HTTP方式(get或者post);请求url;HTTP版本】
    •     请求头
    •       空行
    •     消息体

  HTTP响应(HTTP response)部分:   

    •     状态行【HTTP版本;响应码;响应描述】
    •     响应头
    •     空行
    •     消息体

2.常见特殊符号

  • 空格    
  • 小于<  <
  • 大于>    >
  • 版权号© ©
  • 已注册® ®
  • and &    &
  • 长破折号 —

3.常见块级元素和内嵌元素

  块级元素:块级元素定义的文本会换行;
    div,列表系列(ol,ul,dl),fieldset,form,p,h1-h6,hr,table
  内嵌元素:内嵌元素定义的文本不会换行,
    span,a,img,lable,input系列,iframe,object

4.css选择器及权重问题:
          1   1   1   1
  元素                 1       列如:p{}
  类,属性及伪类                     1                         列如:.class{};input[type=text]{};
  id                             1                                列如:#id{};
  内嵌                1                                          列如:<p style="width:30px">
  !important 其权重最高,没法比较

5.css 继承
  可以继承:
      所有元素可以继承的:visibility和cursor;
      列表元素可继承的:list-style、list-style-type、list-style-position、list-style-image;
      内联元素可继承的:color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration等等;
      其他可继承属性:text-align,text-indent;
  不可继承的:display、margin、border、padding、background、height、widthoverflow、position、left、right、top、bottom、z-index、float、clear等等;

6.css盒模型:

                                

  margin:盒模型的外边距,书写为margin:10px 10px 10px 10px ;分别代表了上、右、下、左的外边距属性,也可以写为margin:10px ;

    还可以写为:margin-left:10px ;表示左边的外边距; margin:10px 22px; 前一个属性表示上下的外边距,后一个属性表示左右的外边距;

    注意:在写外边距的时候,如果有两个靠在一起的,它们的左右外边距是相加的,但是上下的外边距会只取最大的外边距;不会将两个外边距的属性相加;

    并且margin 还可以有负边距 ;

  border: 边框 , 书写方式同margin 类似的 只是border可以设置颜色和样式 ,书写:

    border: 5px solid;    border: 5px dotted red;   border:5px dashed;    border:5px double;    border: 5px ridge;  等等样式

                                            

   padding:盒模型内边距,书写方式与margin类似,只是在写padding 的时候会影响内部文字的排版,并且padding有负边距的写法;

      列如:

    没padding的时候:                            padding:10px;

                                    

    注意: 书写盒模型的padding的时候,给元素添加了padding 会使得盒模型的整体都添加与padding同等的尺寸;

7.浮动:float

  float的值可以为: none / left/right  none为默认值  left 表示将元素往左浮动; right 表示将元素往右浮动 ;

  注意:在使用浮动的时候,因为浮动的元素会脱离正常文本的文档流,即该元素已经不再正常的文档中了,如果后面有内容就会填充改元素原有的位置;所以为了让后面的元素    不会占有该元素的位置,就需要的浮动的元素进行清除浮动处理,用clear 清除浮动影响;

     元素浮动时,该元素将会被视作块级;

     浮动的元素如果没有设置宽度,那么该元素将会被折叠为最小的宽度;

     浮动的元素只会在父级元素中移动,不会穿过其父级元素的padding;

     浮动的元素不会产生重叠;

8.定位:position 

  position 的值可以为: static (静态定位)relative(相对定位) absolute(绝对定位) fixed(固定定位)

  在定位当中除了static (静态定位)、relative(相对定位) 定位的时候不会脱离文档流,其它的定位都会脱离文档流;

  注意:absolute(绝对定位)是绝对于父级的定位,因此使用  absolute(绝对定位)定位的时候一定要注意父级是否定位,如果父级没有定位就会一层一层往上找,一直找到定   位的,如果所有的父级都没有定位,该元素的定位就会绝对于body定位;

      fixed(固定定位)的定位如论在哪层都会绝对于body定位,因此在使用时注意;

9.溢出处理:overflow

  overflow  的值为visible(该值为默认的) /hidden(隐藏)/scroll (超出的就加滚动条)/auto (必要时才裁剪内容并添加滚动条)

  其中overflow 还可以只为x 或是y 方向的溢出做裁剪或是添加滚动条;

10.可见性的设置:visibility 和 display

  visibility  的值为 visible(可见)/ hidden (隐藏)/ inherit(继承父级显示属性)

     注意:visibility 定义属性时同样会保留原来的显示空间;

  display  的值为 none(表示隐藏,同时不会保留原来占有的位置)/ block(表示显示,同时将元素转换为块级)/inline(同样可以为显示,只是将元素转化  为内嵌级)/inline-block(显现,同时将元素转化为可具有block和inline的属性的元素)

  

时间: 2025-01-22 20:11:06

HTMLl和CSS基本知识点的相关文章

HTML和CSS的知识点

HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!----> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body>. HTML的三个常见头部标

css入门知识点整理

css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器.顾名思义,选择器就是用来"选择"HTML中的元素的.通过定义选择器可以选出HTML文档中的某些元素,然后把它们的样式变成声明中的.css的格式长这样: selector {declaration1; declaration2; ... declarationN } 这里有一个最基本的cs

关于CSS重要知识点(1)

1. 盒子模型 CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型. 盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(margin) 上图展示了整个盒子模型的内容,怎么样?简单吧.如果你认为简单,那就大错特错了!! 盒子模型里边有一个坑,就是取元素的height和width时,可以多种方式来指定这个高和宽属性.换句话说在某些情况下,一个元素的height和width是不一样的.那么究竟是哪些情况下呢?答案就是box-sizin

CSS基本知识点(01)

0.未完,还有一部分未写 1.CSS背景 属性          描述 background     简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color    设置元素的背景颜色. background-image   把图像设置为背景. background-position    设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. 2.

js,css小知识点记录

JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值. //css :#id .下属class(可以是直接或间接下属classs) #newfncbtnpanel .am-condition { margin-top: 10px; margin-left: 6px; margin-bottom: 5px; } show()\hide()  是jquery方法,即d

css常用知识点

1.css的简介  层叠样式表 样式表:有很多的属性和属性值 层叠:一层一层的.优先级 第一个:把样式和html分开显示 第二个:html的属性很少,css里面样式很强大 2.css和html结合方式 有四种结合方式 第一种结合方式:在每个html标签里面都有一个属性 style,在style属性里面写css代码  代码  <div style="color:black;">aaaaccccbbbb</div> 格式: style="属性名称1:属性值

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

HTML5入门(CSS样式-------------------(CSS基础知识点----------------------------))

CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg:                 <style>                               div{                                      color: pink;                                      font-size: 30px;                                      width: 500px;      

CSS基础知识点(一)

CSS(Cascading Style Sheets)全称为:层叠样式表. 1.HTML元素类型 (1) 内联元素(inline):可以理解为“文本模式”,即从左到右顺序显示,不单独换行.常用的内联元素有:a, img, input, select, lable, span, textarea 等,和一些文本标记标签,如:small, big, strong, em, i, b(加粗), sub(下标), sup(上标), u(下划线)等. (2) 块级元素(block):单独一行,没有特殊定位