欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web前端入门基础知识(HTML+CSS+JS)

程序员文章站 2024-03-17 11:11:22
...

Web前端入门学习

HTML

一、基本语法格式

<!--声明是html格式为html 一般写在首行-->
<!DOCTYPE html>
<!--html是固定格式表示html的开始和结束-->
<html>
    <!-- 声明html网页信息-->
    <head>
        <!--编码字符集-->
        <meta charset="UTF-8">
		<!-- 移动客户端优先——>
        <meta name="viewport" content="width=device-width,initial-sclle=1.0">
        <!--标题-->
        <title>HTML标题</title> 
    </head>
    <!--和用户交互的部分-->
    <body>
           
    </body>
</html>

注意:<title>标签位于<head>标签内,是<head>标签中唯一要求包含的东西。
<meta>用来提供相关文档信息
CSS,JS文件用<link>标签引入 并且写在<head>标签中

二、常用的一些标签

1、标签 h1~h6
标签

这是标签h1

这是标签h2

这是标签h3

这是标签h4

这是标签h5
这是标签h6
2、段落标签p

<p></p>段落标签前后有换行效果。

3、水平线标签

<hr/> 水平线是一个自闭和标签。

4、换行

<br/>

5、超链接

通过<a href="http://www.baidu.com"> <a/>标签实现,使用超连接调用某个网页前面必须要加http://

6、div

<div></div>标签可以理解为是一个盒子,用于网页的布局

7、span

<span></span>标签是一个不带任何参数的标签和在<from>表单中的<label>类似

8、表格标签table

<table></table>

<!-- 表格标签 属性border=1 添加表格边框粗细为1 -->
        <!--   cellspacing="0" 使边框变只有一条线-->
        <table border="1"  cellspacing="0" >
            <!--设置表格标题-->
            <caption><h3>这是表格标题</h3></caption>
            <!-- 定义行 -->
             <tr >
                <!---th定义列 一般写在表格首行 内容会被加粗居中-->
                 <th style="width: 100px;">id</th>
                 <th style="width: 100px;">用户名</th>
                 <th style="width: 100px;">年龄</th>
             </tr>
             <tr>
                 <!-- tb定义列 -->
                 <td>1</td>
                 <td>张三</td>
                 <td>18</td>
             </tr>
             <tr>

<caption>标签用于设置表格标题 会自动在表格上方居中显示
表格除了<table>标签以外还需要<tr>来定义行,<th><tb>来定义列<th>一般用于表格首行有加粗居中效果。

9、列表标签
<body>
         <h3>水果</h3>
         <!-- ul无序列表-->
         <ul>
             <li>西瓜</li>
             <li>苹果</li>
             <li>猕猴桃</li>
         </ul>

        <h3>蔬菜</h3>
        <!-- ol有序列表 start代表从几开始-->
        <ol start="50">
            <li>西红柿</li>
            <li>黄瓜</li>
            <li>东瓜</li>
        </ol>
    </body>
10、表单Form

含义:表单就是用来提交数据到后台服务器的,比如QQ网页上的登录和注册都是提交表单的一使用

<form action="http://www.baidu.com" method="GET">

action:数据发送的服务器地址,如上就是发送给了百度
method: 请求发送方式。常用的俩种方式为: GET、POST

get:将数据追加在url末尾 ? key=value & key=value;

post:将数据写在请求体中

在from表单中,提交数据的标签必须要有 name和value 俩个属性

表单专属标签<label>类似于<span>标签 无默认样式标签

11、input

1、text代表文本框。还有一种超级文本框textrea用于输入更多内容

1、<input type="password"/>密码属性会隐藏输入内容

2、radio代表单选项,必须要有相同name属性,才可以使用组合使用单选项

<input type="radio" name="sex" value="0"/>男 <input type="radio" name="sex" value="1"/>女

3、checkbox代表多选。必须要有name属性,多个name属性的多选为一组

<input type="checkbox" name="hobby" value="0"/>唱

<input type="checkbox" name="hobby" value="1"/>跳

4、submit提交表单数据

5、reset清空表单内容

12、下拉框select

注意:name属性在select标签;value属性在option标签

