客户端网页编程_初稿

Posted 2020-09-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了客户端网页编程_初稿相关的知识，希望对你有一定的参考价值。

1.html网页

1.什么是 HTML？

Hyper Text Markup Language
HTML是用来描述网页的一种语言,指的是超文本标记语言,它不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签 (不区分大小写),HTML使用标记标签来描述网页

<开始标签 属性="属性值"> 标签体 <结束标签/>

HTML标签中不区分大小写,可以嵌套使用。
编码集-->utf-8:中英文; gbk: gb2312: iso-8859-1:英文

<head>  
    <a name="top"></a>
    <title>第一网页,我的百度</title>
    <meta name="keywords" content="java编程,iPhone手机">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="refresh" content="5;url=http:\\www.baidu.com">
    <link rel="shortcut icon" href="image/logo.ico">
</head>  
<body>
    <a name="top"></a>  
    <h1>网页标题h1</h1>
    <h2>网页标题h2</h2>
    <h3>网页标题h3</h3>
    <h4>网页标题h4</h4>
    <h5>网页标题h5</h5>
    <h6>网页标题h6</h6>
    <p>这是段落标签P<p/>    
    <pre>
    这是格式化段落标签
        for(int i = 0;i<10;i++){
            system.out,println(i);
        }
    </pre>          
    <a href="#yinyue">音乐频道</a>    
    <img src="image/1.jpg"title="图片1" alt="友情提示">  

    <ul type="circle">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <ol type="a" start="2">
        <Li>有序列表1</Li>
        <Li>有序列表2</Li>
        <Li>有序列表3</Li>
    </ol>  
    <b>这是字体加粗的b标签</b>
    <em>这是字体倾斜的em标签</em>
    <a href="second.html#yundong" target="_blank">跳转test页面</a>
    <span>这是span范围标签,是行级标签</span>
    <a href="#top">返回顶部</a>
</body>

在P标签中不能嵌套块级元素

(2)表格与表单元素

表格由< table> 标签来定义。每个表格由行< tr> ,和列< td> 组成。字母td指表格数据(table data),数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
表单是一个包含表单元素的区域,该区域允许用户输入各种信息的元素(文本域、下拉列表、单选框、复选框等)。
表单使用表单标签< form>进行定义,多数情况下被用到的表单标签是输入标签< input>。输入类型是由类型属性（type）定义的。主要类型有:
文本域-->Text Fields, 密码框-->password, 单选按钮-->Radio Buttons, 复选框-->Checkboxes,

1.提交按钮

get方法会在URL地址中显示表单的内容,post则不会,所以post提交更安全

<form action="../day01/first.html" method="get">
    <table align="center" text-aligin="center">
        <tr>
            <td>用户名:</td>
            <td>
                <input name="user" type="text" maxlength="10" />
            </td>
        </tr>
        <tr>
            <td>密&nbsp;&nbsp;&nbsp;码:</td>
            <td>
                <input name="pwd" type="password" maxlength="16"/>
            </td>
        </tr>
        <tr>
            <td>性&nbsp;&nbsp;&nbsp;别:</td>
            <td>
                <input type="radio" name="gen" checked="checked" value="boy"/>男&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gen" value="girl"/>女
            </td>
        </tr>
        <tr>
            <td>婚&nbsp;&nbsp;&nbsp;否:</td>
            <td>
                <input type="radio" name="hunyin" value="yihun"/>已婚&nbsp;&nbsp;&nbsp;
                <input type="radio" name="hunyin" value="weihun"/>未婚&nbsp;&nbsp;&nbsp;
                <input type="radio" name="hunyin" value="liyi"/>离异
            </td>
        </tr>
        <tr>
            <td>爱&nbsp;&nbsp;&nbsp;好:</td>
            <td>
                <input type="checkbox" name="like" value="sleep"/>睡觉&nbsp;&nbsp;&nbsp;
                <input type="checkbox" name="like" value="game"/>游戏&nbsp;&nbsp;&nbsp;
                <input type="checkbox" name="like" value="music"/>音乐
            </td>
        </tr>
        <tr>
            <td>上传头像</td>
            <td><input type="file"></td>
        </tr>
        <tr>
            <td>地址</td>
            <td>
                <select name="addres">
                    <option value="sc">四川</option>
                    <option value="yn">云南</option>
                    <option value="gz">贵州</option>
                </select>
                <select name="addres">
                    <option value="cd">成都</option>
                    <option value="my">绵阳</option>
                    <option value="nc">南充</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea rows="10" cols="30"></textarea></td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <input type="image" src="image/login.jpg" >
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>

