精华内容
下载资源
问答
  • 2013-07-04 10:44:34

    1、p标签表示另起一行加一空行,br标签没有空行的换行

    2、pre标签:原文显示

    3、font标签:size的取值1~7,+1,-1,-2; face设置字体,例如face="楷体_GB2312"

    4、em标签用于强调的文本,斜体,相当于i标签

    5、strong用于特别强调的文本,粗体,相当于b

    6、cite也用于显示斜体,标示引用。

    7、code显示程序代码

    8、html中的标签和对应的参数不区分大小写

    9、特殊字符:&lt;对应字符<

                              &gt;对应字符>

                              &quot;对应字符"

                              &agrave;对应字符A

    10、<base>

        

    <base> 标签为页面上的所有链接规定默认地址或默认目标。

    通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

     如果加上http的话base的href就无效了,但是target还是有效的

    <head>
    <base href="http://www.w3school.com.cn/i/" />
    <base target="_blank" />
    </head>
    
    <body>
    <img src="eg_smile.gif" />
    <a href="http://www.w3school.com.cn">W3School</a>
    </body>

     

    更多相关内容
  • 自考网页设计与制作课堂笔记(已排版,有重复)
  • 网页设计笔记,希望对初学者有用!! 包含了基本的软件操作如firework ,dreamwave,等内容
  • 记录个人的学习内容,学习路线,有不对的地方希望得到指点。 第一章 HTML和css的网页概述 第二章 从零开始构建HTML网页 第三章 使用CSS

    记录个人的学习内容,学习路线,有不对的地方希望得到指点。

    因为是学习 记忆的内容,只是针对我个人使用,所以写的会潦草一些。需要补充或者写错的内容,一定要和我说!!!!有评论必回!!!!

    目录

    目录

    第一章 HTML和css的网页概述

    标题标签

    段落标签

    水平线标签

    换行标签 (强制换行的作用)

     

    第二章 从零开始构建HTML网页

    页面表头部分内容的意思

    文本样式标签

    文本格式化标签

    2.3图文混排

    绝对路径和相对路径

    特殊字符标签

    第三章 使用CSS技术美化网页

    CSS样式规则

    引入CSS样式表的三个方法

    CSS基础选择器

    CSS字体样式属性

    font-size

    font-family

    font-weight

    font-style

    font综合设置字体样式

    @font-face规则

     

    2.CSS文本外观属性

    color:

    letter-spacing

    word-spacing:单词间距

    line-height行间距

    text-transform文本转换

    text-decoration文本装饰

    text-align水平对齐方式

    text-indent首行缩进

    white-space空白符处理

    text-shadow阴影效果

    text-overflow标示对象溢出文本

    word-wrap用于实现长单词和URL地址内部进行换行

    CSS复合选择器

    CSS的层叠性和继承性

    CSS的高级特性

    CSS的优先级

    第四章 CSS盒子模型

    认识盒子模型

    内边距

    外边距

    块级元素居中:

    通常先清除元素的默认内外边距

    背景 背景颜色 背景图像的控制:平铺固定等

    background-color背景颜色属性

    background-image背景图像属性

    background-repeal图片平铺属性

    background-position:图像位置属性                                                                             

    background-attachment图像固定属性

    背景属性的综合运用:

     

    4.2盒子模型相关的属性

    块级元素和行内元素

     

    元素类型的转换

    外边距合并

    第五章 列表与超链接

    无序列表

    无序列表的type属性值

    有序列表

    无序列表的相关属性

    定义列表

    列表嵌套

    列表样式

    list-style-type控制无序列表和有序列表的项目符号

    list-style-image 设置项目图像

    list-style-position列表项目符号的位置

    综合属性

    5.3超链接标记

    5.4链接伪类控制超链接

    超链接标记的伪类

    第六章 HTML表单

    表格标记

    table标记属性

    标记属性

    标记属性

    为了更好的区分网页的头部,主体页脚

    CSS控制表格样式

    表单

    表单控件

    创建表单

    表单控件

    input控件

    textarea控件

    select控件

    CSS控制表单样式

    第七章 浮动与定位

    元素的浮动

    float属性值

    overflow属性

    元素的定位

    定位模式

    边偏移

    第八章 布局与兼容

    进阶拓展之CSS高级技巧

    实战开发(上)

    实战开发(下)




    第一章 HTML和css的网页概述

    标题标签

    h1-h6

    <hn align="对齐方式"> 标题文本</hn>

    对齐方式有:

    left

    center

    right

    段落标签

    <p align="">段落文本</p>

     

    水平线标签

    <hr 属性="属性值"></hr>

    属性有:align:left right center

    size水平线的粗细:npx

    color:#RGB

    width:可以是确定的像素值,也可以是浏览器窗口的百分比

     

    换行标签 (强制换行的作用)

    </br>

     

    第二章 从零开始构建HTML网页

    页面表头部分内容的意思

    <title></title>意思是头部标签,就是网页的名字存放在这里

    <meta/>用于定义页面的元信息,但元信息不会显示在页面中,本身不包含任何内容,仅仅表示网页的相关信息。

    <meta name="名称" content="值"/>可为搜索引擎提供信息,name用于提供搜索内容的名称 content提供对应的搜索内容的值

    <meta name="keywords" content="千图网,免费素材下载">

    <meta name="description content=""_">

    <meta name="author" content=" ">

    @@@@不懂p29页

    <meta hettp-equiv="名称" content="值">

    文本样式标签

    <font 属性="属性值">文本内容</font>

    属性:

    face字体:微软雅黑 宋体 黑体

    size文字大小:1-7取整数值

    color颜色

     

    文本格式化标签

    <b></b>和<strong></strong>粗体

    <u></u>和<ins></ins>下划线

    <i></i>和<em></em>斜体

    <s></s>和<del></del>删除线

     

    2.3图文混排

    图像标签<img/>

    属性:

    src路径

    alt 文本 图像不能显示时的替换文本

    title 文本 鼠标指针悬停时显示的内容

    width 像素值 图像的宽度 如果width和height同时设置,则会扭曲原图的大小;如果只设置一个值,则另一个属性会依据前一个设置的属性自动调整

    height 像素值 图像的高度

    border 数字 图像边框的宽度  通常情况下是没有边框的,通过border可以设置边框的宽度

    vspace 像素值 图像顶部和底部的留白

    hspace 像素值 设置图像左侧和右侧的留白

    aligh:"对齐方式"

    left

    right

    top图像的顶部和文本第一行对齐

    middle图像的中间和文本第一行对齐

    bottom图像的底部和文本第一行对齐

    绝对路径和相对路径

    绝对路径一般是指带有盘符的路径或者有完整的网络地址

    相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。

    相对路径举例:

    1.图像文件和html文件位于同一文件夹:<img src="logo.gif"/>

    2.图像文件位于html文件的下一文件夹:<img scr="img/img01/logo.gif"/>

    3.图像文件位于html文件的上一级文件夹,在文件名之前加../:<img scr="../logo.gif"/>,如果是上两级,则加../../

     

    特殊字符标签

    常用的: 空格符  

    其他的看课本p37

     

    第三章 使用CSS技术美化网页

    CSS样式规则

    h1{color:green; font-size:14px;}

    1.属性和属性值之间用冒号链接

    2.键值对之间用分号间隔

    3.属性的属性值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号

    如:p{font-family:"Time New Roman"}

    4.注释的格式:/*...*/

    5.空格在CSS中是不被解析的,因此可以利用空格进行排版

     

    引入CSS样式表的三个方法

    行内式

    通常CSS是写在<head>头部标签中下,行内式却是写在<html>根标签中

    <h1 style="font-size:20px; color:blue;">

    内嵌式

    就是将CSS代码集中写在html文档的<html>头部标签中,并用style标签定义类型

    <head>

    <style type:"text/css">

    <h1 style="font-size:20px; color:blue;">

    </style>

    </head>

    外链式

    是将所有的样式放在一个或多个以".css"为扩展名的外部样式表文件中,通过<link/>标签将外部样式表文件链接到html文档中

    <head>

    <link href="CSS文件路径" type="text/css" rel="stylesheet">

    </head>

    href:URL可以是绝对路径,可以是相对路径

    type:文档类型

    rel:定义当前文档和被链接文档之间的关系,这里需要指定为"stylesheet"表示被链接的文档是一个样式表文件

    外链式成功后,在DW的标签栏会自动出现 style.css 表示被成功链入

     

    CSS基础选择器

    1.标签选择器

    标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    2.类选择器

    类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    类选择器最大的优势是可以为元素对象定义单独的样式。

    3.id选择器

    id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

    #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    元素id名是唯一的,只能对应于文档中某一个具体的元素

    4.通配符选择器

    通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

    *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    在实际的网页开发中不建议使用通配符选择器,因为会对所有的html标签都生效

     

     

    CSS字体样式属性

    font-size

    字号大小 最常用单位px像素 其他可用单位P51

    font-family

    字体

     

    font-weight

    字体粗细

    属性:normal默认值

    bold粗体

    bolder更粗

    lighter更细

    100~900定义由细到粗字符,其中400等于normal

     

    font-style

    字体风格

    属性:normal标准

    italic斜体

    oblique倾斜

    日常使用italic

     

    font综合设置字体样式

    选择器{font:font-familt font-size font-style font-weight font-size/line-height(行高) font-family}

     

    @font-face规则

    用于定义除服务器以外喜欢的字体

    用法

    @font-face{

    font-family:字体名称;

    src:字体路径

    }

     

    2.CSS文本外观属性

    color:

    文本颜色

    取值方式:

    1.red green blue

    2.十六进制,如:#FF0000

    3.RGB代码 rgb(255,0,0)

    p{color:red}

     

    letter-spacing

    :字间距

    允许使用负值,默认是normal

    使用单位是像素

    h2{letter-spacing:-0.5px}

     

    word-spacing:单词间距

    允许使用负值,默认值是normal

     

    line-height行间距

    使用单位有 px像素 em相对值 %百分比

     

    text-transform文本转换

    属性:

    none不转换

    capitalize 首字母大写

    uppercase全部字符转化为大写

    lowercase全部字符转化为小写

     

    text-decoration文本装饰

    none

    underline下划线

    overline上划线

    line-through删除线

    并可以同时设置多个值

     

    text-align水平对齐方式

    left左对齐

    right右对齐

    center居中对齐

    h2{text-align:center;

    }

     

    @@[注意text-align只适用于块级元素,对行内元素无效,如果需要对图像设置对齐,则可以添加一个父biaoqian<p></p>]

     

    text-indent首行缩进

    可以设置不同的单位 px em %

     

    white-space空白符处理

    normal空格空行无效,满行后自动换行

    pre空格空行原样展示

    nowrap空格空行无效,强制文本不能换行,除非遇到<br/>内容超出边界则会自动增加滚动条

     

    text-shadow阴影效果

    选择器{text-shadow:h-shadow v-shadow blur color;}

    水平偏移距离 垂直偏移距离 模糊半径 阴影颜色

    p{text-shadow:10px 10px 10px red}

    也可以给文字增加多个阴影效果

    p{text-shadow:10px 10px 10px red,20px 20px 20px green}红色绿色阴影效果叠加

     

    text-overflow标示对象溢出文本

    属性:

    clip修剪溢出文本,不显示省略标签"..."

    ellipsis用...标签替代文本

    【需要注意的是:white-space:nowrap 样式不能换行; overflow:hidden隐藏溢出文本 text-overflow:ellipsis样式显示隐藏标签】

     

    word-wrap用于实现长单词和URL地址内部进行换行

    属性

    normal 浏览器默认处理

    break-word在“文本框”内部进行换行

     

     

    CSS复合选择器

    1.标签指定式选择器

    主要由两个选择器组成 一是标签选择器 二是class选择器或id选择器,中间不能有空格

    例如"h3.special","p#one"

    2.后代选择器

    后代选择器是指按照就近原则,且后代选择器不限于使用两个元素,如果需要加入更过的元素,只需在元素之间加上空格即可。

    3.并集选择器

    只不同的段 类型 id之间同时选择,只需要用英文逗号间隔开就行了

    例如:h3,.special,#one{color:red;}

     

    CSS的层叠性和继承性

    所谓层叠性是指多种CSS样式的叠加

    继承性是指子标记会继承父标记的某些样式,并不是所有的CSS属性都可以继承

    CSS的高级特性

    CSS的优先级

    两个或更多规则应用在同一元素上,就会出现优先级的问题

    1.继承样式的权重为0

    2.行内样式优先

    3.权重相同时,CSS遵循就近原则

    4.CSS定义了一个!important命令,该命令被赋予最大的优先级

    注意:复合选择器的权重为组成它的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和。

    第四章 CSS盒子模型

    认识盒子模型

    边框 边框样式 边框宽度 边框颜色单侧边框 边框的综合属性

    border-top

    border-right

    border-bottom

    border-left

     

    border-top-style 样式

    border-top-width 宽度

    border-top-color 颜色

     

    border-style 上 左右 下

    none

    solid

    dashed虚线

    dotted点线

    double 双实线

     

    border-color颜色

    #ccc

    rgb(r,g,b)

     

    border-width 宽度 px为单位

     

    内边距

    padding-top

    padding-right

    padding-bottom

    padding-left

    padding

     

    auto自动 默认值

    px 百分比%

     

    外边距

    margin-top

    margin-right

    margin-bottom

    margin-left

    margin

     

    块级元素居中:

    当块级元素应用宽度属性width

    并将左右的外边距都设置为auto,

    可使块级元素水平居中

    margin:0 auto 利用margin实现块元素水平居中

    margin:5px auto 利用margin实现块元素水平居中

    且上下拉开5像素边距

     

    为了更方便的控制网页中的元素,在制作网页时

    通常先清除元素的默认内外边距

    *{padding:0;margin:0}

     

    背景 背景颜色 背景图像的控制:平铺固定等

    background-color背景颜色属性

     

    background-image背景图像属性

    background-image:url(图片路径)

     

    background-repeal图片平铺属性

    repeat沿水平垂直两个方向平铺

    no-repeat不平铺,图像只位于左上角

    repeat-x只沿水平方向平铺

    repeat-y只沿竖直方向平铺

     

    background-position:图像位置属性                                                                             

    单位数值:设置图像左上角为元素中的坐标

    background-position:20px 20px

    预定义关键字:

    水平方向 left center right

    垂直方向 top center bottom

    百分比

    图像50% 50%

    中心点与元素50% 50%的中心点对齐

    0% 0%

    图像左上角与元素的左上角对齐

     

    background-attachment图像固定属性

    scroll:图像随着页面一起滚动(默认)

    图像固定在屏幕上,不随页面元素滚动

     

    背景属性的综合运用:

    background:背景色 url("图像") 平铺 定位 固定

     

    4.2盒子模型相关的属性

    网页是由多个盒子排列而成

    宽度和高度决定了盒子的大小

     

    块级元素和行内元素

    块元素

    块级元素比较霸道,是自己独占一行的

    它是有高度和宽度的

    例如:div p li ul ol dl table

    行内元素

    行内元素一行可以显示放置多个元素

    行内元素是没有高度和宽度的

    例如:strong em i b span font

     

     

    元素类型的转换

    display:[显示]

    inline此元素将显示为行内元素

    block块级元素

    inline-block行内块元素

    意思是在同一行内显示多个,有宽高度

    比如input img

    none该元素将被隐藏,不显示,也不占用页面

    空间

     

     

    外边距合并

    外边距合并只出现在垂直外边距

    出现情况:

    1.两个并列关系的上下盒子

    合并后这两个盒子会以外边距最大的为准

    2.父子级盒子外边距合并

    合并后这两个盒子会以外边距最大的为准

    若需要小盒子距离大盒子有个上外边距

    解决办法:给大盒子来个上外边框就可以

    @@@【无法理解】

     

    第五章 列表与超链接

    列表分为 无序列表,有序列表,定义列表

    无序列表

    顺序不分前后,

    <ul>

    <li></li>【用于描述具体的列表项】

    <li></li>

    </ul>

    用于定义无序列表。

    无序列表的type属性值

    disc(默认值)黑圈

    circle白圈

    square黑方块

     

    有序列表

    即为有排列顺序的列表

    <ol>

    <li></li>

    <li></li>

    </ol>

    无序列表的相关属性

    type属性值:1 a i/I

    stare:数字

    value:数字

     

    定义列表

    以百度百科为例,定义列表通常是图文混排

    <dt></dt>标记中插入图片

    <dd></dd>标记中放入对图片解释说明的文字

    <dl>

    <dt>名词1</dt>

    <dd></dd>

    <dd></dd>

    </dl>

    列表嵌套

    在列表项中可能包含若干子列表项

    列表样式

    list-style-type控制无序列表和有序列表的项目符号

    list-style-image 设置项目图像

    基本格式ul{list-style-image:url(图片路径);}

    list-style-position列表项目符号的位置

    综合属性

    5.3超链接标记

    <a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像</a>

    锚点连接

    <a href="#id名">连接文本</a>

    ‘’‘

    <h3 id="one">连接文本</h3>

    5.4链接伪类控制超链接

    伪类不是真正意义上的类,它的名称是由系统定义的,通常由标记名,类名或id名加“:”构成

    超链接标记的<a>伪类

    第六章 HTML表单

    表格标记

    创建table表格,离不开

    <table></table>定义一个表格

    <tr></tr>定义表格中的一行

    <td></td>定义表格中的单元格

    table标记属性

    在表格中创建一个table,相当于

    <tr>标记属性

    table标签只能控制行的高度,不能控制表格的宽度

    <td>标记属性

    注意:

    当对某一个<td>标记应用width属性设置宽度时,该列中所有的单元格均会以设置的宽度显示

    当对某一个<td>标记应用height属性设置宽度时,该列中所有的单元格均会以设置的高度显示

    <th>标记

    <th></th>标记用来设置表头,其文本默认加粗居中显示

     

    为了更好的区分网页的头部,主体页脚

    通常会设置<thead></thead><tfoot></tfoot><tbody></tbody>

    这个只是为了给网页的结构标记,方便更好理解网页内容

    但表格的实际效果并不会改变

     

    CSS控制表格样式

    表单

    类似注册页面,就是表单

    表单控件

    表单控件是表单的核心

    创建表单

    用<from></from>标记来创建表单

    method一般使用post,

    表单控件

    input控件

    textarea控件

    可以创建多行文本输入框

    select控件

    使用select控件定义下拉菜单

    CSS控制表单样式

    使用CSS可以轻松控制表单控件的样式,主要体现在控制表单控件的 字体,边框,背景 和 内边距 等。

    第七章 浮动与定位

    元素的浮动

    所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素指定的位置的过程。

    选择器{float:属性值;}

    float属性值

    注意!为了避免浮动对其他元素影响,需要清除浮动

     

    overflow属性

    元素的定位

    元素的定位包括定位模式和边偏移两部分。

    定位模式

    边偏移

    第八章 布局与兼容

    进阶拓展之CSS高级技巧

    实战开发(上)

    实战开发(下)

    展开全文
  • 网页游戏设计.zip

    2020-09-10 16:50:09
    网页游戏设计的复习资料,为个人复习笔记整理了很多,基本可以涵盖考试范围,可能存在疏漏,大家好好复习。
  • JavaScript最初的设计目标是改善网页的用户体现 浏览器的组成 1.shell部分 (shell)英文翻译成贝壳,是用户看得见的,例如菜单,工具栏 等 内核部分(用户看不到) a. 渲染引擎(包括语法规则和渲染) ”将网页代码...
  • 学习笔记网页基础知识入门 一、认识互联网 Internet1是一个全球性的计算机互联网络,中文名称为“国际互联网”或“因特网”。 它集现代通信技术和现代计算机技术于一体,是计算机之间进行国际信息交流和实现...

    网页基础知识入门


    一、认识互联网

    • Internet1是一个全球性的计算机互联网络,中文名称为“国际互联网”或“因特网”。
    • 它集现代通信技术和现代计算机技术于一体,是计算机之间进行国际信息交流和实现资源共享的良好手段。
    • Internet将各种各样的物理网络连接起来,构成一个整体,而不考虑这些网络的类型、规模、和地理位置的差异。
    • 互联网是全球最大的信息资源库,几乎包括了人类生活的方方面面的信息,在社会的各个方面为全人类提供便利。

    image_1bmosv0ng1o02ltq1isc75o1nog1g.png-21.2kB


    二、域名与空间

    域名

    • 域名2:是由一串用点分隔的字符组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置,地理上的域名,指代有行政自主权的一个地方区域)。
    • 域名是企业或事业单位在因特网上进行相互联络的网络地址。
    • 域名是企业和事业单位进入因特网必不可少的身份证明。

    空间

    • 网站是建立在网络服务器上的一组电脑文件,它需要占据一定的硬盘空间,也就是一个网站所需的网站空间。

    三、网页与网站

    网页

    • 网页3:是一种可以在互联网上传输,能被浏览器识别并翻译成页面并显示出来的文件。
    • 网页是网站的基本构成元素。

    网站

    • 网页也叫做站点,是提供各种信息和服务的基地。
    • 网站是有独立域名,独立存放空间的内容的集合,这些内容可能是网页,也可能是程序或其他文件。
    • 很多网页链接在一起就组成了一个网站。

    四、静态网站与动态网站

    静态网页

    网页又称HTML文件,在网站建设初期经常采用静态网页的形式。网站建设者把内容设计成静态网页,访问者只能被动地浏览网站建设者提供的网页内容。静态网页的特点如下。

    • 网页的内容不会发生变化,除非网页设计者修改了网页的内容。
    • 不能实现与浏览网页的用户之间的交互。

    image_1bmos1efc189f170m121q13utp3f13.png-13.5kB

    动态网页

    动态网页是指网页文件里包含了程序代码,通过后台数据库与Web服务器的信息交互,由后台数据库提供实时数据更新和数据查询服务。动态网页的特点如下。

    • 以数据库技术为基础,可以大大降低网站维护的工作量。
    • 可以实现如用户注册、用户登陆、搜索查询等更多的功能。
    • 动态网页并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。
    • 需要做一定的技术处理才能适应搜素引擎的要求。

    image_1bmorvvbmq7316bbiml13tr1u7fm.png-14.8kB


    五、网站的类型

    网站是多个网页的集合,目前还没有一个严谨的网站分类方式。按照主体性质划分,网站可以划分为门户网站、电子商务网站、娱乐网站、游戏网站、时尚网站及个人网站的等。

    展开全文
  • HTML+CSS 笔记整理

    2022-03-03 09:18:33
    目录 前言 一、HTML基础 1 HTML概念 2 HTML语法 3 HTML标签 4 HTML表格 5 HTML表单 二、CSS基础 1.CSS汉译: 2.CSS语法: 3.CSS样式表 4.css选择器 ...14 块级格式化上下文 (Block F...

    目录

    前言

    一、HTML基础

    1 HTML概念

    2 HTML语法

    3 HTML标签

    4 HTML表格

    5 HTML表单

    二、CSS基础

    1.CSS汉译:

    2.CSS语法:

    3.CSS样式表

    4.css选择器

    5.CSS文本属性

    6 列表相关属性

     7 边框的相关属性

    8.引入背景图片:background-image:url();

     9.浮动详解

    10 元素类型

    11 元素定位+锚点

     12 图片整合

    13 宽高自适应

    14 块级格式化上下文 (Block Formatting Context)

     15 浏览器兼容

    16 伸缩布局盒模型(弹性盒模型)

    17 多列布局

    18 媒体查询

    19 移动端布局

    19 过渡transiton

    20 2D转换transform

    21 3D变换

    22 动画

    三,总结



    前言

            HTML和CSS基础内容总结,包含HTML基础和CSS基础两部分。

    一、HTML基础

    1 HTML概念

    I.HTML(Hyper Text Markup Language)称为超文本标记语言                         

       由一套标签组成的语言称为标记语言

       XHTML   可扩展超文本标记语言

    II.W3C万维网联盟     制定了结构html和表现css的标准

       WHATWG           网页超文本应用技术工作小组,推动H5标准为目的的组织

       ECMA             制定行为的标准

       Web标准          结构(html,xhtml),表现(css),行为(DOM,JS)

    III.首页必须命名为index.html,其他页面先在html文件夹里。

    2 HTML语法

    I.常规标记/标签  <div></div>

      空标记<标记/><br/>

    说明:a.在<>中的第一个单词叫做标记,标签,元素。

               b.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”内。

               c.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。

               d.空标记没有结束标签,用"/"代替。

    II.注释:

    html注释  <!--注释内容 --> 

    css注释  /*注释内容*/

    js注释  /*多行*/    //单行 

    III.在head部分放置表现(css).

    IV.在body部分放置结构(网页内容)。

    3 HTML标签

    I.表格中数字自动填充增加{$}  如:table>tr*5>td{$}*5  加Table为表格样式

    II.段落文本内容 <p></p>.

    III.空格&nbsp;

    IV.加粗 <b></b>或者<strong></strong>

    V.倾斜<em></em>或者<i></i>

    VI.强制换行 <br/>

    VII.水平线<hr/> 下划线<u></u> 删除线<s></s>

    VIII.HTML中有三种列表,分别是无序列表,有序列表,自定义列表。

    说明:

    无序列表

    <ul>

      <li></li>

      <li></li>

    ....

    </ul>

    有序列表

    <ol>

     <li></li>

     <li></li>

      ...

    </ol>

    自定义列表

    <dl>

      <dt>名词</dt>

        <dd>解释</dd>

        <dd>解释</dd>

        ...

    </dl>

    IX.img

    title="鼠标滑过显示文字"  alt="图片加载失败显示文字"    src="图片存储路径/图片网址"

    X.超链接 <a href="链接地址">点击文本</a>

       页面打开方式<target>

        本页面打开_self  另开一页_blank

       alt="加载失败显示文字"

    XI.div

            分区标签,可大可小,最常用的容器标签之一

    XII.span

            行内元素, 文本结点,一般用于存放某一小段文本,或是某一个字

    4 HTML表格

    I.数据表格的作用及组成

    作用:显示数据

    组成:

    <table>

        <tr>行

               <td>内容</td> /*单元格*/

               <td>内容</td>

                 ....

         </tr>

    </table>

    II.表格的相关属性

    width="宽"     height="高"

    border=“表格边框大小”

    cellspacing="单元格间距离"

    bgcolor="表格背景色“

    align="表格对齐方式"(left/center/right)

    合并单元格属性:

    colspan="所要合并单元格列数”合并列,左右合并

    rowspan="所要合并单元格行数”合并行,上下合并

    5 HTML表单

    I.表单的作用:用来收集用户信息。

    II.表单框:method提交方法  提交方式(post,get)

       <form name=“表单名称” method="post"  action="#">

       </form>

    *get和post的区别:

    • Get是不安全的,因为在传输过程,数据被放在请求的URL中;Post的所有操作对用户来说都是不可见的。
    •  Get传送的数据量较小,这主要是因为受URL长度限制;Post传送的数据量较大,一般被默认 为不受限制。
    •  Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。
    •  Get执行效率却比Post方法好。Get是form提交的默认方法。

    III.文本框

      <input type ="text" value="默认值“  placeholder="输入框内容/>

    IV.密码框

      <input type="password"/>

    V.提交按钮

      <input type="submit" value="按钮内容"/>

    VI.重置按钮

      <input type="reset" value="按钮内容"/>

    VII.禁用按钮 disable="disabled"(简写disabled)

    VIII.默认选项 checked="checked"(简写checked)

    IX.下拉菜单

      <select>

               <option>菜单内容</option>

               <option  selected(默认选中)>菜单内容</option>

      </select>

    X.多行文本框

         <textarea></textarea>  

    XI.占位   placeholder="内容"

    XII.按钮   button只起到跳转作用,不进行提交。

                   submit是提交按钮 起到提交信息的作用

    XIII.单选框

    男<input type="radio" name="ral"/>

    女<input type="radio" name="ral" />

    单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。

    XIV.复选框

    <input type="checkbox" name="like" />

    <input type="checkbox" name="like" disabled="disabled">

    (disabled="disabled" :禁用)

    (checked="checked" :默认选中)

    二、CSS基础

    1.CSS汉译:

            层叠样式表,就是如何修饰网页信息的显示样式。

            层叠性:给同一个元素添加相同的CSS属性,属性值会存在覆盖问题(代码执行顺序从上向下执行)

    2.CSS语法:

            CSS由两部分组成:选择符(选择器)例div{},声明(属性:属性值组成)例:声明{属性:属性值;}

    语法说明:

    a.每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;

    b.属性必须放在花括号中,属性与属性值用冒号连接。

    c.每条声明用分号结束。

    d.当一个属性有多个属性值的时候,属性值和属性值不分先后顺序。

    e.在书写样式过程中,空格,换行等操作不影响属性显示。

    3.CSS样式表

    a.内部样式表:内部样式的作用域是当前文件。在head标签内写style标签,在style标签内写选择器和声明。

    b.外部样式表:外部样式表的作用域是有关联的所有文件。创建外部CSS文件,通过link标签引入外部css文件。例如:<link rel="stylesheet" href="路径">(多数使用)或者@import url(路径)

    c.内联样式表:行内(内联)样式的作用域是当前标签。在标签里写style="属性:属性值;属性:属性值;..."

    d.样式表的优先级

    !important>内联>内部/外部

    内联样式表的优先级别最高

    内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。

    4.css选择器

    a.class选择器:通过class起名字,通过.名字设置样式。

    b.群组选择器

     语法:选择符1,选择符2,选择符3......{属性:属性值;}

      说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。

    c.包含选择器

    语法:选择符1 选择符2{属性:属性值;}

    说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;

    d.伪类选择器

      语法:

      a:link{属性:属性值;}超链接的初始状态;

      a:visited{属性:属性值;}超链接被访问后的状态;

      E:hover{属性:属性值;}鼠标划过元素时的状态;

      E:active{属性:属性值;}即鼠标按下时元素的状态;

    *当这4个超链接伪类选择符联合使用时,应注意他们的顺序

    e.id选择器

     语法:#id名{属性:属性值;}

      说明:  

    • 当我们使用id选择符时,应该为每个元素定义一个id属性;
    •   如:<div id="top"></div>  
    • id选择符的语法格式是“#”加上自定义的id名;
    •   如:#top{width:300px; height:300px;}   
    • 起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)  
    • 一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素 对象。  
    • 最大的用处:创建网页的外围结构.

    f.通配符【*】

       作用:选中页面上所有元素。常用来重置样式。

    如清除默认边距

    *{

    margin:0;padding:0;

    }

    g.选择符的权重(!important的权重最高)

    • css中用四位数字表示权重,权重的表达方式如:0,0,0,0
    • 类型选择符的权重为0001
    • class选择符的权重为0010
    • id选择符的权重为0100
    • 子选择符的权重为0000
    • 属性选择符的权重为0010
    • 伪类选择符的权重为0010
    • 伪元素选择符的权重为0001
    • 包含选择符的权重:为包含选择符的权重之和
    • 行内样式的权重为1000 继承样式的权重为0000

    5.CSS文本属性

    a.字体大小:选择器(font-size:12px/14px/16px;)

       属性值为数值型时,必须给属性值加单位,属性值为0时除外。

       单位还可以是pt,9pt=12px;

       默认情况下:1em=16px,0.75em=12px,1ppi=16px;

    b.文本字体:{font-family:"宋体",“黑体”;}

    c.css加粗:{font-weight:bolder/bold/normal/100-900;}取值范围100-500不加粗,600-900加粗。

    d1.text-transform:none/capitalize首字母大写/uppercase将单词全部变成大写/lowercase将单词大写转变为小写。(鼠标滑过)

    e.字体风格:{font-style:normal常规字体/italic/oblique倾斜;}

         说明: 1)italic和oblique都表示倾斜,不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。

    f.水平对齐方式:{text-align:left/right/center/justify(两端对齐中文不起作用);}

    g.垂直(基线)对齐方式{vertical-align:top/bottom/middle;}

    h.行高{line-height:normal/数值;}

       说明:

       当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;

       当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位;

       当单行文本的行高大于容器高时,可实现单行文本在容器中齐以下任意位置的定位。

    i.文本修饰:text-decoration:none/underline/overline/line-through

    说明:

      none:没有修饰

      underline:添加下划线

      overline:添加上划线

      line-through:添加删除线

    j.首行缩进:text-indent:..(推荐单位用em);em参考对象是当前字号。可以取负值,只对第一行起作用。

    k.字间距 {letter-spacing:value;}控制英文字母或汉字的字距。

    l.词间距{word-spacing:value;}控制英文单词词距。

    6 列表相关属性

    a.定义列表符号样式:

    •    list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none。
    •   使用图片作为列表符号:list-style-image:url(所使用图片的路径及全称);
    •   定义列表符号位置:list-style-position:outside(默认外面)/inside里面;  

    关于列表属性的简写:list-style:;


     7 边框的相关属性

    a.边框:边框宽度:border-width

            边框样式:border-style

            边框颜色:border-color

    b.边框线型:soild:实线; dashed:虚线; dotted:点状线; double:双线; none:没有边框

    c.单独设置某个方向的边框属性:

    border-top:上边框

    border-bottom:下边框

    border-left:左边框

    border-right:右边框

    d.  transparent 为透明色

    e.边框阴影:

      语法:box-shadow:属性值;

      属性值:x-offset(右)

              y-offset(下)

              blur模糊区域

              spread扩展区域

              color

              inset向内

       或者简写:box-shadow:0px 0px 0px 0 #ccc inset;

      水平方向(正值为右)垂直方向(正值为下)模糊度 放大 颜色 在里/外

    f.边框图片

      语法:border-image

    (1)边框图片资源 border-image-source:url().默认会将图片显示在边框的四个角

    (2)边框图片的裁剪 border-image-slice(0 0 0 0上右下左)

    (3)边框图片的宽度,默认为边框宽度。border-image-width(一般不写)

    (4)边框图片的平铺border-image-repeat 属性值:stretch拉伸(默认) repeat重复 round缩放后的重复

    (5)边框图片向外延伸 border-image-outset(不能为负值) 。

    8.引入背景图片:background-image:url();

    png支持背景透明,jpg不支持背景透明。

    设置背景图片大小:background-sia.背景图片的显示原则

    • 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
    • 容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
    • 容器尺寸小于图片尺寸,只显示容器/元素/范围以内的背景图。

    a.背景图片平铺属性

    • 语法:background-repeat:no-repeat/repeat/repeat-x/repeat-y
    • no-repeat:不平铺  
    • repeat:平铺  
    • repeat-x:横向平铺
    • repeat-y:纵向平铺

    b.背景图位置

    • background-position:
    • 水平方向值:left/center/right或数值
    • 垂直方向值: top/center/bottom或数值

    c.背景图的固定

    语法:选择符{background-attachment:scroll(滚动)默认的/fixed(固定);}

    说明:记得用在有滚动条的地方;

    d.各属性的缩写语法:

    选择符{background:属性值1 属性值2 属性值3;}

    d.background-size

    e 渐变gradient(属性值)

    1.线性渐变

    background: linear-gradient(yellow, blue,pink,#58bc58,...); 标准语法(必须放在最后)

    2.对角渐变

    background: -webkit-linear-gradient(left top, red , blue);[ Safari 5.1 - 6.0 ]

    background: -o-linear-gradient(bottom right, red, blue); [ Opera 11.1 - 12.0 ]

    background: -moz-linear-gradient(bottom right, red, blue); [ Firefox 3.6 - 15]

    background: linear-gradient(to bottom right, red , blue); [标准的语法(必须放在最后)]

    3.角度渐变

    (新版本旋转方向正值为顺时针,老版本旋转方向正值为逆时针)

    background: -webkit-linear-gradient(0deg, red, blue);[Safari 5.1 - 6.0 ]

    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */

    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */

    background: linear-gradient(0deg, red, blue);

    [标准语法(必须放在最后)]

    4.颜色结点(不均匀分布)

    background: linear-gradient(red 50%, blue 70%,yellow);

    5.径向渐变

    background: -webkit-radial-gradient(red, green, blue);

    [ Safari 5.1 - 6.0]

    background: -o-radial-gradient(red, green, blue);

    [Opera 11.6 - 12.0 ]

    background: -moz-radial-gradient(red, green, blue);[Firefox 3.6 - 15]

    background: radial-gradient(red, green, blue);

    [标准的语法 必须放在最后]

    颜色(不均匀分布)

    6.shape 参数定义了形状。

    它可以是值 circle 或 ellipse。

    其中,circle 表示圆形,ellipse 表示椭圆形。

    默认值是 ellipse。

    7.重复的径向渐变

    repeating-radial-gradient() 函数用于重复径向渐变

    属性值:

    (1)数值、百分比:水平方向 垂直方向;[可能发生扭曲]

    (2)cover:覆盖,背景图片完全覆盖容器[可能会丢失一部分图       片,不会发生扭曲]

    (3)contain:包含,容器完全包含背景图片[容器可能会出现空       白区域](背景图不会发生扭曲和丢失)

    *轮播图,ui一般会给一张超级大的图片

    轮播图的做法:

    引入背景图background-image、设置背景图大小background-size:cover、背景图定位background-position:center center;

    e.background-origin 背景的定位区域

    换句话说,就是background-position的原点(0,0)在哪个区域的左上角

    注意区分:background-position 背景在容器的定位区域的什么位置摆放

    属性值:

    padding-box(padding以内,默认)

    content-box内容以内

    border-box边框以内

     9.浮动详解

    1.浮动属性

    语法:float:none/left/right;

    注:

    •   *浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。   
    •   *浮动后的元素会脱离标准流(不会脱离文本流)      
    •   *浮动后的元素相当于置换元素(一行显示多个、可以设置宽高)

    2.盒模型的概念

    盒模型是CSS布局的基石,规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。

    3.盒模型的组成

    内容区content、内填充 padding、边框border、外边距margin

    内填充:padding,在设定页面中一个元素内容到元素的边缘(边   框) 之间的距离。 也称补白。padding不可以写负值!

    4.padding作用:改变子元素或内容在父元素的位置。

    padding值是额外加在元素原有大小之上的,为保持元素大小不变,需要从元素宽或高上减掉后添加的padding属性值。

    padding设置一个值的时候,为上下左右;

    padding设置两个值时,为上下、左右;

    padding设置 为三个值时,上、左右、下;

    padding设置四个值时,为上、右、下、左;

    可以设置单独方向的padding

    padding-top:value;上

    padding-bottom:value;下

    padding-left:value;左

    padding-right:value;右

    5.外边距margin,margin可以写负值!

     作用:控制盒子跟盒子之间的间距。

    说明:可单独设置某一方向边界

      margin-left:左边界

      margin-right:右边界

      margin-top:上边界

      margin-bottom:下边界  

      margin属性值的四种方式的表示方法和Padding相同。


    10 元素类型

    1.HTML元素分类为块状元素,内联(行内)元素,置换元素(行内块元素)。

    2.块级元素(div、form、p、ul、ol、dl、dt、dd、li、h1-h6...

       特点:独占一行显示,可以写width和height。块状元素一般为其他元素的容器,可以容纳其它内联元素和部分块状元素,例如div>p;

    3.行内元素(a,b,br,i,em,label{表单标签},img等)

      特点:多个在一行显示,不可以写width和height。

      内联元素支持盒模型,但个别属性不能正确显示:padding-top、padding-bottom

    4.元素类型的转换

      盒子模型可通过display属性来改变默认的显示类型

      作用:该属性设置或检索对象元素应该生成的盒模型的类型。

       语法:display:block(块状元素)/inline(行内元素)/inline-block(行内块元素)/none(隐藏元素)  

    5.>该选择器只会选择第一代的元素,用法.u1>li:hover {}

    6.元素添加float属性,就相当于给该元素加了display:inline-block;

    11 元素定位+锚点

    1.属性position

      属性值:static默认值  ,absolute绝对定位【绝对定位默认依据(html)定位】  ,relative相对定位  ,fixed绝对定位(固定定位)

      需要配合方向(top,bottom,right,left)使用。

    1.1 绝对定位:如果父元素有定位,依据有定位的父元素定位(定位值不为static时)。

         绝对定位会脱离布局流,不占位。

         层级顺序z-index:number;默认为0,数值可以取负值,值越大在上层显示,需要配合定位使用。

    1.2相对定位  依据自身原来的位置定位。

                  子元素依据父元素定位口令:子绝父相。

                   相对定位不会脱离布局流,原来的位置占位。

    2.元素始终在窗口上下左右居中

    方法一:

    position:fixed;

    left:0;

    right:0;

    top:0;

    bottom:0;

    margin:auto;

    方法二:

    position:fixed;

    left:50%;

    top:50%;

    margin:-100px 0 0 -100px;

    说明:当一个元素有绝对定位(absolute)的情况下,如果该元素的子元素需要以该元素为参照物进行绝对定位,那么子元素可以直接加position:absolute;

    3.固定定位

    position:fixed

    需要配合方向使用。

    4.绝对定位和相对定位的区别

    a参照物不同,绝对定位的参照物是包含块(已定位的父元素),相对定位的参照物是元素本身默认的位置;  

    b绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

    5.锚点链接

     命名锚点的作用:在同一页面内的不同位置进行跳转。

      制作锚标记:

      1)给元素定义命名锚记名

      语法:<标记div   id="命名锚记名">    </标记div>

      2)命名锚记连接 语法:<a href="#命名锚记名称"></a>

    6.opacity:0.5;(文字和背景都透明)(取值范围0~1)

      background:rgba(,,,透明度)

    7.滚动条

      说明:Overflow内容溢出时的设置

      属性: overflow 水平及垂直方向内容溢出时的设置            overflow-x 水平方向内容溢出时的设置  

      overflow-y 垂直方向内容溢出时的设置  

      以上三个属性设置的属性值:

      visible,scroll,hidden,auto.

     visible 默认:其中的内容无论是否超出范围都将被显示。   

      hidden :任何超出“width”和“height”的内容都会隐藏。

      scroll :无论内容是否超越范围,都将显示滚动条。

      auto :当内容超出范围时,显示滚动条,否则不显示。

    8.滚动字幕

    语法:

    <marqueebehavior=“scroll/alternate”  滚动形式           

    direction="up/down/left/right"    滚动的方向           

    scrollamount=“value”            滚动速度         

    height="value"            滚动的范围  

    width="">

    </marquee>

    behavior(行为)="scroll(滚动)/alternate(晃动)   direction(方向)="up(从下向上)/down(从上向下)   /left(从右向左)/right(从左向右)”  

    scrollamount(滚动速度)="value"

    height="value(上下滚动范围)" width=""(左右滚动范围)

     12 图片整合

    1.精灵图

    使用软件CSS Satyr v1.2,exe

    图片生成后,head部分用.pic写图片位置,再用.pic-$的位置。

    body部分使用<span>标签使用精灵图。

     

    2.滑动门

    说明:滑动门是利用CSS背景图像可层叠性,并允许彼此之上进行滑动来创造一些特殊动态效果。

    特征:使CSS设计出来的导航菜单兼具传统布局的图像效果,与CSS布局的高效扩展性。

    13 宽高自适应

    1.宽度自适应

            若块级元素宽度不设置,或者设置成100%,都是占据其父级元素的一整行(继承父元素宽度)。

      应用场景:

    • 页面最外层的盒子一般都要占据屏幕的大小,所以宽度100%。
    • 子元素使用百分比表示盒模型任意部分大小的话,代表的是子元素盒模型任意部分尺寸=父元素宽度*百分比;

    2.高度自适应

    1)父元素高度由子元素撑开

    (1)若是子元素都浮动了,父元素不会被撑开(高度塌陷)

    解决办法(清除浮动):

    * 给父元素添加最后一个子元素(块级元素)

    { height:0;overflow:hidden;clear:both;  (clear:left/both/right)}

    缺点:造成不必要的浪费

    * 给父元素添加{overflow:hidden;}

    缺点:可能造成需要的部分被隐藏掉

    * 伪元素清除法.(万能清除法)

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

    备注:使用时,给父元素添加类名 clearfix即可。

    clear:both清除浮动 clear:left清除左浮 clear:right清除右浮

    (2)预防子元素会没有内容,撑不开父元素的情况

       解决办法:给父元素添加最小高度min-height。

    (当内容高度小于最小高度时,按最小高度显示。当内容高度大于最小高度时,按内容高度显示)

    BFC块级格式化上下文

    14 块级格式化上下文 (Block Formatting Context)

    BFC是一个独立的布局环境,其中的元素布局是不受外界的影响。

    满足下列条件之一就可触发BFC

      【1】根元素,即HTML元素

      【2】float的值不为none

      【3】overflow的值不为visible

      【4】display的值为inline-block

      【5】position的值为absolute或fixed

    特性

    【1】阻止垂直外边距(margin-top、margin-bottom)重叠

    属于同一个BFC的两个相邻块级子元素(元素都要在文档流中)的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠

    解决: 触发其中一个div的BFC,使得两个div不在同一个 BFC内,这样就可以阻止这两个div的margin重叠,display:inline-block;

    【2】包含浮动元素

    可以包含它内部的所有元素,包括浮动元素——因此一清除内部浮动

    解决:清除浮动, overflow: hidden;,为其本身创建一个BFC

    bfc的作用:

    1.自适应两栏布局

    2.可以阻止元素被浮动元素覆盖

    3.可以包含浮动元素——清除内部浮动

    4.分别属于不同的BFC时可以阻止margin合并

     15 浏览器兼容

    一、常用的浏览器

      1)主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游     2)最早的浏览器 : Mosaic  /  Netscape Navigator(网景领航者)(1994-2008)简称NN

    二、五大浏览器内核

    •Trident   (MSHTML)(ie 三叉戟;三叉线;三齿鱼叉)

    •Gecko      (壁虎 firefox)

    •Presto      ( 欧朋opera)

    •Webkit    (Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)

    •Blink        (由Google和Opera Software开发的浏览器排版引擎)。

    16 伸缩布局盒模型(弹性盒模型)

    1.说明:

      css3引入一种新的布局模式——flexbox布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局,即使他们的大小是未知或者动态的。

      主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex容器会使子项目扩展来填充可用空间,或缩小他们以防止溢出容器。

      2.flexbox布局功能主要具有以下几点:

    • a.屏幕和浏览器窗口大小发生变化也可以灵活调整布局;
    • b.指定伸缩项目沿着主轴或侧轴按比例分配额外空间,从而调增伸缩项目的大小;
    • c.指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;
    • d.指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;
    • e.控制元素在页面上的布局方向;
    • f.按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

      3.弹性盒

    一、设置在容器:父元素上。

      1)使其变为弹性盒:

        语法:display:flex;

        说明:规定子项目在父元素主轴方向(默认水平)一行显示,不会换行。侧轴方向(默认垂直)会默认拉伸。

      2)设置主轴方向:

         语法:flex-direction;

         属性值:row 默认为水平向右

                 column 垂直向下

                 row-reverse 水平向左

                 column-reverse垂直向上

      3)允许子元素伸缩换行:

         语法:flex-wrap:nowrap;

         属性值:nowrap默认不换行 、wrap换行

      4)设置子项目在容器主轴方向的对齐方式

         语法:justify-content:属性值;

         属性值:flex-start 默认在主轴方向起点位置对齐

                 flex-end 在主轴方向终点位置对齐

                 center 中间

                 space-between 将空白区域平分在子项目之间

                 space-around 将空白区域环绕在子项目两边

    5)设置子项目在其所在行的侧轴对齐方式

        语法: align-items(单行):属性值;

        属性值:stretch 默认拉伸

                flex-start 子项目在其所在行的起始位置摆放

                flex-end 子项目在其所在行的结束位置摆放

                center 中间

    6)设置子项目在侧轴方向的对齐方式

       语法:align-content(控制多行):属性值;

       属性值:flex-start 默认在所在行起点位置对齐

               flex-end 在所在行终点位置对齐

               center 中间

               space-between 将空白区域平分在子项目之间

               space-around 将空白区域环绕在子项目两边

    二、设置在子项目上:

    1)设置子项目在父元素主轴方向的比份;

        语法:flex:number;

    2)设置单个子项目在其所在行的侧轴对齐方式;

        语法:align-self:属性值;

        属性值:stretch 默认拉伸

                flex-start 子项目在其所在行的起始位置摆放

                flex-end 子项目在其所在行的结束位置摆放

                center 中间

    3)设置子项目的顺序;

        语法:order:number;

        说明:写了order的排在没有order属性的元素后面。

              写了order的,属性值越小的在越前面;

              没写order的属性值默认为零,order可以写负值。

    4)设置子元素压缩;

        语法:flex-shrink: 0/1;

        属性值:0---不压缩;

                1---压缩;

    17 多列布局

    说明:css多列布局可以自动将内容按指定的列数排列,这种特性实现的效果和报纸、杂志类排版非常相似。跟瀑布流效果相仿。

    核心属性:(一般加在body上)

       column-width 列宽 , 定义每列列宽; 类似于最小宽度min-width; auto 自适应;

       column-count 列数,定义分列列数;最多列数,auto自适应(由列宽、容器宽和列间距决定),也可固定

       column-gap:定义列间距; 不能为负数;

       column-rule:定义列边框;与定义边框一样:2px dashed #ccc;

       column-span: 属性值;  定义多列布局中子元素的跨列效果;通常用于标题;

           属性值:none:不跨列;  all:跨所有列;

       当出现图片与下方标签不配对时,使用break-inside: avoid;(断点)这类属性加在图片的上级父元素上;

    18 媒体查询

    1.说明:页面结构简单使用

    2.屏幕分界点:

       超小屏幕xs (移动设备)768px以下

       小屏设备sm             768px-992px

       中等屏幕md             992px-1200px

       宽屏设备lg             1200px以上

    3.语法

    1)@media screen and (条件:最小宽度,最大宽度等)

    2)min-width 若当前页面宽度大于min-width的值时,则样式生 效。注意!链接的css文件的min-width应从小写到大;

    19 移动端布局

    操作顺序:

    1.链接相应的CSS、JS文件。注意所链接文件顺序。

      使用其他编码器时,注意设置

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    2.确定设计稿大小,改相应rem、js参数;(插件:cssrem)

      640px设计稿/rem、js(function)为640,插件(font-size)改为64,

      750px设计稿/rem、js为750,插件改为75。

    3.设置页面为高度自适应;

      {height:100%}

    4.根据测量布局;

    5.当整体产生滚动条时,设置position:absolute;脱离布局流

    6.px、em、和rem的区别

    1)概念

    px:绝对单位,页面按精确像素展示。

    em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

    rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

    2)特点

    px特点:字体大小固定。

    em特点 :

    a. em的值并不是固定的;

    b.em会继承父级元素的字体大小。

    rem特点:

    rem是CSS3新增的一个相对单位(root em,根em),区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

    通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

    19 过渡transiton

    1.transition-property规定应用过渡的 CSS 属性的名称。

    2.transition-duration定义过渡效果花费的时间。默认是 0。

    3.transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。

    •    a.ease规定慢速开始,然后变快,然后慢速结束的过渡效果
    •    b.linear规定以相同速度开始至结束的过渡效果
    •    c. ease-in规定以慢速开始的过渡效果
    •    d. ease-out规定以慢速结束的过渡效果
    •    e.ease-in-out规定以慢速开始和结束的过渡效果
    •    f.transition-delay规定过渡效果何时开始。默认是 0。

      语法:transition:all 2s linear 3s;

    20 2D转换transform

    1、translate( X,Y)偏移方法

      [水平(正值为右),垂直(正值为下)]

    2、rotate(0reg,0reg)旋转方法(reg为角度)

    3、scale( X,Y)缩放方法,x,y为倍数,可放大可缩小

    4、skew(Xdeg,Ydeg)扭曲方法

    21 3D变换

    1.transform之3d移动变换: (加在父元素上)

      语法:transform:translate3d(x,y,z)

      z:代表在垂直于平面的轴上移动,电脑屏幕往人眼那个方向为正方向。

       transform:translateY() translateZ(z) 【女神上来】

    2.transform-style规定变换的样式(加在父元素上)

       当写3d模式时,要加上这句语法,开进图片3D状态。

       属性值:flag平面(默认) preserve-3d保持3d变换            transform-style: preserve-3d 保持3d变换

    3.设置观察的距离,

      景深 perspective:value(父元素) 【案例女神向我走来】

    4.transform之rotate3d

      transform:rotate3d(x,y,z,角度)

      此时x、y、z取值为0或1,0代表不旋转,1旋转

      transform:rotateX(角度) transform:rotateY(角度)          transform:rotateZ(角度)

      备注:左手定律,大拇指指向轴的正方向,其他手指弯曲的方    向为旋转的正方向 【体操】

    5.立方体 改变盒子变换的基准点

    语法:perspective-origin :( ,)观察的基准点(角度deg)

    属性值:第一个值为水平方向,正值为往右;第二值为垂直方向,正值为往下;

    语法:transform-origin:( ,)改变盒子变换的基准点。

    22 动画

    1.自定义动画

    • (1)通过@keyframes指定动画序列;
    • (2)通过百分比将动画序列分割成多个节点;
    • (3)在各节点中分别定义各属性
    • (4)通过animation属性将动画应用于相应元素;

    2.animation属性

    • (1)animation-name动画名字(必须)
    • (2)animation-duration动画播放时间(必须)
    • (3)animation-timing-function 动画播放的形式
    •   属性值: linear线性 ease ease-in steps(n)
    • (4)animation-delay 动画播放的延迟
    • (5)animation-iteration-count 动画播放的次数  
    •    infinite无限次播放
    • (6)animation-direction 动画是否轮流反向播放
    • 属性值:alternate交替播放 reverse反向播放
    •  alternate-reverse 轮流反向
    •  animation:1 2 3 4 5 6 ;(缩写)

    补充:

    • (1)animation-play-state:paused; 暂停动画                 
    • (2)animation-fill-mode属性规定动画在播放之前或之后,其动画效果是否可见。  属性值:forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

    三,总结

                   除语义化标签外,以上便是现阶段学西html和css的主要学习内容

    展开全文
  • 命名是网页设计最基本的工序,命名的规范化及统一性有利于提高工作效率。一、命名原则: 简单化原则。简单、直观是网页文件及样式文件的最基本原则,比如:index.html(主页)index.css(主页样式)news.html(新闻页)...
  • 前端笔记整理

    千次阅读 2020-12-04 13:43:33
    前端面试题 1.响应式布局如何实现 响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好的体验。 为什么要使用响应式布局: 在之前使用固定宽高有一定的局限:屏幕越来越宽时,因为定 得宽是固定的,...
  • 新手网页设计学习笔记(htmlcss部分)HTML+CSS 学习笔记笔记用于记录视频 [韩顺平]轻松搞定网页设计 (html.css.js)中 html 和css 部分,自己整理用于记忆的,便于以后查阅。经供参考。2014.08.26于北航图书馆...
  • 网页学习笔记(全)Html+Css+Js+JQuery

    千次阅读 2021-11-11 22:47:03
    前段笔记 (一)安装vscode 安装:插件 chinese 汉化 open-in-browser ---> 启用 设置自动保存:文件 —> 自动保存 (二)认识页面结构: Emmet:? 直接出结构: ! <!-- 注释 快捷键 ctrl + / --> <!...
  • 狂神说Vue笔记整理

    万次阅读 多人点赞 2020-12-11 09:13:04
    狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网...
  • 作为微软推出的网页与数据库解决方案,ASP由于有微软得天独厚的操作系统等技术后盾支持,因此得到了迅速的发展,并且正受到越来越多的欢迎。以下就是学习ASP的方法和在学习中遇到的一些问题,需要的朋友可以参考下
  • 由于笔记内容过多,我把它放到语雀上了。 点击我
  • 设计思想:电脑就是如此简单图像: 图片大小: 200px*200px的图片应该控制在20KB以内 GIF:如果把存放在同一文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画 压缩:采用8级压缩级别...
  • 整理自慕课笔记 基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。...
  • 千锋 Vue 详细笔记整理

    千次阅读 多人点赞 2021-12-11 22:06:09
    前端 vue 详细笔记整理
  • 本人整理的html笔记,里面有带jscript和asp笔记
  • 计算机网络 课程笔记整理

    千次阅读 2018-08-08 10:46:50
    设计路由选择算法是为生成路由表,为转发IP分组找出适当的下一跳路由器; 设计路由选择协议是为了实现路由表中路由信息动态更新 Internet将路由选择协议分为两大类:内部网关协议IGP、外部网关协议EGP。目前...
  • 全九章节的笔记导航目录:[其他剩余章节目录](https://blog.csdn.net/momentni/article/details/109260971) 全笔记PDF版下载链接:[下载链接](https://download.csdn.net/download/momentni/13027629)
  • 《软件架构设计 大型网站技术架构与业务融合之道》第 8 章学习笔记整理,主要讲了高并发读写系统的应对方案
  • 开发了网页版,地址: 参与交流 欢迎大家将珍藏已久的经典免费书籍共享出来,您可以: 使用 以及 Pull Request 贡献者名单: 目录 语言无关类 操作系统 (中英文版) (第三版) 智能系统 分布式系统 编译原理 计算机图形...
  • HTML基础知识与DW简单使用笔记整理1 -- HTML基础知识与DW简单使用概念客户端和服务器端文件名、基本名、扩展名资源文件和站点什么是HTML关于W3CW3C的规范网页的制作网页的基本框架通过记事本写网页Dreamweaver 设计...
  • HTML5、css3笔记整理: 单纯的为了回忆一下HTML网页制作。 要制作html网页,只需将文件的后缀名改为name.html和name.css; css文件通过在html的头部标签里添加标签和css文件相关联,就可以将css样式作用于html文件。 ...
  • SpringMVC学习笔记整理详细

    千次阅读 多人点赞 2020-06-09 19:28:57
    研究官方文档,锻炼自学能力,锻炼笔记能力 SpringMVC + Vue +SpringBoot + SpringBoot +SpringCloud +Linux Spring:IOC+AOP(重点) springMVC:springmvc的执行流程!(重点) springmvc:ssm框架整合 1.回顾MVC ...
  • HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 名词解释 Internet网络 就是通常所...
  • 信息资源管理 笔记整理

    千次阅读 2020-06-24 16:18:34
    信息资源管理 ╭第一章 信息资源管理基础 |第二章 信息化规则与组织 |第三章 信息系统资源管理 内容大纲< 第四章 信息资源内容管理 |第五章 信息资源管理的标准与法规 |第六章 信息资源安全管理 ...
  • mybatis笔记整理

    千次阅读 2019-05-30 22:19:40
    1、测试mybatis在java文件中取得数据表中的内容 2、xml核心配置文件详解 3、数据库连接池 ...测试网页分页 getMapper接口绑定方案和多参数传递 动态sql threadlocal 缓存 mybatis注解 运行原理 1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,495
精华内容 4,998
关键字:

网页设计笔记整理