Web前端上万字的知识总结

下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习。大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每个字都是自己手敲的。

  1、<html>和</html> 标签限定了文档的开始和结束点。

  属性:

    (1)  dir: 文本的显示方向,默认是从左向右

    (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文

    (3) version:定义创作文档的HTML的标准版本

  2、<head></head>用于封装位于文档头部的其他标签

  属性:

    (1) dir:文本的显示方向

    (2)  Lang:语言信息

    (3)  Profile:提供了与当前文件相关联的文档数据的URL

  可放在<head>标签中的标签为

    (1) <base>:标注当前文档的URL的全称

    属性:

      Href:指定文档的基础URL地址(<body>中的相对地址都是以此基地址为基础)

      Target:定义打开页面的窗口

    属性值:

      _parent:在上一级窗口中打开

      _blank:在新一窗口中打开

      _self:在本窗口中打开

      _top:在浏览器的整个窗口中打开

  (2) <basefont>:设定基准的字体,字号和颜色

  属性:

    Face:设置字体(如黑体,楷体等)

    Size:设置大小(属性值从1——7,从小到大)

    Color;字体颜色(值为十六进制颜色)

  (3) <title>:设定显示在浏览器左上方的标题内容

  属性:

    Dir:文本的显示方向

    Lang:语言信息

  (4) <meta>:有关文档本身的元素信息

  属性:

    http-equiv: 生成http标题域,取值与content的属性值相同

  属性值:

    Refresh 为自动刷新,在content里设定刷新时间,content里也可以跟上刷新的URL,实现页面跳转;

    content-type  在content里用charset设置内码语系      如charset=gb2312;

    Expires  定义网页有效期,在content里的格式为星期,日 月 年 时 分 秒 GMT,用英文和数字

    Page-enter 进入网页时的效果

    Page-exit  退出网页时的效果

  在content中对应的值为:  

    0:盒状收缩                 1:盒状展开                 2:圆形收缩                 3:圆形展开

    4:向上擦除                 5:向下擦除                 6:向左擦除                 7:向右擦除

    8:垂直百叶窗             9:水平百叶窗             10:横向棋盘式            11:纵向棋盘式

    12:溶解               13:左右向中部收缩     14:中部向左右展开     15:上下向总中部收缩

    16:中部向上下展开     17:梯状左下展开 18:梯状左上展开        19:梯状右下展开

    20:梯状右上展开        21:随机水平线            22:随机垂直线            23:随机

  Name:如果元数据是以关键字/取值出现的话,那么name的值就是其关键字

  属性值:  

    Keywords   在content里定义关键字;

    Discription  为定意描述,在content里定义描述内容;

    Author    在content里描述作者;

    Content: 关键字/取值的内容

  (5) <style>:设定有关CSS层叠样式表的内容  

  (6) <link>:设定外部文件的链接

  (7) <script>:设定文件脚本的内容

3、<body></body>界定了文档的主题

  属性:

    (1)、text: 页面文字的颜色

    (2)、bgcolor: 页面背景的颜色(用十六进制的颜色表示)

    (3)、background: 页面的背景图像(所需的是图片的URL)

    (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动条的滚动而动)

    (5)、link: 页面默认的链接颜色

    (6)、alink: 鼠标正在单击时的链接颜色

    (7)、vlink: 访问过后的链接颜色

    上面三个控制的是标签<a></a>中的颜色

    (8)、topmargin: 页面的上边距     

    (9)、leftmargin: 页面的左边距

4、&nbsp;定义空格  <!--被注释掉的内容-->

5、文字标记

  (1)、<hn>(n=1~6)标记标题字

  属性:

    Dir:文字方向

    Lang:语言信息

    Align:对齐方式

  属性值:

    Left:左对齐(默认)

    Right:右对齐

    Center:居中

    Class:用一个名称来标记标题,标记名称指向在外部定义的样式表

    Id:为段落设置一个标记,将来可以在一个超链接中明确的引用这个标记,以便作为样式表的选择器

    Style:创建标题内容的内联样式

    Title:给标题加上一个说明性的文字

  (2)、<font>标记普通字

  属性:

    Face:字体       size: 字号       color:颜色

  (3)、<b>或<strong>       粗体

  (4)、<i>,<em>,<cite>    斜体

  (5)、<sup>     上标

  (6)、<sub>     下标

  (7)、<big>      大字号

  (8)、<small>   小字号

  (9)、<u>        下划线

  (10)、<s>      删除线

  (11)、<address>      显示地址如Email

6、段落标记

  (1)、<p> 表示一个段落的开始

    属性:dir   lang    align    class     id    style    title

  (2)、<br> 换行     <nobr>

    属性:class    id    style    title

  (3)、<div>分块文字

    属性:dir       lang        align    class      id    style        title         nowrap(强制不换行)

      (4)、<span> 行内样式定义

    属性: dir      lang        align     class       id    style       title

  (5)、<center> 水平居中显示

    属性:    dir   lang        class       id    style        title

  (6)、<blockquote> 块引用

    属性: dir     lang        class        id    style        title

7、下划线     

  <hr>              插入水平分割线

    属性:dir       lang        class        id    style        align       size    noshade   width      color

8、列表

  (1)、 <ul>无序列表,用<li>来罗列项目

    属性:dir       lang      class     id    style        title      compact(紧凑无需列表)type(项目符号类型)

    Type的属性值:disc:实心原点   circle:空心原点       square:实心方形

  (2)、<ol>定义一个有序列表

    属性:dir       lang        class        id    style        title       compact        start(数字起始值)

    Type的属性值:1,A,a,i,|

  (3)、目录列表<dir>,无序列表的一种特殊形式

    属性: dir     lang        class        id    style        title

  (4)、定义列表<dl>

    基本用法:    <dl>

    <dt>名词</dt>  <dd>解释</dd>

    </dl>

    属性:dir       lang        class        id    style        title         compact

  (5)、菜单列表<menu>,用于表示简短的列表

    属性:dir       lang        class        id    style        title

9、插入图片

  <img> 插入图片标签

  属性:

    Src:图像的源文件路径        Alt:文字提示(图像不显示时) width、hight:宽度、高度           border:边框

    Vspace:垂直间距         hspace:水平间距          dynsrc:设定avi文件的播放           loop:设定avi播放次数

    Loopdelay:设定avi播放延迟  start:设定avi文件的播放方 lowsrc:设定低分辨率图片          usemap:映像地图

    Dir       lang      class        id    align     style      title

  Align的属性值极其说明:

    Top:文字的中线在图片的上方                middle:文字的中线位于图片的中部

    Bottom:文字的中线位于图片的底部        left:图片在文字左侧

    Right:图片在文字的右侧                        absbottom:文字的底线位于图片的底部

    Absmiddle:文字的底线位于图片的中部    baseline:英文文字基准线对齐

    Texttop:英文文字上边线对齐

10、插入超链接

  (1)、标签<a></a>为超链接标签

  属性:

    Href:指定链接地址     name:给链接命名       target:指定链接打开窗口     accesskey:链接热键

    Dir      lang        align        class        id        style        title      charset     rel:指定从原文档到目标文档的关系

    Rev:指定从目标文档到源文档的关系          type        tabindex:对新窗口中的对象重新排序

    URL格式:

      http://进入万维网站点 ftp://进入文件传输服务器             news://启动新闻讨论组         telnet://启动telnet方式

      Gopher://访问gopher服务器  mailto://启动邮件(href=”mailto://sdut@qq.com? Subject=给我来信”)

  (2)、书签链接,试用于页面太长时,避免翻页,格式如下

    <a  name=”name”> 文字 </a>            <a  href=”#name”> 文字链接 </a>

  (3)、空链接: <a  href=”#”> 链接 </a>

  (4)、脚本链接:<a  href = “javascript:.....”> 文字链接 </a>

  (5)、制作图像映射:在同一图像上嵌入不同的链接,创建图像映射的方式是通过<img>标签的usemap属性再结合<map> 以及<area>标签来实现的,<a>    或<area>标签包含在<map>标签内

    <map>的属性:

       name     给链接命名  dir        lang        id           class        style        title

    <area>的属性:

      Href         alt           accesskey        target       dir          lang        id    class        style        title         tabindex 

            shape(图像映射区域的形状)          coords(图像对光标敏感区域的坐标)

    Shape的属性值:

      Rect 矩形区域             circle  椭圆形区域        poly  多边形区域

事例:

<img   usemap=”#map”  src=”URL”  hight=””  width = “”  border = “”>

<map  name = “map”>

<area  shape = “rect”  coords = “100,23,56,90”  href = “URL”>

<area  shape = ...............................................................................>

</map>

11、插入多媒体

  (1)、插入声音标签<bgsound>

    属性: src (声音文件路径)  loop 循环次数

  (2)、<embed>标签可以在网页中加入MP3音乐,电影,swf动画等多媒体文件

      属性: src         loop        autostart          width      hight       hidden(是否隐藏内嵌播放器)       dir   lang   class     id      

       style           align              title         type(嵌入多媒体类型)     Hidden 和 autostart 的属性值有true和no

    当嵌入flash动画时还有以下属性:

      Quality 动画的播放质量       puginspage 播放插件所在位置    wmode 动画播放时的窗口模式

  (3)、制作滚动字幕标签<marquee></marquee>

    属性:    align              behavior(滚动方式)  bgcolor  class        direction(滚动方向) width      hight  Hspace   vspace

      Style       loop       scrollamount(滚动速度)  scrolldelay(滚动延迟)

    Direction的属性值:up  down       left          right

    Behavior 的属性值: scroll(循环往复《默认》)  slide(只走一次滚动)         alternate(交替进行滚动)

      Scrollamount后跟数字越小越慢,scrolldelay后跟毫秒,vspace和hspace 定义字幕与周围文字的距离

12、其他嵌入

  (1)、<object>标签用于往文档中嵌入对象

    属性:classid(指定包含对象的位置)       archive(URL列表) border  codebase(提供一个可选的插件URL)hight

    Width  data(指定需要对象处理的数据文件)  hspace   vspace   name      type  tabindex   dir  lang   align 

            class       id           style      title

  (2)、<applet>标签用来插入applet小程序

    属性:      code (指定浏览器运行的Java类小程序的名称)           codebase         hight       width      hspace    

        vspace  name         type  class     alt           id         title   style    align

  (3)、<param>标签为把包含他的<object>或<applet>提供参数

    属性:type     name      id    value

13、表单:

  表单由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有的这些都放在<form>中

  (1)、<form>

    属性: dir      lang        align              class        id    style        title         name     

        method(定义表单结果从浏览器传输到服务器的方法一般有post 和get 两种方法)      

        action(用来定义表单处理程序(asp,CGI等)的位置(相对或绝对))                    

         enctype(设置表单编码方式) target(表单返回显示方式)

    Enctype的属性值:       text/plain(以纯文本形式传送)            

                application/x-www-urlencoded(默认编码方式)                                                       

               multipart/form-data   使用mine 编码  

  (2)、表单输入标签<input>

    属性:      dir   lang        class        id    alt    name       align              style        title         type       

          accesskey  value  size      src   accept(文件上传的MIME表列)    checked(已选中)

          disabled(禁止某个元素输入)maxlength(最大字符数)

    Type的属性值:text 文字域   password密码域 file 文件域     checkbox复选框     radio单选框    button 普通按钮

            submit 提交按钮           reset 重置按钮       hidden隐藏域  image 图像提交按钮

  (3)、多行文字域<textarea>

    属性:dir       lang        class        id    style        title         name       accesskey        disabled          tabindex   rows(行数)      

         cols(列数)  wrap(多行文字域的换行) Wrap的属性值:virtual  虚拟换行             physical  物理换行   off 不换行

  (4)、<select>下拉菜单和下拉列表标签,把标记条目放在<option>标签中

    属性:dir       lang        class        id    style        title         name      

       disabled(禁用某个列表)    size    tabindex      multiple(列表中的多选项目)

14、表格

  (1)、定义表格<table>

  属性:dir       lang        class        id    style        title         name       bgcolor    background      bordercolor     

      bordercolorlight      bordercolordark       border       height      width      cellpadding(单元格边距) cellspacing(单元格间距) 

      nowrap     frame(表格边框的可见方式)          rules(行列之间边的可见方式)       summary(整个表格的概要描述)

  Frame的属性值:

    Above 显示上边框        below显示下边框                 border 边框全显示        hside显示上下边框             

    vside显示左右边框              lhs显示右边框                rhs显示左边框              void        显示

  Rules的属性值:

    All   显示所有内部边框 cols仅显示列边框         groups显示位于行列间的边框      none不显示内部边框            rows仅显示行边框

  (2)、定义行<tr>

    属性:dir       lang        class        id    style        title         bgcolor    background  bordercolorlight       

         bordercolordark       valign(表格行的垂直对齐方式)

  (3)、定义列<td>,<th>为定义表头

    属性:dir       lang        class        id    style        title         bgcolor    background      bordercolorlight      

       bordercolordark       valign      width      height       abbr(单元格的缩写)  

       axis(用逗号分割目录名列表)    rowspan(单元格跨行个数)

       Colspan(单元格跨列个数) headers(标题单元格的列表)     nowrap(禁止换行)     scope(指定单元格提供信息)

  (4)、表格标题内容<caption>

    属性:dir          lang        class        align              id    style        title         valign

15、框架主要分为两部分:一个是框架集,另一个是框架

  (1)、<frameset>框架集,仅是一个框架的集合

    属性:class     id    style        title         rows        cols       

        bordercolor      frameborder       framespacing(框架集间距)

  (2)、定义框架<frame>

    属性:class     id    style        title    bordercolor  frameborder       name    noresize(禁止调整边框大小)  

         src(框架源文件)     Marginwidth(框架边缘宽度)          marginheight(框架边缘高度)

         Frameborder的属性值:yes 出现边框          no 不出现边框

  (3)、<iframe>定义内联框架,在文档中定义一个独立的矩形区域,有独立的滚动条和边框

    属性:class     id    style        title         frameborder             name       src         

        marginwidth    marginheight          align        height      width       scrolling(是否允许出现滚动条)

    Scrolling的属性值:yes 出现  no不出现          auto自动出现滚动条

16、样式表

  (1)、内联样式表:只需在标签内含一个上style属性,style属性后在跟一系列属性和属性值即可。

    事例:<标签  style = “属性:属性值”>

  (2)、文档样式表用<style>标签表示

    属性:dir       lang        title         media(文档要使用的媒介类型)      type(样式类型)

      级联样式表type的属性值都是text/css,javascript使用的样式表都是text/javascript

    Media的属性值:

      screen 计算机显示屏(默认)        tv(电视) projection 剧场        handheld(PDA和手提电话)

      print 打印      all所有媒体

  (3)、外部样式表:用<link>标签来实现

    属性:dir       title         lang        target       type        class        id    style

            charset     href         media      rel    rev

  (4)/样式表语法

    (a)、HTML重新定义标签样式表语法:

                exp:        td{color:red;font-size:8pt}

    (b)、类样式表:能够在文档样式表或外部样式表中为同一个元素创建不同的样式,在文档后面通过设置class属性来选择特定的样式。

    例子: .bg {background-image: url(路径);}

      <body     class = ”bg”>

17、样式表的属性

  (1)、字体属性:    font-family 用一个指定的字体名   font-size 字体显示的大小      font-style 字体显示的样式                                                                  font-weight 定义字体的粗细           font-variant 设置英文大小写转换 font 组合设置字体属性

      Font-style的属性值:normal 正常值                  italic 斜体             oblique 扁斜体

      Font-weight的属性值: normal 正常值              bold 粗体              bolder 在加粗       

                  lighter 变细    100—900 共有100到900个级别数越大越粗

      Font-variant的属性值:normal 正常                small-caps 将小写转换为大写

      Font组合时的顺序:样式,粗细,大小

  (2)、颜色和背景属性:

    Color 颜色     background-color 背景颜色         background-image 背景图片          background-repeat 背景图片如何重复

    Background-position 设置背景图片水平和垂直的位置        background 组合设置背景属性

  属性值:

    Background-repeat:repeat 平铺     repeat-x  X方向上平铺  repeat-y Y方向上平铺  no-repeat不平铺

    Background-position:    value 以百分比(x%.y%)或绝对值的形式(x.y)来确定背景图像的位置        top 居顶

    Center 居中           bottom居底           left 居左         right居右

    Background可以任意组合以上的属性值

  (3)、文本属性:

    Letter-spacing 定义一个附加在字符间的间隔数量       word-spacing单词间的间隔数量   text-index文字的首行缩进

    Text-align 文本对齐方式      line-height行高间隔       text-transform控制英文文字大小写 text-decoration文字修饰

    属性值:

    Letter-spacing: normal 正常值              长度单位 如2em  

    Word-spacing : normal 正常值          长度单位

    Text-decoration:underline 加下划线  overline 加上划线   line-through 加删除线 

             blink闪烁文字,只使用于netscape浏览器    none默认值

    Text-align:left 左对齐         right右对齐           center居中      justify两端对齐

    Text-index:后跟长度单位如2em

    Text-transform: capitalize将每个单词首字母大写  uppercase 将每个都转换为大写  lowercase 转换为小写 none

  (4)、边框属性:

    Border-color 边框颜色    border-style 边框样式     border-width边框宽度     border-top-color 上边框颜色

    Border-left-color 左边框颜色  border-right-color 右边框颜色   border-bottom-color 底边框颜色         border-top-style  border-left-style               border-right-style  border-bottom-style  border-top-width   border-left-width

    Border-right-width  border-bottom-width  border 组合设置 border-top(right/left/right/bottom)

    属性值:

    Border-style:none 无边框  dotted 边框由点组成  dash 边框由短线组成  solid边框是视线  double双线

    Groove  立体沟槽  ridge 边框成脊形  inset 边框内嵌一个立体边框  outset边框外嵌一个立体边框

  (5)、方框属性:

    Float 让文字环绕在元素四周     clear指定在某一元素的某一边是否允许有环绕的文字和对象  clip限定只显示裁切      出来的区域    width设定对象的宽度              height设定对象的高度          padding设定边框和内容间的距离   margin 元素里   浏览器的距离 overflow 当本层内容容纳不下时的处理方式                  position 设置对象位置   z-index决定层的先后顺序和覆盖关系

    属性值:

    Float:      none        left          right

    Overflow:  visible无论层的大小,内容都会显示出来        hidden 隐藏超出层的内容           scroll 不管是否超出都会添加滚动条

    auto只有超出时才会有滚动条

    (6)、列表属性:

      List-style-type 设定引导列表的项目类型            list-style-image  选择图像作为项目的引导符号                              

      list-style-position  决定列表项目所缩进的程度

    属性值:

      List-style-type: disc 在文本行前加实心圆   circle 加空心圆   square 加实心方块  decimal  加阿拉伯数字

      Lower-roman  小写罗马数字   upper-roman 大写罗马数字   lower-alpha 小写字母                            

      upper-alpha 大写字母          none 不显示任何符号

      List-style-image:的属性值为URL(图片路径)

      List-style-position: outside 列表贴近左侧边框            inside      列表缩进

  (7)、滤镜属性:基本语法    filter: 滤镜 (参数)

    Alpha 透明的层次效果        blur 快速移动的模糊效果       chroma 特定颜色的透明效果       dropshadow阴影效果

    Fliph 水平翻转效果      flipv 垂直翻转效果       glow 边缘光晕效果       gray灰度效果    invert 颜色亮度值翻转

    Mask遮罩效果       shadow渐变阴影效果           wave波浪效果       xray  X射线效果

  (8)、鼠标滤镜:用法---------cursor: value

    Value的值: hand 手型       crosshair 交叉十字 text 文本选择符号   wait沙漏装    default 默认形状      help 问号

    N(W、S、E)-resize 向北(西、南、东)的箭头 

18、在页面中加入Javascript脚本

  (1)、用标签<script>实现

    属性: charset编码脚本程序的字符集        language 脚本语言 src 包含脚本程序的URL      type脚本类型

  (2)、js内在事件:onBlur光标离开文本框时       onChange 当文本框的内容给被改变是时            onClick单击时       onLoad载 入时      

     onMouseOver鼠标经过时       onMouseOut鼠标移开时       onReset 复位表单时      onSubmit提交表单时                        

    onSlecte 文本域被选中时      onUnload退出载入时            onFocus当光标落在文本框时

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

9620
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件 (1)...

35640
来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

27650
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

23030
来自专栏IMWeb前端团队

初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题,是因为在项目中有要求用到它。所谓 SVG Path 动画,就是让图形有像人实时绘制一...

30960
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

421110
来自专栏每日一篇技术文章

weex-21-animation模块

我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下

24210
来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

52820
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

21650
来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

25950

扫码关注云+社区

领取腾讯云代金券