2.CSS布局

(1)CSS 概述

CSS指层叠样式表(Cascading Style Sheets),其中存储的样式定义了如何显示HTML元素。
把样式添加到HTML中,是为了解决内容与表现分离的问题,多个样式定义可层叠为一。

1.行内样式

在网页中个标签内部,以style属性的形式编写的样式,就称为元素的行内样式。
style="属性1：属性值;属性2;属性值" 仅对所属的标签及其子标签生效

2.内部样式表

在网页的head部位以style标签声明,该标签体中的所有样式就组成了网页的内部样式表。

3.选择器

选择器的作用是选择所要操作的元素
不同样式表中的样式作用在同一元素上时,若是多个不同样式则同时生效(样式的层叠),若是样式相同则选择优先级最高的生效。
css样式的优先级: !important > 行内样式 > id选择器样式 > 伪类样式 > 类选择器样式 > 标签选择器样式 > *

a.标签选择器

P标签样式事例:

<style type="text/css">
    /* 这是css的内部样式表标签选择器*/
    p{
        color: blue;
        font-size: 28px;
    }
    p{
        border: solid;
        width: 100px;
    }
</style>

b.类选择器

<style type="text/css">
    /* 这是css的内部样式表类选择器*/
    .orange{
        color: orange;
    }
    .font{
        font-size: 30px;
    }
</style>

c.id选择器

<style type="text/css">
    /* 这是css的内部样式表id选择器*/
    #user{
        color: orange;
    }
    #pwd{
        font-size: 30px;
    }
</style>

在整个html页面中,id必须唯一

d.派生选择器、后代选择器、相邻兄弟选择器、属性选择器

派生选择器:通过依据元素在其位置的上下文关系来定义样式后代选择器可以选择作为某元素后代的元素

e.颜色的取值:

1.英文单词;2.十六进制值;3.rgb值。

4.外部样式表

在网页的外部编写一个css文件,然后通过< link>标签引入该外部文件。

< link rel="stylesheet" href="myStyle.css">

css文件中通过选择器来选中网页中的元素。当样式需要应用于很多页面时,外部样式表可以极大的提高工作效率。

(2)CSS样式

1.背景样式

背景样式用于设置选中区域的背景,常见的背景样式主要有:
background-color 用于为元素设置背景颜色;
background-image 用于设置背景图片:其中的 url 属性用来设置背景图像的路径;
background-repeat 用于在页面上对背景图像进行平铺:
repeat-x和repeat-y分别表示图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺;
background-position 可以改变图像在背景中的位置:top、bottom、left、right和center分别表示向上对齐、向下对齐、靠左、靠右和居中,
图像 0% 0% 表示左上角的位置,图像100% 100%则表示位于右下角。默认值是默认值是 0% 0%或者是 top left;
background-attachment 用于设置背景图像是否随着频幕而滚动,fixed表示固定不滚动,默认值是scroll 背景会随文档滚动。

2.文本样式

inherit:随父级
position: static--默认的,top为正则右移,left为正则下移;
relative：相对定位,相对于自己原本所在位置的左上角;
fixed:固定定位,脱离文本流,相对于浏览器的左上角原点进行定位偏移;
absolute:绝对定位,脱离文本流,相对于有定位的父级左上角进行定位偏移,若父级无定位则继续向上直到body;
z-index:在定位产生空间叠加的时候,设置显示层级,数值越大显示层级越高; opacity:1-->不透明度,0-1之间的数值,值越大越不透明。
overflow:溢出之后的处理效果,hidden--隐藏,scrool--滚动条,
cursor: 光标效果,pointer将光标变成手掌,
visibility:hidden--->设置元素隐藏,占用文本结构;
display:none--->设置元素隐藏,不占用文本结构,
block--->将行级元素变成块级元素,inline--->以行级元素的方式进行显示

(3)盒模型

将网页各部分划分成不同区域,每个区域包含外边距、边框、内边距以及内部元素的布局方式,就称为盒模型布局。
盒模型中外边距用margin表示,边框用border表示,内边距用padding表示,可以设置为长度值(如 px)或百分比值。
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

3.javascript

(1)js的创建

