web前端基础

    xiaoxiao2021-12-14  15

    一、基本简介 1.背景:HTML不是变成语言,一种描述性的标记语言,全称是超文本标记语言,其中还有另一种XHTML,现在常用的HTML版本基本上是 HTML4.01和HTML5 2.编写工具:windows记事本、Editplus、notepad++、Dreamweaver.... 3.编写规范:文件的后缀名为html或者htm 二、HTML的基本的标签和结构框架 1.基本框架 <html> <head> <title>test</title> </head> <body> <marquee>welcome to huaxin</marquee> </body> </html> 其中head标签是头部标签基本上是标题,还有设置代码格式和搜索引擎关键字等等 body是整个页面的主体部分,网页的可视化部分 2.基本标签介绍: <p></p> 为段落标记标签 <br> 换行标记标签 <hr> 分割线标记标签 <div></div> 区域布局标记标签 <marquee></marquee> 文字滚动标记标签 <center></center> 居中标记标签 <strong><B> 字体加粗 <I><VAR><CITE><DFN><ADDRESS> 字体添加倾斜效果 <H1><H2><H3><H4><H5><H6> 字体由大到小、由粗到细 <form><form> 数据提交标记标签 <ol><li> 有序清单 <ul><li> 无序清单 <MENU><DIR> 无序清单 <DL><DT><DD> 定义清单,仅仅只是列表清单,不做序号标识 <table><tr><td> 表格标记的三元素分别是:容器、列、单元格 <th> 等价于<td>,但是文字会自动加粗,用于显示主栏目 <caption> 表格标题列 <input> 输入框标记,种类分别是:Text、Radio、CheckBox、password、submit/reset、Image、file、hidden、button <select><option> 下拉选单,select为选单对象,option为被选项 <textarea> 文本输入域 <a></a> 超链接标记标签 <frameset><frame> 框架标记标签 <noframes> 不支持框架则显示此标签内容 <iframe> 以框架模式插入另一个页面文件 二、div+css布局 1.css a.基本定义:中文全称是层叠样式表,属于标记型语言,不需要编译,浏览器自动执行,div+css是web设计标准,是一种网页布局方法, ,css的最新版本是css3,是能购做到网页表现与内容分离的一种样式设计语言 b.作用:css是通过获取标签的标签名、name或者id属性来设置style属性,让代码清新,不冗余 几中style设置:标签内部属性设置、head标签style标签、外部css文件标签 c.css样式的基本语法: 行内模式(使用标签内部样式):<div style="设置样式代码">其他标签文本内容</div> 内联模式(适用于head标签里):<style type = "text/css"></style> 外部样式(外部css文件):<link href="样式文件路径" rel = "stylesheet" type = "text/css"> 2.选择器:通用选择器、class选择器、id选择器、标签选择器、复合选择器、超链接选择器(主要是通过class和标签名来设置布局)

    3.基本语法:

    4.基本样式表:

    属性名称

    含义

    取值范围

    font-family

    使用什么字体

    所有的字体

    font-style

    字体是否斜体

    Normal、italic、oblique

    font-variant

    是否用小体大写

    Normal、small-caps

    font-weight

    字体的粗细

    Normal、bold、bolder、lithter等

    font-size

    字体的大小

    Absolute-size、relative-size、length、percentage

    属性

    含义

    取值范围

    Color

    定义前景色

    颜色

    Background-color

    定义背景色

    颜色

    Background-image

    定义背景图案

    路径

    Background-repeat

    重复方式

    Repeat-x、repeat-y、no-repeat

    Background-attachmen

    设置滚动

    Scroll、Fixed

    Background-position

    初始位置

    Percentage、length、top、left、right、bottom等

    属性

    含义

    取值范围

    Word-spacing

    单词之间的间距

    Normal <length>

    Letter-spacing

    字母之间的间距

    Normal <length>

    Text-decoration

    文字的装饰样式

    None|underline|overline|line-through|blink

    Vertical-align

    垂直方向的位置

    Baseline|sub|super|top|text-top|middle|bottom|text-bottom|

    Text-transform

    文本转换

    Capitalize|uppercase|lowercase|none

    Text-align

    对齐方式

    Left|right|center|justify

    Text-indent

    首行的缩进方式

    <length>|<percentage>

    Line-height

    文本的行高

    Normal|<number>|<length>|<percentage>

    属性

    含义

    取值范围

    Margin-top

    外边距顶端边距

    Length|percentage|auto

    Margin-right

    外边距右侧边距

    Length|percentage|auto

    Margin-bottom

    外边距底端边距

    Length|percentage|auto

    Margin-left

    外边距左侧边距

    Length|percentage|auto

    Padding-top

    内边距顶端边距

    Length|percentage

    Padding-right

    内边距右端边距

    Length|percentage

    Padding-bottom

    内边距底端边距

    Length|percentage

    Padding-left

    内边距左端边距

    Length|percentage

    属性

    含义

    取值范围

    Border-top-width

    顶端边框宽度

    Thin|medium|thick|length

    Border-right-width

    右侧边框宽度

    Thin|medium|thick|length

    Border-bottom-width

    底端边框宽度

    Thin|medium|thick|length

    Border-left-width

    左侧边框宽度

    Thin|medium|thick|length

    Border-width

    一次定义宽度

    Thin|medium|thick|length

    Border-color

    设置边框颜色

    Color

    Border-style

    设置边框样式

    None|dotted|dash|solid等

    Border-top

    一次定义顶端

    Border-top-width|color等

    Border-right

    一次定义右侧

    Border-top-width|color等

    Border-bottom

    一次定义底端

    Border-top-width|color等

    Border-left

    一次定义左侧

    Border-top-width|color等

    属性

    含义

    取值范围

    Width

    定义宽度属性

    Length|percentage|auto

    Height

    定义高度属性

    Length|auto

    Float

    文字环绕

    Left|right|none

    Clear

    哪一边环绕

    Left|right|none|both

    属性

    含义

    取值范围

    Display

    定义是否显示

    Block、inline、list-item、none

    White-space

    怎样处理空白

    Normal、pre、nowrap

    List-style-type

    加项目编号

    Disc、circle、square等

    List-style-image

    加图案

    <url>|none

    List-style-position

    第二行起始位置

    Inside、outside

    List-style

    一次定义列表

    <keyword>|<position> |<url>

    Cursor

    鼠标样式

    Auto、Crosshair 、efault、Hand、Move、e-resize、Ne-resize 、Nw-resize、n-resize、Se-resize、Sw-resize、s-resize、w-resize、Text、Wait、Help

    三、div+css+javascript

    1、定义:可以自定义的切换效果,通过不同的事件监听来改变style属性

    2.javascript编写规范:分为外部js和内部js

    内部js编写格式:<script type="text/javascript">alert(1);</script>

    外部js文件编写格式:<script type="text/javascript src="js文件路径"></script>

    3.javascript基本语法:

    定义变量的基本格式:var 变量名 = 字面量(定义字面量类型全部都用var关键字声明)

    注释的基本格式:单行注释以双斜杠开头://

    多行注释以单斜杠星号开头,以星号单斜杠结尾: /*......*/ 函数的基本定义格式:function 函数名(参数列表){函数体} var 变量名 = function(参数列表){函数体} var 变量名 = new function(参数1,参数2,函数体); javascript数据类型:原始数据类型和引用数据类型 五个原始数据类型:undefined、null、boolean、number、string 一个复杂数据类型:object,也属于原始数据类型 自定义类引用类型 typeof和instanceof判断 typeof判断变量的具体类型,返回类型仅有如下几种:number,boolean,string,function,object,undefined(所有引用类型通过type校验都属object) instanceof比typeof更精确到具体复杂类型 javascript核心对象: 数组对象(Array):用于存储一类型的数据 (定义数组var 变量名 = new Array()  var 变量名 = [值,值,值......]) Boolean对象:Boolean对象表示true或者false( 注意:值为0、-0、null、""、false、undefined 或 NaN,则该对象设置为 false ) 日期对象(Data):可以获取当前日期时间 数学运算对象(Math):可以用于执行数学运算任务 数学对象(Number):可以是整数、小数或者科学计数 字符串对象(String):可以用单引号可以或者双引号引起来 全局函数对象(Function):包括顶层函数和顶层属性用于提供调用 时间对象(Event):时间通常与函数配合使用,这样可以通过事件来驱动函数执行 获取窗体宽度:document.documentElement.clientWidth 获取窗体高度:document.documentElement.clientHeight 循环调用方法:setInterval 停止循环调用:clearInterval •获取键盘事件:

       document.οnkeydοwn=function(event){

             var e = event || window.event || arguments.callee.caller.arguments[0];

            var code = e.keyCode;

       }

    •鼠标事件

      document.onmousemove =function(event){

             e= event|| window.event;

             var x = e.pageX || e.clientX;

             var y = e.pageY || e.clientY;

       };

    dom对象 节点对象属性: fristChild 指向childNode列表中的第一个节点 lastChid 指向最后一个 parentNode 返回给定一个父节点 childNodes 返回所有的子节点的列表 innerHTML 向节点中插入文本内容 节点对象方法: createElement("tagname") 创建一个元素节点 createTextNode("text")  创建一个文本节点 appendChild(node)  将node添加到childNodes末尾 removeChild(node)   从childNodes中删除 replaceChild(newnode,oldnode) 在childNodes中的oldnode替换成newnode insertBefore(newnode,refnode)  在childNodes中的refnode之前插入newnode document对象方法: getElementById() 根据节点对象的id属性来获取当前节点的对象 getElementsByName 根据节点对象的name属性来获取当前节点的对象 getElementsByTagName()根据节点对象的标签名来获取当前节点对象 write() 往html文档中写入html代码 事件添加: 行内模式:οnclick=函数名() 事件绑定模式:window.οnlοad=function(){ obj.οnclick=function(){函数体} }

    转载请注明原文地址: https://ju.6miu.com/read-969560.html

    最新回复(0)