• 技术文章 >web前端 >html教程

    html+css知识整理_html/css_WEB-ITnose

    2016-06-24 11:45:15原创408
    1.学网页最好的方法:学习别人的网页。

    2.文档结构

    (超文本标记语言)

    3. 字体标记,大小为7,颜色为红色

    4. 加粗

    加强语气

    斜体 加强语气

    上标

    下标


    换行


    水平线、占屏幕的80%宽,大小,实体型

    下划线

    删除线

    段落

    标题

    5.meta标记

    (1)放在head标记里面

    (2) 设置网页关键字

    (3) 设置描述

    (4) 设置作者

    (5) 设置字符集 ,content-type表示中文,

    (6) 设置页面定时跳转

    6.

    7.不懂看w3cschool帮助手册

    8.

    9.某些html标记有一些默认值

    10.用适合的html标记去描述我们的网页

    11.80%与80px的区别

    12.记住制作网页的过程

    13.

    整段缩进2个字符 ,定义一个块引用,及转载的地址

    14.

     预格式化

    15. 空格

    © 版权号

    ® 商标号

    & &

    < <

    > >

    " "

    16.无序列表

  • type的值:disc,circle,square

    有序列表

    1. type的值:A a 1

      自定义列表

      17.gif(图形交换格式):256种颜色,支撑透明色,动画

      jpeg(联合图像专家组):1670种颜色

      png(网络可移植格式):1670种颜色,支撑透明色

      18.文本

      19.绝对路径 相对路径 src="//m.sbmmt.com/m/article/01.png" src="pic/01.png" src="../01.png"

      20.html的作用------控制页面显示

      21.表格

      表题

      1 2

      22.

      23.

      24.

      锚链接

      跳转到xx.html页面的锚点#name

      25.

      26.web标准组成:结构xhtml、表现css(层叠样式表)、行为javascript 好处:表现和内容分离

      27.

      29.想用一个特殊的字体,可以考虑用图片表示;设计的时候尽量用通用的字体

      30.长度单位:em px

      31.网页方式 (1)内嵌式:

      (2)嵌入式:

      (3)外部链接式:

      (4)导入式:

      32. 1.标签选择符: h1

      2.类选择符: .

      3.id选择符: #

      4.通配符:*

      5.包含选择符:body p(常用)

      6.选择符分组:p,div,body

      7.标签指定式选择符:p#class

      8.组合选择符:h1.p1,#conternt h1,h2

      33.css样式特点 1.继承:子元素会继承父元素的某些样式

      2.层叠:子元素的某些样式会覆盖父元素的样式

      3.后面的样式,会覆盖前面的样式

      34.css样式的优先权 1.内嵌--嵌入--外部链接--导入 2. !important 提权

      35.文本 1.text-indent:2em

      2.text-align:left center right

      3.white-space(对象中空白处理):normal pre nowrap

      4.vertical-align(元素的垂直对齐方式):sup sub top text-bottom

      5.color:#FFFFFF,red

      6.font-size:12px

      7.font-family:Arial,'宋体'

      8.line-height:1.5em

      9.font-weight:bold,normal(正常)

      10.font-style:normal italic(斜体)

      11.text-decoration:none underline overline line-through(删除线)

      12.letter-spacing(字符间距):normal length

      13.word-spacing(单词间距):normal length

      36.伪类 1. :link 未访问

      2. :visited 已经访问

      3. :hover 鼠标移动到链接上

      4. :active 鼠标按下链接 a.a1:link{}

      37.命名方法 1.驼峰:navMenuRedButton

      2.帕斯卡:NavMenuRedButton

      3.匈牙利:red_navMenuButton

      38.盒子模型 content 内容

      padding 内填充(不要轻易为外层添加这个属性,因为会改变外层的宽度)

      border 边框

      margin 外填充(不要轻易为外层添加这个属性,因为会改变外层的宽度) 公式:=content+(padding*2)+(border*2)+(margin*2)

      39. margin:20px :表示上右下左

      margin:20px 20px : 表示上下、右左

      margin:20px 20px 20px : 表示上、右左、下

      margin:20px 20px 20px 20px

      margin:0 auto; 表示盒子居中

      40. border:1px solid red :表示上右下左边框像素为1,实线,红色

      41.将我们用到的元素,默认内外边距归零

      42.padding:10px :表示上右下左

      43.列表 list-style:none outside none; :表示列表样式为无

      44.元素的分类 1.块状元素:div,p, body,h1~h6 可以作为容器且独占一行

      2.内联元素:a,span

      3.可以通过:内联元素:{display:block;} 把内联变成块状,这样子设置内联元素的高宽就起作用

      45.背景 background:颜色 图片 平铺方式 固定方式 位置

      background-color:gold; background-image:url(); background-repeat:no-repeat; background-position:center center 水平垂直居中 background-attachment:fixed 固定图片 (scroll滚动) IE6只有html与body两个元素,支撑这 个功能

      46.css精灵 思路1:准备两张大小相同,内容不同的图片,一张正常,一张通过伪类进行启用

      思路2:准备一张合成图片,通过background-position:进行定位。

      47.布局 1.默认文件流

      2.浮动 :float:left; 浮动原理:从文件流中分离出来,原先占据的位置就被后面的对象填上。 如果想多个快同一列,把浮动方向一致就可以了

      3.绝对定位 : position:absolute 原理:从文件流中分离出来,相对的对象如果没有指定就是body,用position:relative在对象上 指定 相对定位 : position:relative top="" left="" 原理:不从文件流中分离出来,相对的对象是自己本身

      4.清除浮动:clear:both; 消除浮动对子类的影响 消除浮动对父类的影响 1.增加一个空子类,类名为.class{clear:both}; 2.overflow:hidden 子类不能有定位布局 3..clearFix:after{ clear:both; display:block; visibility:hidden; height:o; line-height:0; centent:""; } .clearFix{zoom:1;} 48.溢出 overflov:visible(不剪切也不添加滚动条) hidden(不显示超过对象尺寸的内容) scroll(显示滚动条) auto(剪切或者滚动条)

      声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

      前端(VUE)零基础到就业课程:点击学习

      清晰的学习路线+老师随时辅导答疑

      自己动手写 PHP MVC 框架:点击学习

      快速了解MVC架构、了解框架底层运行原理

      专题推荐:html+css知识整理
      上一篇:纯css实现Magicline Navigation(下划线动画导航菜单)_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

      相关文章推荐

      • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ajax基本介绍• 求两个纯Html之间的传值示例_html/css_WEB-ITnose• 求解博客css设置_html/css_WEB-ITnose• float浮动• 使用jQuery实现地址联动
      1/1

      PHP中文网