创建js的3种方法:
1.在标签的内部直接进行编写,将js语句块作为标签属性的一部分;
2.在网页的任意位置添加script标签,在script的标签体内部编写js语句;
3.在外部创建js文件,将js语句在文件中写好,然后在网页中引入该js文件。

<input  type="button" value="弹框" onclick="test()"/> 
<script type="text/javascript">
    var a = 1;
    alert(a)
</script>
<script type="text/javascript" src="js01.js"></script>

(2)js的数据类型

5类原始数据类型:undefined,null,boolean,Number,String
Number:数字类型,相当于Java中的byte+short+int+long+double+float; String:字符类型,相当于java中的String类+char;
boolean:布尔类型;undefined:未定义类型,表示变量声明了但没有赋予初始值;
null:文档中找不到某个元素的时候,该变量就是null类型,它属于object。
在JS中:==表示值,===比较值和数据类型,没有equals方法。变量不加var就表示全局变量,多个方法之间可以共享该变量和它的值。
通过new关键字创建的变量,其数据类型都是object。

var num1 = 1;
var num2 = new Number("2");
var num3 = new Number("3a");
var num4 = new Number(false);
var str1 = new String(123);
var boo1 = new Boolean(""); 
/*
    num1是Number类型1,num2是object类型2,num3是NaN(Not a Number),
    num4是object类型0,str1是object类型123,boo1是object类型false。
*/   

var nums = [1,2,3,"zhangsan",null,true,undefined];
var nums2 = new Array(99,null,undefined,"张三",false);
var nums3 = new Array(5);//定义一个长度为5的空数组   

//定义一个新对象
var person ={
    name:"张三",
    age:20,
    tel:"13523459876",
}
person.addres = "四川成都";

var obj1 = new Object({name:"李四",age:21});
//访问对象的属性,可以通过对象名.属性,也可以通过[属性]
var name1 = person.name;

数字非0为真,字符串非空为真。

var arr = ["李四",true,233,45,12,"998",90,543,567,1,879,2,-0.01,1/2,false,345,null,2311,0,-87,"张三"];
document.write("<br>"+"冒泡排序arr数组:&nbsp; ");
for(i=0;i<arr.length-1;i++){
    for(j=0;j<arr.length-i-1;j++){
        if(arr[j]>arr[j+1]){
            var k = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = k;
        }
    }
}
for(var a in arr){
    document.write(arr[a]+"&nbsp;&nbsp;");
}     
//程序运行的结果结果:
冒泡排序arr数组:  李四  -87  -0.01  false  null  0  0.5  true  1  2  12  45  90  233  345  543  567  879  998  2311  张三

(3)js的函数和属性

1.js函数的基本定义和使用

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块,在js中就是指包裹在function关键词之后的花括号中的代码。
函数可以在某事件发生时直接调用(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
js函数实例：

<script>
    function shuiXianHuaCheck(num){
        var hBit = (num - num % 100)/100;   
        var tBit = (num % 100-num % 100 %10) / 10;
            var gBit = num - (num - num % 100) - (num % 100-num % 100 %10); 
        if (num==hBit * hBit * hBit + tBit * tBit * tBit + gBit * gBit
                * gBit){
            alert(num+"是水仙花数");
        }else{
            alert(num+"不是水仙花数");
        }
    }
    function runNianCheck(year){
        if(year%4==0){
            alert(year+"年是闰年");
        }else{
            alert(year+"年不是闰年");
        }   
    }
    function chengFaBiao(){
        document.write("九九乘法表"+"<br>");
        for(var i=1;i<10;i++){
            for(var j = 1;j<=i;j++){
                document.write(i+"X"+j+"="+i*j+"&nbsp;&nbsp;");
            }
            document.write("<br>");
        }
    }
</script>

2.全局函数和全局属性:

isNaN():判断一个变量是否数字,若传入的是数字则为false,若传入的不是数字则为true;
parseInt():方法可以将传入参数转换成十进制整数, parseFloat():将参数解析并返回一个浮点数;
eval():计算JavaScript字符串，并把它作为脚本代码来执行;
Infinity:指正无穷大的数值; NaN:指示某个值是不是数字类型的值; undefined:指未定义初始值的变量。

以上是关于客户端网页编程_初稿的主要内容，如果未能解决你的问题，请参考以下文章

golang代码片段（摘抄）

分工表

学生系统初稿（不断完善中）

为啥 GraphQL 片段在查询中需要 __typename？

JSP基础

《3D编程模式》写书-第3次记录