&nbsp;&nbsp;&nbsp;<select name="city" id="">
                    <option value="0">请选择</option>
                    <option value="1">山东</option>
                    <option value="2">安徽</option>
                    <option value="3">江苏</option>
                </select>
13、具有实体意义的代码

空格 : &nbsp;
©: &copy

CSS

1、基本语法

1、行内式:<div style=" height: 200px;" ></div>

2、引入外部文件式:<link rel="stylesheet" href="css/text.css">

3、嵌入式:<style type="text/csss"> </style>

2、选择器

一、通用选择器 *

一般用于取消所有元素的内外边距和一些标签自带的字体样式

*{
    padding: 0; /* 将所有元素的内间距设置为0*/
    margin: 0; /* 将所有元素的外间距设置为0*/ 
    text-decoration: none; /*通常用于去除a标签的下划线*/
}
二、类选择器 .
/* 类选择器
格式:				    例:<a class="b"> <a/>
.class 修饰的类名称{		  .b{
	属性:值				 属性:值
属性:值				  	  属性:值
}							}
三、ID选择器
/* 格式				例:<a id="c"></a> 
#id修饰的名称{			#c{
	属性:值				属性:值
}						}
四、分组选择器

给不同名字标签设置相同属性

/*
.class,#id{
	属性:值
}

*/
五、后代选择器
/*
div p{
	属性:值
}

p标签是div中的子元素

3、常用属性

1、背景: background

​ 设置背景颜色、图片背景的俩种方式

             ```css
body{
            background: blue;
            background-color: blue;
            /* background: url(img/Da66niel_Wu.jpg); */
            /* background-image: url(imgimg/Daniel_Wu.jpg) */
            /* background-position-y: -5px; /* 设置背景图片y轴上上移5px*/
    
            /* background-repeat: repeat; */ 默认重复 从上至下 从左到右
            /* background-repeat:repeat-x;  */ 背景图片在x轴上重复
            /* background-repeat: repeat-y; */ 背景图片在y轴上重复
            /* background-repeat: no-repeat; */ 背景图片不重复

            /* 设置背景图片,并不重复,一行代码实现 */
         	/* background: url(imgimg/Daniel_Wu.jpg) no-repeat;
			/*overflow: hidden;/* 超出标签范围内容隐藏 */
        }
             ```
2、文本text

​ 1、设置颜色有三种方式:

color:aqua;		/* 通过颜色的英文单词名称设置*/
color: #7B68BB; /* 通过颜色代码设置*/
color:rgb(244,164,96); /* 通过rgb颜色代码设置*/

​ 2、居中 text-align:center;
​ 靠左text-align: left;默认靠左
​ 靠右text-align: right;

​ 3、文本修饰

text-decoration: none; /* 无任何线条修饰——去除超链接下划线*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*中划线*/
text-decoration-color: red; /*控制线条样式 设置线条颜色为红色*/
text-indent:20px; /*  首行缩进 */

4、文本首行缩进
text-indent:20px;text-indent:2em; em大约为17px

3、字体

​ 1、字体类型

font-family: '微软雅黑','宋体','黑体';设置多个字体类型浏览器会按从左到右按支持的类型选择

​ 2、字体大小

font-size: 50px;

​ 3、字体粗细

font-weight: 900;字体粗细取值范围是100~900的整数 bold=700、normal=900

4、列表list
            list-style: none;/* 无样式*/
            /* list-style: disc; 实心圆,默认样式 */
            /* list-style: circle; 空心圆 */
            /* list-style: square; 实心方块 */
            /* list-style:decimal; 数字 */
            /* list-style:decimal-leading-zero; 零开头数字 */
            /* list-style: lower-roman; 小写罗马 */
            /* list-style: upper-roman; 大写罗马 */
            /* list-style: lower-alpha; 小写英文 */
            list-style: lower-alpha; /* 大写英文 */
5、对齐方式

居中:text-align:center;

靠左:text-align:left;

靠右:text-align:right

两端对齐: text-align: justify;

1、两端对齐只有一行文字时不生效

2、两端对齐多行文字时最后一行不生效。 解决方法:使用伪元素在末尾添加空行

:after{
    display:inline-block;/*将最后一行变为行内状元素*/
          width: 100%;/*使用父元素的宽度*/
          content: '';
}
6、display属性(块元素)

​ 1、display定义了元素是否显示

​ 2、display:none;表示元素不显示

​ 3、display:block块状元素;比如div元素可以设置宽高的元素属于块状元素但是会自动换行

​ 4、display:inline;行内元素;无法设置元素的宽/高

​ 5、 display:inline-block;行内块元素 ,既能实现设置宽/高属性,也不会自动换行

7、边框属性border

​ 1、border: 1px solid black; 用一条语句表示:分别是设置 边框粗细、边框样式、边框颜色

		   /* border-width:5px; 粗细 */
           /* border-style:solid; 实线样式 */
           /* border-style: none; 无样式 */
           /* border-style: dotted; 点状 */
           /* border-style: dashed; 虚线 */
           /* border-style: double; 双实线 */
           /* border-color: black; 颜色 */
		   /* border-radius:8px; 边框变圆角*/			
8、内外间距

​ 1、内边距:padding 外边距:margin

			   /*内外边距同理*/
		  /* margin: 20px; 代表上下左右都是20px */
          /* margin: 10px 30px; 代表上下10px 左右30px; */
          /* margin: 2px 10px 20px 30px; 代表从左到右为上右下左设置像素; */
          /* 外间距如果只有俩个参数的情况下,第二个参数可以设置auto代表自动居中         */
          /* margin: 5px auto; */
 		  /* 上外边距20px 左外边距自动计算居中 下外边距0px 右外边距自动计算居中 */
 			margin: 20px auto 0 auto;
9、定位position

​ 1、绝对定位:position:absolute

  position: absolute;/*绝对定位*/
        top: 100px;
        left: 100px; /*设置俩个参数即可确定位置*/

​ 2、相对定位:position:relative
​ 让子元素对父元素进行绝对定位的时候,父元素必须设置相对定位

​ 3、固定定位:position:fixed

​ 相对于浏览器窗口定位,不会因为你下滑而改变位置

       position: fixed;/* 相对于浏览器窗口定位*/
        bottom: 50px;
        right: 50px; /*设置俩个参数即可确定位置*/
10、鼠标变手势

cursor: pointer;

11、样式改变效果耗时

transition: all 0.5s;

12、行高

line-height:; 不允许使用负值

JavaScript

1、语法格式

​ 1、行内式:<button onclick="alert('点击后的弹出框')">弹出框</button>

​ 2、嵌入式:

<script type="text/javascript" charset="utf-8">alert('这是一个弹出框');</script>

​ 3、引入外部文件:

<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

2、基础语法

​ 1、var 来定义部分字符转和整数、小数

​ 2、不能义关键字用来命名,就是js语法已经征用的单词不可以使用,否则报错

​ 3、如何命名(标识符):

​ 一、支持 _ 和 & 特殊符号

​ 二、区分大小写

​ 三、不要以数字开头,但是支持数字

​ 四、见名知意

​ 五、使用驼峰或者下划线分割

六、console.() 用于打印在控制台

3、变量

​ 变量,就是内存中用来存储数据的一个小空间
​ 变量名也要遵循 标识符 的规则

​ 注意:
​ 1、若只声明而没有赋值,则该变量的值为 undefined

​ 2、变量要有定义才能使用,若变量未声明就使用,JavaScript会报错

​ 3、可以在同一条var命令中声明多个变量

​ 4、若使用var重新声明一个已经存在的变量且赋值,则会覆盖掉前面的值

​ 5、js的语法不区分双引号和单引号,但是如果出现了引号嵌套需要注意

4、数据类型

​ 1、undefined 例: var num;声明未赋值的变量都是undefined

​ 2、null 例:var a=null; 空值

​ 3、booleanvar a=true; 布尔类型 true/false

​ 4、numbervar a=1,b=3.14 数值类型

​ 5、字符串 例var a=‘张三’ 字符串类型

​ 6、函数function

5、数据类型的转换

一、转整数 全局函数parseInt();

​ 1、纯数字的字符串转整数:parselnt('495')=495

​ 2、数字开头加字符的字符串: parseInt('456abc')=456 只会保留数字部分丢弃其他字符

​ 3、其他字符开头加数字的字符串:parseInt('str123')=NaN

​ 4、小数字字符串和小数都是只保留整数部分: parseInt('3.14')=3

​ 5、进制转换:parseInt(0xa)=10 ;16进制的10,大小写无所谓

二、转小数 全局函数parseFloat()

​ 1、字符串转小数parseFloat("3.14")=3.14

​ 2、数字开头加字符的字符串parseFloat("1.52ad")=1.52 只会保留数字部分丢弃其他字符

​ 3、其他字符开头加数字的字符串:parseFloat('str123')=NaN

​ 4、整数字符串,保留整肃部分不会自动加小数位

​ 5、0开头的整数或字符串 parseFloat(0360598)=360598 去掉开头的0保留整肃,不会添加小数位

​ 6、多位小数字符串parseFloat(1.23.35)=1.23 只会保留一个小数点后的有效数字

三、转字符串

​ 1、使用toString() 注意: undefined 和 null 不能直接使用该函数 否则会报错

​ 解决方法加 " " 或 ’ ’ 最简单的方法就是所有变量加 " " 或者 ’ ’ 都可以转为字符串

6、运算符

一、算数运算符

​ 除了 加减乘除(+ - * /) 需要注意的是还有 求余数 %

​ 自增和自减有两种写法
​ ++在后: a++、a-- 表示先赋值后自增

​ ++在前: ++a、–a 表示先自增后赋值

二、赋值运算符

​ x -= 1 等于 x=x-1;x * =1 等于 x = x * 1 ; x %=1 等于 x = x % 1
​ x +=1等于 x=x+1;x / = 1 等于 x = x / 1 ;

三、比较运算符

​ 1、’==’ 会帮我们做简单的自动类型转换 5 == '5' true

​ 2、’==='全等于 必须类型和值都相等才是true

​ 3、还有常见的 大于">"、小于"<"、大于等于">="、小于等于"<="、不等于 “!=”

四、逻辑运算符

​ 1、"&&" 短路于 并且的意思
​ 符号俩边条件都达到的时为:true 否则非false

​ 2、"||" 短路或 或者

​ 符号俩边条件只要一个满足或俩个都满足时就为:true 否则false

五、三目运算符

​ 格式: 条件表达式 ? ture的结果 :fales的结果

var x = 2;
        var y = 5;
        // x大于y吗?大于返回x,小于返回y
        var result = x > y ? x : y;  //接收返回值到result
        console.log(result); // 在控制台打印result

7、IF判断语句

格式1

if (条件表达式){ //如果条件表达式为true  则执行语句在 执行后续语句
    执行语句;		
}  //如果条件表达式为false。执行后续语句

格式2

 if (条件表达式) {
                    true语句体;
                } else {
                    false语句体;
                }

                后续代码;

格式3

 if (条件表达式) {

                } else if (条件表达式) {

                } else if (条件表达式) {

                }else{//后面这个slse块可以跟具实际情况 可有可无
                      
                }

8、循环语句

      格式:
              /*  for (初始表达式; 条件表达式; 操作初始表达式) {
                    语句体;
                }
            执行顺序:
                1. 初始表达式,例如:var i = 0;
                2. 执行条件表达式,例如:i < 5;
                3. 如果第二步为true,执行第四步,如果第二步为false,循环结束
                4. 执行语句体,然后执行第五步
                5. 操作表达式,例如:i++,然后执行第二步*/:   for (var i = 1; i <= 5; i++) {
          if(i==3){
              continue //表示当i=3的时候跳出当次循环,继续下次
					  // break 表示结束循环
          }
       	}

9、数组

​ 一、数组的定义

​ 1、第一种:var 数组名 = [];定义一个空数组,未初始化值,如果要访问会返回undefined

​ 2、第二种:var 数组名 = [值1, 值2, 值3,...]; 定义一个长度为5的数组,已初始化值

​ 3、第三种:new Array(值1, 值2, 值3,...);定义一个长度为3的数组,已初始化值

​ 4、第四种:new Array(长度);定义一个长度为5的数组,未初始化值,如果要访问会返回undefined

​ 注意:

​ 1、 数组的获取:格式 数组名[下标];第一位:从0开始,最后一位:length-1

​ 2、js的数组没有越界的概念,js的数组可以随意更改长度

​ 二、数组的遍历 即获取数组中所有数据 使用for循环

var arr5 = [1, 3.14, true, null, "学习"];
        for (var i = 0; i < arr5.length; i++) {
            console.log("arr5[" + i + "] = " + arr5[i]);
        }

10、函数

​ 一、函数的定义

/* 
            格式1:
                function 函数名([形参]){
                    语句体;
                    return 返回值; 
                }
            格式2:
                var 函数名=function([形参]){
                    语句体;
                    return 返回值;
					if( 条件表达式){
					return; //注意 在函数if中添加return当条件表达式为flase时结束函数
					}
                }
            调用:
                函数名([实参]);
        */

11、内置对象String

var str='我是一个字符串';

一、charAt(idx):指定位置字符

str.charAt(1);// "是"

二、indexOf(chr)定字符串的位置

返回指定字符串的位置,从左到右。找不到返回-1

str.indexOf("我") //"0"

三、substr(m,n):

返回给顶字符串从m位置开始,取n个字符,如果参数n省略。则意味着取全部

str.substr(2,2);//“一个”

四、substring:

返回给定字符串中从2开始,到3位置结束但不包括第3位。如果参数n省略。则意味着取全部

substring(2,3);//“一”

五、tolowerCase():转小写

str='SHSXT' str.toLowerCase();//“shsxt”

六、toUpperCase();转大写

str='shsxt' str.toUpperCase(); //“SHSXT”

七、replace(s1,s2): 替换

将s1替换为s2 str='shsxt' str.replace('sh','bj'); //“bjsxt”

12、内置对象Math

1、随机数

Math.random();生成随机数,生成0到1的小数

2、上取整

	`Math.ceil()` 向上取整  `Math.ceil(0.00001)`=1

3、下取整

Math.floor()向下取整 Math.floor(0.99999)=0

4、四舍五入

Math.round()四舍五入取整,只对小数点后一位进行四舍五入 Math.round(3.19)=3

例; 随机产生0到26的数

Math.floor (Math.random()*27)
产生0~1的数乘以27在向下取整可达到产生随机数0到26

13、内置对象Date

​ 创建时间对象var date = new Date();

一、获取年

date.getFullYear()

二、获取月

date.getMonth() + 1

三、获取日

date.getDate()

四、获取星期

date.getDay()

五、获取分

getMinutes()

六、获取秒

getSeconds()

七、获取本地时间

toLocaleString()

八、set更改时间

​ 设置日期时间,设置时间为2008奥运

		date.setFullYear(2008);
        date.setMonth(7);
        date.setDate(8);
        date.setHours(20);
        date.setMinutes(8);
        date.setSeconds(8);
        console.log(date.toLocaleString());

14、BOM对象

一、系统对话框

1、消息框:

alert(123);

2、输入框:

prompt(‘请输入年龄’,20);第二参数为默认值 可有可

3、确认框:

confirm(‘确认要更改么’)‘’

例子:

        var result=confirm('确认要修改么');
        //如果点确认,修改div文本的颜色,否则给个警告
        if(result){
            var dv=document.getElementById('dv');
            dv.style.color='blue';
        }else{
            alert('没事别瞎点');
        }

二、打开窗口

open('http://www.baidu.com', '_block') block:新窗口打开 默认值

三、时间函数

1、setTimeout

setTimeout(函数,时间毫秒) 多少秒后执行函数

// setTimeout 5s后打印   settimeout(函数,时间毫秒);
        var num = 1;
        var result1 = setTimeout(function () {
            console.log("打印内容");
        }, 5000);
2、setInterval

setInterval(函数,时间毫秒) 多少秒执行一次

 //setInterval 每秒打印一次
        var result2 = setInterval(function () {
            console.log("打印内容");
        }, 1000);

注意: 时间函数调用后会返回一个停止时间函数的数值

//时间函数调用后会返回一个停止时间函数的数值 
        function stopTime() {
            clearTimeout(result1);
            clearInterval(result2); //停止时间函数
        }

练习:将当前时间获取到设置div 并且为整数时,修改颜色红色

var dv1 = document.getElementById("dv1"); //通过dvi的id与他关联
        setInterval(function () {
            //new Date().gerSeconds() 获取当时秒数

            if (new Date().getSeconds() % 10 == 0) {
                dv1.innerHTML = "<h1 style='color:red;'>" + new Date().toLocaleString() + "</h1>";
            } else {
                dv1.innerHTML = "<h1>" + new Date().toLocaleString() + "</h1>";
            }

        }, 1000);

四、location

​ 1、reload 刷新页面 location.reload();
​ 2、href 改变当前页面网址 location.href="http://www.baidu.com";

15、事件on

一、onload 页面加载
// 第一种,使用匿名函数,默认加载body

        // onload =function(){
        // document.getElementById('dv').style.color='blue';
        // }
 //第二种 使用具体函数
        function init(){
            var dv=document.getElementById('dv');
            console.log(dv);
            dv.style.color='red';
        }
   //  <body οnlοad="init();">
二、onClick点击
三、焦点事件

​ 1、获取焦点:onfocus

​ 2、失去焦点:onblur

四、鼠标事件

​ 1、鼠标移入:onmouseover

​ 2、鼠标移出: onmouseout

​ 3、鼠标在范围内移动:onmousemove

五、键盘事件

​ 1、键盘按下:onkeyup

​ 2、键盘抬起:onkeydown

六、改变域内容事件

onchange 例如下拉框的选择

七、事件处理方式

​ HTML事件处理方式 / DOM事件处理方式
​ DOM事件处理方式,动态的方式绑定,方便代码的维护

16、DOM对象

一、获取节点

​ 1、根据id获取,返回单个对象 document.getElementById( );

​ 2、根据name获取,返回多个对象 数组 document.getElementsByName();

​ 3、根据标签名获取,返回多个对象 数组document.getElementsByTagName();

​ 4、根据class获取元素document.getElementsByClassName();

二、对象属性操作
<button type="button" id="btn">测试按钮</button><br />

    <input type="text" value="加油,胜利就在眼前" id="txt" class="test" />
    <br />

    性别:
    <input type="radio" checked="true" name="sex" value="1"><input type="radio" name="sex" value="0"><br />

    <img src="img/timg.jpg" style="width: 200px;" id="sxtimg" title="sxt" />

1、获取文本

var txt = document.getElementById('txt');
            // 根据属性获取文本
            console.log(txt.value);
            // 根据函数获取文本
            console.log(txt.getAttribute('value'));
--------------------------------------------------------------------------------------
//设置文本
			// 根据属性设置文本
            txt.value = '我是新文本';
            // 根据函数设置文本
            txt.setAttribute('value', '我是第二次设置的新文本');

2、获取属性

 var txt = document.getElementById('txt');
    // 根据属性获取
            // 获取id属性
            console.log(txt.id);
            // 获取class属性
            console.log(txt.className);
            // 获取type属性
            console.log(txt.type);
    // 根据函数获取
            console.log(txt.getAttribute('id'));
            console.log(txt.getAttribute('class'));
            console.log(txt.getAttribute('type'));
--------------------------------------------------------------------------------------
	// 根据属性设置
            //txt.id = 'newId';
            //txt.className = 'newClass';
            //txt.type = 'password';
            // 根据函数设置
            txt.setAttribute('id', 'newId2');
            txt.setAttribute('class', 'newClass2');
            txt.setAttribute('type', 'password');

3、获取是否选中*

			console.log(sex.checked);// 返回true false
            console.log(sex.getAttribute('checked'));// 有,返回具体的值或者没有,返回null
---------------------------------------------------------------------------------------
    // 根据属性设置
            //sex.checked = true;
    // 根据函数设置
            sex.setAttribute('checked', 'true');

4、获取样式

 function getStyle() {
            var sxtimg = document.getElementById('sxtimg');
            // 根据属性获取
            console.log(sxtimg.style.width);
            // 根据函数获取
            console.log(sxtimg.getAttribute('style'));

            // 根据属性设置,设置的是其中一个样式,属于样式的添加,建议使用属性操作
            //sxtimg.style.cursor = 'pointer';

            // 根据函数设置,设置的是全部样式,属于样式的覆盖
            sxtimg.setAttribute('style', 'cursor: pointer');
        }
// 将自定义函数绑定至按钮
        document.getElementById('btn').onclick = getStyle;
三、元素的创建和插入

								   //添加段落// 
//函数的方式创建
        function testCreateElementByFunc() {
            var p = document.createElement('p')
            var txt = document.createTextNode('我是一个p元素');
            var vd = document.getElementById('dv');
            p.appendChild(txt);
            dv.appendChild(p);
        }
//属性的方式创建  
        function testCrerteElenentByAttr() {
            var dv = document.getElementById('dv');
            dv.innerHTML = '<p>属性添加的p元素</p>'
        }
---------------------------------------------------------------------------------------
									// 添加图片//
     //函数的方式创建
        function testCreateImgByFunc() {
            var myImg = document.createElement('img');
            var dv = document.getElementById('dv');
            dv.appendChild(myImg);
            //myImg.setAttribute("src",'img/Daniel_Wu.jpg');
            myImg.src = 'img/Daniel_Wu.jpg';
        }
       //属性的方式创建
        function testCreateImgByAttr() {
            var dv = document.getElementById('dv');
            dv.innerHTML = '<img src="img/Daniel_Wu.jpg" style="width:300px;"/>';
        }
---------------------------------------------------------------------------------------
									// 文本框//
    //函数的方式添加
        function testCrerteElementByFunc() {
            var inp = document.createElement('input');
            inp.setAttribute('value', '我是一个文本框');
            inp.setAttribute('type', 'password');
            var div = document.getElementById('dv');
            dv.appendChild(inp);
        }
     //属性的方式添加
          function testCreateElementAyAttr(){
            var div=document.getElementById('dv');
            dv.innerHTML='<input value="我是一个文本框" type="password"/>';
        }
---------------------------------------------------------------------------------------
									// 选项框//
     //函数的方式添加
        function testCreateElementByFunc(){
            var opt=document.createElement('option');
            var txt=document.createTextNode('南山南');
            var sel=document.getElementById('mySelect');
            opt.appendChild(txt);
            opt.setAttribute('value','3');
            //第二种方法
            sel.options.add(opt);        
        }
        //属性的方式创建
        function testCreateElementByAttr(){
            //获取select
            var sel=document.getElementById('maSelect');
            /*
                sel.innerHtML='<optinon value="0">------请选择----</option>' +
                              '<option value="1">喜欢你</option>' +
                              '<option value="2">飘向北方</option>' +
                              '<option value="3">南山南</option>';
            */
            sel.innerHTML +='<option value="3">南山南</opyion>';
        }
四、间接查找节点

​ 1、childNodes;子查询节点集合 返回子节点为数组 格式:父节点.childNodes

​ 2、parentNode; 返回元素的父节点 格式: 元素.parentNode

​ 2、firsthChild;返回元素的第一个子节点 格式:父节点.firstChild

​ 3、lastChild; 返回元素的最后一个子节点 格式: 元素.lastChild

​ 4、previousSiblinl;返回上一个兄弟节点 格式:元素.previousSiblinl

​ 5、nextSibling;返回下一个兄弟节点 格式: 元素.nextSibling

五、节点删除
    <div id="dv">
        <span id="cxy">程序猿|程序媛|攻城狮</span>
        <a href="javascript:void(0)" onclick="delNode();">删除</a>
    </div>

注:href="javascript:void(0)" 使a标签失去跳转功能

​ 方法1:父节点.removeChild.子节点

  var dv=document.getElementById('dv');
  var cxy=document.getElementById('cxy');
	   dv.removeChild(cxy);

​ 方法2:cxy.parentNode.removeChild(cxy)

 var cxy=document.getElementById('cxy');
        cxy.parentNode.removeChild(cxy);