• HTML CSS JS 的最先的认识


    • HTML 定义了网页的内容

    • CSS 描述了网页的布局

    • JavaScript 网页的行为
      ##什么是HTML?
      HTML是用来描述网页的一种语言。

    • HTML指的是超文本标记语言: HyperText Markup Language

    • HTML不是一种编程语言,而是一种标记语言

    • 标记语言是一套标记标签 (markup tag)

    • HTML使用标记标签来描述网页

    • HTML文档包含了HTML 标签及文本内容

    • HTML文档也叫做 web 页面

    css层叠样式表称为级联样式表
    在html引用方式为外联、内联、嵌入。
    1.外联:在html文档中使用<link>元素。<!--没有实意-->
    2.内联:用<style>元素使用。
    3.嵌入:在元素开始行内<style
    >后面使用。
    快速格式化快捷键:shift+alt+f

    ##文本元素:

    • h1~h6 1级标题~6级标题

    • p:段落

    • strong:粗体 重要文本

    • i:斜体 应区别对待的文本

    • blockquote:整段的引用

    • q:小段本文的引用

    • 超链接 实例<*a herf=xxxxxxxx target=—blank>XXXXX</a>(target=—blank为开启一个新网页 默认为自身网页打开)链接./代表从当前文件出发(可以省略) ../代表从上个文件夹出发(不可省略)

    ##实体字符
    在html里无论多少个空格都只会表示一个空格
    示例:<p>s       s</p>

    ##元素属性:

    • width;width:500px;设置元素宽度;

    • height;height:100px;设置元素高度;

    • color;color:red;设置元素内容颜色;

    • background-color;background:red;设置元素北京颜色;

    • font-size;font-size:1px;设置文字大小;

    • font-weight;font-weight:1px;设置文字粗细;

    • text-align;text-align:center;设置文字排列方式;

    • border;border:1px solid;设置元素边框样式;

    ##选择器
    | Tables        | Are          | Cool  |

    | ------------- |:-------------:| -----:|
    | 通配*    |选中当前文档所有元素 | *{...} |

    | 元素     | 选中当前文档所有该元素| div{...} |

    |  id  | 选中属性值匹配的元素,具有唯一性 | #login{...} |

    | class    |选中当前文档所有该类元素 | .center{....} |

    | 子级    |选中当前文档符合条件的子级元素 | header>nar{...} |

    | 后代    |选中当前文档符合条件的所有后代 | ul空格li{...}|

    | child    |选中当前文档符合条件的子级元素 | li:nth child(-n+x){...} |(n为0~x)

    | 并集    |选中当前文档匹配上的多个元素 | login,center,xxx{....} |

    ##CSS(复用 声明冲突 继承):

    1. 复用:即重复使用,避免了重复书写,提高开发效率;

    2. 声明冲突:属性相同,值不同:比较优先级(优先级高胜)>比较特殊性(特殊性高胜)>比较原次序(原次序后胜) 倘若属性值后面有!important则说明是一条重要说明;示例: color:red !important

    3. 子级自动拥有父级某些CSS样式;文本集的样式具有继承性。

    ##盒模型
    盒模型是css基石之一,它规定一个元素在页面上如何显示,在某种程度上.............
    ###块级元素:占据所有可用宽度,以换行开始,通常用于较大的内容块,比如标题或结构化元素
    ###行内元素:只占据内容所需宽度,在同一行内一个接一个摆放,通常用于较小的内容块,如被选择为粗体或斜体。
    不同元素产生的盒子类型也就不同,display属性决定了盒子类型。

    1. display:none 将元素隐藏并且不保留其物理空间;

    2. display:inline 指定元素为行内元素;

    3. display:block 指定元素为块级元素;

    4. display:inline-block 指定元素为行内块元素;

    ####盒模型取值:paddin margin:

    • 10px 上 右 下 左;

    • 10px,20px 上下 左右;

    • 10px,20px,30px 上 左右 下;

    • 10px,20px,30px,40px 上 右 下 左;

    • 单独指定某一方向:margin-top/right/bottom/left;

    • padding是边框和内容间可选距离。

    ##视觉格式化
    视觉格式化模型规定了三种定位系统

    • 常规流(normal flow):在没有css的干预下,块级元素独占一行,宽高可设;行内元素,单排显示,宽高自动。

    • 浮动(float):有两个值,一个为left,一个为right;float:left :左浮动,浮动定位;float:right :右浮动,浮动定位

    • 绝对定位(absolute positioned)

    ####任何一个元素都必须属于其中某一种定位体系。不同的设定体系中,尺寸和位置都会有一些差异。

    浮动盒子位置:

    • 右浮动盒子向上向右排列

    • 左浮动盒子向上向左排列

    • 浮动盒子的顶边不得高于上一个盒子的顶边

    • 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够空间放下盒子。

     

    ##overflow

    • visible  默认值。内容不会被修剪,会呈现在元素框之外。

    • hidden  内容会被修剪,并且其余内容是不可见的。

    • scroll  内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    • auto  如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    • inherit  规定应该从父元素继承 overflow 属性的值。

    #美化:

    ##美化文本

    • font-size 字体大小(不要取奇数)

    • font-weight 字体粗细

    • font-style 字体样式(加粗 倾斜之类)

    • letter-spacing 文字间距

    • word-spacing 词间距

    • text-indent 第一个文字缩进

    • text-decoration 线条:none 没有线条 ;overline 文字顶部划线 ;underline 文字底部划线 ;line through 文字中部划线

    • ::first-letter 文本第一个字

    • ::frist-line 文本第一行
      ###字体类型:

    1. 非衬线字体——网页用的较多

    2. 衬线字体——印刷用的较多

    3. font-family 可设置多个值且用逗号隔开,浏览器会依次读取设置的值,若一个值失效,则读取下一个,所以为避免失效,最后一个值为sans-serif或者serif。

    4. 由于font-family为可继承属性,并且一个网页通常都是统一的。因此,通常对body元素使用。

    5. font-face加载web字体

    ##美化边框
    border-radius:宽高一致,值为宽的一半则为圆形。

  • 相关阅读:
    项目游戏开发日记 No.0x000002
    项目游戏开发日记 No.0x000001
    项目游戏开发日记 No.0x00000
    需求获取常见的方法是进行客户访谈,结合你的实践谈谈会遇到什么问题,你是怎么解决的?
    当下大部分互联网创业公司为什么都愿意采用增量模型来做开发?
    迷茫踌躇的2018,整装待发的2019
    阿里云轻量应用服务器 搭建配置详解
    JS常用数组方法及实例
    使用CSS隐藏HTML元素的四种常用方法
    标签种类及CSS引入方法
  • 原文地址:https://www.cnblogs.com/xiaoNYH/p/13023653.html
Copyright © 2020-2023  润新知