前端html

1.html标签

1)常见的文本标签

h1-h6 标题标签

font 字体标签

水平线 hr

换行 br

上下标 sup和sub

段落 p

滚动标签marquee

块标签 div

blockquote引用标签:(段落缩进)

列表

        无序列表

                ul

                        li

        无序列表

                ol

                        li

2)html其他标签

超链接:<a href="#"></a>

图像标签:<img src=""/>

表格标签:<table>

                        <tr>

                                <th></th>

                        </tr>

                        <tr>

                                <td></td>

                        </tr>

                </table>

框架标签:

       <frameset rows="15%,*">
        <frame src="head.html" />
        <frameset cols="15%,*">
            <frame src="menu.html" />
            <frame src="mainpage.html" name="my_main" />
        </frameset>
    </frameset>

rows:由上而下划分:每一部分占整个部分的权重百分比        三个部分(10%,*,10%)

cols:由左向右划分:每一部分占整个部分的权重百分比

3)表单标签

<form action="提交服务器地址url" method="get默认/post">

文本输入框:

<input type="text"/>

密码输入框:

<input type="password"/>

隐藏域:

<input type="hidden"/>

单选按钮:

<input type="radio"/>

复选框:

<input type="checkbox"/>

文件上传组件:

<input type="file"/>

日期组件:

<input type="date"/>

提交按钮:

<input type="submit" value="xxx"/>

普通按钮:

<input type="button" value="按钮的默认值"/>

重置按钮:

<input type="reset"/>

下拉菜单:

<select>

        下拉选项

        <option></option>

</select>

邮箱组件:必须填写内容包含@标记

<input type="email"/>

2.get提交和post提交有什么区别

浏览器默认提交的就是get(直接地址栏输入网址访问,都是get)

1)是否将数据内容提交到地址栏上

        get提交方式,会将数据提交到地址栏 form表单的action="http://域名/后台接口"

                http://域名/后台接口?key1=value&key2=value2...

        post提交方式,不会将数据提交到地址栏

2)是否适合提交隐私数据

        get提交方式,相对不安全,因为直接在地址栏上将用户数据展示出来

        post提交方式,相对安全,不会在地址栏上显示用户信息,针对用户密码以及用户隐私数据,后期是要加密的

3)提交数据大小是否限制

        get提交方式,由于是地址栏上展示数据,数据大小有限制

        post提交,不会在地址栏上展示,没有限制

3.CSS

1)css的使用方式

1.行内样式

        每一个标签都有style属性,给某个标签添加样式

        style="样式属性名称1:值1;样式名称2:值2;..."

        针对具体情况而定,如果单独给某个标签设置样式,完全可以采用行内样式;

        弊端:一次只能修饰一个标签,不利于维护

2.内部样式(内联样式)

        一次给指定标签控制样式,而且一次可以控制多个标签

        在head标签体中给定style标签

        <style>

                选择器{

                        样式属性名称1:值1;

                        样式属性名称2:值2;

                        ...

                }

        </style>

        弊端:css代码和html混合使用,不利于后期管理

        3.外部样式(外联样式)---前端开发人员使用的都是外部样式

        单独去创建css文件夹下---指定xx.css文件

                选择器{

                        样式属性名称1:值1;

                        样式属性名称2:值2;

                        ...

                }

        在某个页面中导入外部css文件

        在head标签体中

                <link href="外部css文件地址" rel="stylesheet"/>

        好处:css代码和html代码分离了,便于后期维护管理

2)css的选择器

1.标签名称选择器{        /*如果同一个页面中有多个同名标签        input标签*/

        样式属性名称1:值1;

        ...

}

2.class选择器(类选择器):在标签中给定class属性,一个html页面中class属性可以同名的

.class属性值{

        样式属性名称1:值1;

        ...

  }

3.id选择器,保证同一个html的id属性值唯一 优先级最大

#id属性值{

        样式属性名称1:值1;

        ...

 }

4.子元素选择器      选择器1 选择器2...{}

选择器1 选择器2 选择器3...{

        样式属性名称1:值1;

  }

5.伪类选择器:描述某个元素的特殊状态

link:未访问状态

visited:访问状态

hover:鼠标悬浮时的状态

active:鼠标激活状态(点击获取焦点的一种状态)

使用居多的就是悬浮状态

选择器:hover{

        样式属性名称1:值1;

        ...

}

3)css样式属性

1.字体样式

font-size:像素大小;

font-family:"字体的类型";

font-weight:bold;        字体粗细程度 bold适当加粗

2.文本样式

text-align:left/center/right;        文本对齐方式

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

color:颜色名称(单词)或者是#6个字符或者RGB()

letter-spacing:像素        字符间距

3.行高

line-height:像素大小

4.背景样式

图片背景:background-image:url(图片地址);

背景颜色:background-color:颜色

背景图片是否重复以及如何重复:background-repeat:no-repeat/repeat/repeat-x/repeat-y;

背景图片起始位置:background-position:图片的位置 浏览器中的位置

                                                        (top/center/bottom left/center/right)

5.边框

border:border-width border-color border-style;

border-radius:像素大小:设置边框的四个角 圆角弧度大小

6.列表样式

list-style-type:none        去掉列表项前面的标记

list-style-image:url(图片地址);        给列表项前面加入自定义图片

7.浮动属性

float:left/rigth;        左浮动/右浮动

clear:清除浮动(both:两边都不浮动)

 4)css盒子模型       

前端css一种特殊手段---使用css特殊样式给网页进行设计

将任何标签看成盒子,自己的厚度(border),有自己的容量(width/heigth),有自己的内边距(padding):盒子的内容和边框线的距离,有自己的外边距(margin):控制盒子和盒子的距离;  

div+css:使用div将部分元素包起来 ,看成一块,使用id选择器/class选择器添加样式

4.javascript

1)js事件编程的三要素

事件源---html标签

事件监听器---编写一个事件函数

在事件源上通过onxxx属性 绑定事件监听器

                                                        绑定事件监听器

<input type="button" value="点击" οnclick="testClick()"/>                事件源

<script>

        //事件函数

        function testClick(){

                //单击点击事件中的业务逻辑

        }

</script>

2)js中函数的定义以及调用

js中函数定义

function 函数名称(形式参数1,形式参数2...){

        //要么直接输出

        //要么携带return语句

}

//单独调用---函数里面直接输出

//赋值调用---函数里面return语句

定义变量或者js中创建对象:都是使用var

3)DOM

DOM: Document Object Model:基于文档对象模型编程

浏览器在解析html页面的时候,将html页面中每一个标签通过js引擎,解析为标签对象(节点对象),形成树状结构

html

        head                body

meta        title        书写自己的标签

重点:获取标签对象之后,使用标签对象的属性,达到某种效果

获取标签对象

        直接使用通用的方法:

                document.getElementById("id属性值");

        通过类名获取:

                document.getElementsByClassName("class属性值")[索引值];

          通过标签名称获取:

                document.getElementsByTagName("标签名称")[索引值];

          通过name获取:

                document.getElementsByName("name属性值")[索引值];

BOM:Browser Object Model:基于浏览器模型编程,浏览器中的每一个部分都可以窗口

顶级对象        window涉及很多方法:open(),alert("消息提示框"),confirm("xxx"):确认提示框

                        location 地址栏对象

                                        href属性:前端一种跳转页面

                                         window.location.href="url地址";

                        history:历史记录

                        screen:屏幕对象

4)js的使用方式

内部方式

在head标签或者html页面任何位置

<script>

        //js代码

</script>

外部方式:前端人员使用

单独在js文件夹下--xx.js文件

xx.js--->书写js代码

当前html页面中

        <script src="引入js文件地址"></script>